Bootstrap 3 css: CSS · Bootstrap на русском

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

В Bootstrap 3 используются самые современные наработки в области CSS и 

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

Основные преимущества Twitter Bootstrap 3:

• Адаптивная верстка — Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода, от телефонов и планшетов до настольных компьютеров.
• Экономия времени — CSS фреймворк Bootstrap 3 позволит сэкономить время и усилия, используя шаблоны дизайна и классы, и уделить больше внимания другим задачам;
• Высокая скорость загрузки страницы — динамичные макеты Bootstrap адаптируются под разные устройства и разрешения экрана без изменений в разметке;
• Гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом;
• Простота в использовании — фреймворк прост в использовании, любой пользователь с базовыми знаниями HTML и CSS может начать разработку макета с Twitter Bootstrap;
• Совместимость с браузерами — Bootstrap 3 поддерживает браузеры Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera;

Совместимость с браузерами и устройствами:

Bootstrap 3 поддерживает последние версии большинства браузеров на разных платформах. Internet Explorer версий 8–11 поддерживается только на ос Windows.

Internet Explorer 8 и 9 также поддерживается фреймворком, однако эти версии браузеров не поддерживают некоторые элементы HTML 5 и CSS 3.

Функционал разметки:

Пример работы аспектов системы разметки Bootstrap 3.

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

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

19 августа вышла первая альфа версия Bootstrap 4.

Bootstrap 3 сетка: основы

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

Контейнер-обертка

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

Используйте .container для отзывчивого с фиксированной шириной контейнера (максимальная ширина блока 1170px).

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

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

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

Итак подходим к сути.

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

Основы работы сетки Bootstrap:

• Row (строки) должны быть расположены внутри .container (fix) или .container-fluid (full-width) для правильного выравнивания и padding (отступов – рассмотрим ниже чуть более подробно).
• Используйте rows (строки), чтобы создать горизонтальную группу колонок.
• Контент должен быть расположен внутри колонок, и только колонки могут быть первыми дочерними элементами rows (строки).
• Предопределенные классы сетки, например, такие как .row и .col-xs-4, позволяют быстро создать макет сетки.
• Колонки создают промежутки (зазоры между контентом колонок) посредством padding (отступов). Этот отступ смещается в строках для первой и последней колонки посредством отрицательного поля у элемента .row. Дополнение: более подробно об использовании отрицательных полей вы можете узнать здесь, а если вкратце: так как у статичного элемента .row не задана ширина, то элемент .row будет вытолкнут по направлению left/right с увеличением ширины элемента.
• Именно из-за смещения контент внутри сетки ниже выровнялся на одной линии с контентом не-сетки (речь очевидно о контенте статьи — http://getbootstrap.com/css/#grid).
• Колонки сетки создаются при помощи указания одного номера из двенадцати возможных для колонок, которые вы хотите создать. Например, для построения трех равнозначных колонок достаточно использовать .col-xs-4.
• Если более чем 12 колонок расположены внутри одной строки, то каждая группа дополнительных колонок должна быть обернута новой строкой.
• Классы сетки подразделяются в зависимости от ширины устройств, которые определены в точках останова. При этом, например, применив класс .col-md-* к элементу его стиль будет использован не только для средних устройств, но и к большим устройствам, но только если не задан класс .col-lg-*.

Чтобы понять все эти принципы было еще проще взгляните на изображение ниже:

Медиа-запросы

Для сетки используются следующие медиа-запросы (из LESS-файла):

/* Совсем маленькие устройства (phones, меньше 768px) */

/* Медиа-запросы отсутствуют, так как эти стили стоят в

Bootstrap по умолчанию */

/* Небольшие устройства (планшеты, 768px и выше) */

@media (min-width: @screen-sm-min) { . .. }

/* Средние устройства (мониторы, 992px and up) */

@media (min-width: @screen-md-min) { … }

/* Большие устройства (большие мониторы, 1200px and up) */

@media (min-width: @screen-lg-min) { … }

Настройки сетки

Пример: сложенные по горизонтали

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

Пример на официальном сайте — stacked-to-horizontal

HTML

<div>

<div>. col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

<div>.col-md-1</div>

</div>

<div>

<div>.col-md-8</div>

<div>.col-md-4</div>

</div>

<div>

<div>.col-md-4</div>

<div>.col-md-4</div>

<div>.col-md-4</div>

</div>

<div>

<div>.col-md-6</div>

<div>.col-md-6</div>

</div>

Пример: жидкий контейнер

Поменяйте сетку с фиксированной шириной на сетку с шириной на все окно браузера при помощи замены . container на .container-fluid.

HTML

<div>

<div>

…

</div>

</div>

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

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

Пример на официальном сайте — grid-example-mixed

HTML

<!— Stack the columns on mobile by making one full-width and the other half-width —>

<div>

<div>.col-xs-12 .col-md-8</div>

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

<div>.col-xs-6 .col-md-4</div>

<div>.col-xs-6 .col-md-4</div>

<div>. col-xs-6 .col-md-4</div>

</div>

<!— Columns are always 50% wide, on mobile and desktop —>

<div>

<div>.col-xs-6</div>

<div>.col-xs-6</div>

</div>

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

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

http://getbootstrap.com/css/#grid-example-mixed-complete

Пример на официальном сайте — grid-example-mixed-complete

HTML

<div>

<div>.col-xs-12 .col-sm-6 .col-md-8</div>

<div>.col-xs-6 .col-md-4</div>

</div>

<div>

<div>.col-xs-6 .col-sm-4</div>

<div>.col-xs-6 .col-sm-4</div>

<!— Optional: clear the XS cols if their content doesn’t match in height —>

<div></div>

<div>.col-xs-6 . col-sm-4</div>

</div>

Пример: смещение колонки на новую строку

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

Пример на официальном сайте — grid-example-wrapping

HTML

<div>

<div>.col-xs-9</div>

<div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>

<div>.col-xs-6<br>Subsequent columns continue along the new line.</div>

</div>

Сброс для адаптивных колонок

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

Пример на официальном сайте — grid-responsive-resets

HTML

<div>

<div>. col-xs-6 .col-sm-3</div>

<div>.col-xs-6 .col-sm-3</div>

<!— Add the extra clearfix for only the required viewport —>

<div></div>

<div>.col-xs-6 .col-sm-3</div>

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

HTML

<div>

<div>.col-sm-5 .col-md-6</div>

<div>.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>

</div>

<div>

<div>.col-sm-6 .col-md-5 .col-lg-6</div>

<div>.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 на четыре колонки.

Пример на официальном сайте — grid-offsetting

HTML

<div>

<div>.col-md-4</div>

<div>.col-md-4 .col-md-offset-4</div>

</div>

<div>

<div>.col-md-3 .col-md-offset-3</div>

<div>.col-md-3 .col-md-offset-3</div>

</div>

<div>

<div>.col-md-6 .col-md-offset-3</div>

</div>

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

Чтобы вложить ваш контент в существующую сетку, добавьте новую .row и установите .col-md-* колонок внутри уже существующей .col-sm-* колонки.

Пример на официальном сайте — grid-nesting

HTML

<div>

<div>

Level 1: .col-sm-9

<div>

<div>

Level 2: .col-xs-8 .col-sm-6

</div>

<div>

Level 2: . col-xs-4 .col-sm-6

</div>

</div>

</div>

</div>

Порядок колонок

Порядок для колонок сетки можно изменить при помощи классов .col-md-push-* и .col-md-pull-*.

Пример на официальном сайте — grid-column-ordering

HTML

<div>

<div>.col-md-9 .col-md-push-3</div>

<div>.col-md-3 .col-md-pull-9</div>

</div>

Медиа запросы для Bootstrap 3 — Блог

Медиа запросы (media queries) — это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */

/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}

/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
  /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}

/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для устройств с шириной viewport >1200px */
}

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width. Это заставит их работать только в указанном диапазоне.

@media (max-width: 767px) {
  /* стили для xs-устройств */
}
@media (min-width: 768px) and (max-width: 991px) {
  /* стили для sm-устройств */
}
@media (min-width: 991px) and (max-width: 1199px) {
  /* стили для md-устройств */
}
@media (min-width: 1200px) {
  /* стили для lg-устройств */
}

• 14 июля 2019 г.
• 1998 просмотров

Web-разработка • HTML и CSS

Для стилизации маркированных и нумерованных списков предназначены классы list-unstyled и list-inline. Класс dl-horizontal позволяет разместить элементы списка определений в одну строку. Классы list-group и list-group-item позволяют создать красивое вертикальное меню.

Убрать у списков номера и маркеры:

<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

<ol>
    <li>Элемент нуменованного списка</li>
    <li>Элемент нуменованного списка</li>
    <li>Элемент нуменованного списка</li>
</ol>

Класс list-unstyled удаляет свойство list-style и отступы слева только для элементов, которые расположены внутри контейнеров ul или ol.

Размещение элементов списка в одну строку:

<ul>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Доставка</li>
    <li>Оплата</li>
    <li>Контакты</li>
</ul>

<ol>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Доставка</li>
    <li>Оплата</li>
    <li>Контакты</li>
</ol>

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

<dl>
    <dt>HTML</dt>
    <dd>Стандартный язык разметки документов во Всемирной паутине.</dd>
    <dt>CSS</dt>
    <dd>Формальный язык описания внешнего вида HTML-документа.</dd>
    <dt>JavaScript</dt>
    <dd>Прототипно-ориентированный сценарный язык программирования.</dd>
</dl>

Создание групповых списков:

<ul>
    <li>Избранное</li>
    <li>Пользователи</li>
    <li>Публикации</li>
    <li>Изображения</li>
</ul>

<div>
    <a href="#">
        <span></span> Избранное <span>9</span>
    </a>
    <a href="#">
        <span></span> Пользователи <span>24</span>
    </a>
    <a href="#">
        <span></span> Публикации <span>97</span>
    </a>
    <a href="#">
        <span></span> Фотографии <span>25</span>
    </a>
</div>

<div>
    <li>
        <h5>Что такое HTML?</h5>
        <p>
            HTML — это стандартный язык разметки документов во Всемирной паутине. 
        </p>
    </li>
    <li>
        <h5>Что такое CSS?</h5>
        <p>
            CSS — это формальный язык описания внешнего вида HTML-документа.
        </p>
    </li>
    <li>
        <h5>Что такое JavaScript?</h5>
        <p>
            JavaScript — это прототипно-ориентированный сценарный язык программирования.
        </p>
    </li>
</div>

<ul>
    <li>Item success</li>
    <li>Item info</li>
    <li>Item warning</li>
    <li>Item danger</li>
</ul>

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Список • Фреймворк

Поддержка формата Bootstrap 3 в конструкторе сайта ReadyScript

Bootstrap – cамый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Он использует самые современные технологии CSS и HTML, именно поэтому он был включен в список поддерживаемых сеточных фреймворков в конструкторе сайта ReadyScript. Прежде всего, давайте рассмотрим, какие преимущества имеют темы оформления ReadyScript, собранные по сетке, для этого детальнее окунемся в техническую часть таких тем.  

Тема оформления, собранная по сетке оперирует понятиями: контейнер, строка, секция, блок. Первые три элемента — это понятия, которые полностью дублируют сущности, используемые в bootstrap.

• Контейнер – это элемент с классом «container», который имеет условную ширину в 12 колонок и может содержать Строки.
• Строка – это элемент с классом «row», который может содержать Секции или вложенные Строки.
• Секция – это элемент с классом «col-*-*», который может содержать вложенные Секции, Строки или Блоки. Ширина секции, задается в диапазоне от 1 до 12 и определяет количество колонок, которые она занимает.
• Блок – это видимая часть модулей системы, например, блок категорий, блок меню, блок с баннерами, блок со списком товаров, и т. д.

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

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

Bootstrap 3 по-умолчанию поддерживает адаптации для 4х видов устройств:

• очень малые устройства (XS), экран менее 768 px
• малые устройства (SM), экран не менее 768 px
• средние устройства (MD), экран не менее 992 px
• большие устройства (LG), экран не менее 1200 px

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

Показать HTML для данной сетки

<div> <div> <div>…</div> <div>…</div> <div>…</div> <div>…</div> </div> </div>

Рассмотрим на примерах различные случаи генерации сетки

1. Классический пример

<div> <div> <div>…здесь будут Блоки…</div> <div>…здесь будут Блоки…</div> </div> </div>

В Конструкторе сайта это будет выглядеть так:

2. Что делать, если до или после контейнера(.container) требуется вставка индивидуальной разметки?

<div> <div> <div> <p> Custom text</p> <div> <div>. ..здесь будут Блоки…</div> <div>…здесь будут Блоки…</div> </div> </div> </div> </div>

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

<div> {$wrapped_content} </div>

А внутренний, назовем его inside.tpl следующее:

<div> <p> Custom text</p> {$wrapped_content} </div>

Переменная $wrapped_content всегда содержит HTML-код вложенных элементов. Указываем шаблоны outside.tpl, inside.tpl в настройках контейнера.

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

3. Что делать, если после секции(.col-*-*) требуется вставка индивидуальной разметки?

<div> <div> <div> <div> <p> Custom text </p> …здесь будут Блоки… </div> </div> <div>…здесь будут Блоки…</div> </div> </div>

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

<div> <p> Custom text</p> {$wrapped_content} </div>

Указываем шаблон inside.tpl в настройках секции.

Если необходимо после Секции (col-*-*) вставить clearfix, то необходимо отметить соответствующий флажок в окне редактирования секции. Итоговый HTML будет в этом случае таким:

<div> <div> <div>…здесь будут Блоки…</div> <div></div> <div>…здесь будут Блоки…</div> </div> </div>

4. Как добавить произвольные классы к генерируемым системой элементам?

<div> <div> <div>…здесь будут Блоки…</div> <div></div> <div>…здесь будут Блоки…</div> </div> </div>

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

Файлы стилей в темах оформления

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

{* Подключаем CSS файлы для темы оформления *} {addcss file=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css» basepath=»root» no_compress=true} {* Подключаем JS файлы для темы оформления *} {addjs file=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js» basepath=»root» no_compress=true} {* Выводим bootstrap сетку из Конструктора сайта *} {$app->blocks->renderLayout()}

Приятная мелочь

Во время настройки элементов в Конструкторе сайта, существует вероятность, что какая-либо секция съедет за область видимости браузера, в случае некорректного указания параметров у секции. Как найти потом такую секцию, чтобы открыть её повторно к редактированию и ввести корректные параметры? С помощью специально разработанной для таких случаев кнопки, расположенной в правой части контейнера. Нажатие на данную кнопку будет включать режим «плоского» отображения всех элементов. В таком режиме не действуют смещения и размеры элементов, поэтому абсолютно любую секцию можно будет легко найти.

Заключение

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

03 ноября 2015 18:22, Артем Полторанин

Базовая сборка Bootstrap 3 Framework

Данный пост о том, как я настраиваю базовый шаблон Bootstrap 3 framework. Данную базовую настройку HTML шаблона Bootstrap 3 можно использовать в качестве рабочего примера.

Содержание статьи

Базовая сборка Bootstrap 3 без настроек компонентов

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

Подключение файлов Bootstrap локально

Заходим на русскоязычную версию официального сайта во вкладку Основы Bootstrap и скачиваем на компьютер архив bootstrap-3.3.2-dist.zip, содержащий минимизированный код CSS и JavaScript. Распаковываем архив, и в папке bootstrap-3.3.2-dist (ее можно переименовать), создаем пустой файл index.html

Далее на том же сайте переходим во вкладку Примеры и копируем базовый пример HTML документа. Естественно, переносим содержимое в созданный ранее файл index.html.

Ну и раз уж данная базовая сборка Bootstrap 3 является локальной, то скачиваем последнюю стабильную минимизированную версию (на момент написания статьи библиотеки jQuery 1. 12.1) и подключаю локально из папки js, заменяя в коде

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

на

<script src="js/jquery-1.12.1.min.js"></script>

Удаляем из папки ненужные на данном этапе лишние файлы CSS и JS (дабы не путаться в них). Оставляем лишь 4 файла — bootstrap.css, bootstrap.min.css, bootstrap.js, bootstrap.min.js.

Все, на этом базовую сборка Bootstrap 3 можно считать завершенной.

<!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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<div>
<div>
<h2>Привет, мир!</h2>
<div>
<button type="button" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Поздравляю!</strong> Вы подключили Bootstrap 3 правильно!!!
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Вот что в итоге у меня получилось:

×Немного внимания! Единственное, в данном примере используется устаревшая версия библиотеки jQuery 1. 11.0, поэтому в коде я заменил на jQuery 1.12.1 версию (подключенную локально) и добавил для отладки один из компонентов Bootstrap 3 — Замечания, которые можно закрыть.

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

Скачать данный пример базовой сборки Bootstrap 3 с локальным подключением скриптов можно тут

Базовая сборка Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

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

Просто замените локальные подключения на ссылки на файлы.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1. 11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

В итоге должен получиться такой HTML документ:

Файл index.html для базовой сборки Bootstrap 3 с использованием внешних ресурсов — Bootstrap CDN

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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/libs/html5shiv/3.7.0/html5shiv. js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<div>
<div>
<h2>Привет, мир!</h2>
<div>
<button type="button" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Поздравляю!</strong> Вы подключили Bootstrap 3 правильно!!!.
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

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

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

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

Где в москве купить имаверол.

Лучший способ отблагодарить автора

Похожие по Тегам статьи

Введение · Bootstrap v5.0

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в ваш перед всеми другими таблицами стилей для загрузки нашего CSS.

  <ссылка href = "https://cdn.jsdelivr. net/npm/[email protected] / dist / css / bootstrap.min.css "rel =" stylesheet "целостность =" sha384-BmbxuPwQa2lc / FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH / Ev + nYRRuWlolflfl "перекрестное происхождение>
  

JS

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих

Отдельно

Если вы решите использовать отдельные сценарии, сначала должен быть Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.

  <скрипт src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" Integльность = "sha384-KsvD1yqQ1 / 1 + IA7gi3P0tyJcT3vR + NdBTtt13m8J / Nwi "crossorigin =" анонимный "> 


    
    jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"Integrity ="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR>

  

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

Важные глобалы

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

HTML5 doctype

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

  

  ...

  

Адаптивный метатег

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

Вы можете увидеть пример этого в действии в начальном шаблоне.

Размер коробки

Для более простого изменения размера в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что заполнение не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

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

 .selector-for-some-widget {
  размер коробки: коробка содержимого;
}
  

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент через :: before и :: after , унаследуют указанный размера блока для этого .selector-for-some-widget .

Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

Перезагрузка

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

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

• Прочтите официальный блог Bootstrap и подпишитесь на него.
• Присоединяйтесь к официальной комнате Slack.
• Общайтесь с другими Bootstrappers в IRC. На сервере irc.freenode.net в канале ## bootstrap .
• Справку по реализации можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
• Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

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

Bootstrap Все классы CSS

.active	Добавляет серый цвет фона в строку таблицы (
) (тот же цвет, используемый при наведении)	Попытайся	Столы
. активный	Добавляет серый цвет фона к активной ссылке по умолчанию навигационная панель. Добавляет черный фон и белый цвет к текущей ссылке внутри перевернутой панели навигации.	Попытайся	Navbar
. Активный	Добавляет синий цвет фона к активному элементу списка в группе списков	Попытайся	Группы списков
.активный	Добавляет синий цвет фона для имитации "нажатой" кнопки	Попытайся	Пуговицы
. Активный	Анимирует полосатый индикатор выполнения	Попытайся	Прогресс-бар
. Активный	Добавляет синий цвет фона к активному раскрывающемуся элементу в раскрывающемся списке	Попытайся	Выпадающее меню
.активный	Добавляет синий цвет фона к активной ссылке на страницу (для выделения текущей страницы)	Попытайся	Пагинация
. Крепление	Плагин Affix позволяет прикрепить элемент (заблокировать / закрепить) к определенной области страницы. Он переключает положение : фиксированный вкл и выкл	Попытайся	Аффикс
.оповещение	Создает окно предупреждающего сообщения	Попытайся	Оповещения
. alert-dangerous	Красный ящик оповещения. Указывает на опасное или потенциально негативное действие	Попытайся	Оповещения
. Предупреждение отклонено	Вместе с .закрыть класс , этот класс используется для закрыть оповещение	Попытайся	Оповещения
.alert-info	Голубое окно предупреждения. Обозначает некоторую информацию	Попытайся	Оповещения
.alert-ссылка	Используется в ссылках внутри предупреждений для добавления соответствующих цветных ссылок	Попытайся	Оповещения
.предупреждение-успех	Зеленое окно предупреждения. Указывает на успешное или положительное действие	Попытайся	Оповещения
. Предупреждение-предупреждение	Желтое окно предупреждения. Указывает на то, что при выполнении этого действия следует соблюдать осторожность	Попытайся	Оповещения
. Значок	Создает круглый значок (серый кружок - часто используется как числовой индикатор)	Попытайся	Значки
.bg-опасность	Добавляет красный цвет фона к элементу. Представляет опасность или негативное действие	Попытайся	Помощники
.bg-info	Добавляет голубой фон к элементу. Представляет некоторую информацию	Попытайся	Помощники
. bg-primary	Добавляет синий цвет фона к элементу. Представляет что-то важное	Попытайся	Помощники
.bg-success	Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие	Попытайся	Помощники
.bg-предупреждение	Добавляет желтый цвет фона к элементу. Обозначает предупреждение или негативное действие	Попытайся	Помощники
. Хлебные крошки	Пагинация. Указывает расположение текущей страницы в иерархии навигации	Попытайся	Пагинация
.btn	Создает простую кнопку (серый фон и закругленные углы)	Попытайся	Пуговицы
. btn-блок	Создает кнопку уровня блока, занимающую всю ширину родительского элемента	Попытайся	Пуговицы
.btn-опасный	Красная кнопка.Указывает на опасность или негативное действие	Попытайся	Пуговицы
.btn-default	Кнопка по умолчанию. Белый фон и серая кайма	Попытайся	Пуговицы
.btn-group	Объединяет кнопки в одну строку	Попытайся	Группы кнопок
.btn-group-обоснованный	Заставляет группу кнопок занимать всю ширину экрана	Попытайся	Группы кнопок
. btn-group-lg	Большая группа кнопок (увеличивает все кнопки в группе кнопок - увеличенный размер шрифта и отступы)	Попытайся	Группы кнопок
.btn-group-sm	Маленькая группа кнопок (уменьшает все кнопки в группе кнопок)	Попытайся	Группы кнопок
.btn-group-xs	Очень маленькая группа кнопок (делает все кнопки в группе очень маленькими)	Попытайся	Группы кнопок
.btn-group-вертикальный	Делает группу кнопок вертикальной	Попытайся	Группы кнопок
.btn-info	Голубая кнопка. Представляет информацию	Попытайся	Пуговицы
. btn-ссылка	Делает кнопку похожей на ссылку (поведение кнопки получения)	Попытайся	Пуговицы
.btn-lg	Большая кнопка	Попытайся	Пуговицы
.btn-primary	Синяя кнопка.	Попытайся	Пуговицы
.btn-sm	Маленькая кнопка	Попытайся	Пуговицы
.btn-success	Зеленая кнопка. Указывает на успех или положительное действие	Попытайся	Пуговицы
.btn-warning	Желтая кнопка. Обозначает предупреждение или негативное действие	Попытайся	Пуговицы
. btn-xs	Очень маленькая кнопка	Попытайся	Пуговицы
.подпись	Добавляет текст заголовка в эскиз .	Попытайся	Изображения
.caret	Создает значок стрелки курсора, который указывает, что кнопка представляет собой раскрывающийся список	Попытайся	Выпадающее меню
.карусель	Создает карусель (слайд-шоу)	Попытайся	Карусель
.карусель-подпись	Создает текст заголовка для каждого слайда в карусели	Попытайся	Карусель
. Управление каруселью	Контейнер для следующей и предыдущей ссылки	Попытайся	Карусель
. карусель-индикаторы	Добавляет маленькие точки / индикаторы внизу каждого слайда (который указывает, сколько слайдов в карусели и какой слайд пользователь просматривает в данный момент).	Попытайся	Карусель
.карусель внутренняя	Контейнер для предметов слайда	Попытайся	Карусель
. Центральный блок	Центрирует любой элемент (Устанавливает для элемента display: блок с margin-right: auto и margin-left: auto )	Попытайся	Помощники
.флажок	Контейнер для чекбоксов	Попытайся	Входы
.checkbox-inline	Позволяет отображать несколько флажков в одной строке	Попытайся	Входы
. clearfix	Очищает поплавки	Попытайся	Помощники
.закрыть	Обозначает значок закрытия	Попытайся	Помощники
.col - * - *	Адаптивная сетка (диапазон 1–12 столбцов). Очень маленькие устройства Телефоны (<768 пикселей), Маленькие устройства Планшеты (≥768 пикселей), Средние устройства Настольные компьютеры (≥992 пикселей), Большие устройства Настольные компьютеры (≥1200 пикселей). Значения столбца могут быть от 1 до 12.	Попытайся	Сетка
.col - * - смещение- *	Переместите столбцы вправо. Эти классы увеличивают левое поле столбца на * столбцы	Попытайся	Сетка
. col - * - тянуть- *	Изменяет порядок столбцов сетки	Попытайся	Сетка
.col - * - push- *	Изменяет порядок столбцов сетки	Попытайся	Сетка
.свернуть	Обозначает сворачиваемое содержимое, которое можно скрыть или показать по запросу	Попытайся	Свернуть
. Разрушение в	Показывать сворачиваемое содержимое по умолчанию	Попытайся	Свернуть
. Контейнер	Контейнер фиксированной ширины, ширина которого определяется узлами экрана.Равное поле слева и справа.	Попытайся	Контейнеры
. Контейнер для жидкости	Контейнер, занимающий всю ширину экрана	Попытайся	Контейнеры
. Контрольная этикетка	Позволяет использовать метку для проверки формы	Попытайся	Формы
.опасность	Добавляет красный фон к строке таблицы (
). Указывает на опасное или потенциально отрицательное действие	Попытайся	Столы
. Отключен	Отключает кнопку (добавляет непрозрачность и значок запрета на парковку при наведении курсора)	Попытайся	Пуговицы
.отключен	Отключает раскрывающийся список . элемент (добавляет серый цвет текста и значок запрета парковки при наведении курсора).	Попытайся	Выпадающее меню
. Отключен	Отключает ссылку для разбивки на страницы (нельзя щелкнуть - добавляет серый цвет текста и значок «запрет на парковку» при наведении курсора)	Попытайся	Пагинация
.отключен	Отключает список элемент в группе списков (нельзя щелкнуть - добавляет серый цвет фона и значок запрета на парковку при наведении курсора)	Попытайся	Группы списков
. Делитель	Используется для разделения ссылок в раскрывающемся меню тонкой горизонтальной рамкой	Попытайся	Выпадающее меню
. dl-горизонтальный	Выравнивает термины и описания в элементах рядом друг с другом. Начинается как по умолчанию с, но когда окно браузера расширяется, оно выстраивается бок о бок	Попытайся	Типографика
. Выпадение	Создает переключаемое меню, которое позволяет пользователю выбрать одно значение из предварительно определенного списка	Попытайся	Выпадающее меню
.раскрывающийся заголовок	Используется для добавления заголовков в раскрывающееся меню	Попытайся	Выпадающее меню
. Выпадающее меню	Добавляет стили по умолчанию для контейнера раскрывающегося меню	Попытайся	Выпадающее меню
. Dropdown-menu-right	Выравнивает раскрывающееся меню по правому краю	Попытайся	Выпадающее меню
.раскрывающийся список	Используется на кнопке, которая должна скрывать и отображать (переключать) раскрывающееся меню	Попытайся	Выпадающее меню
. Dropup	Обозначает раскрывающееся меню (вверх, а не вниз)	Попытайся	Выпадающее меню
Встраиваемый	Контейнер для встроенного содержимого.Делает видео или слайд-шоу правильно масштабируемыми на любом устройстве	Попытайся	Изображения
.embed-response-16by9	Контейнер для встроенного содержимого. Создает встроенный контент с соотношением сторон 16: 9	Попытайся	Изображения
.embed-response-4by3	Контейнер для встроенного содержимого.Создает встроенный контент с соотношением сторон 4: 3	Попытайся	Изображения
. Элемент, реагирующий на встраивание	Используется внутри . Реагирует на встраивание . Красиво масштабирует видео до родительского элемента	Попытайся	Изображения
. Выцветание	Добавляет эффект затухания при закрытии окна предупреждения	Попытайся	Оповещения
.форма-контроль	Используется при вводе, текстовом поле и элементах выбора, чтобы охватить всю ширину страницы и сделать их адаптивными	Попытайся	Формы
. form-control-feedback	Класс проверки формы	Попытайся	Входы 2
.form-control-static	Добавляет простой текст рядом с меткой формы в горизонтальной форме	Попытайся	Входы 2
.форма-группа	Контейнер для ввода формы и этикетки	Попытайся	Формы
.form-inline	Делает выровненным по левому краю с элементами управления встроенным блоком (только это применяется к формам в области просмотра шириной не менее 768 пикселей)	Попробуй	Формы
.форма-горизонтальная	Выравнивает метки и группы элементов управления формы по горизонтали	Попробуй	Формы
. glyphicon	Создает значок. Bootstrap предоставляет 260 бесплатных глификонов из набора Glyphicons Halflings	Попытайся	Глификоны
. Опасный	Добавляет красный цвет к метке и красную границу для ввода, а также значок ошибки внутри ввода (используется вместе с .имеет обратную связь )	Попытайся	Формы
. Has-feedback	Добавляет значки обратной связи для входных данных (галочка, предупреждения и знаки ошибок)	Попытайся	Формы
. Успех	Добавляет зеленый цвет к метке и зеленую границу для ввода, а также значок галочки внутри ввода (используется вместе с .имеет обратную связь )	Попытайся	Формы
. has-warning	Добавляет желто-оранжевый цвет к метке и желто-оранжевую границу для ввода, а также значок галочки внутри ввода (используется вместе с .has-feedback )	Попытайся	Формы
.блок помощи	Блок текста справки, который переносится на новую строку и может выходить за пределы одной строки.	Попытайся	Размер входа
. Скрытый	Принудительно скрывает элемент (дисплей : нет )	Попытайся	Помощники
. Скрытый- *	Скрывает содержимое в зависимости от размера экрана	Попытайся	Помощники
.скрыть	Не рекомендуется. Используйте .hidden вместо	Попытайся	Помощники
.h2 - .h6	Делает элемент похожим на заголовок выбранного класса (h2-h6)	Попытайся	Типографика
. Иконка	Используется в навигационной панели для создания гамбургер-меню (три горизонтальные полосы)	Попытайся	Navbar
.значок-следующий	Значок Unicode (стрелка вправо), используется в каруселях. Его часто заменяют глификоном	Попытайся	Карусель
.icon-prev	Значок Unicode (стрелка, указывающая влево), используется в каруселях. Его часто заменяют глификоном	Попытайся	Карусель
. img-circle	Преобразует изображение в круг (не поддерживается в IE8 и более ранних версиях)	Попытайся	Изображения
.img-отзывчивый	Делает изображение адаптивным	Попытайся	Изображения
.img-округлые	Добавляет закругленные углы к изображению	Попытайся	Изображения
.img-thumbnail	Преобразует изображение в миниатюру (границы)	Попытайся	Изображения
.в	Затухает на выступах	Попытайся	Вкладки
.info	Добавляет голубой фон в строку таблицы (
). Обозначает нейтральное информативное изменение или действие	Попытайся	Столы
.инициализм	Отображает текст внутри элемента с немного меньшим размером шрифта	Попытайся	Типографика
. Группа ввода	Контейнер для улучшения ввода путем добавления значка, текста или кнопки впереди или позади них в качестве «справочного текста»	Попытайся	Входы
.вход-группа-LG	Большая группа входов	Попытайся	Входы
. Вход-группа-см	Малая группа ввода	Попытайся	Входы
. Вход-группа-аддон	Вместе с классом .input-group этот класс позволяет добавлять значок или текст справки рядом с полем ввода	Попытайся	Входы
.ввод-группа-БТН	Вместе с классом .input-group этот класс прикрепляет кнопку рядом с входом. Часто используется как строка поиска	Попытайся	Входы
. Вход-lg	Большое поле ввода	Попытайся	Размер входа
.ввод-см	Малое поле ввода	Попытайся	Размер входа
. Невидимый	Делает элемент невидимым (видимость : скрыт ). Примечание: Несмотря на то, что элемент невидим, он займет место на странице	Попытайся	Помощники
. товар	Класс добавлен к каждому элементу карусели. Может быть текст или изображения	Попытайся	Карусель
.джумботрон	Создает серый прямоугольник с полями и закругленными углами, который увеличивает размер шрифта текста внутри него. Создает большую рамку для привлечения дополнительного внимания к особому содержанию или информации	Попытайся	Джамботрон
.этикетка	Добавляет серый скругленный прямоугольник к элементу. Предоставляет дополнительную информацию о чем-либо (например, «Новое»)	Попытайся	Этикетки
. Этикетка-опасность	Красная этикетка	Попытайся	Этикетки
. label-info	Голубая этикетка	Попытайся	Этикетки
.этикетка-успех	Зеленая этикетка	Попытайся	Этикетки
. Этикетка-предупреждение	Желтая этикетка	Попытайся	Этикетки
. Свинец	Увеличить размер шрифта и высоту строки абзаца	Попытайся	Типографика
.левый	Используется для идентификации левого элемента управления каруселью	Попытайся	Карусель
.list-group	Создает группу списка с рамкой для элементов	Попытайся	Группа списка
. List-group-item	Добавлен к каждому элементу в группе списков	Попытайся	Группа списка
.список-группа-элемент-заголовок	Создает заголовок группы списка (используется в других элементах, кроме )	Попытайся	Группа списка
.list-group-item-text	Используется для текста элемента внутри группы списка (используется для других элементов, кроме )	Попытайся	Группа списка
.список-группа-пункт-опасность	Красный цвет фона для элемента списка в группе списков	Попытайся	Группа списка
. list-group-item-info	Голубой цвет фона для элемента списка в группе списков	Попытайся	Группа списка
.list-group-item-success	Зеленый цвет фона для элемента списка в группе списков	Попытайся	Группа списка
.список-группа-элемент-предупреждение	Желтый цвет фона для элемента списка в группе списков	Попытайся	Группа списка
.list-inline	Помещает все элементы списка в одну строку (горизонтальное меню)	Попытайся	Вкладки
. List-unstyled	Удаляет все стили списка по умолчанию (маркеры, левое поле и т. Д.) стайлинг от или список	Попытайся	Типографика
. Марка	Выделение текста: выделенный текст	Попытайся	Типографика
.media	Выравнивает медиа-объекты (например, изображения или видео - часто используются для комментариев в сообщениях в блогах и т. Д.)	Попытайся	Медиа-объекты
.медиа-тело	Текст, который должен отображаться рядом с медиа-объектом	Попытайся	Медиа-объекты
. Медиа-заголовок	Создает заголовок внутри медиа-объекта	Попытайся	Медиа-объекты
.media-list	Вложенные списки носителей	Попытайся	Медиа-объекты
.медиа-объект	Обозначает медиа-объект (изображение или видео)	Попытайся	Медиа-объекты
. Модальный	Определяет контент как модальный и привлекает к нему внимание	Попытайся	Modals
. Модальный кузов	Определяет стиль тела модального окна.Добавьте сюда любую разметку HTML (p, img и т. Д.)	Попытайся	Modals
.modal-content	Стилизует модальный (граница, цвет фона и т. Д.). Внутри него добавьте верхний, основной и нижний колонтитулы модального окна, если необходимо	Попытайся	Modals
.modal-dialog	Задает правильную ширину и поля модального окна	Попытайся	Modals
.модальный нижний колонтитул	Нижний колонтитул модального окна (часто содержит кнопку действия и кнопку закрытия)	Попытайся	Modals
.modal-header	Заголовок модального окна (часто содержит заголовок и кнопку закрытия)	Попытайся	Modals
.модальный-LG	Большое модальное окно (шире, чем по умолчанию)	Попытайся	Modals
. Модально-открытый	Используется в элементе для предотвращения прокрутки страницы ( переполнение: скрыто )	Попытайся	Modals
.modal-sm	Малый модальный (без ширины)	Попытайся	Modals
.модальный заголовок	Название модального окна	Попытайся	Modals
.nav nav-tabs	Обозначает меню с вкладками	Попытайся	Вкладки
.nav nav-pills	Обозначает меню с таблетками	Попытайся	Вкладки
.nav .navbar-nav	Используется в контейнере , который содержит элементы списка со ссылками внутри панели навигации	Попытайся	Navbar
. Навигационное выравнивание	Центры таблеток / таблеток. Обратите внимание, что на экранах меньше 768 пикселей элементы складываются друг в друга (содержимое остается по центру)	Попытайся	Вкладки
.с навигацией	Таблетки или таблетки вертикальной стопкой	Попытайся	Вкладки
.nav-вкладки	Создает меню с вкладками	Попытайся	Вкладки
.navbar	Создает панель навигации	Попытайся	Navbar
.марка навбара	Добавлен к ссылке или элементу заголовка внутри панели навигации для представления логотипа или заголовка	Попытайся	Navbar
.navbar-btn	Выравнивает кнопку внутри панели навигации по вертикали	Попытайся	Navbar
.navbar-свернуть	Сворачивает панель навигации (скрывается и заменяется значком меню / гамбургера на мобильных телефонах и небольших планшетах)	Попытайся	Navbar
.navbar-по умолчанию	Создает панель навигации по умолчанию (светло-серый цвет фона)	Попытайся	Navbar
.navbar-фиксированное дно	Заставляет навигационную панель оставаться в нижней части экрана (липкая / фиксированная)	Попытайся	Navbar
.navbar-fixed-top	Заставляет навигационную панель оставаться в верхней части экрана (липкая / фиксированная)	Попытайся	Navbar
.Навбар-форма	Добавлен для формирования элементов внутри панели навигации для их вертикального центрирования (правильное заполнение)	Попытайся	Navbar
.navbar-заголовок	Добавлен к элементу контейнера, который содержит ссылку / элемент, представляющий логотип или заголовок	Попытайся	Navbar
.navbar-inverse	Создает черную панель навигации (вместо светло-серой)	Попытайся	Navbar
.navbar-левый	Выравнивает навигационные ссылки, формы, кнопки или текст на навигационной панели по левому краю	Попытайся	Navbar
.navbar-ссылка	Стилизует элемент так, чтобы он выглядел как ссылка внутри панели навигации (якоря получают правильное заполнение и подчеркивание при наведении, в то время как другие элементы, такие как p или span, получают эффект наведения по умолчанию - белый цвет на перевернутой панели навигации и черный цвет на панели навигации по умолчанию )	Попытайся	Navbar
.navbar-nav	Используется в контейнере , который содержит элементы списка со ссылками внутри панели навигации	Попытайся	Navbar
.navbar-правый	Выравнивает навигационные ссылки, формы, кнопки или текст на навигационной панели по правому краю.	Попытайся	Navbar
.navbar-static-top	Удаляет левую, верхнюю и правую границы (закругленные углы) с панели навигации (по умолчанию панель навигации имеет серую границу и радиус границы 4 пикселя по умолчанию)	Попытайся	Navbar
.navbar-text	Выровняйте по вертикали любые элементы внутри навигационной панели, которые не являются ссылками (обеспечивает правильное заполнение)	Попытайся	Navbar
.navbar-toggle	Стилизует кнопку, которая должна открывать панель навигации на маленьких экранах. Часто используется вместе с тремя классами .icon-bar для обозначения переключаемого значка меню (гамбургер / полоски)	Попытайся	Navbar
. Следующий	Используется в элементе управления карусели для идентификации следующего элемента управления	Попытайся	Карусель
.следующий	Используется для выравнивания кнопок пейджера по правой стороне страницы (следующая кнопка)	Попытайся	Пейджер
.page-header	Добавляет горизонтальную линию под заголовком (+ добавляет дополнительное пространство вокруг элемента)	Попытайся	Заголовок страницы
.пейджер	Создает кнопки «предыдущий / следующий» (используются в элементах )	Попытайся	Пейджер
.pagination	Создает разбиение на страницы (полезно, если у вас есть веб-сайт с большим количеством страниц. Используется для элементов )	Попытайся	Пагинация
.pagination-lg	Большая разбивка на страницы (каждая ссылка на страницу получает размер шрифта 18 пикселей. По умолчанию 14 пикселей)	Попытайся	Пагинация
.pagination-sm	Маленькая пагинация (каждая ссылка пагинации получает размер шрифта 12 пикселей. По умолчанию 14 пикселей)	Попытайся	Пагинация
.панель	Создает рамку с отступом вокруг содержимого	Попытайся	Панели
. Панель-корпус	Контейнер для содержимого внутри панели	Попытайся	Панели
.панель-развал	Сворачиваемая панель (переключение между скрытием и отображением панелей)	Попытайся	Свернуть
.панель-опасность	Красная панель. Указывает на опасность	Попытайся	Панели
.panel-info	Голубая панель. Обозначает информацию	Попытайся	Панели
.панель-успех	Зеленая панель. Указывает на успех	Попытайся	Панели
.панель-предупреждение	Желтая панель. Указывает на предупреждение	Попытайся	Панели
. Нижний колонтитул	Создает нижний колонтитул панели (светлый цвет фона)	Попытайся	Панели
.панель-группа	Используется для группировки множества панелей вместе.Это удаляет нижнее поле под каждой панелью	Попытайся	Панели
.панель-заголовок	Создает заголовок панели (светлый цвет фона)	Попытайся	Панели
.panel-title	Используется внутри заголовка панели. для настройки стиля текста (удаляет поля и добавляет размер шрифта 16 пикселей)	Попытайся	Панели
.всплывающее окно	Всплывающее окно, которое появляется, когда пользователь щелкает элемент	Попытайся	Поповер
. С предварительной прокруткой	Делает элемент прокручиваемым ( max-height 350 пикселей и обеспечивает полосу прокрутки по оси Y)	Попытайся	Помощники
.предыдущее	Используется в каруселях для обозначения "предыдущей" ссылки	Попытайся	Карусель
. Предыдущий	Используется для выравнивания кнопок пейджера по левой стороне страницы (предыдущая кнопка)	Попытайся	Пейджер
. Прогресс	Контейнер для прогресс-бара	Попытайся	Прогресс-бар
.прогресс-бар	Создает индикатор выполнения	Попытайся	Прогресс-бар
. Прогресс-бар-опасность	Красный индикатор выполнения. Указывает на опасность	Попытайся	Прогресс-бар
.progress-bar-info	Голубой индикатор выполнения.Обозначает информацию	Попытайся	Прогресс-бар
. Прогресс-бар в полоску	Создает полосатый индикатор выполнения	Попытайся	Прогресс-бар
. Прогресс-бар-успех	Зеленый индикатор выполнения. Указывает на успех	Попытайся	Прогресс-бар
.предупреждение-индикатор	Желтый индикатор выполнения. Указывает на предупреждение	Попытайся	Прогресс-бар
. Тягово-левый	Перемещение элемента влево	Попытайся	Помощники
. Тягово-правый	Плавающий элемент вправо	Попытайся	Помощники
.правый	Используется для определения правого элемента управления карусели	Попытайся	Карусель
. Ряд	Контейнер для отзывчивых столбцов	Попытайся	Сетка
. Водосточные	Удаляет желоба из строки и ее столбцов	Попытайся	Сетка
.показать	Показывает элемент ( дисплей: блок)	Попытайся	Помощники
. Маленький	Создает более светлый второстепенный текст в любом заголовке	Попытайся	Типографика
.sr только	Скрывает элемент на всех устройствах, кроме программ чтения с экрана	Попытайся	Помощники
.SR-только-фокусируемый	Скрывает элемент на всех устройствах, кроме программ чтения с экрана	Попытайся	Помощники
. Успех	Добавляет зеленый цвет фона к строке таблицы (
). Указывает на успех или положительное действие	Попытайся	Столы
.tab-content	Используется вместе с .tab-pane для создания переключаемых / динамических вкладок / таблеток	Попытайся	Вкладки
. Панель	Используется вместе с .tab-content для создания переключаемых / динамических вкладок / таблеток	Попытайся	Вкладки
.стол	Добавляет базовый стиль к таблице (отступы, нижние границы и т. Д.)	Попытайся	Столы
. Стол с бортиком	Добавляет границы со всех сторон таблицы и ячеек	Попытайся	Столы
. Конденсированный стол	Делает стол более компактным, разрезая заполнение ячеек пополам	Попытайся	Столы
.стол-навес	Создает зависающую таблицу (добавляет серый цвет фона в строки таблицы при наведении)	Попытайся	Столы
. Адаптивный	Делает таблицу адаптивной (при необходимости добавляет горизонтальную полосу прокрутки)	Попытайся	Столы
.текст заглавными буквами	Обозначает прописной текст	Попытайся	Типографика
.text-center	Выравнивание текста по центру	Попытайся	Типографика
.text-dangerous	Красный цвет текста. Указывает на опасность	Попытайся	Типографика
.текст скрыть	Скрывает текст (помогает заменить текстовое содержимое элемента фоновым изображением)	Попытайся	Типографика
.text-info	Голубой цвет текста. Обозначает информацию	Попытайся	Типографика
. Выравнивание текста	Обозначает текст с выравниванием по ширине	Попытайся	Типографика
.текст слева	Выравнивает текст по левому краю	Попытайся	Типографика
. Текст в нижнем регистре	Переводит текст в нижний регистр	Попытайся	Типографика
. Без звука	Серый цвет текста	Попытайся	Типографика
.текст-nowrap	Запрещает перенос текста	Попытайся	Типографика
.text-primary	Синий цвет текста	Попытайся	Типографика
. Текст-право	Выравнивает текст по правому краю	Попытайся	Типографика
.текст-успех	Зеленый цвет текста. Указывает на успех	Попытайся	Типографика
. Верхний регистр текста	Делает текст заглавными	Попытайся	Типографика
. Текст-предупреждение	Желто-оранжевый цвет текста. Указывает на предупреждение	Попытайся	Типографика
.миниатюра	Добавляет рамку вокруг элемента (часто изображений или видео), чтобы он выглядел как миниатюра	Попытайся	Изображения
.tooltip	Всплывающее окно, которое появляется, когда пользователь наводит указатель мыши на элемент	Попытайся	Подсказка
.видимый- *	Не рекомендуется, начиная с версии 3.2.0. Используется для отображения и / или скрытия содержимого на устройстве. Примечание: Используйте .hidden- * вместо	Попытайся	Помощники
.visible-print-block	Отображает элемент (отображение : блок ) в печатном (предварительном) виде		Помощники
.видимая печать встроенная	Отображает элемент (дисплей : встроенный ) в печатном (предварительном) виде		Помощники
.visible-print-inline-block	Отображает элемент (дисплей : встроенный блок ) в печатном (предварительном) виде		Помощники
.скрытая печать	Скрывает элемент (отображение : нет ) в режиме печати (предварительного просмотра)		Помощники
. Предупреждение	Добавляет желтый цвет фона в строку таблицы (
). Указывает на предупреждение	Попытайся	Столы
.колодец	Добавляет закругленную границу вокруг элемента с серым цветом фона и небольшим отступом	Попытайся	Уэллс
.well-LG	Большой колодец (дополнительная обивка)	Попытайся	Уэллс
.well-sm	Маленький колодец (без прокладки)	Попытайся	Уэллс

  [1 заголовок]
[2 изображения]
[3 шт]
[4 подписи]
[5 desc]
  

  [2 изображения] [1 заголовок]
[] [3 шт.]
[] [5 desc]
[4 подписи] []
[] []
  

  
 Заголовок продукта 
 Изображение продукта 
 Кол-во, в корзину 
 Взломать 
 Подпись к изображению продукта 
 Описание продукта 
  

  #hack {height: 50px; }

@media (min-width: @ screen-sm) {
    #desc {margin-top: -50px; }
}
  

  бутстрап /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── бутстрап.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js /
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
  

  
    <ссылка href = "/ css / bootstrap-ie7.css "rel =" таблица стилей ">