Компоненты Bootstrap


Содержание

Bootstrap PHP

PHP библиотека для создания компонентов Twitter Bootstrap проще и быстрее.

Обзор Bootstrap.PHP

История появления библиотеки

Работая над админкой своего проекта (админка делается на Bootstrap) обнаружил, что мне очень не хватает возможности прямо из php формировать содержание элементов Bootstap.

  1. Наполнять содержания выпадающих списков меню в зависимости от прав пользователя
  2. Наполнять навигационный бар элементами в зависимости от многих факторов, он у меня используется для профайлера
  3. Количество и разнообразие кнопок очень велико, поэтому для них хотелось бы иметь также простой способ создания

. и множество других вещей, также хотелось формировать прямо в php коде.

Кроме того на сайте уже были использованы хлебные крошки, навигация, pager и некоторые другие компоненты Bootstrap.

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

Зачем?

Так зачем библиотека вам? Прочитайте историю появления выше, и если у вас похожая ситуация, то рано или поздно вы придете к тому что вам потребуется что-то подобное.

Чем Bootstrap.PHP лучше «чистого» Bootstrap?

  1. Создать выпадающее меню или навигационную панель проще на Bootstrap.PHP, чем на «чистом» Bootstrap. И не только их, чем сложнее компонент, тем более явно это преимущество.
  2. Каждый программист знает, что нужно избегать повторения кода. Также хочется избегать повторения html в шаблонах. Когда на основе одно и того же компонента Bootstrap создается несколько разных шаблонов, повторение неизбежно. Bootstrap.PHP помогает этого избежать.
  3. Bootstrap.PHP позволяет создавать шаблоны быстрее (да его можно использовать прямо в шаблонах, конечно если у вас шаблоны на php). Просто поверьте моему опыту. Я практически перестал заглядывать в документацию Bootstrap, а это экономит кучу времени, и это не потому что я знаю ее наизусть. В документацию Bootstrap.PHP также заглядывать не нужно, почему, будет понятно ниже.

Авто дополнение и PHPDocs

Что делает эту библиотеку такой замечательной так это автодополнение. Используя автодополнение и подсказки phpdocs, вам не придется обращаться к этой документации.

    Взглянув на названия параметров легко понять их предназначение, phpdocs помогут, если что-то непонятно

Увидев названия методов вспоминаешь какие возможности есть у компонента, опять же phpdocs

Никаких «магических» строк, если параметр имеет ограниченное количество значений, то его можно задать с помощью соответствующей константы этого же класса

Вот как просто добавляется выпадающее меню к кнопке

Начало работы

Установка

Скачайте архив с библиотекой и распакуйте в любой директории.
Для того что бы не беспокоиться о подключении классов регистрируем функцию автозагрузки.

Все, библиотека готова к работе.

Создание компонента

Любой компонент можно создать двумя способами. Посмотрим на примере компонента Button.

Полное имя класса кнопки \BootstrapPHP\Button для более короткой записи используется use BootstrapPHP\Button . В дальнейших примерах блок с use может быть пропущен.

Почему рекомендован второй способ?

    Во-первых, он позволяет сделать следующее

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

  • Гибкость компонентов

    Bootstrap.PHP включает в себя не все компоненты, которые есть в Bootstrap. Для включения в библиотеку были выбраны только те, которые скорее всего будут использовать как есть, то есть с внесением в их код минимальных изменений. Вряд ли вы будете что-то сильно менять в кнопках Bootstrap’а или в панели навигации, их функционала достаточно. Чего не скажешь, например, о таблицах или формах, конструкторы которых, могли бы быть отдельными большими проектами.

    HTML атрибуты

    Но все же, минимальная гибкость нужна, например, для задания идентификатора, добавления классов или data атрибутов. Для этого у каждого объекта компонента есть свойство attributes.

    Если вы используете цепочку вызовов как показано в примере, то использовать свойство attributes лучше не в одной цепочке с методом create, так как это сломает авто дополнение, при дальнейшем использовании. Используйте прием как показано ниже.

    И тот и другой работают одинаково, но второй способ позволит пользовать авто дополнением для $button в дальнейшем.

    У сложных объектов у которых есть методы добавляющие в них элементы, атрибуты можно добавлять элементам.

    Практика показала, что атрибуты нужно добавлять именно ссылке, а не элементу списка, так как Bootstap’ом data атрибуты проверяются у ссылок.

    Использование HTML

    Нигде в проекте, где можно задать произвольный текст, не используется обработка введенного текста, текст вставляется как есть. Это значит, что везде можно использовать html и он будет вставлен как html. Это сделано для большей гибкости, так как моя собственная практика показала, что в реальном проекте без этого не обойтись. Хотя бы для того, чтобы добавить иконку рядом с текстом, в тех местах, где в проекте специально это не предусмотрено.

    Получение готового HTML

    Получить готовый html код объекта можно двумя способами. Выбирайте тот, что больше нравится.

    Компоненты

    Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

    Подсказки

    Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame, подсказки являются обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

    Содержание

    Обзор

    Что нужно знать при использовании плагина подсказок:

    • Подсказки полагаются на третью библиотеку Tether для позиционирования. Вы должны включить tether.min.js перед bootstrap.js для того, чтобы подсказки работали!
    • Подсказки выбираются по соображениям производительности, поэтому вы должны их инициализировать самостоятельно.
    • Подсказки с названиями нулевой длины никогда не отображаются.
    • Укажите container: ‘body’ чтобы избежать проблем с отображением более сложных компонентов (например, групп ввода, групп кнопок и т. д.).
    • Запуск подсказок для скрытых элементов не будет работать.
    • Подсказки для .disabled или disabled элементов нуждаются в обертывании.
    • При запуске из гиперссылок, которые охватывают несколько строк, подсказки будут центрированы. Используйте white-space: nowrap; на ваших , чтобы избежать этого.

    Получили все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.

    Пример: Включить подсказки везде

    Одним из способов инициализации всех всплывающих подсказок на странице — выбрать их с помощью атрибута data-toggle :

    Примеры

    Наведите курсор мыши на ссылки текста внизу, чтобы увидеть подсказки:

    Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    Статическая демонстрация

    Доступны четыре варианта: верхнее, правое, нижнее и левыое выравнивание

    Интерактивная демонстрация

    Чтобы увидеть подсказки, наведите курсор на кнопки ниже.

    И добавленный пользовательский HTML:

    Использование

    Плагин подсказок генерирует содержимое и пометку по запросу, и по умолчанию размещает всплывающие подсказки после элементов, которые их вызвали.

    Вызов подсказок через JavaScript:

    Разметка


    Необходимая разметка для всплывающей подсказки — это только атрибут data и title элемента HTML, который вы хотите добавить в подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию установлено top через плагин).

    Создание всплывающих подсказок для пользователей клавиатуры и ассистивных технологий

    Вам следует добавлять всплывающие подсказки к HTML-элементам, которые традиционно сфокусированы на клавиатуре и интерактивны (например, ссылки или элементы управления формой). Хотя произвольные HTML-элементы (например, ) можно сделать сфокусированными, добавив атрибут tabindex=»0″ , это добавит потенциально раздражающие и путающие табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство ассистивных технологий в настоящее время не объявляет всплывающую подсказку в этой ситуации.

    Параметры

    Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием атрибута в data- , как в примере: data-animation=»» .

    Добавляет всплывающую подсказку к определенному элементу. Пример: container: ‘body’ . Эта опция особенно полезна в том плане, что она позволяет позиционировать всплывающую подсказку в потоке документа рядом с триггерным элементом — это предотвратит всплытие подсказки от элемента триггера во время изменения размера окна.

    Задержка показа и сокрытия подсказок (ms) — не применяется для ручного типа вызова

    Если указывается число, задержка применяется и для сокрытия, и для отображения

    Структура объекта: delay:

    Вставляет HTML в подсказку.

    Если true, HTML-теги в title всплывающей подсказки будут отображаться в подсказке. Если false, text метод jQuery будет использоваться для вставки содержимого в DOM.

    Используйте текст, если вы беспокоитесь об атаках XSS.

    Как позиционировать подсказку — сверху | снизу | слева | справа.

    Когда функция используется для определения места размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента, а узел DOM триггера — со вторым. Контекст this устанавливается в экземпляр всплывающей подсказки.

    Значение заголовка по умолчанию, если атрибут title отсутствует.

    Если функция задана, она будет вызвана с this ссылкой на элемент, к которому прикреплена всплывающая подсказка.

    Название Тип По умолчанию Описание
    animation логический true применяет CSS для плавного перехода к подсказке
    container строковый | element | false false
    delay числовой | object
    html логический false
    placement строковый | функция ‘top’
    selector строковый false Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для того, чтобы динамический HTML-контент добавлял подсказки. Смотрите это и информативный пример.
    template строковый

    Базовый HTML для использования при создании всплывающей подсказки.

    title подсказки будет добавлен в .tooltip-inner .

    .tooltip-arrow станет стрелкой подсказки.

    Внешний элемент-обтекатель должен иметь класс .tooltip .

    title строковый | элемент | функция »
    trigger строковый ‘hover focus’ Как запускается всплывающая подсказка — нажатие | наведение | фокус | manual. Вы можете передавать несколько триггеров; разделите их пробелом. `Manual` не может комбинироваться с любым другим триггером.
    constraints массив [] Массив ограничений — передан Tether. Для получения дополнительной информации обратитесь к документам ограничений Tether.
    offset строковый ‘0 0’ Смещение всплывающей подсказки относительно ее цели. Для получения дополнительной информации обратитесь к offset docs Tether.

    Атрибуты данных для индивидуальных подсказок

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

    Методы

    $().tooltip(options)

    Закрепите обработчик подсказки по набору элементов.

    .tooltip(‘show’)

    Показывает всплывающую подсказку элемента. Возвращается вызывающей стороне до того, как всплывающая подсказка была фактически показана (то есть до события shown.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки. Подсказки с названиями нулевой длины никогда не отображаются.

    .tooltip(‘hide’)

    Скрывает всплывающую подсказку элемента. Возвращает вызывающей стороне до того, как всплывающая подсказка была скрыта (то есть до события hidden.bs.tooltip event occurs). Это считается «ручным» запуском всплывающей подсказки.

    .tooltip(‘toggle’)


    Переключает подсказку элемента. Возвращается вызывающей стороне до того, как всплывающая подсказка была показана или скрыта (то есть до события shown.bs.tooltip или hidden.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки.

    .tooltip(‘dispose’)

    Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с помощью the selector option) не могут быть индивидуально уничтожены в элементах триггера-спутника.

    Пособие по Twitter Bootstrap – Дизайн сайта от и до

    Сейчас в среде веб-дизайнеров и разработчиков много говорят и пишут о Twitter Bootstrap. Кто-то называет его настоящим подарком для девелоперов с нулевым уровнем знаний в веб-дизайне. В то время как другие называют это благословением для дизайнеров. Как бы то ни было, Twitter Bootstrap делает многие вещи проще и быстрее.

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

    Этот процесс может затянуться чертовски надолго и серьезно тормозит девелопера, для которого очень важно, чтобы его/ее идея реализовалась как можно скорее. В этих случаях, им на помощь, как супергерой из комиксов, приходит Twitter Bootstrap!

    Twitter Bootstrap — это CSS-фреймворк, который помогает в разработке веб-приложений. Это один из самых простых на сегодняшний день фреймворков CSS, которые используются в массовом порядке. Предполагается, что вы можете не иметь вообще никаких знаний по веб-проектированию, и все, что вам нужно сделать, это просто написать несколько HTML-кодов в соответствии со спецификациями Bootstrap.

    Короче говоря, Twitter Bootstrap уже имеет готовые списки стилей CSS, встроенную поддержку JQuery, а также располагает несколькими популярными инструментами JavaScript.

    Ого! Разве не здорово? Вы получаете целую кучу полезных инструментов уже готовых к применению. Все, что вам нужно сделать, это просто вставить правильный HTML-код в нужное место.

    В данной статье я поясню, как вы можете начать использовать Twitter Bootstrap. Для этого я покажу вам макет демо-страницы. А также расскажу, как вы можете настроить фреймворк под собственные потребности.

    Приступим

    Для начала вам придется скачать файл bootstrap.zip с официальной страницы Twitter Bootstrap на github . В нем содержится набор файлов с расширениями css, js и img, которые понадобятся нам, чтобы начать создавать сайт на Twitter Bootstrap. Папка «css» содержит таблицы стилей (для адаптивного и неадаптивного дизайна), а также их упрощенные версии.

    Вы будете использовать минимизированные версии для быстрого создания сайта, когда дизайн уже завершен, и проект готов к запуску. Папка « js » содержит файл bootstrap.js и его минимизированную версию.

    Эти файлы JavaScript содержат различные JavaScript компоненты, которые мы будем использовать в разработке дизайна нашего сайта. Последняя папка, « img » содержит два набора иконок.

    Оба набора практически идентичны, и изображения в них отличаются только цветовой гаммой. Иконки были предоставлены glyphicons, которые любезно отдали их бесплатно в распоряжение проекта Twitter Bootstrap.

    Так, давайте приступим к работе. Прежде чем мы начнем, откройте текстовый редактор и создайте первый файл « index.html ». Сохраните его в домашней папке вашего проекта.

    Основные шаблоны HTML для работы в Bootstrap

    Для того чтобы активировать фреймворк Bootstrap, необходимо включить все соответствующие файлы и создать HTML структуру. Но сначала мы создадим структуру, а затем посмотрим, какие файлы нам будут нужны. Первое, что вы должны прописать это, как того требует HTML5, объявление типа документа в самом верху:

    Мы устанавливаем кодировку UTF-8, потому что в нашем проекте мы будем использовать специальные символы, и нам нужно, чтобы браузер корректно их распознавал. Twitter Bootstrap тоже рекомендует использовать UTF-8 для лучшей совместимости.

    После этого устанавливаем обычные теги HTML: , и . Это основные HTML-теги. Ваша страница index.html должна выглядеть так, как показано на рисунке ниже.

    Теперь нам нужно подключить необходимые стили, содержащиеся в файле bootstrap.css .

    Когда стили подключены, мы подключаем необходимые файлы JavaScript. Во-первых, вы должны включить файл JQuery, для этого я предлагаю подключать их из JQuery CDN, как показано ниже.

    Затем включаем файл Bootstrap.

    Из соображений производительности вашей веб-страницы, все эти скрипты должны располагаться прямо перед закрывающимся тегом .

    Теперь все необходимые файлы включены. Вы можете начать создание различных компонентов вашего сайта. Ваш файл index.html должен выглядеть следующим образом.

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

    Во-первых, мы должны понимать, что Twitter Bootstrap во многом зависит от 12 сеток. Что это за сетки?

    Предположим, вы хотите создать два равных раздела внутри тела вашей страницы index.html . Вы должны задать класс « span6 » каждому блоку этих элементов. Это будет означать, что Bootstrap должен создать два равных раздела, по шесть сеток в каждом.

    Надеюсь, что это дает вам кое-какое представление о том, работает Bootstrap. Он имеет набор предварительно назначенных классов для каждого элемента. Если это необходимо, вы должны задать соответствующие классы каждому из них.

    Составление кодов на Bootstrap

    Давайте разобьем демонстрационную страницу на пять основных частей:

    • Заголовок;
    • Маркетинговая область;
    • Левый сайд-бар;
    • Область контента;
    • Подвал.

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

    Для этого в Bootstrap существует специальный класс, который так и называется « container «. Его мы будем использовать в качестве материнской оболочки. Итак, переходим к написанию кодов:

    Теперь внутри контейнера DIV, мы пропишем заголовок сайта. Для этого мы используем тег заголовка h1 .

    Проверьте вашу страницу index.html в браузере, красиво ли расположены на ней элементы. Теперь пришло время заняться панелью навигации. Twitter Bootstrap определяет разметку для панели навигации следующим образом:

    « navbar » должен быть классом, заданным в основном блоке DIV панели навигации. Вы должны придерживаться приведенной выше разметки меню навигации, чтобы она соответствовала стилям Twitter Bootstrap.

    Разместите этот код немного ниже тега h1 . Убедитесь, что все элементы находятся внутри нашего класса родительской оболочки, т.е. « container » Откройте страницу в браузере и проверьте, красиво ли расположено меню навигации.

    Очевидно, что вы захотите, чтобы ваш заголовок отличался от стандартного. В конце этого урока, мы рассмотрим, как можно добавлять собственные стили к существующим стилям Bootstrap и добавить CSS, чтобы изменить дизайн области заголовка. А теперь переходим к созданию второй части, которую мы назвали « Область маркетинга ».


    В Twitter Bootstrap есть красивый предварительно назначенный класс специально для области маркетинга. Он называется « hero-unit «. Скопируйте приведенный ниже код и вставьте его ниже блока меню навигации.

    Проверьте вашу страницу в браузере, она должна выглядеть так:

    Ну, разве не замечательно? Не написав не единого фрагмента CSS, вы получили такой красивый блок области маркетинга. Хорошо, давайте рассмотрим этот код.

    В “ hero-unit ” имеется CSS, который предназначен для тега h1 . Так что, то, что вы пишите внутри тегов h1, будет выводиться жирным шрифтом и немного отделяться от других элементов блока. Затем через тег нам нужно создать параграф, в котором будет выводиться наша реклама или описание нашего продукта.

    А вот и самое интересное : ссылки и кнопки. Вы можете сделать любую ссылку в виде кнопки, добавив класс “ btn ”, а затем подогнав ее размер, добавив еще несколько дополнительных классов, таких как btn-large/btn-small/btn-mini .

    Для изменения цвета кнопок добавьте классы btn-success (зеленый), btn-info (голубой), btn-warning (желтый) и btn-danger (красный). Более подробную информацию о кнопках и стилизации ссылок вы можете найти в разделе База CSS. Эти классы могут быть применены к элементам кнопок HTML.

    Надеюсь, до сих пор рассказ был интересен для вас. Twitter Bootstrap настолько прост, что позволяет даже не делать ничего внутри таблиц стилей CSS. Вы просто пользуетесь инструментами, которые предоставляет система. Это то, что делает Bootstrap одним из самых мощных CSS-фреймворков.

    Теперь переходим к следующим разделам : левой боковой панели и разделу контента. Вы увидите, как я разделил область на две неравные вертикальные части, и как можно сделать еще больше таких сегментов. Как отмечалось ранее, Twitter Bootstrap представляет собой систему из 12 сеток.

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

    В данный момент мы работаем внутри нашего родительского класса оболочки « container «. Мы разделим его на две неравные части, используя 12 сеток. Для левой боковой панели мы используем класс « span4 », а для раздела контента, который расположится правее, мы будем использовать класс « span8 ».

    Имена классов отражают суть: левый сайд-бар будет занимать до четырех сеток, а правая сторона должна распределиться по оставшимся восьми сеткам.

    Ваша страница теперь должна выглядеть вот так:

    На ней должно быть два отдельных столбца, расположенных бок о бок. Теперь стоит подумать над тем, чтобы создать дополнительный блок оболочки, который я добавил выше через класс « row ». Причина заключается в том, по умолчанию классы span* выравниваются по левому краю.

    Чтобы разместить оба столбца ниже всего содержимого мы добавили блок « row ». Он действует как обычный разделитель

    в таблицах. Теперь вы должны удалить элементы заглушек абзацев из вашего кода.

    После чего заполним левую боковую панель списком пунктов навигации.

    Список навигации должен иметь следующую разметку:

    В дополнение к классу « nav », вы должны добавить класс « nav-list », с помощью которого пункты меню навигации будут выводиться списком. Если добавить класс « nav-header » к любому элементу « li » класса « nav », он будет выглядеть, как заголовок раздела ссылок. Двигаемся дальше, посмотрим, как теперь наша страница выглядит в браузере.

    Переходим к области контента, мы будем просто заполнять ее, используя общие теги h3 , и теги абзацев. Установка дополнительных классов здесь не потребуется. Ведь мы хотим, чтобы абзацы текста выводились один под другим. Ниже приведен код, который я разместил внутри « span8 ».

    Обновите страницу в браузере, после чего она должна выглядеть вот так:

    Как видите, мы уже очень близки к конечной точке. Нам осталось только завершить подвал страницы.
    Для футера мы снова разделим « row » на три части. Как это показано в демо-версии. На этот раз мы делим область на три равные части, то есть используем « span4 ».

    Так мы создадим еще один блок « row », прямо под « row », который мы создавали ранее для сайдбара и области контента.

    Запишите себе следующий код:

    Достаточно просто! Мы разделили строку на три равные части с помощью класса « span4 », а затем заполнили каждый из сегментов, используя теги h4 , теги абзацев и ссылки, которые выглядят как кнопки. Проверьте, что у нас получилось, в браузере.

    У вас должны быть маленькие изображения клиентов и сотрудников внутри кнопок. Воспользуйтесь тегом , чтобы добавить соответствующие классы изображений, такие как icon-user, icon-star, icon-glass и т.д.

    Чтобы иконки стали белыми, используйте класс icon-white с классами icon-user и icon-star . Полный список классов иконок вы можете найти в документации Bootstrap, которая находится здесь.

    Чтобы немного отделить подвал страницы от области контента, мы добавим тег между блоками «row». После того, как мы добавили тег , посмотрим, что у нас получилось.

    Далее, чтобы создать область копирайта, мы добавляем следующий код:

    Вот, теперь мы полностью создали простую, но вполне презентабельную целевую страницу. И при этом мы пользовались исключительно инструментами фреймворка Twitter Bootstrap.

    Добавляем собственные стили в Twitter Bootstrap

    Если у вас есть некоторые знания о CSS и вы хотите изменить стили Twitter Bootstrap, используемые по умолчанию, то лучше всего создать свою собственную таблицу стилей, импортировать стили Bootstrap, а затем переписать их в своем собственном файле CSS. Убедитесь, чтобы ссылка обращалась к вашим стилям, а не к файлам CSS Bootstrap.

    Если же стилей Twitter Bootstrap по умолчанию вам вполне достаточно, то, очевидно, необходимости создавать таблицу стилей нет. Но, так как многие веб-сайты используют ту же основу, то эти стили станут общими, и их можно будет увидеть на многих других сайтах, созданных на Bootstrap. Поэтому лучше будет, если вы добавите собственные стили поверх CSS Twitter Bootstrap.

    Еще несколько важных компонентов Twitter Bootstrap

    Выделенные пункты

    Чтобы выделить некоторые фрагменты в теле длинного документа, можно добавить к ним класс « lead ». Это сделает шрифты этого конкретного пункта немного больше, чем в остальной части документа.

    Теги выделения

    Вы также можете использовать на вашей странице базовые теги выделения HTML: такие как , и . Также можно использовать теги и .

    Выравнивание текста

    Выравнивание текста внутри любого абзаца или блока div можно задать с помощью классов: « text-left », « text-center » и « text-right ».

    Цвет текста

    Вы можете установить для текста абзацев цвета по умолчанию, для этого используются различные классы выделения цветом, такие как « muted » — серый, « text-warning » — красный, « text-error » — темно-бордовый, « text-info » — светло-голубой и « text-success » — зеленый цвет.

    Стили таблиц


    Twitter Bootstrap также по умолчанию поддерживает разметку таблиц. Для этого используется следующий код:

    Работа с изображениями

    Вы можете добавлять изображения, используя обычный тег . Чтобы ваши проекты выглядели интереснее, вы можете добавить классы « img-rounded » для картинок с заокругленными углами, « img-circle » для прокрутки изображений и « img-polaroid », чтобы создать тень и рамку по периметру изображения.

    Выпадающие меню

    Чтобы добавить выпадающее меню в существующую панель навигации (как это показано на демонстрационной странице), вам нужно добавить следующую разметку внутри элемента « li ».

    Чтобы создать выпадающий список вы должны запаковать родительский элемент с помощью класса « dropdown », а затем использовать для вставки разметку « а ». После чего поместить пункт списка в данный элемент.

    Я показал вам основные принципы использования Twitter Bootstrap, как начать работу с системой. Теперь, когда вы узнали, как это работает, я надеюсь, вам будет намного проще работать с описанием элементов фреймворка из оригинальной документации.

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

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

    Данная публикация представляет собой перевод статьи « Twitter Bootstrap Tutorial – Handling Complex Designs » , подготовленной дружной командой проекта Интернет-технологии.ру

    Учебник по Bootstrap

    Статьи и другая информация по адаптивной вёрстки сайтов с использованием 3 и 4 версии фреймворка Bootstrap.

    I. Начало работы

    Подключение и настройка

    • Что такое Bootstrap и зачем он нужен?
    • Подключение к сайту
    • Сборка проекта с помощью Gulp (Bootstrap 4)
    • Пользовательская сборка платформы (Bootstrap 3)
    • Настройка платформы с помощью переменных LESS (Bootstrap 3)
    • Варианты установки, сборка с помощью Grunt (Bootstrap 3)
    • Инструмент Bootlint (Средство для проверки бутстраповских страниц на корректность)

    глава вторая

    Создание макета

    II. Классы и компоненты

    Оформление контента

    Компоненты

    Классы помощники

    III. Дополнительно

    Примеры

    Разное

    Скрипт звёздного рейтинга для сайта

    Bootstrap 3 DateTimePicker — Календарь для input

    Слайдер для сайта на CSS и JavaScript

    Изменить css класс блока и сохранить выбор в куки

    Установка локального веб-сервера на подсистему Windows для Linux

    Как сделать отступы элементам в JavaScript


    Создание сайта визитки (Часть 2)

    Bootstrap 4 — Сборка проекта с помощью Gulp

    Bootstrap – группы кнопок

    В следующей таблице приведены важные классы Bootstrap, которые предоставляет использовать кнопки группы:

    Класс Описание Пример кода
    .btn-group Этот класс используются для основной группы кнопок. Оберните ряд кнопок с классом .btn в .btn-group.
    .btn-toolbar Этот класс помогает объединить наборы

    для более сложных компонентов.

    .btn-group-lg, .btn-group-sm, .btn-group-xs Эти классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки.
    .btn-group-vertical Этот класс делает набор кнопок отображаются вертикально уложенными, а не горизонтально.

    Основная группа кнопок

    Следующий пример демонстрирует использование класса .btn-group, рассмотренной в приведенной выше таблице:

    Кнопка панели инструментов

    Следующий пример демонстрирует использование класса .btn-toolbar из приведенной выше таблице:

    Размер кнопки

    Следующий пример демонстрирует использование класс .btn-group-*, обсуждаемый в приведенной выше таблице:

    Вложенные

    Вы можете вложить группы кнопок в другую группу кнопок, т.е. поместить .btn-group в другую .btn-group. Это делается, когда вы хотите, выпадающее меню, смешанное с серией кнопок.

    Вертикальные группы кнопок

    Следующий пример демонстрирует использование класса .btn-группы по вертикали из приведенной выше таблице:

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

    Краткое введение в Bootstrap

    Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

    Цель этого руководства — показать, как настроить систему для правильного использования JS- и CSS-компонентов Bootstrap.

    Прим. перев. В статье не рассматривается целесообразность использования или не использования данного фреймворка. Как и любое другое решение, Bootstrap обладает своими преимуществами и недостатками.

    Официальный сайт предлагает несколько способов подключения фреймворка к своему проекту:

    • Скачать скомпилированные файлы JS и CSS. Скачав файлы на локальную машину, вы можете выбрать, какую версию включить в свой проект – минифицированную или стандартную. Этот вариант подходит при работе со своим проектом локально и не требует от проекта доступа в Интернет.
    • Скачать исходники файлов. Этот вариант подойдёт, если вы знакомы с работой менеджеров задач и сборщиками (Gulp, Grunt, webpack) и уже создали собственную конфигурацию. В таком случае вы вряд ли захотите копировать исходники Bootstrap в свой проект.
    • Включить в проект файлы через CDN. Похоже на первый вариант, но не придётся скачивать никаких файлов. Это самый быстрый способ использовать Bootstrap в своей разработке, но требует постоянного доступа к Интернету.
    • Подключить через npm. Вероятно, самый оптимальный вариант, особенно, если вы собираетесь создать полноценное приложение, а не просто опытный образец.
    • Варианты с использованием RubyGems, Composer и NuGet.

    Стоит отметить, что Bootstrap предоставляет три готовых к использованию файла и может быть использован для:


    1. Создания прототипов или приложений.
    2. Реализации Reset (альтернативы Normalize.css).
    3. Вёрстки с помощью Grid .

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

    Практика

    Предполагается, что вы знакомы с Sass и каким-либо сборщиком . Кроме того, вам потребуется npm.

    Сначала нужно добавить в проект необходимые зависимости:

    Типовая структура проекта выглядит так:

    Стоит пояснить, какие преимущества предоставляет такая структура. Сначала рассмотрим папку styles , а затем перейдём к scripts .

    Styles

    Эта папка содержит две вложенные директории app и vendor , а также два файла с теми же именами.

    • Папка app будет содержать все компоненты вашего приложения, переменные, настраиваемые стили и так далее.
    • Папка vendor используется для зависимостей. В данном случае это только Bootstrap, расположенный в соответствующей директории. Для каждой зависимости выделяется отдельная вложенная папка.

    Необходимо подключить Bootstrap и код нашего приложения в файле app.scss . Это делается следующим образом:

    Теперь обратите внимание на папку styles/app . Там всего два файла:

    • В файле _base описываются стили. Может расширяться с помощью Normalize.css .
    • В _variables размещаются переменные приложения.

    В vendor.scss импортируются зависимости. Сейчас единственная наша зависимость — Bootstrap, поэтому этот файл содержит только одну строку.

    Рассмотрим файлы в папке styles/vendor/bootstrap .

    • В _core импортируются наши переменные и три основных файла Bootstrap, без которых фреймворк не сможет работать:
    • _main импортирует файл _core.scss вашего проекта в самом верху, а также все необходимые файлы Bootstrap SASS из папки node_modules :

    В Webpack (автор использует этот сборщик) знак тильды (

    ) указывает, что файлы нужно искать в папке node_modules . Если вы используете, например, Grunt, то нужно установить grunt-sass-tilde-importer. Если какие-то из представленных компонентов не использованы в проекте, ни в коем случае не надо удалять сами файлы, нужно лишь закомментировать их импорт.

    • _variables изначально пуст. В нём переопределяют переменные Bootstrap под конкретный проект.

    В каждой переменной Bootstrap установлен флаг !default . Таким образом, если проект содержит заранее определённые переменные, то они будут использованы вместо дефолтных.

    Scripts

    Чтобы сделать скрипты модульными, нужно включить в проект только необходимые компоненты. Однако в Bootstrap это не такая простая задача. Подробно этот процесс описан в документации к фреймворку.

    Начать следует с файла scripts/vendor.js , который просто импортирует файлы из папки vendor :

    Необходимо инициализировать jQuery в объекте window, в противном случае Bootstrap не сможет скомпилироваться. Кроме того, это всё равно придётся сделать, если вы планируете использовать jQuery в приложении. Импорт jQuery в файле scripts/vendor/jquery.js :

    Как и в файле vendor , придётся импортировать каждый модуль отдельно. Вы также можете закомментировать неиспользуемые компоненты, чтобы исключить их из проекта. Содержимое файла scripts/vendor/jquery.js :

    Следует отметить, что модуль Util используется везде, кроме компонентов Button и Popover.

    «Росбанк», Москва, до 60 000 ₽ (до налогов)

    8 полезных библиотек Bootstrap UI-компонентов в 2020 году

    Адаптированный перевод статьи Джонатана Саринга «9 Bootstrap UI Component Libraries for 2020».

    Bootstrap это самый популярный в мире фронтенд-фреймворк. Он содержит шаблоны типографики, форм, кнопок и других компонентов пользовательского интерфейса на основе HTML и CSS.


    Чтобы помочь вам начать, мы собрали некоторые из лучших UI-наборов. Конечно, беспристрастным наш выбор назвать нельзя: он базируется на мнении членов сообщества.

    С помощью Bit (GitHub) вы можете с легкостью сделать любую библиотеку разделяемой коллекцией индивидуальных компонентов, которые можно будет использовать и разрабатывать где угодно.

    1. React Bootstrap

    React Bootstrap это, пожалуй, самая популярная реализация Bootstrap компонентов, созданная с помощью React (14 тысяч звезд на GitHub, 300 тыс. скачиваний в неделю). Каждый компонент построен с нуля в качестве React-компонента. Для работы с существующими темами Bootstrap эти компоненты опираются только на таблицы стилей Bootstrap.

    2. Reactstrap

    Reactstrap это библиотека «React Bootstrap 4 компонентов без запоминания состояния», получившая на GitHub больше 6 тысяч звезд. Она не зависит от jQuery или Bootstrap Javascript, однако на них полагается Poppers.js, нужный для более продвинутого позиционирования контента.

    3. Material Design React Bootstrap

    Эта библиотека – набор компонентов React Bootstrap для Material Design. Компоненты предоставляют кросс-браузерную совместимость. Они прекрасно работают с Chrome, Firefox, Safari, Opera и Microsoft Edge. Чтобы помочь с проблемами выравнивания, включена поддержка системы Flexbox. Документация обширна и полезна. Познакомиться с проектом можно с помощью этого видео.

    4. BootstrapVue

    BootstrapVue это понятная и довольно популярная (6,5 тысяч звезд на GitHub) реализация компонентов Bootstrap 4 и grid-системы для Vue.js. Имеет обширную и автоматизированную разметку доступности WAI-ARIA. Библиотека создана для построения адаптивных, mobile-first веб-проектов с использованием Vue.js и Bootstrap 4. Она предоставляет два полезных vue-cli шаблона: webpack-simple и webpack.

    5. UIV

    Набор UI-компонентов Bootstrap 3, реализованный в Vue 2. Он довольно легковесный: все компоненты в Gzip весят примерно 20KB. Зависит только от Vue и Bootstrap CSS. Компненты можно импортировать по отдельности. Есть поддержка всех современных браузеров (IE 9+). SSR тоже поддерживается.

    6. NG Bootstrap

    Angular 6 и Bootstrap 4 это интересная комбинация для адаптивных макетов, создаваемых с помощью компонентов Angular. NG Bootstrap это библиотека UI-компонентов, написанная на TypeScript, со 100% покрытием тестами. Она буквально создана для успешной работы. Зависит она только от Angular и Bootstrap 4 CSS. Активно поддерживается.

    7. AngularJS Bootstrap

    Эта библиотека заработала 15 тысяч звезд на GitHub. Она представляет собой набор собственных директив AngularJS для Bootstrap с маленьким объемом (20kB в gzip) и без JS-зависимостей (jQuery, bootstrap JS). Скачать можно здесь, а посмотреть директивы – здесь.

    8. NGX Bootstrap

    NGX Bootstrap реализует виджеты Bootstrap 3 и 4 с помощью Angular. Этот проект получил на GitHub 4,5 тысячи звезд. Содержит все основные (и не только) Bootstrap-компоненты с использованием разметки и CSS, предоставляемых bootstrap, так что у вас не будет необходимости включать оригинальные JS-компоненты. Вы можете реализовывать собственные шаблоны и стили. Все компоненты созданы расширяемыми и адаптивными, со стандартной производительностью как для мобильных, так и для десктопных проектов. Испытать компоненты можно здесь.

    Компоненты

    Компоненты Bootstrap — это коллекция инструментов применяемых в дизайне сайтов. Каждый компонент, как правило, включает в себя набор нескольких элементов HTML, стили для них и при необходимости скрипты, обеспечивающие взаимодействие с пользователем. Ниже описаны некоторые популярные компоненты Bootstrap.

    Группа кнопок

    Объединяет несколько кнопок в одну группу, которая отображается как единое целое, без промежутков между кнопками.

    Ниспадающее меню

    Содержит кнопку, при нажатии на которую появляется список со ссылками.

    Вкладки

    На сайтах вкладки применяются там, где требуется компактно и наглядно скомпоновать информацию по блокам.

    Хлебные крошки

    На сайтах навигация в виде хлебных крошек применяется чтобы показать путь к текущему документу и его положение в иерархии сайта.

    Нумерация страниц

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

    Эскизы

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

    Сообщения

    Чтобы дать пользователю знать о результатах его действий применяются информационные сообщения — для разных целей используются разные цвета.

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

    Выводит поясняющий текст при наведении курсора на элемент.

    Bootstrap: что это, с чего начать изучение и как использовать


    Что такое Bootstrap и с чем его едят?

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

    Главная особенность Bootstrap — что это не только CSS фреймворк, но и Javascript-библиотека. В Bootstrap разработаны готовые к использованию стили и скрипты, подключение которых к документу происходит прописыванием нужных классов и атрибутов HTML-элементов.

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

    История Bootstrap

    Первая версия фреймворка была разработана создателями Twitter и называлась Blueprint. В 2011 году, спустя несколько месяцев закрытой разработки, проект был открыт для общего доступа. Ключевым свойством, которое сделало Bootstrap столь популярным, было введение адаптивной сетки для верстки сайтов. В дальнейшем проект только набирал обороты и развивался все более энергично. Он и по сей день находится в активной разработке. Самая новая версия вышла 18 января 2020 года. В Bootstrap 4 шаблоны выходят на новый уровень, а также появилось множество умных опций.

    Назначение Bootstrap

    Фреймворк (в переводе каркас, структура) — это платформа, помогающая разработать структуру программной системы, облегчающую разработку и объединение отдельных компонентов большого проекта. Проще говоря, это несколько файлов с готовым разработанным проектом, который подключается к сайту, как правило в разделе Head, и позволяет использовать свой функционал.

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

    Известно, что с сайтами фиксированного дизайна легко работать. Однако, когда дело касается адаптивной верстки, выясняется наружу выходит множество подводных камней. Благодаря своей ориентированности на мобильную разработку, Bootstrap позволяет обойти все проблемы. Только задумайтесь, сколько нужно будет выполнить медиа-запросов при разработке шаблонов среднего по размерам проекта.

    Вместе с Bootstrap можно заниматься разработкой адаптивных шаблонов, даже не являясь первоклассным верстальщиком. Это вторая глобальная задача, которую решают фреймворки. Они позволяют без погружения в суть дела решать общий набор задач. Хорошо это или плохо? Но это существенно ускоряет процесс разработки.

    Bootstrap берет на себя ответственность за адаптивность и кроссбраузерность верстки. Это два краеугольных камня современной веб-разработки, требующие множества усилий на отладку и доработку, если заниматься этим лично. Тогда как через готовые фреймворки это делается значительно легче и быстрее.

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

    Минусы Bootstrap

    Поговорив о том, что это — Bootstrap и о его достоинствах, также следует упомянуть о недостатках.

    1. Избыточность. Как и у всякой популярной библиотеки общего назначения, в Bootstrap множество опций, которые не пригодятся в текущем проекте. Проще говоря, вам дают транспорт, который умеет летать, плавать, ездить и прыгать, а вам нужно только кататься по ровным дорогам. Остальные возможности не будут использованы. Bootstrap включает в себя все на все случаи жизни. Впрочем, такой ли это минус? Это позволяет использовать фреймворк в самых разных проектах. Стоит отметить, что разработчики идут на встречу своим пользователям, позволяя подключать и отключать возможности фреймворка по компонентам.
    2. Шаблонность. Шаблоны Bootstrap 4 включают в себя множество готовых вариантов, например, кнопок, которые используются повсеместно. Однако проблема легко решаема, если разработчик не ленив и готов потратить немного времени для настройки проекта под себя.
    3. Новизна. Bootstrap придерживается наиболее передовых разработок в своей области. Из-за этого могут возникать проблемы совместимости со старыми и устаревающими версиями браузеров.

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

    Компоненты Bootstrap

    В Bootstrap есть все, что может понадобиться для разработки стандартного веб-проекта. Выпадающее меню, кнопки, слайдеры, окна оповещения (модальные окна Bootstrap), вкладки, индикаторы загрузки, «хлебные крошки» и многое-многое другое. Как уже говорилось ранее, Bootstrap позволяет включать и отключать компоненты и выбирать те из них, которые нужны.

    Основные инструменты Bootstrap

    [tchecklist]

    • Сетка — возможность задать размеры невидимых колонок и вести разработку дизайна вокруг них.
    • Шаблоны — доступны как фиксированные варианты, так и резиновые.
    • Типографика — шрифты, классы для шрифтов, иконки.
    • Медиа — позволяет управлять изображениями и видео.
    • Таблицы — средства редактирования и управления HTML-таблицами, вплоть до добавления динамичности (сортировки, переноса).
    • Формы — классы, отвечающие за оформление форм и обрабатывающие события, связанные с ними.
    • Навигация — вкладки, меню, панели навигации и пр.
    • Алерты — окна оповещения о каких-либо событиях на сайте, также называемые модальными окнами Bootstrap.

    [/tchecklist]

    Стоит также отметить темы. Хотя это не является официальной возможностью фреймворка, но обширное комьюнити создало огромное число цельных тем под Bootstrap. То есть все готовые, проработанные в определенной цветовой схеме веб-элементы, необходимые для сайта.

    Как начать работать с Bootstrap?

    Знакомство с любым фреймворком или библиотекой рекомендуется всегда начинать с посещения сайта разработчика. Как правило, там обязательно найдется раздел наподобие «Bootstrap — что это». В данном случае официальный сайт getbootstrap.com содержит отличный раздел get started. У хорошего разработчика не возникнет проблем с чтением документации на английском языке, для остальных — есть официальный русский перевод.

    После сайта разработчиков следует обратить внимание на сообщество Bootstrap. В 90% случаев другие пользователи уже сталкивались с искомой проблемой и решили ее. Наконец, ввиду популярности фреймворка, у него существует огромное количество гайдов: как видео, так и сайтов-курсов.

    По сложности Bootstrap — программа средних размеров. Ее освоение требует чтения документации, но главное — практики. Освоение происходит очень быстро благодаря проработанной детальной справке на сайте разработчика.

    Bootstrap: что это, с чего начать изучение и как использовать на News4Auto.ru.

    Наша жизнь состоит из будничных мелочей, которые так или иначе влияют на наше самочувствие, настроение и продуктивность. Не выспался — болит голова; выпил кофе, чтобы поправить ситуацию и взбодриться — стал раздражительным. Предусмотреть всё очень хочется, но никак не получается. Да ещё и вокруг все, как заведённые, дают советы: глютен в хлебе — не подходи, убьёт; шоколадка в кармане — прямой путь к выпадению зубов. Мы собираем самые популярные вопросов о здоровье, питании, заболеваниях и даем на них ответы, которые позволят чуть лучше понимать, что полезно для здоровья.

    Components

    Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.

    Glyphicons

    Available glyphs

    Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible.

    • glyphicon glyphicon-adjust
    • glyphicon glyphicon-align-center
    • glyphicon glyphicon-align-justify
    • glyphicon glyphicon-align-left
    • glyphicon glyphicon-align-right
    • glyphicon glyphicon-arrow-down
    • glyphicon glyphicon-arrow-left
    • glyphicon glyphicon-arrow-right
    • glyphicon glyphicon-arrow-up
    • glyphicon glyphicon-asterisk
    • glyphicon glyphicon-backward
    • glyphicon glyphicon-ban-circle
    • glyphicon glyphicon-barcode
    • glyphicon glyphicon-bell
    • glyphicon glyphicon-bold
    • glyphicon glyphicon-book
    • glyphicon glyphicon-bookmark
    • glyphicon glyphicon-briefcase
    • glyphicon glyphicon-bullhorn
    • glyphicon glyphicon-calendar
    • glyphicon glyphicon-camera
    • glyphicon glyphicon-certificate
    • glyphicon glyphicon-check
    • glyphicon glyphicon-chevron-down
    • glyphicon glyphicon-chevron-left
    • glyphicon glyphicon-chevron-right
    • glyphicon glyphicon-chevron-up
    • glyphicon glyphicon-circle-arrow-down
    • glyphicon glyphicon-circle-arrow-left
    • glyphicon glyphicon-circle-arrow-right
    • glyphicon glyphicon-circle-arrow-up
    • glyphicon glyphicon-cloud
    • glyphicon glyphicon-cloud-download
    • glyphicon glyphicon-cloud-upload
    • glyphicon glyphicon-cog
    • glyphicon glyphicon-collapse-down
    • glyphicon glyphicon-collapse-up
    • glyphicon glyphicon-comment
    • glyphicon glyphicon-compressed
    • glyphicon glyphicon-copyright-mark
    • glyphicon glyphicon-credit-card
    • glyphicon glyphicon-cutlery
    • glyphicon glyphicon-dashboard
    • glyphicon glyphicon-download
    • glyphicon glyphicon-download-alt
    • glyphicon glyphicon-earphone
    • glyphicon glyphicon-edit
    • glyphicon glyphicon-eject
    • glyphicon glyphicon-envelope
    • glyphicon glyphicon-euro
    • glyphicon glyphicon-exclamation-sign
    • glyphicon glyphicon-expand
    • glyphicon glyphicon-export
    • glyphicon glyphicon-eye-close
    • glyphicon glyphicon-eye-open
    • glyphicon glyphicon-facetime-video
    • glyphicon glyphicon-fast-backward
    • glyphicon glyphicon-fast-forward
    • glyphicon glyphicon-file
    • glyphicon glyphicon-film
    • glyphicon glyphicon-filter
    • glyphicon glyphicon-fire
    • glyphicon glyphicon-flag
    • glyphicon glyphicon-flash
    • glyphicon glyphicon-floppy-disk
    • glyphicon glyphicon-floppy-open
    • glyphicon glyphicon-floppy-remove
    • glyphicon glyphicon-floppy-save
    • glyphicon glyphicon-floppy-saved
    • glyphicon glyphicon-folder-close
    • glyphicon glyphicon-folder-open
    • glyphicon glyphicon-font
    • glyphicon glyphicon-forward
    • glyphicon glyphicon-fullscreen
    • glyphicon glyphicon-gbp
    • glyphicon glyphicon-gift
    • glyphicon glyphicon-glass
    • glyphicon glyphicon-globe
    • glyphicon glyphicon-hand-down
    • glyphicon glyphicon-hand-left
    • glyphicon glyphicon-hand-right
    • glyphicon glyphicon-hand-up
    • glyphicon glyphicon-hd-video
    • glyphicon glyphicon-hdd
    • glyphicon glyphicon-header
    • glyphicon glyphicon-headphones
    • glyphicon glyphicon-heart
    • glyphicon glyphicon-heart-empty
    • glyphicon glyphicon-home
    • glyphicon glyphicon-import
    • glyphicon glyphicon-inbox
    • glyphicon glyphicon-indent-left
    • glyphicon glyphicon-indent-right
    • glyphicon glyphicon-info-sign
    • glyphicon glyphicon-italic
    • glyphicon glyphicon-leaf
    • glyphicon glyphicon-link
    • glyphicon glyphicon-list
    • glyphicon glyphicon-list-alt
    • glyphicon glyphicon-lock
    • glyphicon glyphicon-log-in
    • glyphicon glyphicon-log-out
    • glyphicon glyphicon-magnet
    • glyphicon glyphicon-map-marker
    • glyphicon glyphicon-minus
    • glyphicon glyphicon-minus-sign
    • glyphicon glyphicon-move
    • glyphicon glyphicon-music
    • glyphicon glyphicon-new-window
    • glyphicon glyphicon-off
    • glyphicon glyphicon-ok
    • glyphicon glyphicon-ok-circle
    • glyphicon glyphicon-ok-sign
    • glyphicon glyphicon-open
    • glyphicon glyphicon-paperclip
    • glyphicon glyphicon-pause
    • glyphicon glyphicon-pencil
    • glyphicon glyphicon-phone
    • glyphicon glyphicon-phone-alt
    • glyphicon glyphicon-picture
    • glyphicon glyphicon-plane
    • glyphicon glyphicon-play
    • glyphicon glyphicon-play-circle
    • glyphicon glyphicon-plus
    • glyphicon glyphicon-plus-sign
    • glyphicon glyphicon-print
    • glyphicon glyphicon-pushpin
    • glyphicon glyphicon-qrcode
    • glyphicon glyphicon-question-sign
    • glyphicon glyphicon-random
    • glyphicon glyphicon-record
    • glyphicon glyphicon-refresh
    • glyphicon glyphicon-registration-mark
    • glyphicon glyphicon-remove
    • glyphicon glyphicon-remove-circle
    • glyphicon glyphicon-remove-sign
    • glyphicon glyphicon-repeat
    • glyphicon glyphicon-resize-full
    • glyphicon glyphicon-resize-horizontal
    • glyphicon glyphicon-resize-small
    • glyphicon glyphicon-resize-vertical
    • glyphicon glyphicon-retweet
    • glyphicon glyphicon-road
    • glyphicon glyphicon-save
    • glyphicon glyphicon-saved
    • glyphicon glyphicon-screenshot
    • glyphicon glyphicon-sd-video
    • glyphicon glyphicon-search
    • glyphicon glyphicon-send
    • glyphicon glyphicon-share
    • glyphicon glyphicon-share-alt
    • glyphicon glyphicon-shopping-cart
    • glyphicon glyphicon-signal
    • glyphicon glyphicon-sort
    • glyphicon glyphicon-sort-by-alphabet
    • glyphicon glyphicon-sort-by-alphabet-alt
    • glyphicon glyphicon-sort-by-attributes
    • glyphicon glyphicon-sort-by-attributes-alt
    • glyphicon glyphicon-sort-by-order
    • glyphicon glyphicon-sort-by-order-alt
    • glyphicon glyphicon-sound-5-1
    • glyphicon glyphicon-sound-6-1
    • glyphicon glyphicon-sound-7-1
    • glyphicon glyphicon-sound-dolby
    • glyphicon glyphicon-sound-stereo
    • glyphicon glyphicon-star
    • glyphicon glyphicon-star-empty
    • glyphicon glyphicon-stats
    • glyphicon glyphicon-step-backward
    • glyphicon glyphicon-step-forward
    • glyphicon glyphicon-stop
    • glyphicon glyphicon-subtitles
    • glyphicon glyphicon-tag
    • glyphicon glyphicon-tags
    • glyphicon glyphicon-tasks
    • glyphicon glyphicon-text-height
    • glyphicon glyphicon-text-width
    • glyphicon glyphicon-th
    • glyphicon glyphicon-th-large
    • glyphicon glyphicon-th-list
    • glyphicon glyphicon-thumbs-down
    • glyphicon glyphicon-thumbs-up
    • glyphicon glyphicon-time
    • glyphicon glyphicon-tint
    • glyphicon glyphicon-tower
    • glyphicon glyphicon-transfer
    • glyphicon glyphicon-trash
    • glyphicon glyphicon-tree-conifer
    • glyphicon glyphicon-tree-deciduous
    • glyphicon glyphicon-unchecked
    • glyphicon glyphicon-upload
    • glyphicon glyphicon-usd
    • glyphicon glyphicon-user
    • glyphicon glyphicon-volume-down
    • glyphicon glyphicon-volume-off
    • glyphicon glyphicon-volume-up
    • glyphicon glyphicon-warning-sign
    • glyphicon glyphicon-wrench
    • glyphicon glyphicon-zoom-in
    • glyphicon glyphicon-zoom-out

    How to use

    For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

    Don’t mix with other components

    Icon classes cannot be combined with other elements. They are designed to be standalone elements.

    Examples

    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

    Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

    Example

    Wrap the dropdown’s trigger and the dropdown menu within .dropdown , or another element that declares position: relative; . Then add the menu’s HTML.

    Alignment options

    Add .pull-right to a .dropdown-menu to right align the dropdown menu.

    Headers

    Add a header to label sections of actions in any dropdown menu.

    Disabled menu items

    Add .disabled to a
    in the dropdown to disable the link.

    Button groups

    Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

    Tooltips & popovers in button groups require special setting

    When using tooltips or popovers on elements within a .btn-group , you’ll have to specify the option container: ‘body’ to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

    Basic example

    Wrap a series of buttons with .btn in .btn-group .

    Илон Маск рекомендует:  Что такое код getatomhandle
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL