Bootstrap 3 — стандартные иконки (примеры)

Тип

@component-offset-horizontal

Горизонтальное смещение для форм и списков

@text-muted

Приглушенный цвет текста

@abbr-border-color

Цвет рамки аббревиатур и акронимов

@headings-small-color

Цвет заголовков в рамках элемента small

@blockquote-small-color

Цвет цитаты в рамках элемента small

@blockquote-font-size

Размер шрифта блока цитат

@blockquote-border-color

Цвет рамки цитаты

@page-header-border-color

Цвет рамки заголовков страниц

@dl-horizontal-offset

Ширина горизонтального описания заголовка списков

@dl-horizontal-breakpoint

Точка, в которой .дл-горизонтального горизонтального

@hr-border

Цвет горизонтальной линии.

Скачать

Ура! Ваша собственная версия Bootstrap готова к сборке. Просто кликните кнопку внизу, чтобы завершить процесс.

Компилировать и скачать

    • Компонентам

Стабильные изменения

Бета-3 версия и стабильный релиз вер. 4 не имеют значительных различий, но есть некоторые заметные изменения.

Печать

  • Исправлены неработающие утилиты печати. Раньше при использовании класса он «перебивал» любой другой класс . Сейчас они коррелируют с другими утилитами отображения и применяются лишь к их медиа запросами ().

  • Расширены доступные утилиты печати для нормальной работы с другими утилитами. Бета-3 и более ранние версии имели лишь , , и . В стабильной вер. 4 добавлены , , , и .

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

Встроенный браузер Андроида

По умолчанию Android 4.1 (и даже некоторые более его новые релизы ) поставляются с браузером-приложением по умолчанию (в противоположность Chrome). К несчастью, это приложение имеет множество «багов» и несовместимостей с CSS в целом.

Меню выбора

По элементам : встроенный браузер андроида не отобразит их элементы управления (кнопки), если применен и\или . (Смотрите вопрос на StackOverflow). Используйте кусок кода ниже для удаления мешающего CSS и отрисовки элемента встроенным браузером андроида как «нестилизованного» элемента. В этом случае при определении браузера пользователя не происходит взаимодействия с браузерами Chrome, Safari и Mozilla.

Хотите пример? JS Bin demo.

Изменения по компонентам

Здесь мы опишем ключевые изменения в компонентах bs4 по сравнению с v.3.

Ребут

Reboot – новая для v.4 «библиотека» CSS, которая опирается на Normalize и работает с определенными вами «стилями сброса». Селекторы, существующие в этом файле, используют только элементы – тут нет классов. Это изолирует наши «стили сброса» от наших стилей компонентов, создавая более модульный подход. Вот некоторые из важнейших «сбросов» в Reboot: , которое теперь перешло с на во многих элементах; стили ссылок, а также «сбросы» многих элементов.

Типографика

  • Все классы-утилиты теперь находятся в .
  • Избавились от , поскольку все его стили, кроме границ, можно применить через классы-утилиты.
  • Избавились от , вместо которого теперь используется в , а также классы колонки сетки (или миксины) на «дочерних» элементах : и .
  • Стандартная стилизация элемента перемещена в класс и класс-модификатор .
  • теперь требует, чтобы все его «дочерние» элементы списка имели новый класс .

Таблицы

  • Почти все экземпляры селектора перемещены, т.е. вложенные таблицы теперь не будут автоматически наследовать стили от своих «предков». Это значительно упрощает наши селекторы и потенциальные настройки.
  • Переименован класс в (для большей компактности).
  • Добавили новый параметр .
  • Добавили модификаторы заголовком таблиц и .
  • Переименовали контекстуальные классы – теперь они имеют префикс . Поэтому , , , and стали соответственно , , , и .

Изменения в бета-2

В бета-2 мы не хотели вносить разительных изменений. Однако, планы изменились

Ниже перечислены важнейшие изменения, на которые надо обратить внимание при переходе с бета-1 на бета-2

Изменения

  • Мы удалили переменную и его связь с . Мы используем функцию контраста цвета для взаимодействия с , основанным на , так что переменная стала ненужной.
  • Переназвали функцию как , чтобы избежать серьезного конфликта с нативным фильтром CSS .
  • Переназвали , и как и , чтобы они совпадали с нашими цветовыми схемами, которые используются везде.
  • Отзывчивые таблицы теперь генерируют классы для каждого брейкпойнта сетки. Это коренным образом различается с практикой в бета-1 в том, что класс , который вы используете, стал больше похож на . Теперь вы можете использовать классы или , как удобно.
  • Мы удалили поддержку Bower, т.к. менеджер пакетов устарел (более новые — Yarn or npm). Смотри здесь.
  • BS4 все еще требует jQuery 1.9.1 или выше, но мы советуем использовать версию 3.х, т.к. браузеры, поддерживаемые этими версиями, поддерживаются и BS4; к тому же версии 3.х лучше с т.зр. безопасности.
  • Мы удалили неиспользуемый класс . Если вы использовали его, замените его классом , который вертикально центрировал элемент с его связанными формами ввода в разметке горизонтальных форм ввода.
  • Миксин , который включал свойство , теперь стал функцией, которая возвращает значение, позволяющее вам использовать его как свойство CSS. Например, вместо , используйте .

Подсветка

Мы ввели новое использование pointer-events на модальных элементах. Внешний .modal-dialog итерируется по событиям со свойством pointer-events: none для обычной обработки клика (и делает возможным отслеживание и обработку кликов на элементе класса .modal-backdrop), и затем передает их активному на тот момент элементу класса .modal-content с pointer-events: auto.

Документация

Наша документация также обновилась по всем направлениям. Вот свод:

  • Мы все еще используем Jekyll, но в сочетании с плагинами:
    • используется для создания списка записей на нашей странице поиска багов в разных браузерах.
    • стандартный «форк» плагина по умолчанию , который позволяет облегчать создание блоков примеров код.
    • стандартный «форк» одноименного плагина, но созданный для вызовов наших специальных документов.
    • используется для отрисовки сниппетов «Markdown» внутри HTML-элементов, таких как таблицы.
    • jekyll-toc используется для создания таблиц с содержимым.
  • Все содержимое документации было переписано в «Markdown» (вместо HTML) для более легкого редактирования.
  • Страницы реорганизованы в связи с упрощением их содержимого и представлены в более понятной иерархии.
  • BS4 перешел с CSS на SCSS, что позволяет полностью использовать преимущества бутстрапа — переменные, миксины и т.д.

Отзывчивые утилиты

Все переменные удалены из BS4. Используйте вместо них Sass миксины , или или карты Sass .

Большинство наших отзывчивых классов – утилит удалено, на их место пришли утилиты .

  • Классы и удалены, т.к. они конфликтовали с методами jQuery и . Вместо них используйте изменение атрибута или используйте вложенные стили, такие как и .
  • Все классы удалены ради утилит печати, которые также были переименованы.
    • Удалено из вер. 3:
    • Удалено из альфа-версий 4:
  • Утилиты печати больше не начинаются с или , а начинаются с .
    • Старые названия: , , ,
    • Новые классы: , , ,

Для того, чтобы сделать элемент видимым, лучше просто не прятать его на данном размере экрана, а не использовать классы . Можно сочетать один класс с одним , чтобы показать элемент лишь на данном интервале размеров экрана (например, покажет элемент только на больших и средних девайсах).

Заметим, что изменения в брейкпойнтах сеток в версии 4 привели к тому, что теперь необходимо применять бОльший брейкпойнт (т.е. следующий в сторону увеличения от фактического нужного) для достижения тех же результатов. Новые отзывчивые классы-утилиты не работают в менее обычных случаях, например, когда видимость элемента не может быть выражена одиночным набором размеров области видимости, в таких случаях используйте обычный CSS.

Плагин Buttons

Компонент «Buttons» включает в себя не только CSS, но JavaScript. Данный код (buttons.js) добавляет на страницу функционал, предназначенный для управления состоянием кнопок, как отдельных, так и находящихся в группах.

Использование кнопки в качестве переключателя

Для создания кнопки-переключателя добавьте к ней атрибут data-toggle=»button». После этого при нажатии на кнопку она будет переключаться из обычного состояния в активное и наоборот.

Если кнопка изначально должна находиться в активном состоянии, то к ней необходимо добавить класс active и aria-pressed=»true».



    Кнопка-переключатель




    Кнопка-переключатель


Checkbox и radio кнопки

CSS-стили Buttons можно применить и к другим HTML элементам, таким как к label, чтобы создать checkbox или radio кнопки.





    
         Показывать панель инструментов
    




    
         Вариант 1
    
    
         Вариант 2
    
    
         Вариант 3
    




    
         Показывать панель инструментов
    




    
         Вариант 1
    
    
         Вариант 2
    
    
         Вариант 3
    

Атрибут data-toggle=»buttons» предназначен для JavaScript. Он используется в его коде в качестве селектора для выбора элементов, к которым необходимо добавить поведение «переключения».

Состояние кнопок обновляется через событие click. Если необходимо использовать какой-то другой способ для обновления состояния checkbox или radio кнопок, то его нужно написать самостоятельно.

Класс btn-group-toggle (Bootstrap 4) предназначен для стилизации элементов input внутри группы.

Методы плагина Buttons

В Bootstrap 3 и 4 версии имеется метод . Он предназначен для программного переключения состояния одной или нескольких кнопок.

Например, создадим 2 кнопки, и с помощью одной кнопки будем переключать состояние другой:



    Выключено


    Переключить состояние 

...

В Bootstrap 3 кроме вышеприведённого метода имеются ещё 2:

  • $().button(‘string’) — изменяет текст кнопки на значение, хранящееся в атрибуте data-string-text (имя атрибута составляется путём сложения строки data-, строкового значения, переданного в функцию button, например string и строки -text);
  • $().button(‘reset’) — заменяет текст на изначальный.

Пример работы с методами и .



	Скачать


	Сбросить

...

Этот пример состоит из 2 кнопок.

При нажатии на первую кнопку её текст изменяется на значение атрибута data-complete-text. Это действие выполняется с помощью метода .

При нажатии на вторую кнопку текст первой кнопки заменяется на изначальный. Осуществляется это посредством метода .

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Steps to disable page responsiveness

  1. Omit the viewport mentioned in
  2. Override the on the for each grid tier with a single width, for example Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the with media queries or some selector-fu.
  3. If using navbars, remove all navbar collapsing and expanding behavior.
  4. For grid layouts, use classes in addition to, or in place of, the medium/large ones. Don’t worry, the extra-small device grid scales to all resolutions.

You’ll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the «mobile site» aspects of Bootstrap.

Пример

«Значки» изменяют размер для подстройки к размеру непосредственного родительского элемента, это достигается использованием относительного размера шрифта и единиц .

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

Пример заголовка New

«Значки» можно использовать как часть ссылки или кнопок, в качестве счетчика.

Уведомления 4

Заметьте, что в зависимости от вида использования «значки» могут создать проблемы для «экранных читалок» и подобных вспомогательных технологий

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

В зависимости от ситуации эти «значки» могут выглядеть для вспомогательных технологий («читалки» и тд) как случайные слова или цифры в конце предложения, ссылки или кнопки.

Лишь пока контекст ясен (как с примером «Уведомления», где понятно, что «4» — это число уведомлений), можно включать дополнительный контекст с помощью скрытой части дополнительного текста.

Профиль 9
непрочитанных сообщений

Вариации контекста

Добавьте любой из нижеприведенных классов-модификаторов для изменения внешнего вида «значка».

Главный
Вторичный
Успех
Опасность
Предупреждение
Инфо
Светлый
Темный

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе текст.

Скругленные «значки» (букв. — «подушки»)

Используйте класс-модификатор для придания «значкам» большего скругления углов (больший и дополнительный ). Это полезно, если вам не хватает значков из BS3.

Главный
Вторичный
Успех
Опасность
Предупреждение
Инфо
Светлый
Темный

Использование контекстуальных классов в элементе обеспечивает «значкам» «активное» поведение (:hover, :active).

Как подключить иконки Glyphicons Halflings?

В стандартной сборке Bootstrap 3 иконки Glyphicons Halflings подключать не надо. Они и так уже подключены в файле CSS ( или ).

Находятся иконки Glyphicons Halflings в каталоге . В данной директории находятся несколько форматов (, , , , ) одних и тех же иконок.

Формат необходим для отображения иконок в старых браузерах Microsoft Internet Explorer (до 9 версии). Шрифт в формате используется для отображения иконок в устаревших браузерах операционной системы Android (до версии 4.4). и – это форматы, которые используют все основные браузеры. Вторая версия формата шрифта () отличается от первой тем, что она имеет меньший размер. В настоящее время поддерживается браузерами Chrome 36+, Opera 26+, Firefox 35+. Шрифт в формате поддерживается только браузерами Safari (4.1 и ниже), работающими под управлением операционной системы iOS.

По умолчанию шрифты Glyphicons Halflings должны быть расположены относительно файла или следующим образом:

bootstrap.css -> родительский каталог -> папка fonts -> шрифты

Если иконки Bootstrap отображаются у вас на странице квадратиками, то проверьте, правильно ли у вас расположены шрифты, относительно файла по вышеприведённой схеме.

Nested headings

When nesting headings ( — ), your primary document header should be an . Subsequent headings should make logical use of — such that screen readers can construct a table of contents for your pages.

Learn more at HTML CodeSniffer and Penn State’s AccessAbility.

Color contrast

Currently, some of the default color combinations available in Bootstrap (such as the various classes, some of the code highlighting colors used for , the helper class, and the default link color when used on a white background) have a low contrast ratio (below the ). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

Валидация

Получите обратную связь и мощные возможности проверки с помощью валидации форм HTML5 – . Выбирайте дефолтную обратную связь валидации от браузера или внедрите стандартные сообщения посредством наших встроенных классов и JavaScript.

Мы настоятельно рекомендуем пользоваться стандартными стилями валидации, поскольку встроенные стили валидации в браузере не взаимодействуют с экранными читалками.

Как это работает

Вот как валидация форм работает с Bootstrap:

  • Валидация форм HTML работает на 2 псевдоклассах CSS: и , применяемых к элементам , и .
  • Стили этих псевдоклассов применяются к родительскому классу , обычно применяемому к . В ином случае любое другое требуемое поле без значения становится невалидным при загрузке страницы. Таким образом можно выбирать, когда активировать формы (обычно после того, как нажато подтверждение).
  • Как резервный вариант, классы и можно использовать вместо псевдоклассов при . Они не требуют родительского класса .
  • Благодаря ограничениям, заложенным в самой природе CSS, нельзя (по крайней мере, сегодня) применять стили к элементу , который в DOM расположен перед элементами контроля формы, без использования JavaScript.
  • Все современные браузеры поддерживают – серию методов JavaScript для валидации органов контроля форм.
  • В качестве сообщений обратной связи в формах можно использовать таковые по (разные для каждого браузера, и неизменяемые через CSS) или наши стандартные стили сообщений обратной связи с дополнительным HTML и CSS.
  • Вы можете создать сообщения валидации методом в JavaScript.

Знаю всё это, посмотрите следующие демонстрации использования стилей валидации форм, серверных классы и умолчаний браузеров.

Стандартные стили

Для стандартных сообщений проверки форм Bootstrap вам потребуется добавить булеан к . Это деактивирует всплывающие сообщения обратной связи, существующие в браузере по умолчанию, но одновременно сохранит доступ JS к API валидации форм. Попробуйте войти в форму ниже, наш JavaScript выдаст вам сообщение обратной связи.

При попытке входа вы увидите, как стили и применятся к вашим органам контроля форм.

Умолчания браузера

Не нужны стандартные сообщения обратной связи? Не хотите писать скрипты JavaScript для изменения поведения форм? Используйте умолчания браузера. Попробуйте войти в форму ниже. В зависимости от вашего браузера и ОС вы увидите немного разные стили обратной связи.

Хотя эти сообщения обратной связи нельзя настраивать CSS, их можно настроить с JavaScript.

Сторона сервера

Мы рекомендуем использовать валидацию со стороны клиента, но если вам понадобится таковая со стороны сервера, вы можете обозначать валидные и невалидные поля форм классами и . Заметим, что их можно также использовать с классом .

Поддерживаемые элементы

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

Всплывающие подсказки

Если разметка ваших форм позволит, вы можете заменить классы классами — для отображения обратной связи валидации, стилизованной под всплывающую подсказку. Для правильного позиционирования всплывающей подсказки удостоверьтесь, что родительский элемент содержит . В примере ниже наши классы колонок уже имеют этот атрибут, но ваш проект может потребовать иные настройки.

Modals, navbars, and virtual keyboards

Overflow and scrolling

Support for on the element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the content will begin to scroll. See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.

iOS text fields and scrolling

As of iOS 9.3, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual or a , the content underneath the modal will be scrolled instead of the modal itself. See WebKit bug #153856.

Virtual keyboards

Also, note that if you’re using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn’t update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Navbar Dropdowns

The element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or ).

Итог

Вот список крупнейших различий, о которых надо знать при переходе с BS3 на BS4.

Поддержка браузеров

  • Исключили поддержку IE8, IE9 и iOS 6. BS4 поддерживает только IE10+ и iOS 7+. В версиях ниже используйте BS3.
  • Добавили официальную поддержку Android v5.0 Lollipop’s Browser и WebView. Более ранние версии Android Browser и WebView поддерживаются лишь неофициально.

Глобальные изменения

  • Флексбокс включен по умолчанию.
  • Мы переключились с Less на Sass в наших исходниках CSS.
  • стало главной единицей в CSS, вместо , хотя пиксели еще используются для медиа-запросов и поведения сетки, т.к. размеры видимости устройств не имеют типового размера.
  • Глобальный размер шрифта увеличен с до .
  • Поправлены ярусы сеток – добавлен пятый параметр (обращающийся к меньшим устройствам на и ниже), и удален инфикс из таких классов, например: .
  • Заменена отдельная тема на настраиваемые через SCSS переменные (например, $enable-gradients: ).
  • Система «сборки» перенаправлена с Grunt на использование серий скриптов npm. Смотри для всех скриптов, или наш FAQ.
  • Использование BS4 в «неотзывчивом» стиле больше не приветствуется.
  • Мы удалили онлайн-настройщика в пользу более подробной документации и настраиваемых сборок.
  • Добавлены десятки новых классов-утилит, созданных на парах «свойство-значение» в CSS и сочетания margin/padding.

Система сеток

  • Перешли на флексбокс.

    • Добавлена поддержка флексбокса в сеточных миксинах и предопределенных классах.
    • Как часть флексбокса, — добавлена поддержка вертикальных и горизонтальных классов выравнивания.
  • Обновленные название классов сетки и новый ярус сетки.

    • Добавлен новый ярус сетки (для и ниже) для более точного контроля. Сейчас в BS4 есть , , , и . Это значит, что каждый ярус BS3 в BS4 «поднялся» на уровень вверх (так, в v3 стал в v4 ).
    • Классы сеток изменены – теперь им не требуются инфикс, что дает большую наглядность точке начала их применения при , а не при неких пиксельных значениях. Класс стал . Все другие ярусы сеток требуют инфикс (т.е. ).
  • Обновлены размеры сеток, миксины, переменные.

    • Пространство между контентом сеток получило карту Sass, так что теперь вы можете задать его ширину на каждом брейпкойнте.
    • Обновленные миксины сеток используют и для задания и в отдельной колонке.
    • Изменилась брейкпойнты медиа-запросов системы сеток и ширины контейнеров, что учитывает новые ярусы сеток и дает колонкам возможность ровно разделиться на частей в их максимальной ширине.
    • Брейкпойнты сеток и ширины контейнеров теперь обрабатываются через карты Sass ( и ), тогда как прежде это делалось через множество раздельных переменных. Они полностью заменяют переменные и позволяют полностью настраивать уровни сетки.
    • Медиа-запросы также изменились. Вместо повторного объявления медиа-запросов через одинаковую переменную, сейчас мы имеем . Также, вместо написания , стало возможным писать так: .

Компоненты

  • Убраны панели, тамбнейлы, «вдавленность» — функционалы которых получил новый компонент – карточка.
  • Убрали шрифт иконок Glyphicons. Если вам нужны иконки, вот параметры:

    • новая версия Glyphicons
    • Octicons
    • Font Awesome
    • Смотри Extend page для списка альтернатив иконкам. Есть предложения? Задайте вопрос в сообществе или PR.
  • Убран плагин Affix jQuery.

    • Мы рекомендуем использовать вместо него . Смотрите подробности и специфические многосторонние рекомендации. Также при применении данной фичи предлагаем использовать правило (например )/
    • Если вы пользовались Affix для применения дополнительных стилей без указания свойства , полифиллы могли не поддерживаться. Решением для такого случая может быть сторонняя библиотека ScrollPos-Styler.
  • Убраны pager components, т.к. они мало подвергались настройке.
  • Пересмотрены почти все компоненты – теперь они используют не подробно описанные селекторы вложенных элементов, а селекторы классов, выделенных из «родительских» элементов.
Ссылка на основную публикацию