TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити спеціальні віджети цитат блоку завантажувального блоку?

1

Bootstrap – одна з популярних безкоштовних фреймворків, яка допомагає створювати красиві веб -макети. За допомогою макета сітки Bootstrap доступно багато безкоштовних і преміальних тем. На додаток до використання повної структури, ви також можете додати окремі елементи Bootstrap на свій веб -сайт. У цій статті давайте обговоримо, як створювати блокові цитати Bootstrap з різними стилями.

Дізнайтесь, як створювати котирування блоків у Weebly та WordPress.

Bootstrap пропонує багато окремих елементів як привабливі віджети, такі як індикатори прогресу та таблиці. Однак для використання цих віджетів потрібні фреймворки CSS та JavaScript. Більшість власників сайтів не використовують Bootstrap, оскільки вони використовують інші системи управління вмістом, такі як Weebly або WordPress. Вставка Bootstrap CSS порушить інші елементи, перекриваючись з основною таблицею стилів теми.

Подолати цю проблему можна лише за допомогою стилю необхідного віджета. Крім того, ви можете копіювати стиль елемента Bootstrap у власний власний стиль. Ми також будемо створювати блок -лапки, посилаючись лише на необхідні класи CSS без використання всієї таблиці стилів “bootstrap.min.css".

Вам потрібно завантажити CSS / HTML і вставити код на свій веб -сайт для створення віджетів блокових цитат. Різні конструктори веб -сайтів та системи керування вмістом пропонують різні методи для вставки HTML/CSS -коду. Наприклад, ви можете використовувати елемент Embed Code у Weebly під час користувацького блоку HTML у редакторі WordPress Gutenberg. Якщо ви використовуєте HTML або веб -сайт Bootstrap, додайте код CSS у розділі «Заголовок» та код HTML у розділі «Тіло» сторінки.

Компоненти віджетів котирування блоків Bootstrap

Кожна блокова цитата містить два компоненти:

  • Цитувати текст і
  • Посилання або авторський текст

За допомогою цих двох речей ми можемо пограти з рамками, фоном та кольорами. Спочатку давайте створимо простий стиль блочних цитат, як показано нижче. Ми використовуємо той самий основний колір #c97e69, який використовується у фреймворку Bootstrap.

CSS для блокових цитат стилю Bootstrap

Ось повний CSS для віджетів. Ми надали код у тегах стилю. Якщо ваша HTML -сторінка вже містить теги стилів, не забудьте видалити їх із коду.

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

Ми використовували класи “blockquote p” та “blockquote .small” для стилізації тексту та імені автора відповідно. Блокова цитата на веб -сторінці із зазначеним вище CSS має виглядати приблизно так, як показано нижче (давайте пояснимо частину HTML пізніше).

Як створити спеціальні віджети цитат блоку завантажувального блоку?

Основні цитати циклу завантаження

Зберігаючи це як базовий стиль, ми можемо додати ще п’ять стилів з різними кольорами фону, межами та вирівнюванням.

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

Тепер, коли у нас є всі необхідні CSS і час для гри з HTML, поєднуючи різні класи. Наприклад, ви можете створити блочну цитату з сірим фоном та основним кольором рамки як #c97e69. Нижче наведено HTML -код цього віджета:

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

Вихідні дані будуть виглядати так:

Як створити спеціальні віджети цитат блоку завантажувального блоку?

Завантажувальне цитування з користувацьким стилем

Створюючи різні комбінації, ви можете створити шість різних стилів цитат блоків, як показано нижче.

Як створити спеціальні віджети цитат блоку завантажувального блоку?

Стилі блочних цитат початкового завантаження

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі