На цьому уроці ми познайомимося з допоміжними класами Twitter Bootstrap 3.
Контекстуальні кольору (кольору для виділення тексту)
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.
Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.
Delectus, ut aut perferendis doloribus asperiores repellat. Excepturi sint, obcaecati cupiditate non provident, similique sunt.
Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.
Repudiandae sint et aut fugit. Odit aut fugit, sed quia dolor sit, aspernatur aut rerum. Consectetur, adipisci velit, sed ut enim ipsam voluptatem, quia consequuntur magni.
Примітка: Іноді акцентні класи можуть не змінити колір тексту, який укладено в певний елемент в зв'язку c впливу на даний елемент стилів інших класів або селектор. У більшості випадків для вирішення подібної проблеми досить обернути цей текст за допомогою елемента span і додати до нього акцентне клас.
Контекстуальні фони (кольори для установлення вигляду)
Крім класів, призначених для виділення тексту кольором, в Twitter Bootstrap 3 є ще кілька класів, які призначені для встановлення кольорового фону блоковим елементам HTML.
Абзаци з різним фоном:
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.
Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.
Delectus, ut aut perferendis doloribus asperiores repellat. Excepturi sint, obcaecati cupiditate non provident, similique sunt.
Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.
Примітка: Іноді контекстуальні класи, призначені для завдання фону деякого елементу, можуть не змінити його колір у зв'язку з тим, що на даний елемент можуть надавати стилі інших класів або селектор. У більшості випадків для вирішення подібної проблеми досить обернути деякий контент в елемент div і додати до нього клас для завдання кольорового фону.
Іконка "Close"
Іконка "Close" застосовується для закриття модальних вікон (modals) і повідомлень (alerts).
× Компонент alerts (повідомлення) c кнопкою, яка закриває дане повідомлення
Значок "Carets"
Значок "Carets" вказує на наявність у елемента списку. Крім цього цей значок також вказує напрямок, в якому даний список буде випадати (вгору або вниз).
Швидке створення плаваючих елементів (float)
Дані класи призначені для створення плаваючих елементів, які зміщуються наскільки можливо вліво (клас .pull-left) або вправо (.pull-right). Крім цього в дані класи додано правило! Important. яке підвищує пріоритет властивості float і запобігає дані класи Bootstrap від можливих проблем.
Примітка: класи .pull-left і .pull-right можна використовувати для вирівнювання елементів в компоненті navbar. Якщо ви хочете вирівняти деякі елементи в навігаційному меню, то використовуйте спеціальні призначені для цього службові класи .navbar-left і .navbar-right. Більш докладно познайомитися з даними класами можна в статті, присвяченій розгляду компонента navbar.
Центрування блоків, що містять контент
Клас .center-block призначений для центрування блокових елементів. Тобто якщо до елементу застосувати клас .center-block. то він робить даний елемент блоковим (display: block) і центрує його в горизонтальному напрямку по центру (margin: 0 auto).
клас .clearfix
Клас .clerfix призначений для скасування обтікання елемента, до якого він доданий, іншими плаваючими блоками.
Наприклад, розглянемо створення макета, що складається з 4 блоків, кожен з яких повинен займати по 6 колонок Twitter Bootstrap. Причому блоки 3 і 4 повинні розташовуватися з нового рядка.
Блоки, що складаються з колонок Bootstrap, є плаваючими і прагнуть зміститися наскільки можливо вліво. Після створення даного макета ми отримаємо таку картину:
Щоб розташувати блоки відповідно до завдання, нам необхідно, щоб блоки 3 і 4 НЕ обтікали блоки 1 і 2. Отже, нам необхідно розташувати порожній блок div з класом .clearfix до блоків 3 і 4. Цей порожній блок з класом .clearfix заборонить блокам розташованим після нього, тобто блокам 3 і 4 його обтікати.
Показ або приховування контенту
Щоб змусити елемент відобразитися або сховатися ви можете використовувати класи .show (display: block! Important) і .hidden (display: none! Important; visibility: hidden! Important). Ці класи так само як класи .pull-left і .pull-right мають правило! Important. яке підвищує пріоритет стилів даних класів перед стилями інших класів або селектор, які можуть ці стилі витіснити. Дані класи можна застосовувати тільки до блокових елементів HTML.
Крім того, в Bootstrap є ще один клас .invisible. який призначений для відключення видимості елемента, до якого він застосований. Але, на відміну від перерахованих вище класів, даний клас не змінює властивість display у елемента і, отже, він як і раніше займає місце, хоч і стає видимим.
Налаштування сайту під технології, які виконують читання з екрану
У Twitter Bootstrap 3 розроблений спеціальний клас (.sr-only), за допомогою якого ви можете налаштувати свій сайт під допоміжні технології (читання голосом тексту, картинок, меню та інших елементів з екрану).
Клас .sr-only застосовується для приховування елемента на всіх пристроях крім технологій, які здійснюють читання з екрану. Також клас .sr-only можна об'єднати з класом .sr-only-focusable. в цьому випадку елемент, до якого застосовані дані класи, буде відображатися на екрані, але тільки в момент часу його знаходження в фокусі (наприклад: при використанні клавіатури).
Клас Bootstrap для приховування тексту
У Twitter Bootstrap 3 розроблений спеціальний клас .text-hide. який можна застосувати до елементу для того щоб в ньому приховати текст. Наприклад, це можна використовувати, щоб замінити прихований текст фоновим зображенням.