15 полезных Bootstrap компонент


Содержание

Компоненты

Десятки полезных компонентов встроены в Bootstrap такие как навигация, сообщения, инфоблоки и т.д.

Группы кнопок Соединяйте кнопки в группы

Группы кнопок

Применяются для объединения различных по назначению кнопок в единый элемент. Возможно построение из элементов или .

Как использовать?

Примеры и идеи для использования:

Дополнение Группы кнопок с выпадающим списком (см. ниже) включают в себя отдельный блок вызываемый при нажатии.

Пример

В этом примере обычный HTML со стандартной кнопкой обозначенной только тегом button :

Пример объединенных групп кнопок

Комбинируйте группы кнопок

Кнопки как checkbox или radio

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

Выпадающие списки в группах кнопок

Внимание! Кнопки с выпадающими списками должны быть помещены в индивидуальный родительский элемент .btn-group и включать .btn-toolbar для корректного отображения.

Кнопки с выпадающим списком Построены на групповых кнопках для имитации контекстного меню

Кнопка-список

Пример и описание

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

Объяснение примера

Так же как в группах кнопок, мы используем стандартную разметку для кнопок, но с использованием jQuery плагина от Bootstrap для имитации выпадающего списка.

Работает со всеми размерами

Выпадающий список работает с кнопками любого размера. Изменяйте размер кнопок при помощи классов .btn-large , .btn-small , или .btn-mini .

Требования к javascript

Иногда—на мобильных устройствах—выпадающие списки могут вылезать за пределы body . Вам необходимо решать эту проблему самостоятельно используя дополнительную разметку или javascript.

Кнопка + Кнопка-список

Пример и описание

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

Объяснение примера

В данном примере мы просто дополнили обычную кнопку второй кнопкой отвечающей за вызов выпадающего списка.

Размеры

Используйте классы размеров кнопок .btn-mini , .btn-small или .btn-large .

Выпадающие вверх

Выпадающие вверх списки могут созданы путем добавления класса .dropup к родительскому элементу .btn-group . Наример . Это изменит отображение элемента .caret и изменит направление выпадающего списка вверх.

Изначальные установки Одинаковая разметка, разные классы

Основной класс

Все навигационные компоненты—вкладки, кнопки и списки—имеют одинаковую HTML-разметку и родительский класс .nav .

Как и когда использовать?

Вкладки и кнопки подходят для навигации по разделам или страницам.

Выравнивание

Для выравнивания навигации используйте классы .pull-left или .pull-right . Оба класса добавляют условие CSS float left или right.

Вкладки

Используйте в качестве вкладок

    список, и дополнительный класс в родительском элементе .nav-tabs :

Используйте HTML-код из предыдущего примера, но вместо класса .nav-tabs используйте .nav-pills :

По умолчанию вкладки и кнопки располагаются горизонтально, добавьте класс .nav-stacked для вертикального отображения.

Стек вкладок

Стек кнопок

Выпадающие списки Используйте выпадающие списки в навигационных элементах

Богатое меню

Выпадающее меню в Bootstrap вкладках и навигационных кнопках. Незабудте добавить jQuery плагин.

Изучите Javascript плагин initializing dropdowns используемый для выпадающих списков в Bootstrap.

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

Кнопки с выпадающим списком


НАвигационный список позаоляет создать легкую и юзабельную навигацию с дополнительными заголовками. Такой сайдбар используется в Finder в MAC OS X.

Структура HTML-разметки в точности повторяет вкладки и кнопки, так что менять стиль навигационных элементов как ни когда просто.

Иконки

Используйте иконки в навигации. Добавьте тег с классом нужной Вам иконки.

Горизонтальный разделитель

Добавьте горизонтальный разделитель с помощью пустого элемента списка с классом .divider , пример:

Пример навигационного списка

К списку ссылок добавьте :

  • Заголовок
  • Главная
  • Библиотека
  • Приложения
  • Еще заголовок
  • Профиль
  • Настройки
  • Помощь

Пример с иконками

Такой же пример, но с добавлением иконок через тег .

  • Заголовок
  • Главная
  • Библиотека
  • Приложения
  • Еще заголовок
  • Профиль
  • Настройки
  • Помощь

Вкладки как навигация Оживим наши вкладки с помощью javascript

Что включено?

Оживим наши вкладки при помощи JS-плагина для простого переключения между контентом. Bootstrap включает в себя четыре стиля расположения вкладок: вверху (По умолчанию), справа, внизу и слева от контента.

Для изменения стиля расположения нужно лишь изменить один класс.

«Fade in» вкладки

Для плавного переключения между кладками, добавьте класс .fade к каждому .tab-pane .

jQuery плагин

Все вкладки управляются jQuery плагином. Изучите больше о javascript плагине.

Пример вкладок

Для создания переключаемых вкладок создайте .tab-pane с уникальным ID для каждой вкладки и поместите их в элемент с классом .tab-content .

Хей, я 2-я секция.

Как дела? Это 3-я секция.

Для выравнивания вкладок по левому или правому краю поместите .nav-tabs и .tab-content в родительский элемент .tabbable .

Использование вкладок подразумевает расположение всего кода в едином родительском элементе, см. пример ниже:

Пример стилей вкладок

Расположение внизу

Как дела? Это секция C.

Расположение слева

Как дела? Это секция C.

Расположение справа

Как дела? Это секция C.

Пример

Пример статического (не фиксированного сверху) в navbar включены имя проекта, навигация и форма поиска.


  • Главная
  • Ссылка
  • Ссылка
  • Ссылка
  • Выпадающий список
    • Действие
    • Другое действие
    • Еще и еще
    • Заголовок
    • Ссылка
    • Еще одна ссылка
  • Ссылка
  • Выпадающий список
    • Действие
    • Другое действие
    • Еще и еще
    • Заголовок
    • Ссылка

Разметка Navbar’а

Для создания фиксированного или статичного Navbar’а требуется создать всего три div элемента.

Фиксированный Navbar

Для создания фиксированного Navbar’а сверху или снизу необходимо добавить всего один класс к .navbar .

При создании фиксированного Navbar’а не забудьте что учесть месть которое он скрывает под собой. Добавьте 40px или более в качестве отступа для элемента. Добавьте новое правило после основного Bootstrap CSS, но перед responsive CSS.

Имя проекта

Добавьте имя проекта используя тег a .

Формы в navbar’е

Для использования форм в Navbar’е, добавьте необходимые классы как в примере ниже. Для создания формы по умолчанию добавьте класс .navbar-form и .pull-left или .pull-right для выравнивания по левому или правому краю.

Для формы поиска добавьте класс .navbar-search к тегу form и класс .search-query к input элементу.

Динамический Navbar

Взависимости от количества контента, вы можете задать скрытие некоторых элементов. Для этого, поместите контент в дополнительный div элемент с классом .nav-collapse , и добавьте кнопку с классом .btn-navbar .

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

Вы можете добавить вертикальный разделитель в Navbar, смотрите пример ниже:

Выравнивание элементов

Для выравнивания навигации, формы поиска или текста — используйте классы .pull-left и .pull-right . Оба класса добавляют условие CSS float.

Добавление выпадающего меню

Добавить выпадающий список к навигационному элементу очень просто, но это требует включение javascript плагина.

Текст в Navbar’е

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

Зачем использовать?

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

Примеры

Пример показывает последовательность перехода по страницам.

HTML-разметка как у стандартного неупорядоченного списка.

Нумерация страниц Два способа пронумеровать страницы

Когда использовать?

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

Состояние ссылок

Состояния ссылок легко настраиваются при помощи классов .disabled Для некликабельного элемента и .active для текущей страницы.

Гибкая настройка

Используйте два класса для настройки отображения и выравнивания блока навигации: .pagination-centered и .pagination-right .

Советы по разработке адаптивного дизайна на Bootstrap

С релизом версии 3 , Bootstrap добавил к своей адаптивной базе еще и возможность создания проектов mobile first .

Какие элементы, включенные в CSS Bootstrap , помогают в этом? Давайте рассмотрим несколько вещей и получим некоторое представление о том, как они могут помочь нам в наших проектах.

Определение надлежащих медиа запросов

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

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

  • Сверхмалые устройства ( например, мобильные телефоны ) определяются по умолчанию при разработке « mobile first » концепции Bootstrap . К ним относятся устройства, имеющие ширину экрана меньше, чем 768 пикселей;
  • Малые устройства ( например, планшеты ), определяются с помощью @media (min-width: 768px) and (max-width: 991px) < … >;
  • Средние устройства ( например, мониторы ) имеют ширину экрана меньше, чем 1200 пикселей, но больше, чем 991 пиксель, определяются с помощью @media (min-width: 992px) and (max-width: 1199px) < … >;
  • Большие устройства ( например, широкоформатные мониторы ) с шириной больше, чем 1200 пикселей, определяются с помощью @media (min-width: 1200px) < … >.

Этот вид классификации применяется большинством адаптивных фреймворков.


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

Если вы знакомы с системой сеток Bootstrap , вы, возможно, знаете, что для корректной настройки сетки требуется соответствующая HTML -структура. Давайте рассмотрим ее.

Давайте сначала рассмотрим HTML -структуру Bootstrap для установки двух столбцов:

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

С помощью медиа запросов Bootstrap задает для .container разную ширину, в зависимости от размера устройства:

  • Сверхмалые устройства (меньше 768 пикселей): width: auto (или ширина не задается);
  • Малые устройства (больше или равно 768 пикселей): width: 750px ;
  • Средние устройства (больше или равно 992 пикселей): width: 970px ;
  • Более крупные устройства (больше или равно 1200 пикселей): width: 1170px .

Как видно из приведенного выше изображения, .container предотвращает соприкосновение контента внутри элемента с краями окна браузера, используя поле в 15 пикселей с каждой стороны. Это также гарантирует, размещение контейнера по центру с помощью использования значения auto для левого и правого отступов.

Строки являются еще одним важным элементом системы сетки Bootstrap . Прежде чем создавать столбцы, вы можете определить строку, используя класс .row . Вот фрагмент CSS -кода Bootstrap для класса .row :

Как видим, наша строка имеет отрицательное значение правого и левого полей -15 пикселей, чтобы края строки касались края элемента контейнера. Это действует как оболочка для столбцов, куда вы можете добавить до 12 столбцов:

Строка Bootstrap

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

Вот фрагмент CSS -кода Bootstrap для класса .col-xs-6 :

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

Благодаря отрицательным полям строк, столбцы касаются края строк и края контейнера. Но поля столбцов обеспечивают, чтобы контент отступал от края контейнера на те же 15 пикселей.

Контейнеры используются и для других целей, не только для системы сетки, чтобы обеспечить отступ контента от края окна браузера на 15 пикселей ( при использовании .container-fluid ). Строки имеют отрицательные поля, чтобы нивелировать влияние полей контейнера.

Цукерберг рекомендует:  Иконки на тему Йога

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

Определение правильной ширины столбцов

Bootstrap использует проценты ( % ) в качестве единицы для определения ширины столбцов, что помогает создавать адаптивные конструкции. Как было сказано выше, в нем существует 4 различных категории устройств для различных контрольных точек.

Каждая категория имеет свой собственный набор классов для столбцов разных размеров:

  • Сверхмалые устройства используют .col-xs-*;
  • Малые устройства используют .col-sm-*;
  • Средние устройства используют .col-md-*;
  • Большие устройства используют .col-lg-*.

Символ звездочки ( * ) заменяется на число. Например, .col-xs-6 6 раз создает столбец размера .col-xs-1; .col-xs-4 четыре раза создает столбец размера .col-xs-1 и так далее.

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

Вот фрагмент из CSS -кода Bootstrap для классов столбцов, где звездочками для краткости заменены размеры ( xs , sm , md и т.д.):

Давайте проанализируем этот код. Класс .col-lg-6 будет иметь ширину в 50% на больших устройствах, но для средних, малых и сверхмалых устройств, используется ширина по умолчанию width: auto . Это обеспечивает то, что столбцы преобразуются в общей структуре ( а не бок о бок ) на небольших устройствах.

Адаптивные таблицы

Таблицы, используемые для отображения данных, также адаптивны в Bootstrap .
Для использования стилей таблиц Bootstrap мы используем класс .table , которому соответствует следующий CSS -код:

Применяя ширину в 100%, Bootstrap обеспечивает заполнение таблицами всей ширины родительского элемента. Но есть одна проблема. Таблицы с несколькими столбцами сжимаются на небольших устройствах, и могут не читаться.
Чтобы исправить это, Bootstrap содержит другой класс .table-responsive . Вот его CSS -код:

Эти стили преобразуют столбцы таблицы в горизонтально прокручиваемые на небольших устройствах.

Адаптивные изображения

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

Комбинация объявлений max-width: 100% и height: auto обеспечивает то, что изображения пропорционально уменьшаются на небольших устройствах, оставаясь в рамках ограничений родительского элемента на больших устройствах.

Заключение

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

Данная публикация представляет собой перевод статьи « Responsive Web Design Tips from Bootstrap’s CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Components

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

Glyphicons

Available glyphs

Includes over 250 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 include a link back to Glyphicons whenever possible.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty

  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint

  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell

  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header

  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical

  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

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 directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested and apply the icon classes to the .

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Changing the icon font location

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

  • Change the @icon-font-path and/or @icon-font-name variables in the source Less files.
  • Utilize the relative URLs option provided by the Less compiler.
  • Change the url() paths in the compiled CSS.

Use whatever option best suits your specific development setup.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-h attribute.

If you’re using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you’re creating controls with no other text (such as a that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

Examples

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

An icon used in an alert to convey that it’s an error message, with additional .sr-only text to convey this hint to users of assistive technologies.

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.

Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

May require additional positioning

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

Deprecated .pull-right alignment

As of v3.1.0, we’ve deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right . Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left .

Headers


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

Divider

Add a divider to separate series of links in a 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).

Ensure correct role and provide a label

In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role=»group» , while toolbars should have a role=»toolbar» .

One exception are groups which only contain a single control (for instance the justified button groups with elements) or a dropdown.

In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label , but alternatives such as aria-labelledby can also be used.

Basic example

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

Bootstrap для новичков, что это и как его установить

У Верстальщиков и фронтендеров, есть блоки кода, которые используют в каждом проекте и поэтому часто задумываются о создании собственного фреймворка. Но обычно начинают пользоваться уже существующими, например bootstrap.

Что такое bootstrap

Это фреймворк из трёх языков HTML/CSS/JS. Благодаря большому функционалу верстать сайты становится легко и быстро, ну конечно если во всем разобраться.

Появился в стенах компании Twitter и назывался «Twitter Bootstrap». Но из-за того что его захотели сделать всемирным пришлось отказаться от слова Twitter в названии. По моему личному опыту в bootstrap есть ряд плюсов:

  1. Быстрость верстки — большое количество готовых компонентов даёт возможность не останавливаться на обыденностях.
  2. Адаптивность — возможность настраивать размеры блоков сайта в зависимости от ширины устройства, как для компьютера так и для телефона.
  3. Популярность — из-за которой существует большое количество статей и уроков, а также форумов. Поэтому по любому пустяку, в котором вы сомневаетесь можете найти ответ на просторах интернета или задать вопрос на форуме.
  4. Bootstrap можно использовать для создания сайтов с различными CMS — WordPress, Joomla, Opencart.

Как установить bootstrap

Есть два способа его подключения:

  • Через скачивание файлов.

Зайдите на официальный сайт выберите компоненты которые вам понадобятся для работы (об этом мы поговорим на следующем уроке) и в самом конце скачайте нажав на кнопку «Compile and Download». Далее распакуйте архив у себя на компьютере.

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

  • Или через cdn

Но он требует подключение к интернету во время работы с фреймворком.
Для подключения bootstrap.min. css добавьте эту строчку кода в —

Строение фреймворка

Bootstrap насчитывает не малое количество компонентов, которые помогают нам верстать быстрее (да где-то вы это уже слышали). Поэтому давайте посмотрим, что вошло в эти компоненты.

Вы можете подробнее познакомится с этими функциями нажав на заголовок

Сеточная система

Все сайты строятся на блоках, поэтому бутстрап уделил этому отдельное внимание сделав — сетку. Она делит родительский блок (в котором находится) на 12 одинаковых по размерам частей. Также можно объединять между собой эти части, например можем дать одному блоку 3 части, второму 6 и третьему тоже 3.

Но главное ее преимущество в том, что можно менять размер блоков в зависимости от размера экрана гаджета который используется — компьютер или телефон. Так например col-md отвечает за размер экрана шире 970 px, а col-xs за ширину менее 768 px.

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

Вам изредка придется менять размер заголовка первого уровня, или размер цитаты. Потому что все вымерено до пикселя.

Также предусмотрена возможность использовать размер h1 заголовка (и других) для обычного текста сделав вот так

Сообщения

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

  1. хорошо
  2. подсказка
  3. предупреждение
  4. неправильно

Вот как это выглядит:

Цукерберг рекомендует:  Ruby - Python или Ruby для web

А теперь посмотрите сколько кода пришлось наклепать.

Навигация — одно из самых сложных мест в верстки, на нее тратится много времени и нервов (тем более когда ее нужно сделать адаптивной). Но bootstrap с этим хорошо справляется, он поможет с боковым и главным меню, вкладками, хлебных крошками и многим другим. Вот например главное меню:

Да и еще одна вещь — переход на другие страницы сайта (постраничная навигация). Ее легко оформить в такой вид:

А вот навигационная панель, ну ли хлебные крошки:

Иконочный шрифт

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

Конечно здесь намного меньше иконок чем у font-awesome, но и это радует.

Это только часть всех иконок — полный набор можете найти на официальном сайте.

Формы

Также мы имеем стили для оформления:

  • кнопок
  • радиокнопок
  • текстовых полей
  • чекбоксов

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

Таблицы

Для создания такой простенькой таблицы нужно добавить к ней .

Когда мы подробнее рассмотрим, как оформлять таблицы, то вы сможете:

  1. Чередовать цвета колонок
  2. Подсвечивать колонки при наведении
  3. А также делать таблицы которые настраиваются в зависимости от расширения

Кнопки

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

А вот их конструкция.

JavaScript элементы

Bootstrap имеет множество фишек связанных с анимацией:

  • Сворачивание и разворачивание окон
  • Появление модальных окон
  • Всплывающие подсказки
  • Создания табов
  • Слайдер

Все это будет у вас в руках при подключении одного файла bootstrap.js

Вывод

А если вы дошли до этого место, то у вас может возникнуть вопрос: «Нужно ли знать все компоненты bootstrap ?». Все зависит от ваших желаний, обычно пользуются только сеткой, но каждый верстальщик должен уметь пользоваться всем. Лично мне он нравится, простой, быстрый, удобный.

Переходите на следующий урок, если готовы быстро верстать сайты.

Bootstrap — Стилизация HTML списков

На этом уроке вы узнаете, как применять стили к различным видам списков с помощью Bootstrap.

Создание списков с помощью Bootstrap

Основные типы списков:

  • Маркированный список – это список элементов, порядок которых не имеет значения. Элементы списка начинаются с маркера.
  • Нумерованный список – это набор элементов, порядок которых имеет значение. Элементы нумерованного списка начинаются с выражения, включающего номер или букву.
  • Список определений – это список терминов и связанных с ними описаний.

Создание маркированного списка

Выше приведенный пример будет выглядеть примерно так:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
    • Элемент 2 уровня
    • Элемент 2 уровня
    • Элемент 2 уровня
  • Элемент маркированного списка
  • Элемент маркированного списка

Создание нумерованного списка

Выше приведенный пример будет выглядеть примерно так:

  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка

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

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

    или
      .

Выше приведенный пример будет выглядеть примерно так:

  • Главная
  • Тарифы
    • Свой*
    • Turbo Fresh
  • Форум
  • Контакты

Примечание: Класс .list-unstyled удаляет свойство CSS list-style и отступы слева (padding) только для элементов, которые расположены внутри контейнеров

    или
      .

Размещения нумерованных и маркированных списков в одну строку

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

    или
      . Класс .list-inline также добавляет небольшие отступы слева и справа (5px по умолчанию) ко всем элементам списка.

Вышеприведенный пример будет выглядеть примерно так:

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

Термины и связанные с ними описания могут быть также размещены в одну строку с использованием класса Bootstrap .dl-horizontal. Термины в горизонтальных списках определений будут обрезаны, если они слишком длинные, чтобы поместиться в левую колонку (160px по умолчанию). Однако, для устройств с маленьким экраном (ширина меньше 768px) списки определений изменяют своё отображение по умолчанию на вертикальное.

Вышеприведенный пример будет выглядеть примерно так:

Примечание: Обрезанная часть терминов в горизонтальных списках определений, будет замена на многоточие (. ), используя CSS свойство text-overflow.

Создание групповых списков с помощью Bootstrap

Групповые списки — это очень полезный компонент для отображения списка элементов в изящной манере. В наиболее общей форме групповой список представляет собой неупорядоченный список с элементами и классами.

Выше приведенный пример будет выглядеть примерно так:

  • Избранное
  • Пользователи
  • Статьи
  • Изображения

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

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

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

Выше приведенный пример будет выглядеть примерно так:

Примеры оформления HTML списков

В этом разделе рассмотрим различные варианты оформления HTML списков.

Компоненты

Типографика Glyphicon, выпадающие меню, навигационные панели, сообщения, и многе другое.

Glyphicon

Доступные символы

Включено 200 символов в формате шрифта из набора Glyphicon Halflings. Обычно Glyphicons Halflings недоступны бесплатно, но автор сделал их бесплатными специально для Bootstrap. Как благодарность, мы бы просили вас оставлять ссылку на Glyphicons, где есть такая возможность.

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

Как использовать

Для лучшей производительности, все значки нуждаются базовом классе и индивидуальном классе значков. Разместите следующий код в любом месте. Не забудьте поставить пробел между значком и текстом для правильного отступ (padding).

Не смешивайте с другими компонентами

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

Примеры

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

Информационный портал по безопасности

50+ лучших дополнений к Bootstrap

Автор: admin от 19-05-2015, 14:26, посмотрело: 4400

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

Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».

Наборы компонентов

Fuel UX

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

X-editable

Думаю, это незаменимый набор компонентов для инлайн-редактирования. Поддерживает различные версии Bootstrap и отлично работает без него (на jQuery).

Jasny

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

Bootstrap Form Helper

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

Leapstrap

Набор элементов для поддержки плагина Leapstrap контроллера. Это довольно-таки необычная вещица, поэтому включаю ее в этот список.

Отдельные компоненты

jQuery Bootpag

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

Tocify

Компонент для отслеживания содержания страницы. Очень часто не хватает именно этого компонента для создания современных вебсайтов.

Небольшой и очень простой в использовании компонент для предпросмотра контента по ссылке (наподобие Facebook-предпросмотра).

Flippant.js

Небольшой скрипт для создания «двусторонних» блоков. Идеально для создания форм, карточек портфолио и т. п.

Bootstrap Tour

Отличное дополнение к Bootstrap, которое позволяет создавать пошаговый тур для новых посетителей вашего сайта.

Bootstro.js

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

Yet Another MegaMenu (YAMM)

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

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

Bootstrap Tree View

Простое решение для отображения древовидной структуры. Данный компонент поддерживает стандартные Glyph-иконки.

GTreeTable

Еще одно дополнение, позволяющее создавать древовидную структуру. Отличается обилием функционала: Drag&Drop, редактирование и т. п.

Bootstrap Star Rating

Компонент для простого создания рейтинга, легко кастомизируется. По опыту могу сказать: очень часто приходится искать подобный компонент.

Gridmanager.js

Редактор контента, основанный на строках и колонках Bootstrap-фреймворка. Пока не нашел, как применить на практике. Выложил больше, как пример реализации.

Компоненты Для Форм

Bootstrap Tags

Компонент для простого создания тегов. Очень прост в использовании и тоже легко кастомизируется. Работает со всеми версиями Bootstrap.

Bootstrap Switch

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

Bootstrap Maxlength

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

Bootstrap Select

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

Chosen

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

Bootstrap Multiselect

Еще один вариант расширения поля списка. Данный скрипт обрабатывает события при открытии / закрытии / выборе и т. п. Никогда ведь не знаешь, что попросит клиент…

Bootstrap Validator

Незаменимый компонент при работе с формами в Bootstrap-фреймворке. Экономит очень много времени: кроме проверки, содержит уже готовое оформление полей формы.

jqBootstrapValidation

Еще один компонент (вариант) для валидации форм на Bootstrap-фреймворке. Содержит большое количество опций для создания проверки введенных пользователем данных.

jQuery File Upload

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

Bootstrap Tag Autocomplete

Компонент для простого создания автодополнения. Очень простой в использовании и легкий (по весу) скрипт. Думаю, заслуживает добавления в копилку инструментов.

Tag Manager

Готовый скрипт (компонент) для создания тегов. Очень много опций и, соответственно, возможностей использования.

Typeahead

Компонент для авто дополнения с текстовом поле. Используются два скрипта (для поиска и отображения), которые можно использовать и вместе, и отдельно.

Slider for Bootstrap

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

Tokenfield for Bootstrap

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

Label in Place

Легкий скрипт для создания необычного эффекта объединения label-элемента с полем ввода. Имеет множество опций. Иногда даже может пригодиться :).

Strength Meter

Компонент для определения сложности введенного пароля. Простое решение для распространенной проблемы. Включает много опций и готовое оформление.

Bootstrap File Input

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

Ladda UI for Bootstrap 3

Довольно интересная задумка с использованием индикаторов загрузки прямо на кнопках.

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

Date & Time Pickers

Сolor Pickers

Colorpicker for Bootstrap

Editors

Tables

Media & Galleries

Bootstrap Image Gallery

Bootstrap Icon Picker

Dialogs & Notifications

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

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

Дмитрий Кабаков
WordPress Developer

Bootstrap сетка за 15 минут

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

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

В данной статье рассмотрим такое базовое понятие как, bootstrap сетка — она является фундаментом данного фреймворка.

1. Rows и Columns

Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows — ряды, columns — колонки)

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

Rows (ряды) — это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.

Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки — может привести к нарушению макета

Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ — padding — в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила «отодвигают» колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.

2. Row разделены 12

Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку — нам необходимо указать ее ширину — ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер , где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 — 25% (3/12) и т.д.

3. Обертывание колонок

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

В примере первые 2 колонки имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.

4. Классы для размеров экрана

Помните мы писали .col-md-номер во втором шаге? Этот -md- означает средние размеры экрана (от слова medium — средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:

xs — (Extra small) — Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер

sm — (Small Screens) — Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер

md — (Medium) — Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер

lg — (Large) — Большие экраны с высоким разрешением. .col-lg-номер

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

5. Clearfix

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

6. Offsets (Смещения) — ваши друзья

Изначально все колонки выравнены по левому краю и следуют строго друг за другом. Если количество колонок будет меньше 12, то справа останется свободное место.

Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок . Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие .

7. Классы Push и Pull

Классы .push и .pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс .push двигает колонку к правому краю, а класс .pull — к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.

Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте — xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.

Заключение

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

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 код объекта можно двумя способами. Выбирайте тот, что больше нравится.

    Краткое введение в 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 ₽ (до налогов)

    Цукерберг рекомендует:  Стильный стикер
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих