Последние новости:

Поиск по сайту:

403 Fоrbiddеn - я знать тебя больше не хочу!

Bootstrap — Вспомогательные классы

1 мин для чтения
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
17.05.2017
Bootstrap - Вспомогательные классы

В этой главе рассматриваются некоторые из вспомогательных классов в Bootstrap, которые могут пригодиться.

Значок закрытия

Используйте иконку закрытия для закрытия модального окна и оповещения. Используйте класс close , чтобы получить значок закрытия.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Курсор

Используйте курсор, для того чтобы указать выпадающий список и направление. Для того, чтобы получить эту функциональность с помощью класса carets используйте вместе с элементом <span>.

<p>Пример курсора<span class = "caret"></span></p>

 

Быстрое равнение

Вы можете равнять элемент влево или вправо с помощью класса pull-left или pull-right, следующий пример демонстрирует это.

<div class = "pull-left">Быстрое равнение налево</div>

<div class = "pull-right">Быстрое равнение направо</div>

 

Для выравнивания компонентов в NavBars с полезными классами, используйте .navbar-left или .navbar-right вместо вышеуказанных. Смотрите главу navbar для деталей.

Центрирование блока контента

Используйте класс center-block для установки элемента по центру.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      Это пример center-block
   </div>
</div>

 

Clearfix

Чтобы очистить равнение любого элемента, используйте класс .clearfix.

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

 

Отображение и скрытие содержания

Вы можете заставить элемент показаться или скрыть его ( в том числе и для чтения с экрана) с использованием классов .show и .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      Это пример показа класса
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      Это пример скрытия класса
   </div>
   
</div>

 

Экран чтения контента

Вы можете скрыть элемент для всех устройств, кроме чтения с экрана с классом .sr-only.

<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 = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Пароль</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

 

 

Здесь мы можем видеть, что надпись обоего типов входных присваиваются класс sr-only, поэтому метки будут видны только для чтения с экрана.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close