English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
В этой главе будет обсуждаться некоторые вспомогательные классы Bootstrap, которые могут оказаться полезными.
Различные классы показывают различные цвета текста. Если текст является ссылкой, при наведении мыши на текст он становится тёмным:
| Класс | Описание | Пример |
|---|---|---|
| .text-muted | Текстовый стиль класса "text-muted" | Попробуйте |
| .text-primary | Текстовый стиль класса "text-primary" | Попробуйте |
| .text-success | Текстовый стиль класса "text-success" | Попробуйте |
| .text-info | Текстовый стиль класса "text-info" | Попробуйте |
| .text-warning | Текстовый стиль класса "text-warning" | Попробуйте |
| .text-danger | Текстовый стиль класса "text-danger" | Попробуйте |
Ниже представлены различные классы с различным фоном. Если текст ссылка, при наведении мыши на текст он станет темнее:
| Класс | Описание | Пример |
|---|---|---|
| .bg-primary | Ячейки таблицы используют класс "bg-primary" | Попробуйте |
| .bg-success | Ячейки таблицы используют класс "bg-success" | Попробуйте |
| .bg-info | Ячейки таблицы используют класс "bg-info" | Попробуйте |
| .bg-warning | Ячейки таблицы используют класс "bg-warning" | Попробуйте |
| .bg-danger | Ячейки таблицы используют класс "bg-danger" | Попробуйте |
| Класс | Описание | Пример |
|---|---|---|
| .pull-left | Фиксирует элемент к левому краю | Попробуйте |
| .pull-right | Фиксирует элемент к правому краю | Попробуйте |
| .center-block | Устанавливает элемент в display:block и выравнивает его по центру | Попробуйте |
| .clearfix | Удаление плавающих элементов | Попробуйте |
| .show | Форсирует отображение элементов | Попробуйте |
| .hidden | Форсирует скрытие элементов | Попробуйте |
| .sr-only | Скрывает элементы на других устройствах, кроме экранных читателей | Попробуйте |
| .sr-only-focusable | В сочетании с классом .sr-only отображается при фокусировке на элементе (например, при клавиатурном управлении) | Попробуйте |
| .text-hide | Замените текстовое содержимое элементов веб-страницы фоновым изображением | Попробуйте |
| .close | Показать кнопку закрытия | Попробуйте |
| .caret | Показать выпадающее меню функций | Попробуйте |
Используйте общепринятый значок закрытия для закрытия модальных окон и диалоговых окон. Используйте класс close Получите значок закрытия.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример Bootstrap - значок закрытия</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p>Пример значка закрытия <button type="button" class="close" aria-hidden="true">×</button> </p> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
aria-hidden="true" помогает людям с ограниченными возможностями (например, слепым) использовать устройства для чтения (автоматически читают содержимое и автоматически играют его), при воспроизведении содержимого с этой атрибутом автоматически пропускается, чтобы не запутать людей с ограниченными возможностями!
Используйте курсор для обозначения функций下拉 и направления. Используйте класс caret элемент <span> получает эту функцию.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap пример - Курсор</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p>Пример курсора <span class="caret"></span> </p> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
Вы можете использовать классы pull-left или pull-right для плавания элементов влево или вправо. Ниже приведены примеры.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap пример - Быстрое плавание</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="pull-left"> Быстрое плавание влево </div> <div class="pull-right"> Быстрое плавание вправо </div> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
Чтобы выровнять компоненты в навигационной панели, используйте .navbar-left или .navbar-right вместо. Пожалуйста, смотрите Навигационная панель Bootstrap.
Используйте класс center-block для центрирования элементов.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap пример - Центрирование содержимого блока</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="center-block" style="width:200px;background-color:#ccc;"> Это пример center-block </div> </div> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
Чтобы удалить плавающие элементы, используйте .clearfix class.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap пример - Удаление плавающих элементов</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;"> <div class="pull-left" style="background:#58D3F7;"> Быстрое плавание влево </div> <div class="pull-right" style="background: #DA81F5;"> Быстрое плавание вправо </div> </div> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
Вы можете использовать класс .show и .hidden Сильно устанавливать отображение или скрытие элементов (включая экранные читатели).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap пример - Показ и скрытие содержимого</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row" style="padding: 91px 100px 19px 50px;"> <div class="show" style="margin-left:10px;width:300px;background-color:#ccc;"> Это пример класса show </div> <div class="hidden" style="width:200px;background-color:#ccc;"> Это пример класса hide </div> </div> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
Вы можете использовать класс .sr-only Сделайте элементы скрытыми для всех устройств, кроме экранного читателя.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример Bootstrap - Экранный читатель</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row" style="padding: 91px 100px 19px 50px;"> <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="email">Адрес электронной почты</label> <input type="email" class="form-control" placeholder="Введите адрес электронной почты"> </div> <div class="form-group"> <label class="sr-only" for="pass">Пароль</label> <input type="password" class="form-control" placeholder="Пароль"> </div> </form> </div> </body> </html>Проверьте,看看 <‹/›>
Результат будет выглядеть следующим образом:
Здесь мы видим, что два тега label типа input имеют класс sr-onlyТаким образом, тег будет видим только для экранного читателя.