TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć niestandardowe widżety ofertowe Bootstrap Block?

1

Bootstrap to jeden z popularnych darmowych frameworków, który pomaga tworzyć piękne układy stron internetowych. Istnieje wiele darmowych i premium motywów dostępnych przy użyciu układu siatki Bootstrap. Oprócz korzystania z kompletnego frameworka, możesz również dodać pojedyncze elementy Bootstrap na swojej stronie internetowej. W tym artykule omówimy, jak tworzyć cytaty blokowe Bootstrap z różnymi stylami.

Dowiedz się, jak tworzyć cytaty blokowe w Weebly i WordPress.

Bootstrap oferuje wiele pojedynczych elementów w postaci atrakcyjnych widżetów, takich jak paski postępu i tabele. Jednak do korzystania z tych widżetów potrzebny jest framework CSS i JavaScript. Większość właścicieli witryn nie korzysta z Bootstrap, ponieważ korzystają z innych systemów zarządzania treścią, takich jak Weebly czy WordPress. Wstawienie Bootstrap CSS spowoduje przerwanie pozostałych elementów, nakładając się na główny arkusz stylów motywu.

Możesz rozwiązać ten problem, używając tylko stylu wymaganego widżetu. Alternatywnie możesz zreplikować styl elementu Bootstrap do własnego stylu niestandardowego. Utworzymy również cytaty blokowe, odwołując się tylko do wymaganych klas CSS bez korzystania z całego arkusza stylów „bootstrap.min.css".

Musisz pobrać CSS / HTML i wstawić kod na swojej stronie, aby utworzyć widżety z cytatami blokowymi. Różni twórcy stron internetowych i systemy zarządzania treścią oferują różne metody wstawiania kodu HTML/CSS. Na przykład możesz użyć elementu Embed Code w Weebly, podczas gdy niestandardowy blok HTML w edytorze WordPress Gutenberg. Jeśli korzystasz ze strony HTML lub Bootstrap, dodaj kod CSS w sekcji „Nagłówek” i kod HTML w sekcji „Body” strony.

Składniki widżetów z cytatami Bootstrap Block

Każdy cytat blokowy zawiera dwa elementy:

  • Tekst cytatu i
  • Tekst referencyjny lub autorski

Dzięki tym dwóm rzeczom możemy bawić się obramowaniem, tłem i kolorami. Najpierw stwórzmy prosty styl cytatu blokowego, jak poniżej. Używamy tego samego koloru podstawowego #c97e69, co we frameworku Bootstrap.

CSS dla cytatów blokowych w stylu Bootstrap

Oto kompletny CSS dla widżetów. Kod umieściliśmy w tagach stylu. Jeśli Twoja strona HTML zawiera już tagi stylu, usuń je z kodu.

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

Użyliśmy klas „blockquote p” i „blockquote .small” do stylizacji tekstu i nazwiska autora. Cytat blokowy na stronie internetowej z powyższym CSS powinien wyglądać mniej więcej tak jak poniżej (wyjaśnijmy później część HTML ).

Jak tworzyć niestandardowe widżety ofertowe Bootstrap Block?

Podstawowy cytat blokowy Bootstrap

Zachowując to jako styl podstawowy, możemy dodać pięć kolejnych stylów z różnymi kolorami tła, obramowaniami i wyrównaniami.

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 for Bootstrap Block Quotes

Teraz, gdy mamy już cały potrzebny CSS i czas na zabawę z HTML, łącząc różne klasy. Na przykład możesz utworzyć cytat blokowy z szarym tłem i podstawowym kolorem obramowania jako #c97e69. Poniżej znajduje się kod HTML tego widżetu:

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

Wynik będzie wyglądał jak poniżej:

Jak tworzyć niestandardowe widżety ofertowe Bootstrap Block?

Bootstrap Blockquote z niestandardowym stylem

Tworząc różne kombinacje, możesz stworzyć sześć różnych stylów cytatów blokowych, jak pokazano poniżej.

Jak tworzyć niestandardowe widżety ofertowe Bootstrap Block?

Style cytatów blokowych Bootstrap

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów