TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare widget preventivi di blocco Bootstrap personalizzati?

2

Bootstrap è uno dei framework gratuiti più diffusi che aiuta a creare bellissimi layout web. Ci sono molti temi gratuiti e premium disponibili utilizzando il layout della griglia Bootstrap. Oltre a utilizzare il framework completo, puoi anche aggiungere singoli elementi Bootstrap sul tuo sito web. In questo articolo discutiamo come creare citazioni di blocchi Bootstrap con stili diversi.

Scopri come creare preventivi di blocco in Weebly e WordPress.

Bootstrap offre molti elementi individuali come widget interessanti come barre di avanzamento e tabelle. Tuttavia, è necessario il framework CSS e JavaScript per utilizzare questi widget. La maggior parte dei proprietari di siti non utilizza Bootstrap poiché utilizza altri sistemi di gestione dei contenuti come Weebly o WordPress. L’inserimento di Bootstrap CSS interromperà gli altri elementi sovrapponendosi al foglio di stile principale del tema.

Puoi superare questo problema utilizzando solo lo stile del widget richiesto. In alternativa, puoi replicare lo stile dell’elemento Bootstrap nel tuo stile personalizzato. Creeremo anche le virgolette dei blocchi facendo riferimento solo alle classi CSS richieste senza utilizzare l’intero foglio di stile "bootstrap.min.css".

Devi scaricare il CSS/HTML e inserire il codice sul tuo sito web per la creazione di widget di blocco preventivo. Diversi costruttori di siti Web e sistemi di gestione dei contenuti offrono metodi diversi per inserire codice HTML/CSS. Ad esempio, puoi utilizzare l’ elemento Embed Code su Weebly mentre il blocco HTML personalizzato nell’editor Gutenberg di WordPress. Se stai utilizzando un sito HTML o Bootstrap, aggiungi il codice CSS nella sezione "Intestazione" e il codice HTML nella sezione "Corpo" della pagina.

Componenti dei widget di preventivo del blocco Bootstrap

Ogni citazione di blocco contiene due componenti:

  • Citare il testo e
  • Testo di riferimento o autore

Con queste due cose possiamo giocare con bordi, sfondo e colori. Per prima cosa creiamo un semplice stile di citazione del blocco come di seguito. Usiamo lo stesso colore primario # c97e69 utilizzato nel framework Bootstrap.

CSS per Bootstrap Style Block Quotes

Ecco un CSS completo per i widget. Abbiamo fornito il codice all’interno dei tag di stile. Se la tua pagina HTML contiene già tag di stile, assicurati di rimuoverli dal codice.

<style> blockquote { border: 1px solid #b3b3b3; border-left: 10px solid #b3b3b3; border-radius: 0px; background: #fafafa; font-size: 18px; margin: 10px; padding: 10px 20px; } blockquote p { margin: 0; line-height: 30px; padding-bottom: 20px; } blockquote .small { display: block; font-size: 80%; color: brown; text-align: right; }  </style>

Abbiamo usato le classi "blockquote p" e "blockquote .small" per definire rispettivamente il testo e il nome dell’autore. La citazione del blocco su una pagina web con il CSS sopra dovrebbe apparire come sotto (spieghiamo la parte HTML in seguito).

Come creare widget preventivi di blocco Bootstrap personalizzati?

Bootstrap di base Blockcitazione

Mantenendo questo come stile di base, possiamo aggiungere altri cinque stili con diversi colori di sfondo, bordi e allineamenti.

blockquote.bg-gray { background: #555555; border: 1px solid #b3b3b3; border-left: 10px solid #b3b3b3; color: #ffffff; } blockquote.bg-primary { background: #c97e69; border: 1px solid #c97e69; border-left: 10px solid #c97e69; color: #ffffff; } blockquote.primary { border: 1px solid #c97e69; border-left: 10px solid #c97e69; } blockquote.right.primary { border-color: #c97e69; border-left: 1px solid #c97e69; border-right: 10px solid #c97e69; } blockquote.right { text-align: right; border-width: 1px 10px 1px 1px; }

HTML per citazioni di blocchi Bootstrap

Ora che abbiamo tutti bisogno di CSS e tempo per giocare con l’HTML combinando diverse classi. Ad esempio, puoi creare una citazione di blocco con sfondo grigio e colore del bordo primario come # c97e69. Di seguito è riportato il codice HTML per quel widget:

<blockquote class="bg-gray primary"> <p> <em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</em> </p> <small>Someone famous in <cite title="Source Title">Source Title</cite> </small> </blockquote>

L’output sarà simile al seguente:

Come creare widget preventivi di blocco Bootstrap personalizzati?

Bootstrap Blockquote con stile personalizzato

Creando diverse combinazioni, puoi creare sei diversi stili di citazioni di blocco come mostrato di seguito.

Come creare widget preventivi di blocco Bootstrap personalizzati?

Stili Bootstrap Blockquote

Fonte di registrazione: webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More