BOOTSTRAP 3.3.7


Bootstrap
Bootstrap – это наиболее популярный фреймворк HTML, CSS и JS для разработки в первую очередь мобильных проектов в интернете.

  • Bootstrap

    Предназначен для всех, и везде.

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

     

     

    sass-lessПрепроцессоры

    Загрузочный корабли с ванильным CSS, но его исходный код использует два самых популярных препроцессоров CSS - Less и Sass. работают быстро с предварительно скомпилированный CSS или на источнике.

    .

    devicesОдна структура, на все устройство.

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

     

    componentsПолный набор функций

    С Bootstrap, вы получите обширную и красивую документацию для общих HTML элементов, десятки пользовательских HTML и CSS компонентов, а также удивительные плагинов JQuery.

    Bootstrap с открытым исходным кодом.
    Фрейморк размещается, развиваться и поддерживаться на GitHub.

    Перейти на GitHub

  • Getting started / Начало работы

    Загрузка

    Bootstrap (currently v3.2.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

    Bootstrap

    Собранный и минимизированный CSS, JavaScript и шрифты. В пакет не входят документы или файлы с оригинальным исходным кодом.

    Source code / Исходный код

    Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

    Sass

    Bootstrap с Less, адаптированный для Sass, что обеспечивает простую интеграцию в проекты Rails, Compass, или Sass.

    Bootstrap CDN

    Участники MaxCDN любезно предоставили поддержку CDN для CSS и JavaScript Bootstrap. Просто воспользуйтесь этими ссылками для Bootstrap CDN.

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    Установка с помощью Bower

    Установите и работайте с Less, CSS, JavaScript и шрифтами Bootstrap с помощью Bower.

    $ bower install bootstrap

    Что входит в пакет загрузки

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

    Требуется jQuery

    Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

    Предварительно скомпилированный Bootstrap

    Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:

    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        └── glyphicons-halflings-regular.woff

    Это самая простая форма Bootstrap: предварительно скомпилированные файлы, которые можно использовать практически в любом веб-проекте, просто перетащив их в него. В комплект входят скомпилированные CSS и JS (bootstrap.*), а также скомпилированные и минимизированные CSS и JS (bootstrap.min.*). В комплект входят шрифты от Glyphicons в качестве дополнительной темы Bootstrap.

    Исходный код Bootstrap

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

    bootstrap/
    ├── less/
    ├── js/
    ├── fonts/
    ├── dist/
    │   ├── css/
    │   ├── js/
    │   └── fonts/
    └── docs/
        └── examples/

    Папки less/, js/ и fonts/ содержат исходный код для наших CSS, JS и шрифтов (соответственно). Папка dist/ содержит все, что входит в пакет предварительно скомпилированной версии, описанный выше. Папка docs/ содержит исходный код для нашей документации, а examples/ — примеры использования Bootstrap. Помимо этого, все прочие файлы, входящие в пакет, обеспечивают поддержку, обновление и содержат лицензионную информацию.

    Compiling CSS and JavaScript

    Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

    Installing Grunt

    To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

    Then, from the command line:

    1. Install grunt-cli globally with npm install -g grunt-cli.
    2. Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.

    When completed, you'll be able to run the various Grunt commands provided from the command line.

    Available Grunt commands

    grunt dist (Just compile CSS and JavaScript)

    Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

    grunt watch (Watch)

    Watches the Less source files and automatically recompiles them to CSS whenever you save a change.

    grunt test (Run tests)

    Runs JSHint and runs the QUnit tests headlessly in PhantomJS.

    grunt (Build absolutely everything and run tests)

    Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.

    Troubleshooting

    Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

    Основной шаблон

    Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

    Скопируйте HTML-код, приведенный ниже, чтобы начать работу с минимизированным документом Bootstrap.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

    Примеры

    Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

    Сообщество

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

    Вы также можете подписаться на @twbootstrap в Twitter, чтобы получать самые свежие новости и смотреть замечательные видеоклипы.

    Отключение адаптивности

    Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like in this non-responsive example.

    Как отключить адаптирование страниц

    Поддержка продуктов третьих сторон

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

    Box-sizing

    Некоторые программы, созданные третьими сторонами, включая Google Maps и Google Custom Search Engine, конфликтуют с Bootstrap из-за * { box-sizing: border-box; }. Правило, которое приводит к этому padding, не влияет на финальную расчетную ширину элемента. Узнайте больше о моделях и размерах на CSS Tricks.

    В зависимости от ситуации вы можете переписать необходимые сегменты (Вариант 1) или обновить размеры целых областей (Вариант 2).

    /* Box-sizing resets
     *
     * Reset individual elements or override regions to avoid conflicts due to
     * global box model settings of Bootstrap. Two options, individual overrides and
     * region resets, are available as plain CSS and uncompiled Less formats.
     */
    
    /* Option 1A: Override a single element's box model via CSS */
    .element {
      -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
    }
    
    /* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
    .element {
      .box-sizing(content-box);
    }
    
    /* Option 2A: Reset an entire region via CSS */
    .reset-box-sizing,
    .reset-box-sizing *,
    .reset-box-sizing *:before,
    .reset-box-sizing *:after {
      -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
    }
    
    /* Option 2B: Reset an entire region with a custom Less mixin */
    .reset-box-sizing {
      &,
      *,
      *:before,
      *:after {
        .box-sizing(content-box);
      }
    }
    .element {
      .reset-box-sizing();
    }

    Доступность

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

    FAQ по лицензиям

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

    Переводы

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

    We don't help organize or host translations, we just link to them.

    Finished a new or better translation? Open a pull request to add it to our list.

  • CSS

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

    Документ HTML5

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

    <!DOCTYPE html>
    <html lang="en">
      ...
    </html>

    Для мобильных устройств

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

    Для правильного отображения и сенсорного масштабирования добавьте метатег страницы в сегмент <head> своего проекта.

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Вы можете отключить масштабирование на мобильных устройствах, добавив сегмент user-scalable=no в метатег страницы. Так вы отключите масштабирование, и пользователи смогут только прокручивать его, в результате чего ваш сайт будет больше похож на собственное приложение. В общем, мы не рекомендуем использовать эту функцию на всех сайтах, будьте внимательны!

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    Bootstrap устанавливает основные стили отображения, печати и ссылок. В частности, мы:

    • Устанавливаем background-color: #fff; на body
    • Используем атрибуты @font-family-base,@font-size-base и @line-height-base в качестве основных параметров печати
    • Устанавливаем общий цвет ссылок с помощью @link-color и применяем подчеркивание ссылок только на :hover

    Эти стили находятся в scaffolding.less.

    Normalize.css

    Для оптимизации работы с различными интернет-браузерами мы используем Normalize.css, проект Николаса Галлахера (Nicolas Gallagher) и Джонатана Нила (Jonathan Neal).

    Контейнеры

    Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

    Use .container for a responsive fixed width container.

    <div class="container">
      ...
    </div>

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

    <div class="container-fluid">
      ...
    </div>

    Сетка

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

    Введение

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

    • Ряды нужно размещать в .container (постоянная ширина) или .container-fluid (полная ширина) для надлежащего выравнивания и заполнения.
    • Ряды используются для создания горизонтальных групп колонок.
    • Содержимое страницы помещается в колонки, и только колонки могут быть ближайшими дочерними объектами рядов.
    • Заранее заданные классы сетки, такие как .row и .col-xs-4, используются для быстрого создания макетов сетки. Примеси Less также можно использовать для более содержательных макетов.
    • Между колонками существует интервал (пробел между содержимым разных колонок), который создается с помощью сегмента padding. Такое заполнение компенсируется в рядах негативными полями .row.
    • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
    • Колонки сетки создаются с указанием номера одной из двенадцати доступных колонок, которую вы хотите расширить. Например, для создания трех одинаковых колонок вам понадобится три сегмента .col-xs-4.
    • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
    • Классы сетки применяются к устройствам с шириной экрана больше или равной размером контрольных точек, а новые классы сетки предназначены для устройств меньшего размера. Таким образом, применение любых классов .col-md- к элементу не только затронет его отображение на устройствах среднего размера, но и на более крупных устройствах, если класс .col-lg- будет отсутствовать.

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

    Запросы мультимедиа

    Мы используем следующие запросы мультимедиа в наших файлах Less, чтобы создавать ключевые контрольные точки в сетке.

    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */
    
    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }
    
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }
    
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

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

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

    Возможности сетки

    Полезная таблица, показывающая, как аспекты сетки Bootstrap работают на различных устройствах.

    Очень маленькие устройства Телефоны (<768px) Маленькие устройства Планшеты (≥768px) Средние устройства Компьютеры (≥992px) Большие устройства Компьютеры (≥1200px)
    Работа сетки Всегда горизонтальная Сначала сжатая, горизонтальная над контрольной точкой
    Ширина контейнера Нет (авто) 750px 970px 1170px
    Префикс класса .col-xs- .col-sm- .col-md- .col-lg-
    # of columns 12
    Ширина колонок Авто ~62px ~81px ~97px
    Ширина интервала 30px (15px с каждой стороны колонки)
    Вложения Да
    Отступ Да
    Порядок колонок Да

    Пример: подведенная-к-горизонтальной

    С помощью одного набора классов сетки .col-md-* вы можете создавать основную сетку, которая сначала отображается в сжатом виде на мобильных устройствах и планшетах (очень маленьких и маленьких), а затем становится горизонтальной на компьютерах (средних устройствах). Помещайте колонки сетки в любой .row.

    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-8
    .col-md-4
    .col-md-4
    .col-md-4
    .col-md-4
    .col-md-6
    .col-md-6
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>

    Пример: «резиновый» контейнер

    Превратите любой макет сетки с постоянной шириной в макет с полной шириной, заменив внешний .container на .container-fluid.

    <div class="container-fluid">
      <div class="row">
        ...
      </div>
    </div>

    Пример: мобильные устройства и компьютеры

    Не хотите, чтобы колонки просто сжимались на миниатюрных устройствах? Используйте классы сетки для очень маленьких и средних устройств, добавив .col-xs-* .col-md-* в свои колонки. См. пример ниже, чтобы разобраться с тем, как это работает.

    .col-xs-12 .col-md-8
    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4
    .col-xs-6 .col-md-4
    .col-xs-6
    .col-xs-6
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>

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

    Тот же принцип, что и в предыдущем примере, позволяет создавать еще более динамичные и мощные макеты с помощью классов .col-sm-* для планшета.

    .col-xs-12 .col-sm-6 .col-md-8
    .col-xs-6 .col-md-4
    .col-xs-6 .col-sm-4
    .col-xs-6 .col-sm-4
    .col-xs-6 .col-sm-4
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      <!-- Optional: clear the XS cols if their content doesn't match in height -->
      <div class="clearfix visible-xs-block"></div>
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>

    Example: Column wrapping

    If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

    .col-xs-9
    .col-xs-4
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
    .col-xs-6
    Subsequent columns continue along the new line.
    <div class="row">
      <div class="col-xs-9">.col-xs-9</div>
      <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
      <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
    </div>

    Настройка адаптивных колонок

    With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
    .col-xs-6 .col-sm-3
    .col-xs-6 .col-sm-3
    .col-xs-6 .col-sm-3
    <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    
      <!-- Add the extra clearfix for only the required viewport -->
      <div class="clearfix visible-xs-block"></div>
    
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

    In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

    <div class="row">
      <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
      <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>
    
    <div class="row">
      <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
      <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
    </div>

    Колонки с отступом

    Перемещайте колонки вправо с помощью классов .col-md-offset-*. Эти классы увеличивают поле слева от колонки при помощи колонок *. Например, .col-md-offset-4 перемещает .col-md-4 на четыре колонки.

    .col-md-4
    .col-md-4 .col-md-offset-4
    .col-md-3 .col-md-offset-3
    .col-md-3 .col-md-offset-3
    .col-md-6 .col-md-offset-3

    <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>

    Вложенные колонки

    To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

    Level 1: .col-sm-9

    Печать

    Заголовки

    Код

    Встроенные

    Встроенные сегменты кода помещаются в теги <code>.

    Например, <section> нужно прописывать как встроенный код.
    For example, <code>&lt;section&gt;</code> should be wrapped as inline.

    User input

    Используйте <kbd>, чтобы отметить поле ввода, информация в которое обычно вводится с клавиатуры.

    To switch directories, type cd followed by the name of the directory.
    To edit settings, press ctrl + ,
    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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

    Используйте <pre> для нескольких строк кода. Для надлежащего отображения убедитесь, что в коде нет угловых скобок.

    <p>Sample text here...</p>
    <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

    Вы также можете добавить класс .pre-scrollable, который устанавливает максимальную высоту 350px и добавляет вертикальную полосу прокрутки.

    Переменные

    For indicating variables use the <var> tag.

    y = mx + b

    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>

    Sample output

    For indicating blocks sample output from a program use the <samp> tag.

    This text is meant to be treated as sample output from a computer program.

    <samp>This text is meant to be treated as sample output from a computer program.</samp>

    Таблицы

    Базовый пример

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

    # Имя Фамилия Имя пользователя
    1 Марк Отто @mdo
    2 Джейкоб Торнтон @fat
    3 Ларри Птица @twitter
    <table class="table">
      ...
    </table>

    Ряды с полосками

    Используйте .table-striped, чтобы сделать таблицу в <tbody> похожей на зебру.

    Совместимость с разными интернет-браузерами

    Таблицы с полосами отображаются через селектор CSS :nth-child, который не поддерживается в Internet Explorer 8.

    # Имя Фамилия Имя пользователя
    1 Марк Отто @mdo
    2 Джейкоб Торнтон @fat
    3 Ларри Птица @twitter
    <table class="table table-striped">
      ...
    </table>

    Таблица с границами

    Добавьте .table-bordered, чтобы показать границы со всех сторон таблицы и во всех ячейках.

    # Имя Фамилия Имя пользователя
    1 Марк Отто @mdo
    Марк Отто @TwBootstrap
    2 Джейкоб Торнтон @fat
    3 Ларри Птица @twitter
    <table class="table table-bordered">
      ...
    </table>

    Ряды при наведении курсора

    Добавьте .table-hover, чтобы включить режим «плавающей таблицы» в <tbody>.

    # Имя Фамилия Имя пользователя
    1 Марк Отто @mdo
    2 Джейкоб Торнтон @fat
    3 Ларри Птица @twitter
    <table class="table table-hover">
      ...
    </table>

    Сокращенная таблица

    Добавьте .table-condensed, чтобы сделать таблицы более компактными за счет сокращения заполнения ячеек на половину.

    # Имя Фамилия Имя пользователя
    1 Марк Отто @mdo
    2 Джейкоб Торнтон @fat
    3 Ларри Птица @twitter
    <table class="table table-condensed">
      ...
    </table>

    Контекстные классы

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

    Класс Описание
    .active Изменяет цвет строки или ячейки при наведении на нее курсора мыши
    .success Показывает успешное или позитивное действие
    .info Показывает нейтральное информативное изменение или действие
    .warning Показывает предупреждения, которым нужно уделить внимание
    .danger Показывает опасное или потенциально негативное действие
    # Заголовок колонки Заголовок колонки Заголовок колонки
    1 Содержимое колонки Содержимое колонки Содержимое колонки
    2 Содержимое колонки Содержимое колонки Содержимое колонки
    3 Содержимое колонки Содержимое колонки Содержимое колонки
    4 Содержимое колонки Содержимое колонки Содержимое колонки
    5 Содержимое колонки Содержимое колонки Содержимое колонки
    6 Содержимое колонки Содержимое колонки Содержимое колонки
    7 Содержимое колонки Содержимое колонки Содержимое колонки
    8 Содержимое колонки Содержимое колонки Содержимое колонки
    9 Содержимое колонки Содержимое колонки Содержимое колонки
    <!-- On rows -->
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>
    
    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

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

    Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

    Firefox and fieldsets

    Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in Bootstrap:

    @-moz-document url-prefix() {
      fieldset { display: table-cell; }
    }

    For more information, read this Stack Overflow answer.

    # Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
    1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
    2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
    3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
    # Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
    1 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
    2 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
    3 Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>

    Формы

    Базовый пример

    Отдельные элементы управления формы автоматически получают стандартное оформление. Все текстовые элементы <input>, <textarea> и <select> с .form-control установлены на ширину width: 100%; по умолчанию. Помещайте метки и элементы управления в .form-group для оптимального размещения.

    Примерный текст запроса о помощи.

    <form role="form">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

    Не путайте группы форм и группы ввода

    Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

    Встроенная форма

    Добавьте .form-inline к своей форме <form> для элементов управления выравниванием слева и встроенного блока. Применимо только в формах для окон шириной не менее 768px.

    Требуются индивидуальные установки ширины

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

    Всегда добавляйте метки

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

    @

    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon">@</div>
          <input class="form-control" type="email" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>

    Горизонтальная форма

    Используйте заранее заданные классы сетки Bootstrap, чтобы выравнивать метки и группы элементов управления формами в горизонтальном макете, добавив .form-horizontal к форме. После этого группы форм .form-group будут работать как ряды сетки, поэтому .row будут не нужны.

    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>

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

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

    Поля ввода

    Наиболее часто встречающиеся элементы управления формами и поля ввода текста, в том числе поддержка всех типов HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.

    Требуется указание типа

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

    <input type="text" class="form-control" placeholder="Text input">

    Группы ввода

    To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

    Текстовая область

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

    <textarea class="form-control" rows="3"></textarea>

    Флажки и радиокнопки

    Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

    A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

    По умолчанию (сжатые)

    <div class="checkbox">
      <label>
        <input type="checkbox" value="">
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
      </label>
    </div>
    
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>

    Inline checkboxes and radios

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

    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    </label>
    
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
    </label>

    Меню выбора

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

     

    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>

    Статическое управление

    Если вам нужно разместить простой текст рядом с меткой формы в горизонтальной форме, используйте класс .form-control-static на <p>.

    email@example.com

    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <p class="form-control-static">email@example.com</p>
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
    </form>

    Фокус ввода

    Мы заменили стандартный контур outline на некоторых элементах управления формами на тень box-shadow для фокусировки :focus.

    Демонстрация состояния :focus

    В приведенном выше примере к полю ввода применено пользовательское оформление из нашей документации, чтобы показать состояние :focus на .form-control.

    Отключенные поля ввода

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

    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

    Отключенные наборы полей

    Добавьте атрибут disabled к набору полей <fieldset>, чтобы отключить сразу все элементы управления в нем <fieldset>.

    Caveat about link functionality of <a>

    Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

    Совместимость с разными интернет-браузерами

    Данные стили Bootstrap применяются во всех интернет-браузерах, однако Internet Explorer 9 и ниже не поддерживают атрибут disabled для <fieldset>. Для отключения набора полей в этих браузерах воспользуйтесь JavaScript.

    <form role="form">
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput">Disabled input</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="form-group">
          <label for="disabledSelect">Disabled select menu</label>
          <select id="disabledSelect" class="form-control">
            <option>Disabled select</option>
          </select>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Can't check this
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>

    Readonly inputs

    Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

    Подтверждения

    Bootstrap включает в себя формы подтверждения для ошибок, уведомлений, сообщений об успешном выполнении действий на элементах управления формами. Чтобы ими воспользоваться, добавьте .has-warning, .has-error, или .has-success к материнскому элементу. Формы подтверждения будут применены к любым .control-label, .form-control, и .help-block в пределах данного элемента.

    <div class="form-group has-success">
      <label class="control-label" for="inputSuccess1">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess1">
    </div>
    <div class="form-group has-warning">
      <label class="control-label" for="inputWarning1">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning1">
    </div>
    <div class="form-group has-error">
      <label class="control-label" for="inputError1">Input with error</label>
      <input type="text" class="form-control" id="inputError1">
    </div>
    <div class="has-error">
      <div class="radio">
        <label class="checkbox">
          <input type="checkbox" id="checkboxError" value="option1">
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
    </div>
    <div class="has-success">
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="radiosSuccess1" value="option1" checked>
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="radiosSuccess2" value="option2">
          Option two can be something else and selecting it will deselect option one
        </label>
      </div>
    </div>

    С дополнительными значками

    You can also add optional feedback icons with the addition of .has-feedback and the right icon.

    Feedback icons only work with textual <input class="form-control"> elements.

    Icons, labels, and input groups

    Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
      <label class="control-label" for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>

    Optional icons in horizontal and inline forms

    <form class="form-horizontal" role="form">
      <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="inputSuccess3">
          <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
      </div>
    </form>
    <form class="form-inline" role="form">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess4">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess4">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </form>

    Optional icons with hidden .sr-only labels

    For form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.

    <div class="form-group has-success has-feedback">
      <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
      <input type="text" class="form-control" id="inputSuccess5">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>

    Установка размеров

    Устанавливайте высоту с помощью таких классов, как .input-lg, и ширину — с помощью .col-lg-*.

    Изменение высоты

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

    <input class="form-control input-lg" type="text" placeholder=".input-lg">
    <input class="form-control" type="text" placeholder="Default input">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
    
    <select class="form-control input-lg">...</select>
    <select class="form-control">...</select>
    <select class="form-control input-sm">...</select>

    Horizontal form group sizes

    Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

    <form class="form-horizontal" role="form">
      <div class="form-group form-group-lg">
        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
        </div>
      </div>
      <div class="form-group form-group-sm">
        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
        </div>
      </div>
    </form>

    Размеры колонок

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

    <div class="row">
      <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
      </div>
      <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
      </div>
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
      </div>
    </div>

    Текст справки

    Справочный текст для элементов управления формами.

    Блок справочного текста, расположенный на новой строке. Может быть более одной строки.
    <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

    Кнопки

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

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

    <!-- Standard button -->
    <button type="button" class="btn btn-default">Default</button>
    
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">Primary</button>
    
    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">Success</button>
    
    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">Info</button>
    
    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">Warning</button>
    
    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">Danger</button>
    
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">Link</button>

    Размеры

    Вам нравятся большие или маленькие кнопки? Для изменения размера добавьте .btn-lg, .btn-sm, или .btn-xs.

    <p>
      <button type="button" class="btn btn-primary btn-lg">Large button</button>
      <button type="button" class="btn btn-default btn-lg">Large button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">Default button</button>
      <button type="button" class="btn btn-default">Default button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">Small button</button>
      <button type="button" class="btn btn-default btn-sm">Small button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
      <button type="button" class="btn btn-default btn-xs">Extra small button</button>
    </p>

    Создавайте кнопки для блоков — совпадающие по ширине с материнским элементом — с помощью .btn-block.

    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

    Active state

    Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state programmatically.

    Кнопки

    Не нужно добавлять :active, так как это псевдокласс, но если вы хотите, чтобы кнопка выглядела так, можете добавить .active.

    <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
    <button type="button" class="btn btn-default btn-lg active">Button</button>

    Элементы привязки

    Добавьте класс .active к кнопке <a>.

    <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

    Отключенное состояние

    Чтобы кнопки выглядели отключенными, их можно сделать на 50% тусклее.

    Кнопки

    Добавляйте атрибут disabled к кнопкам <button>.

    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

    Совместимость с разными интернет-браузерами

    Если вы добавите атрибут disabled к <button>, Internet Explorer 9 и ниже будет отображать серый текст с некрасивой тенью, и мы здесь ничего не можем поделать.

    Элементы привязки

    Добавляйте класс .disabled к кнопкам <a>.

    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

    Используйте .disabled в качестве служебного класса так же, как общий класс .active, поэтому здесь не требуется префикс.

    Link functionality caveat

    This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

    Использование в зависимости от ситуации

    Классы кнопок могут использоваться с элементами <a> и <button>, но только элементы <button> поддерживаются нашей навигацией и компонентами панелей навигации.

    Теги кнопки

    Используйте классы кнопок на элементах <a>, <button> или<input>.

    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

    Отображение в разных интернет-браузерах

    В качестве лучшего метода мы рекомендуем использовать элемент <button> там, где это только возможно, чтобы в разных браузерах элементы отображались одинаково.

    Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

    Изображения

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

    Изображения в Bootstrap 3 могут стать адаптируемыми, если вы добавите класс .img-responsive. Так вы применяете max-width: 100%; и height: auto; к изображению, в результате чего оно хорошо масштабируется вместе с родительским элементом.

    <img src="..." class="img-responsive" alt="Responsive image">

    Image shapes

    Добавляйте классы в элемент <img>, чтобы легко вставлять изображения в любые проекты.

    Совместимость с разными интернет-браузерами

    Имейте в виду, что Internet Explorer 8 не поддерживает закругленные края

    140x140 140x140 140x140
    <img src="..." alt="..." class="img-rounded">
    <img src="..." alt="..." class="img-circle">
    <img src="..." alt="..." class="img-thumbnail">

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

    Contextual colors

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

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    Nullam id dolor id nibh ultricies vehicula ut id elit.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    Maecenas sed diam eget risus varius blandit sit amet non magna.

    Etiam porta sem malesuada magna mollis euismod.

    Donec ullamcorper nulla non metus auctor fringilla.

    <p class="text-muted">...</p>
    <p class="text-primary">...</p>
    <p class="text-success">...</p>
    <p class="text-info">...</p>
    <p class="text-warning">...</p>
    <p class="text-danger">...</p>

    Индивидуальные особенности

    Иногда классы выделения нельзя применить из-за индивидуальных особенностей других селекторов. В большинстве случаев самый эффективный способ справиться с этим — поместить текст в <span> вместе с классом.

    Contextual backgrounds

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

    Nullam id dolor id nibh ultricies vehicula ut id elit.

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    Maecenas sed diam eget risus varius blandit sit amet non magna.

    Etiam porta sem malesuada magna mollis euismod.

    Donec ullamcorper nulla non metus auctor fringilla.

    <p class="bg-primary">...</p>
    <p class="bg-success">...</p>
    <p class="bg-info">...</p>
    <p class="bg-warning">...</p>
    <p class="bg-danger">...</p>

    Индивидуальные особенности

    Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

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

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

    <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

    Carets

    Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

    <span class="caret"></span>

    Quick floats

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

    <div class="pull-left">...</div>
    <div class="pull-right">...</div>
    // Classes
    .pull-left {
      float: left !important;
    }
    .pull-right {
      float: right !important;
    }
    
    // Usage as mixins
    .element {
      .pull-left();
    }
    .another-element {
      .pull-right();
    }

    Не для использования в панелях навигации

    To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

    Center content blocks

    Выберите необходимый элемент display: block и поместите его в центр с помощью margin. Функция доступна как примесь и как класс.

    <div class="center-block">...</div>
    // Classes
    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    // Usage as mixins
    .element {
      .center-block();
    }

    Clearfix

    Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

    <!-- Usage as a class -->
    <div class="clearfix">...</div>
    // Mixin itself
    .clearfix() {
      &:before,
      &:after {
        content: " ";
        display: table;
      }
      &:after {
        clear: both;
      }
    }
    
    // Usage as a Mixin
    .element {
      .clearfix();
    }

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

    Сделайте элемент отображаемым или скрытым (работает так же для читалок), используя классы .show и .hidden. Эти классы используют свойство !important, чтобы избежать конфликтов, таких, как quick floats. Эти классы доступны только для блочных элементов. Они так же могут быть использованы, как примеси.

    .hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

    Кроме того, .invisible можно использовать, чтобы включать видимость элемента, то есть display не изменяется и элемент все еще может влиять на состояние документа.

    <div class="show">...</div>
    <div class="hidden">...</div>
    // Classes
    .show {
      display: block !important;
    }
    .hidden {
      display: none !important;
      visibility: hidden !important;
    }
    .invisible {
      visibility: hidden;
    }
    
    // Usage as mixins
    .element {
      .show();
    }
    .another-element {
      .hidden();
    }

    Screen reader and keyboard navigation content

    Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
    // Usage as a Mixin
    .skip-navigation {
      .sr-only();
      .sr-only-focusable();
    }

    Image replacement

    Используйте класс или примесь .text-hide, чтобы заменять текстовое содержимое элементов на фоновое изображение.

    <h1 class="text-hide">Custom heading</h1>
    // Usage as a Mixin
    .heading {
      .text-hide();
    }

    Адаптивные утилиты

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

    Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

    Доступные классы

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

    Очень маленькие устройства Телефоны (<768px) Маленькие устройства Планшеты (≥768px) Средние устройства Компьютеры (≥992px) Большие устройства Компьютеры (≥1200px)
    .visible-xs-* Отображается
    .visible-sm-* Отображается
    .visible-md-* Отображается
    .visible-lg-* Отображается
    .hidden-xs Отображается Отображается Отображается
    .hidden-sm Отображается Отображается Отображается
    .hidden-md Отображается Отображается Отображается
    .hidden-lg Отображается Отображается Отображается

    As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

    Group of classes CSS display
    .visible-*-block display: block;
    .visible-*-inline display: inline;
    .visible-*-inline-block display: inline-block;

    So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

    The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

    Классы печати

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

    Classes Интернет-браузер Печать
    .visible-print-block
    .visible-print-inline
    .visible-print-inline-block
    Отображается
    .hidden-print Отображается

    The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

    Тестовые сценарии

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

    Отображение

    Зеленые галочки показывают, что элемент отображается на вашем текущем экране.

    Средний
    ✔ Отображается на большом
    ✔ Отображается на среднем и большом экране
    ✔ Отображается на маленьком и большом экране
    ✔ Отображается на очень маленьком и большом экране

    Сокрытие

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

    Средний
    ✔ Скрыт на большом экране
    ✔ Скрыт на среднем и большом экране
    ✔ Скрыт на маленьком и большом экране
    ✔ Скрыт на очень маленьком и большом экране

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

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

    Grid variables and mixins are covered within the Grid system section.

    Compiling Bootstrap

    Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.

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

    Переменные

    Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

    Цвета

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

    @gray-darker:  lighten(#000, 13.5%); // #222
    @gray-dark:    lighten(#000, 20%);   // #333
    @gray:         lighten(#000, 33.5%); // #555
    @gray-light:   lighten(#000, 46.7%); // #777
    @gray-lighter: lighten(#000, 93.5%); // #eee
    @brand-primary: #428bca;
    @brand-success: #5cb85c;
    @brand-info:    #5bc0de;
    @brand-warning: #f0ad4e;
    @brand-danger:  #d9534f;

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

    // Use as-is
    .masthead {
      background-color: @brand-primary;
    }
    
    // Reassigned variables in Less
    @alert-message-background: @brand-info;
    .alert {
      background-color: @alert-message-background;
    }

    Формирование шаблонов

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

    // Scaffolding
    @body-bg:    #fff;
    @text-color: @black-50;

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

    // Variables
    @link-color:       @brand-primary;
    @link-hover-color: darken(@link-color, 15%);
    
    // Usage
    a {
      color: @link-color;
      text-decoration: none;
    
      &:hover {
        color: @link-hover-color;
        text-decoration: underline;
      }
    }

    Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

    Печать

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

    @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    @font-family-serif:       Georgia, "Times New Roman", Times, serif;
    @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
    @font-family-base:        @font-family-sans-serif;
    
    @font-size-base:          14px;
    @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
    @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
    
    @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
    @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
    @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
    @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
    @font-size-h5:            @font-size-base;
    @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
    
    @line-height-base:        1.428571429; // 20/14
    @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
    
    @headings-font-family:    inherit;
    @headings-font-weight:    500;
    @headings-line-height:    1.1;
    @headings-color:          inherit;

    Значки

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

    @icon-font-path:          "../fonts/";
    @icon-font-name:          "glyphicons-halflings-regular";

    Компоненты

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

    @padding-base-vertical:          6px;
    @padding-base-horizontal:        12px;
    
    @padding-large-vertical:         10px;
    @padding-large-horizontal:       16px;
    
    @padding-small-vertical:         5px;
    @padding-small-horizontal:       10px;
    
    @padding-xs-vertical:            1px;
    @padding-xs-horizontal:          5px;
    
    @line-height-large:              1.33;
    @line-height-small:              1.5;
    
    @border-radius-base:             4px;
    @border-radius-large:            6px;
    @border-radius-small:            3px;
    
    @component-active-color:         #fff;
    @component-active-bg:            @brand-primary;
    
    @caret-width-base:               4px;
    @caret-width-large:              5px;

    Vendor mixins

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

    Box-sizing

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

    The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

    .box-sizing(@box-model) {
      -webkit-box-sizing: @box-model; // Safari <= 5
         -moz-box-sizing: @box-model; // Firefox <= 19
              box-sizing: @box-model;
    }

    Закругленные углы

    Сегодня все современные интернет-браузеры поддерживают свойство border-radius без префикса. Таким образом, нет необходимости в примеси .border-radius(), однако в Bootstrap есть возможность быстрого закругления углов с определенной стороны объекта.

    .border-top-radius(@radius) {
      border-top-right-radius: @radius;
       border-top-left-radius: @radius;
    }
    .border-right-radius(@radius) {
      border-bottom-right-radius: @radius;
         border-top-right-radius: @radius;
    }
    .border-bottom-radius(@radius) {
      border-bottom-right-radius: @radius;
       border-bottom-left-radius: @radius;
    }
    .border-left-radius(@radius) {
      border-bottom-left-radius: @radius;
         border-top-left-radius: @radius;
    }

    Тени

    Если ваша целевая аудитория использует новейшие и самые качественные интернет-браузеры и устройства, обязательно включите свойство box-shadow. Если вам нужна поддержка старых устройств на базе Android (до версии 4) и iOS (до iOS 5), используйте исключенную примесь, чтобы получить необходимый префикс -webkit.

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

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

    .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
      -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
              box-shadow: @shadow;
    }

    Переходы

    Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    .transition(@transition) {
      -webkit-transition: @transition;
              transition: @transition;
    }
    .transition-property(@transition-property) {
      -webkit-transition-property: @transition-property;
              transition-property: @transition-property;
    }
    .transition-delay(@transition-delay) {
      -webkit-transition-delay: @transition-delay;
              transition-delay: @transition-delay;
    }
    .transition-duration(@transition-duration) {
      -webkit-transition-duration: @transition-duration;
              transition-duration: @transition-duration;
    }
    .transition-timing-function(@timing-function) {
      -webkit-transition-timing-function: @timing-function;
              transition-timing-function: @timing-function;
    }
    .transition-transform(@transition) {
      -webkit-transition: -webkit-transform @transition;
         -moz-transition: -moz-transform @transition;
           -o-transition: -o-transform @transition;
              transition: transform @transition;
    }

    Трансформации

    Поворачивайте, масштабируйте, переводите (перемещайте) или изгибайте любой объект.

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    .rotate(@degrees) {
      -webkit-transform: rotate(@degrees);
          -ms-transform: rotate(@degrees); // IE9 only
              transform: rotate(@degrees);
    }
    .scale(@ratio; @ratio-y...) {
      -webkit-transform: scale(@ratio, @ratio-y);
          -ms-transform: scale(@ratio, @ratio-y); // IE9 only
              transform: scale(@ratio, @ratio-y);
    }
    .translate(@x; @y) {
      -webkit-transform: translate(@x, @y);
          -ms-transform: translate(@x, @y); // IE9 only
              transform: translate(@x, @y);
    }
    .skew(@x; @y) {
      -webkit-transform: skew(@x, @y);
          -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
              transform: skew(@x, @y);
    }
    .translate3d(@x; @y; @z) {
      -webkit-transform: translate3d(@x, @y, @z);
              transform: translate3d(@x, @y, @z);
    }
    
    .rotateX(@degrees) {
      -webkit-transform: rotateX(@degrees);
          -ms-transform: rotateX(@degrees); // IE9 only
              transform: rotateX(@degrees);
    }
    .rotateY(@degrees) {
      -webkit-transform: rotateY(@degrees);
          -ms-transform: rotateY(@degrees); // IE9 only
              transform: rotateY(@degrees);
    }
    .perspective(@perspective) {
      -webkit-perspective: @perspective;
         -moz-perspective: @perspective;
              perspective: @perspective;
    }
    .perspective-origin(@perspective) {
      -webkit-perspective-origin: @perspective;
         -moz-perspective-origin: @perspective;
              perspective-origin: @perspective;
    }
    .transform-origin(@origin) {
      -webkit-transform-origin: @origin;
         -moz-transform-origin: @origin;
          -ms-transform-origin: @origin; // IE9 only
              transform-origin: @origin;
    }

    Анимация

    Одна примесь для работы со всеми свойствами анимации в CSS3 и другие примеси для работы с отдельными свойствами.

    The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

    .animation(@animation) {
      -webkit-animation: @animation;
              animation: @animation;
    }
    .animation-name(@name) {
      -webkit-animation-name: @name;
              animation-name: @name;
    }
    .animation-duration(@duration) {
      -webkit-animation-duration: @duration;
              animation-duration: @duration;
    }
    .animation-timing-function(@timing-function) {
      -webkit-animation-timing-function: @timing-function;
              animation-timing-function: @timing-function;
    }
    .animation-delay(@delay) {
      -webkit-animation-delay: @delay;
              animation-delay: @delay;
    }
    .animation-iteration-count(@iteration-count) {
      -webkit-animation-iteration-count: @iteration-count;
              animation-iteration-count: @iteration-count;
    }
    .animation-direction(@direction) {
      -webkit-animation-direction: @direction;
              animation-direction: @direction;
    }

    Затемнение

    Устанавливайте затемнение для всех интернет-браузеров и нейтрализацию фильтров filter для IE8.

    .opacity(@opacity) {
      opacity: @opacity;
      // IE8 filter
      @opacity-ie: (@opacity * 100);
      filter: ~"alpha(opacity=@{opacity-ie})";
    }

    Замещающий текст

    Добавьте содержимое для элементов управления формами в каждом поле.

    .placeholder(@color: @input-color-placeholder) {
      &::-moz-placeholder           { color: @color; } // Firefox
      &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
      &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
    }

    Колонки

    Создавайте колонки через CSS с помощью одного элемента.

    .content-columns(@width; @count; @gap) {
      -webkit-column-width: @width;
         -moz-column-width: @width;
              column-width: @width;
      -webkit-column-count: @count;
         -moz-column-count: @count;
              column-count: @count;
      -webkit-column-gap: @gap;
         -moz-column-gap: @gap;
              column-gap: @gap;
    }

    Градиенты

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

    #gradient > .vertical(#333; #000);
    #gradient > .horizontal(#333; #000);
    #gradient > .radial(#333; #000);

    Кроме того, вы можете установить угол стандартного двухцветного линейного перехода:

    #gradient > .directional(#333; #000; 45deg);

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

    #gradient > .striped(#333; 45deg);

    Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

    #gradient > .vertical-three-colors(#777; #333; 25%; #000);
    #gradient > .horizontal-three-colors(#777; #333; 25%; #000);

    Осторожно! Если вам понадобится убрать переход, обязательно уберите все фильтры для IE filter, которые вы используете. Это можно сделать с помощью примеси .reset-filter() и background-image: none;.

    Utility mixins

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

    Clearfix

    Больше не нужно добавлять class="clearfix" к различным элементам. Вместо этого можно использовать примесь .clearfix() там, где это необходимо. Работает на micro clearfix от Николаса Галлахера (Nicolas Gallager).

    // Mixin
    .clearfix() {
      &:before,
      &:after {
        content: " ";
        display: table;
      }
      &:after {
        clear: both;
      }
    }
    
    // Usage
    .container {
      .clearfix();
    }

    Центрирование по горизонтали

    Быстрое центрирование любых элементов в пределах материнского элемента. Для установки требуется width или max-width.

    // Mixin
    .center-block() {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    // Usage
    .container {
      width: 940px;
      .center-block();
    }

    Установка размеров

    Более простая установка размеров объекта.

    // Mixins
    .size(@width; @height) {
      width: @width;
      height: @height;
    }
    .square(@size) {
      .size(@size; @size);
    }
    
    // Usage
    .image { .size(400px; 300px); }
    .avatar { .square(48px); }

    Масштабируемые текстовые области

    Простая настройка размеров любых текстовых областей или других элементов. Работает в соответствии с интернет-браузером (both).

    .resizable(@direction: both) {
      // Options: horizontal, vertical, both
      resize: @direction;
      // Safari fix
      overflow: auto;
    }

    Сокращение текста

    Простое сокращение текста при помощи одной примеси. Элементы должны принадлежать к уровню block или inline-block.

    // Mixin
    .text-overflow() {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    // Usage
    .branch-name {
      display: inline-block;
      max-width: 200px;
      .text-overflow();
    }

    Retina-изображения

    Укажите два пути к изображениям и размеры изображения @1x; Bootstrap выдаст запрос мультимедиа @2x. Если вам нужно обработать множество изображений, пропишите CSS для изображений вручную в одном запросе мультимедиа.

    .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
      background-image: url("@{file-1x}");
    
      @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (   min--moz-device-pixel-ratio: 2),
      only screen and (     -o-min-device-pixel-ratio: 2/1),
      only screen and (        min-device-pixel-ratio: 2),
      only screen and (                min-resolution: 192dpi),
      only screen and (                min-resolution: 2dppx) {
        background-image: url("@{file-2x}");
        background-size: @width-1x @height-1x;
      }
    }
    
    // Usage
    .jumbotron {
      .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
    }

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

    Bootstrap создан на базе Less, однако он также официально поддерживает Sass. Мы храним его в отдельном хранилище GitHub и обрабатываем обновления с помощью сценария конверсии.

    Что входит в пакет загрузки

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

    Путь Описание
    lib/ Код Ruby gem (конфигурация Sass, интеграция в Rails и Compass)
    tasks/ Сценарии конвертации (переход с Less на Sass)
    test/ Тестирование компиляций
    templates/ Манифест пакета Compass
    vendor/assets/ Файлы Sass, JavaScript, и шрифты
    Rakefile Внутренние задания, такие как конвертирование

    Посетите хранилище GitHub для Sass, чтобы посмотреть на эти файлы в действии.

    Установка

    Чтобы узнать, как устанавливать и использовать Bootstrap для Sass, ознакомьтесь с важной информацией в хранилище GitHub. Это самый свежий источник информации, который включает в себя указания по работе с Rails, Compass и

  • Components / Компоненты

    GlyphiconsГлифа иконки

    Доступные глифы

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

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

    Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

    Кнопки / 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 appropriaterole attribute needs to be provided. For button groups, this would be role="group", while toolbars should have arole="toolbar".

    One exception are groups which only contain a single control (for instance the justified button groups with <button> 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.

    Copy
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>

    Button toolbar

    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

    Copy
    <div class="btn-toolbar" role="toolbar" aria-label="...">
      <div class="btn-group" role="group" aria-label="...">...</div>
      <div class="btn-group" role="group" aria-label="...">...</div>
      <div class="btn-group" role="group" aria-label="...">...</div>
    </div>

    Sizing

    Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

    Copy
    <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
    <div class="btn-group" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

    Nesting

    Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

    Copy
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
    
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

    Vertical variation

    Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

    Copy
    <div class="btn-group-vertical" role="group" aria-label="...">
      ...
    </div>

    Justified button groups

    Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

    Handling borders

    Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However,margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

    IE8 and borders

    Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

    See #12476 for more information.

    With <a> elements

    Just wrap a series of .btns in .btn-group.btn-group-justified.

    Copy
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      ...
    </div>

    Links acting as buttons

    If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

    With <button> elements

    To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.

    Copy
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Middle</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>

    Выпадающие меню с кнопками

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

    Зависимость от плагина

    Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

    Выпадающие меню с одной кнопкой

    Добавьте выпадающее меню к обычной кнопке с помощью простых изменений разметки.

    Copy
    <!-- Single button -->
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    Split button dropdowns

    Similarly, create split button dropdowns with the same markup changes, only with a separate button.

    Copy
    <!-- Split button -->
    <div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    Sizing

    Button dropdowns work with buttons of all sizes.

    Copy
    <!-- Large button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    
    <!-- Small button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    
    <!-- Extra small button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Extra small button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>

    Dropup variation

    Trigger dropdown menus above elements by adding .dropup to the parent.

    Copy
    <div class="btn-group dropup">
      <button type="button" class="btn btn-default">Dropup</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
      </ul>
    </div>
      

    Button dropdowns

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

    Plugin dependency

    Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

    Single button dropdowns

    Turn a button into a dropdown toggle with some basic markup changes.

    Copy
    <!-- Single button -->
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    Split button dropdowns

    Similarly, create split button dropdowns with the same markup changes, only with a separate button.

    Copy
    <!-- Split button -->
    <div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    Sizing

    Button dropdowns work with buttons of all sizes.

    Copy
    <!-- Large button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    
    <!-- Small button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    
    <!-- Extra small button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Extra small button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>

    Dropup variation

    Trigger dropdown menus above elements by adding .dropup to the parent.

    Copy
    <div class="btn-group dropup">
      <button type="button" class="btn btn-default">Dropup</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
      </ul>
    </div>

    Input groups

    Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

    Textual <input>s only

    Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

    Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

    Tooltips & popovers in input groups require special setting

    When using tooltips or popovers on elements within an .input-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).

    Don't mix with other components

    Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

    Always add labels

    Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

    The exact technique to be used (visible <label> elements, <label> elements hidden using the .sr-only class, or use of thearia-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

    Basic example

    Place one add-on or button on either side of an input. You may also place one on both sides of an input.

    We do not support multiple add-ons (.input-group-addon or .input-group-btn) on a single side.

    We do not support multiple form-controls in a single input group.

    @
    @example.com
    $.00

    https://example.com/users/
    Copy
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon2">@example.com</span>
    </div>
    
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon">.00</span>
    </div>
    
    <label for="basic-url">Your vanity URL</label>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>

    Sizing

    Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

    @
    @
    @
    Copy
    <div class="input-group input-group-lg">
      <span class="input-group-addon" id="sizing-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
    </div>
    
    <div class="input-group">
      <span class="input-group-addon" id="sizing-addon2">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
    </div>
    
    <div class="input-group input-group-sm">
      <span class="input-group-addon" id="sizing-addon3">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
    </div>

    Checkboxes and radio addons

    Place any checkbox or radio option within an input group's addon instead of text.

    Copy
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="checkbox" aria-label="...">
          </span>
          <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="radio" aria-label="...">
          </span>
          <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

    Button addons

    Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use.input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

    Copy
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
          <input type="text" class="form-control" placeholder="Search for...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

    Buttons with dropdowns

    Copy
    <div class="row">
      <div class="col-lg-6">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <input type="text" class="form-control" aria-label="...">
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" class="form-control" aria-label="...">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

    Segmented buttons

    Copy
    <div class="input-group">
      <div class="input-group-btn">
        <!-- Button and dropdown menu -->
      </div>
      <input type="text" class="form-control" aria-label="...">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <!-- Button and dropdown menu -->
      </div>
    </div>

    Multiple buttons

    While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-btn.

    Copy
    <div class="input-group">
      <div class="input-group-btn">
        <!-- Buttons -->
      </div>
      <input type="text" class="form-control" aria-label="...">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <!-- Buttons -->
      </div>
    </div>

    Navs

    Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

    Using navs for tab panels requires JavaScript tabs plugin

    For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

    Make navs used as navigation accessible

    If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

    Note the .nav-tabs class requires the .nav base class.

    Copy
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>

    Take that same HTML, but use .nav-pills instead:

    Copy
    <ul class="nav nav-pills">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>

    Pills are also vertically stackable. Just add .nav-stacked.

    Copy
    <ul class="nav nav-pills nav-stacked">
      ...
    </ul>

    Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

    Justified navbar nav links are currently not supported.

    Safari and responsive justified navs

    As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

    Copy
    <ul class="nav nav-tabs nav-justified">
      ...
    </ul>
    <ul class="nav nav-pills nav-justified">
      ...
    </ul>

    For any nav component (tabs or pills), add .disabled for gray links and no hover effects.

    Link functionality not impacted

    This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

    Copy
    <ul class="nav nav-pills">
      ...
      <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
      ...
    </ul>

    Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

    Tabs with dropdowns

    Copy
    <ul class="nav nav-tabs">
      ...
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          ...
        </ul>
      </li>
      ...
    </ul>

    Pills with dropdowns

    Copy
    <ul class="nav nav-pills">
      ...
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          ...
        </ul>
      </li>
      ...
    </ul>

    Navbar

    Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

    Justified navbar nav links are currently not supported.

    Overflowing content

    Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

    1. Reduce the amount or width of navbar items.
    2. Hide certain navbar items at certain screen sizes using responsive utility classes.
    3. Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

    Requires JavaScript plugin

    If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

    The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

    Changing the collapsed mobile navbar breakpoint

    The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

    Make navbars accessible

    Be sure to use a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

    Copy
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.

    Copy
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Brand" src="...">
          </a>
        </div>
      </div>
    </nav>

    Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.

    As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

    Copy
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

    Mobile device caveats

    There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docsfor details.

    Always add labels

    Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.

    Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

    Copy
    <button type="button" class="btn btn-default navbar-btn">Sign in</button>

    Context-specific usage

    Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btnnor the standard button classes should be used on <a> elements within .navbar-nav.

    Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

    Copy
    <p class="navbar-text">Signed in as Mark Otto</p>

    For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

    Copy
    <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

    Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

    These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

    Right aligning multiple components

    Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

    We'll revisit this when we can rewrite that component in v4.

    Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.

    Copy
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        ...
      </div>
    </nav>

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    Copy
    body { padding-top: 70px; }

    Make sure to include this after the core Bootstrap CSS.

    Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.

    Copy
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
        ...
      </div>
    </nav>

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    Copy
    body { padding-bottom: 70px; }

    Make sure to include this after the core Bootstrap CSS.

    Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.

    Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

    Copy
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        ...
      </div>
    </nav>

    Modify the look of the navbar by adding .navbar-inverse.

    Copy
    <nav class="navbar navbar-inverse">
      ...
    </nav>

    Breadcrumbs

    Indicate the current page's location within a navigational hierarchy.

    Separators are automatically added in CSS through :before and content.

    Copy
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
    </ol>

    Pagination

    Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

    Default pagination

    Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    Copy
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

    Labelling the pagination component

    The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive aria-label for the<nav> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

    Disabled and active states

    Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

    Copy
    <nav aria-label="...">
      <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        ...
      </ul>
    </nav>

    We recommend that you swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

    Copy
    <nav aria-label="...">
      <ul class="pagination">
        <li class="disabled">
          <span>
            <span aria-hidden="true">&laquo;</span>
          </span>
        </li>
        <li class="active">
          <span>1 <span class="sr-only">(current)</span></span>
        </li>
        ...
      </ul>
    </nav>

    Sizing

    Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

    Copy
    <nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
    <nav aria-label="..."><ul class="pagination">...</ul></nav>
    <nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

    Pager

    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    Default example

    By default, the pager centers links.

    Copy
    <nav aria-label="...">
      <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </nav>

    Alternatively, you can align each link to the sides:

    Copy
    <nav aria-label="...">
      <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>

    Optional disabled state

    Pager links also use the general .disabled utility class from the pagination.

    Copy
    <nav aria-label="...">
      <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
      </ul>
    </nav>

    Labels

    Example

    Example heading New

    Example heading New

    Example heading New

    Example heading New

    Example heading New
    Example heading New
    Copy
    <h3>Example heading <span class="label label-default">New</span></h3>

    Available variations

    Add any of the below mentioned modifier classes to change the appearance of a label.

    Default Primary Success Info Warning Danger
    Copy
    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

    Have tons of labels?

    Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its owninline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example,see #13219.

    Badges

    Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

    Inbox 42

    Copy
    <a href="#">Inbox <span class="badge">42</span></a>
    
    <button class="btn btn-primary" type="button">
      Messages <span class="badge">4</span>
    </button>

    Self collapsing

    When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

    Cross-browser compatibility

    Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

    Adapts to active nav states

    Built-in styles are included for placing badges in active states in pill navigations.

    Copy
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
    </ul>

    Jumbotron

    A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

    Hello, world!

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Learn more

    Copy
    <div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>

    To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .containerwithin.

    Copy
    <div class="jumbotron">
      <div class="container">
        ...
      </div>
    </div>

    Page header

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default smallelement, as well as most other components (with additional styles).

    Copy
    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
    </div>

    Thumbnails

    Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

    If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore.

    Default example

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    100%x180
    100%x180
    100%x180
    100%x180
    Copy
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
      </div>
      ...
    </div>

    Custom content

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    100%x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Button Button

    100%x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Button Button

    100%x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Button Button

    Copy
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>

    Alerts

    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

    Examples

    Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

    No default class

    Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

    Well done! You successfully read this important alert message.
    Heads up! This alert needs your attention, but it's not super important.
    Warning! Better check yourself, you're not looking too good.
    Oh snap! Change a few things up and try submitting again.
    Copy
    <div class="alert alert-success" role="alert">...</div>
    <div class="alert alert-info" role="alert">...</div>
    <div class="alert alert-warning" role="alert">...</div>
    <div class="alert alert-danger" role="alert">...</div>

    Dismissible alerts

    Build on any alert by adding an optional .alert-dismissible and close button.

    Requires JavaScript alert plugin

    For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.

    Warning! Better check yourself, you're not looking too good.
    Copy
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>

    Ensure proper behavior across all devices

    Be sure to use the <button> element with the data-dismiss="alert" data attribute.

    Use the .alert-link utility class to quickly provide matching colored links within any alert.

    Well done! You successfully read this important alert message.
    Heads up! This alert needs your attention, but it's not super important.
    Warning! Better check yourself, you're not looking too good.
    Oh snap! Change a few things up and try submitting again.
    Copy
    <div class="alert alert-success" role="alert">
      <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-info" role="alert">
      <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-warning" role="alert">
      <a href="#" class="alert-link">...</a>
    </div>
    <div class="alert alert-danger" role="alert">
      <a href="#" class="alert-link">...</a>
    </div>
  • JavaScript

  • Customize and download / Настройка и скачать

    Компоненты Less

    Выберите из файлов Less которые будут включены в вашу собственную сборку Bootstrap. Не уверены, какие файлы использовать? Ознакомьтесь с документацией по CSS и Компонентам.

    Общие CSS

    Компоненты

    Компоненты JavaScript

    Утилиты

    jQuery плагины

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

    • Производит два файла

      Все отмеченные плагины будут собраны в читабельный bootstrap.js и минимизированный bootstrap.min.js. Мы рекомендуем использовать минимизированную версию для рабочих (production) версий.

    • Требуется jQuery

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

    Связанные компоненты

    Magic

    Less переменные

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

    Colors

    Gray and brand colors for use across Bootstrap.

    Scaffolding

    Settings for some of the most global styles.

    Background color for <body>.

    Global text color on <body>.

    Typography

    Font, line-height, and color for body text, headings, and more.

    Default monospace fonts for <code>, <kbd>, and <pre>.

    Unit-less line-height for use in components like buttons.

    Computed "line-height" (font-size * line-height) for use with margin, padding, etc.

    By default, this inherits from the <body>.

    Components

    Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

    Global color for active items (e.g., navs or dropdowns).

    Global background color for active items (e.g., navs or dropdowns).

    Width of the border for generating carets that indicate dropdowns.

    Carets increase slightly in size for larger components.

    Tables

    Customizes the .table component with basic values, each used across all table variations.

    Padding for <th>s and <td>s.

    Padding for cells in .table-condensed.

    Default background color used for all tables.

    Background color used for .table-striped.

    Background color used for .table-hover.

    Border color for table and cell borders.

    Buttons

    For each of Bootstrap's buttons, define text, background and border color.

    Forms

    <input> background color

    <input disabled> background color

    Text color for <input>s

    <input> border color

    Default .form-control border radius

    Large .form-control border radius

    Small .form-control border radius

    Border color for inputs on focus

    Placeholder text color

    Default .form-control height

    Large .form-control height

    Small .form-control height

    .form-group margin

    Background color for textual input addons

    Border color for textual input addons

    Disabled cursor for form controls and buttons.

    Dropdown menu container and contents.

    Background for the dropdown menu.

    Dropdown menu border-color.

    Dropdown menu border-color for IE8.

    Divider color for between dropdown items.

    Text color for headers within dropdown menus.

    Deprecated @dropdown-caret-color as of v3.1.0

    Media queries breakpoints

    Define the breakpoints at which your layout will change, adapting to different screen sizes.

    Deprecated @screen-xs as of v3.0.1

    Deprecated @screen-xs-min as of v3.2.0

    Deprecated @screen-phone as of v3.0.1

    Deprecated @screen-sm as of v3.0.1

    Deprecated @screen-tablet as of v3.0.1

    Deprecated @screen-md as of v3.0.1

    Deprecated @screen-desktop as of v3.0.1

    Deprecated @screen-lg as of v3.0.1

    Deprecated @screen-lg-desktop as of v3.0.1

    Grid system

    Define your custom responsive grid.

    Number of columns in the grid.

    Padding between columns. Gets divided in half for the left and right.

    Point at which the navbar becomes uncollapsed.

    Point at which the navbar begins collapsing.

    Container sizes

    Define the maximum width of .container for different screen sizes.

    For @screen-sm-min and up.

    For @screen-md-min and up.

    For @screen-lg-min and up.

    Nverted Navbar

    Shared nav styles

    Tabs

    Pills

    Pagination

    Pager

    Jumbotron

    Form states and alerts

    Define colors for form feedback states and, by default, alerts.

    Tooltips

    Tooltip max width

    Tooltip text color

    Tooltip background color

    Tooltip arrow width

    Tooltip arrow color

    Popovers

    Popover body background color

    Popover maximum width

    Popover border color

    Popover fallback border color

    Popover title background color

    Popover arrow width

    Popover arrow color

    Popover outer arrow width

    Popover outer arrow color

    Popover outer arrow fallback color

    Labels

    Default label background color

    Primary label background color

    Success label background color

    Info label background color

    Warning label background color

    Danger label background color

    Default label text color

    Modals

    Padding applied to the modal body

    Padding applied to the modal title

    Modal title line-height

    Background color of modal content area

    Modal content border color

    Modal content border color for IE8

    Modal backdrop background color

    Modal backdrop opacity

    Modal header border color

    Alerts

    Define alert colors, border radius, and padding.

    Progress bars

    Background color of the whole progress component

    Progress bar text color

    Variable for setting rounded corners on progress bar.

    Default progress bar color

    Success progress bar color

    Warning progress bar color

    Danger progress bar color

    Info progress bar color

    List group

    Background color on .list-group-item

    .list-group-item border color

    List group border radius

    Background color of single list items on hover

    Text color of active list items

    Background color of active list items

    Border color of active list elements

    Text color for content within active list items

    Text color of disabled list items

    Background color of disabled list items

    Text color for content within disabled list items

    Panels

    Border color for elements within panels

    Thumbnails

    Padding around the thumbnail image

    Thumbnail background color

    Thumbnail border color

    Thumbnail border radius

    Custom text color for thumbnail captions

    Padding around the thumbnail caption

    Wells

    Badges

    Badge text color in active nav link

    Badge background color in active nav link

    Breadcrumb background color

    Breadcrumb text color

    Text color of current page in the breadcrumb

    Textual separator for between breadcrumb elements

    Close

    Code

    Type

    Horizontal offset for forms and lists.

    Text muted color

    Abbreviations and acronyms border color

    Headings small color

    Blockquote small color

    Blockquote font size

    Blockquote border color

    Page header border color

    Width of horizontal description list titles

    Point at which .dl-horizontal becomes horizontal

    Horizontal line color.

    Разное

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

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

    Download

    Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.

Скачать

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

Success! Your configuration has been saved to https://gist.github.com/740371b74d4e911169a0580e1e83202b and can be revisited here at http://bootstrap-3.ru/customize.php?id=740371b74d4e911169a0580e1e83202b for further customization.

Translate »