Примеры быстрого старта

Нужны быстрые шаблоны? Посмотрите на эти основные примеры, которые мы собрали вместе:

Сетка по умолчанию

Система сетки по умолчанию, предоставляемая как часть Bootstrap, представляет собой сетку из 16 столбцов шириной 940 пикселей. Это разновидность популярной системы сетки 960, но без дополнительных полей/отступов слева и справа.

Пример разметки сетки

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

<div класс = "строка" > 
  <div класс = "span6" > 
    ...
  </div>
  <div класс = "span10" > 
    ...
  </div>
</div>

Вложенные столбцы

Вложите свой контент, если необходимо, создав .rowв существующем столбце.

Пример вложенных столбцов

<div класс = "строка" > 
  <div класс = "span12" > 
    Уровень 1 столбца
    <div класс = "строка" > 
      <div класс = "span6" > 
        Уровень 2
      </div>
      <div класс = "span6" > 
        Уровень 2
      </div>
    </div>
  </div>
</div>

Сверните свою собственную сетку

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

Внутри сетки

В настоящее время все переменные, необходимые для изменения системы сетки, находятся в файлах preboot.less.

Теперь, чтобы настроить

Изменение сетки означает изменение трех @grid-*переменных и перекомпиляцию файлов Less.

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

@gridColumns : 24 ;       
@gridColumnWidth : 20 пикселей ;   
@gridGutterWidth : 20 пикселей ;   

После перекомпиляции все будет готово!

Фиксированная раскладка

Стандартный и простой центрированный макет шириной 940 пикселей практически для любого веб-сайта или страницы, предоставляемый одним файлом <div.container>.

<тело>
  <div класс = "контейнер" > 
    ...
  </div>
</тело>

Плавный макет

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

<тело>
  <div class = "контейнер-жидкость" > 
    <div класс = "боковая панель" > 
      ...
    </div>
    <div класс = "контент" > 
      ...
    </div>
  </div>
</тело>

Заголовки и текст

Стандартная типографская иерархия для структурирования ваших веб-страниц.

Вся типографская сетка основана на двух переменных Less в нашем файле preboot.less: @basefontи @baseline. Первый — это базовый размер шрифта, используемый повсюду, а второй — базовая высота строки.

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

ч1. Заголовок 1

ч2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Пример абзаца

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Пример заголовка Имеет подзаголовок…

Разное элементы

Использование акцентов, адресов и сокращений

<strong> <em> <address> <abbr>

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

Теги выделения ( <strong>и <em>) следует использовать для обозначения дополнительной важности или выделения слова или фразы по сравнению с окружающим текстом. Используйте <strong>для обозначения важности и <em>выделения ударения .

Акцент в абзаце

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Примечание: по-прежнему можно использовать теги <b>и <i>в HTML5, и они не должны быть выделены полужирным шрифтом и курсивом соответственно (хотя, если есть более семантический элемент, используйте его). <b>предназначен для выделения слов или фраз без дополнительной важности, в то время <i>как в основном для голоса, технических терминов и т. д.

Адреса

Элемент <address>используется для контактной информации его ближайшего предка или всей совокупности работ. Вот два примера того, как это можно использовать:

Примечание. Каждая строка в файле <address>должна заканчиваться разрывом строки ( <br />) или быть заключена в тег уровня блока (например, <p>) для правильной структуры содержимого.

Сокращения

Для сокращений и акронимов используйте <abbr>тег ( <acronym>не рекомендуется в HTML5 ). Поместите сокращенную форму в тег и установите заголовок для полного имени.

Цитаты

<blockquote> <p> <small>

Как цитировать

Чтобы включить цитату, оберните ее <blockquote>и <p>пометьте <small>. Используйте <small>элемент, чтобы указать свой источник, и вы получите перед ним длинное тире —.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis dapibus posuere velit aliquet.

Доктор Джулиус Хибберт

<цитата>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Доктор Джулиус Хибберт </small>
</blockquote>

Неупорядоченный<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Целое число слов и масса
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Угревая сыпь
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Энеан сит амет эрат нунк
• Eget porttitor lorem

без стиля<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Целое число слов и масса
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Угревая сыпь
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Энеан сит амет эрат нунк
• Eget porttitor lorem

Упорядоченный<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Целое число слов и масса
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Энеан сит амет эрат нунк
8. Eget porttitor lorem

Описаниеdl

Списки описаний

Список описаний идеально подходит для определения терминов.

Юисмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порта Малесуада

Etiam porta sem malesuada magna mollis euismod.

Код

<code> <pre>

Сделайте свой код стильным с помощью двух простых тегов. Чтобы получить еще больше удивительных возможностей с помощью javascript, загрузите библиотеку Google code prettify, и все готово.

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

Код, блоки или просто встроенные фрагменты можно отображать со стилем, просто обернув нужный тег. Для блоков кода, занимающих несколько строк, используйте <pre>элемент. Для встроенного кода используйте <code>элемент.

<дел>
  <h1>Заголовок</h1>
  <p>Что-то здесь...</p>
</div>

<div> <h1> Заголовок </h1> <p> Что-то здесь... </p> </div>
  
  

Встроенные метки

<span class="label">

Привлеките внимание или отметьте любую фразу в основном тексте.

Маркируйте что угодно

Когда-либо нуждался в одном из тех причудливых новинок ! или Важные флаги при написании кода? Что ж, теперь они у вас есть. Вот что включено по умолчанию:

Медиа сетка

Отображайте миниатюры разных размеров на страницах с минимальным размером HTML и минимальными стилями.

Пример миниатюр

Миниатюры .media-gridмогут быть любого размера, но лучше всего они работают, когда отображаются непосредственно на встроенную систему сетки Bootstrap. Ширина изображения, такая как 90, 210 и 330, в сочетании с несколькими пикселями отступа соответствует размерам столбцов .span2, .span4и ..span6

Большой

Середина

Маленький

Кодирование их

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

<ul class = "медиа-сетка" > 
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Строительные столы

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

Всегда оборачивайте заголовки столбцов <thead>таким образом, чтобы иерархия была <thead>> <tr>> <th>.

Подобно заголовкам столбцов, все содержимое вашей таблицы должно быть заключено в , <tbody>чтобы ваша иерархия была <tbody>> <tr>> <td>.

Пример: стили таблиц по умолчанию

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

<таблица>
  ...
</таблица>

Пример: полосатый под зебру

Проявите немного фантазии со своими таблицами, добавив полосу зебры — просто добавьте .zebra-stripedкласс.

Примечание. Зебровое чередование — это прогрессивное усовершенствование, недоступное для старых браузеров, таких как IE8 и ниже.

<table class = "полосатый зебра" > 
...
</таблица>

Пример: полосатый рисунок с TableSorter.js

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<скрипт > 
  $ ( функция () { 
    $ ( "таблица#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</скрипт>
<table class = "полосатый зебра" > 
  ...
</таблица>

Стили по умолчанию

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

Сложенные формы

Добавьте .form-stackedв HTML-код своей формы, и у вас будут метки над их полями, а не слева от них. Это отлично работает, если ваши формы короткие или у вас есть два столбца ввода для более тяжелых форм.

Размеры полей формы

Настройте любую форму input, ширину selectили textareaширину, добавив в разметку всего несколько классов.

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

Кнопки

Как правило, кнопки используются для действий, а ссылки — для объектов. Например, «Скачать» может быть кнопкой, а «недавние действия» — ссылкой.

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

Примеры кнопок

Стили кнопок можно применять к чему угодно с помощью .btnсвойства apply. Как правило, вы захотите применить их только к элементам <a>, <button>и select . <input>Вот как это выглядит:

Альтернативные размеры

Хотите большие или маленькие пуговицы? Имейте это!

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

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

Ссылки

Кнопки

Что это

Наша верхняя панель — это фиксированная панель, на которой размещены логотип или название веб-сайта, основная навигация и форма поиска.

Настраиваемый

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

Выпадающие списки включены

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

Таблетки и таблетки

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

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

• Дом
• Профиль
• Сообщения
• Настройки
• Контакт
• Падать
  • Дополнительная ссылка
  • Что-то еще здесь
  • Другая ссылка

<ul class = "вкладки" > 
  <li class = "active" ><a href = "#" > Главная страница </a></li>  
  <li><a href = "#" > Профиль </a></li> 
  <li><a href = "#" > Сообщения </a></li> 
  <li><a href="#" > Настройки </a> < / li> 
  <li><a href = "#" > Контакт </a></li> 
</ul>

• Дом
• Профиль
• Сообщения
• Настройки
• Контакт

<ul class = "таблетки" > 
  <li class = "active" ><a href = "#" > Главная страница </a></li>  
  <li><a href = "#" > Профиль </a></li> 
  <li><a href = "#" > Сообщения </a></li> 
  <li><a href="#" > Настройки </a> < / li> 
  <li><a href = "#" > Контакт </a></li> 
</ul>

Панировочные сухари

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

• Дом

• Главная /
• Средняя страница

• Главная /
• Средняя страница /
• Еще один

• Главная /
• Средняя страница /
• Еще один /
• Вы здесь

<ul class = "хлебные крошки" > 
  <li><a href = "#" > Главная </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Средняя страница </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Еще один </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Вы здесь </li> 
</ul>

Пагинация

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

<div класс = "разбивка на страницы" > 
  <ул>
    <li class = "prev disabled" ><a href = "#" > ← Назад </a></li>  
    <li class = "active" ><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 class = "далее" ><a href = "#" > Далее → </a></li>  
  </ul>
</div>

Основные оповещения

.alert-message

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

Получить javascript »

Пример кода

<div class = "предупреждение о предупреждении" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Святое гуакамоле! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите. </p>
</div>

Блокировать сообщения

.alert-message.block-message

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

Получить javascript »

Пример кода

<div class = "предупреждение о блокировке сообщения-предупреждения" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Святое гуакамоле! Это предупреждение! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "предупреждения-действия" > 
    <a class = "btn small" href = "#" > Выполните это действие </a> <a class = "btn small" href = "#" > Или выполните это </a>     
  </div>
</div>

Модальные

Модальные окна — диалоговые окна или лайтбоксы — отлично подходят для контекстных действий в ситуациях, когда важно сохранить фоновый контекст.

Получить javascript »

Подсказки

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

Получить javascript »

Поповеры

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

Получить javascript »

Начиная

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

Посмотреть документацию по javascript »

Что включено

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

Нужен ли javascript?

Неа! Bootstrap разработан в первую очередь как библиотека CSS. Этот javascript предоставляет базовый интерактивный слой поверх включенных стилей.

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

Для получения дополнительной информации и просмотра демонстраций в реальном времени см. нашу страницу документации по плагинам .