TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag anpassade Bootstrap Block Citat -widgets?

7

Bootstrap är en av de populära gratis ramarna som hjälper till att skapa vackra webblayouter. Det finns många gratis och premiumteman tillgängliga med Bootstrap -rutnätlayout. Förutom att använda hela ramverket kan du också lägga till enskilda Bootstrap -element på din webbplats. Låt oss i den här artikeln diskutera hur du skapar Bootstrap -blockcitat med olika stilar.

Lär dig hur du skapar blockcitat i Weebly och WordPress.

Bootstrap erbjuder många individuella element som attraktiva widgets som statusfält och tabeller. Du behöver dock ram -CSS och JavaScript för att använda dessa widgets. De flesta webbplatsägare använder inte Bootstrap eftersom de använder andra innehållshanteringssystem som Weebly eller WordPress. Om du sätter in Bootstrap CSS kommer de andra elementen att brytas genom att de överlappar tematets huvudsakliga formatmall.

Du kan lösa detta problem genom att bara använda stilen för den önskade widgeten. Alternativt kan du replikera Bootstrap -elementets stil till din egen anpassade stil. Vi kommer också att skapa blockcitaten genom att endast hänvisa till de nödvändiga CSS -klasserna utan att använda hela stilen "bootstrap.min.css".

Du måste ladda ner CSS / HTML och infoga koden på din webbplats för att skapa block offert widgets. Olika webbplatsbyggare och innehållshanteringssystem erbjuder olika metoder för att infoga HTML/CSS -kod. Till exempel kan du använda Bädda in kodelement på Weebly medan anpassat HTML -block i WordPress Gutenberg -redigerare. Om du använder HTML- eller Bootstrap -webbplats lägger du till CSS -kod under avsnittet "Rubrik" och HTML -kod i avsnittet "Brödtext" på sidan.

Komponenter i Bootstrap Block Quote Widgets

Varje blockcitat innehåller två komponenter:

  • Citera text och
  • Referens eller författartext

Med dessa två saker kan vi leka med gränser, bakgrund och färger. Låt oss först skapa en enkel blockcitatstil enligt nedan. Vi använder samma primära färg #c97e69 som används i Bootstrap -ramverket.

CSS för Bootstrap Style Block Citat

Här är en komplett CSS för widgetarna. Vi har tillhandahållit koden inom stiltaggar. Om din HTML -sida redan innehåller stiltaggar, se till att ta bort dem från koden.

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

Vi har använt klasserna "blockquote p" och "blockquote .small" för att styla text respektive författarnamn. Blockcitatet på en webbsida med CSS ovan bör se ut ungefär som nedan (låt oss förklara HTML -delen senare).

Hur skapar jag anpassade Bootstrap Block Citat -widgets?

Grundläggande Bootstrap Blockquote

Med detta som grundläggande stil kan vi lägga till ytterligare fem stilar med olika bakgrundsfärger, ramar och justeringar.

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 för Bootstrap Block Citat

Nu när vi alla har krävt CSS och tid att spela med HTML genom att kombinera olika klasser. Du kan till exempel skapa ett blockcitat med grå bakgrund och primär kantfärg som #c97e69. Nedan är HTML -koden för den widgeten:

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

Utmatningen kommer att se ut nedan:

Hur skapar jag anpassade Bootstrap Block Citat -widgets?

Bootstrap Blockquote med anpassad stil

Genom att göra olika kombinationer kan du skapa sex olika stilar av blockcitat som visas nedan.

Hur skapar jag anpassade Bootstrap Block Citat -widgets?

Bootstrap Blockquote -stilar

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer