TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda mukautettuja Bootstrap Block Quote -widgettejä?

1

Bootstrap on yksi suosituista ilmaisista kehyksistä, jotka auttavat luomaan kauniita verkkoasetteluja. Bootstrap -ruudukon asettelua käyttämällä on saatavana monia ilmaisia ​​ja premium -teemoja. Koko kehyksen käytön lisäksi voit myös lisätä yksittäisiä Bootstrap -elementtejä verkkosivustollesi. Tässä artikkelissa keskustellaan siitä, kuinka luoda Bootstrap -lohkolainauksia eri tyyleillä.

Opi lohkolainausten luominen Weeblyssä ja WordPressissä.

Bootstrap tarjoaa monia yksittäisiä elementtejä houkuttelevina widgeteinä, kuten edistymispalkkeina ja taulukoina. Näiden widgetien käyttämiseen tarvitaan kuitenkin CSS- ja JavaScript -kehys. Useimmat sivuston omistajat eivät käytä Bootstrapia, koska he käyttävät muita sisällönhallintajärjestelmiä, kuten Weeblyä tai WordPressiä. Bootstrap CSS: n lisääminen rikkoo muut elementit päällekkäin teeman päätaulukon kanssa.

Voit ratkaista tämän ongelman vain käyttämällä vaaditun widgetin tyyliä. Vaihtoehtoisesti voit toistaa Bootstrap -elementin tyylin omaan tyyliisi. Luomme myös lainausmerkit viittaamalla vain pakollisiin CSS -luokkiin käyttämättä koko "bootstrap.min.css" -tyylisivua.

Sinun on ladattava CSS / HTML ja lisättävä koodi verkkosivustollesi lainauslainausohjelmien luomiseksi. Eri verkkosivustojen rakentajat ja sisällönhallintajärjestelmät tarjoavat erilaisia ​​tapoja lisätä HTML/CSS -koodi. Voit esimerkiksi käyttää Upota koodi -elementtiä Weeblyssä, kun taas mukautettu HTML -esto WordPress Gutenberg -editorissa. Jos käytät HTML- tai Bootstrap -sivustoa, lisää CSS -koodi Otsikko -osioon ja HTML -koodi sivun Body -osioon.

Bootstrap Block Quote Widgets -komponentit

Jokainen lohkolainaus sisältää kaksi osaa:

  • Lainaa tekstiä ja
  • Viite tai tekijän teksti

Näiden kahden asian avulla voimme leikkiä rajoilla, taustalla ja väreillä. Luodaan ensin yksinkertainen lohkolainaustyyli, kuten alla. Käytämme samaa pääväriä #c97e69, jota käytetään Bootstrap -kehyksessä.

CSS Bootstrap Style Block Quotesille

Tässä on täydellinen widgetien CSS. Olemme lisänneet koodin tyylitageihin. Jos HTML -sivusi sisältää jo tyylitageja, poista ne koodista.

<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>

Olemme käyttäneet "blockquote p" – ja "blockquote .small" -luokkia tekstin ja kirjoittajan nimen vastaavasti. Yllä olevan CSS: n sisältävän verkkosivun lohkolainauksen pitäisi näyttää seuraavanlaiselta (selitämme HTML -osan myöhemmin).

Kuinka luoda mukautettuja Bootstrap Block Quote -widgettejä?

Basic Bootstrap Blockquote

Pidämme tämän perustyylinä, voimme lisätä viisi muuta tyyliä, joilla on erilaiset taustavärit, reunat ja kohdistukset.

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 Bootstrap Block Quotesille

Nyt kun meillä kaikilla on vaadittu CSS ja aikaa HTML: n pelaamiseen yhdistämällä eri luokkia. Voit esimerkiksi luoda lohkolainauksen harmaalla taustalla ja reunuksen ensisijaisella värillä #c97e69. Alla on kyseisen widgetin HTML -koodi:

<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>

Tulos näyttää tältä:

Kuinka luoda mukautettuja Bootstrap Block Quote -widgettejä?

Bootstrap Blockquote mukautetulla tyylillä

Tekemällä erilaisia ​​yhdistelmiä voit luoda kuusi erilaista lohkolainaustyyliä, kuten alla on esitetty.

Kuinka luoda mukautettuja Bootstrap Block Quote -widgettejä?

Bootstrap Blockquote -tyylit

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja