История

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

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

Подробнее читайте на dev.twitter.com ›

Поддержка браузера

Bootstrap протестирован и поддерживается в основных современных браузерах, таких как Chrome, Safari, Internet Explorer и Firefox.

• Последнее сафари
• Последняя версия Google Chrome
• Фаерфокс 4+
• Интернет Эксплорер 7+
• Опера 11

Что включено

Bootstrap поставляется в комплекте со скомпилированными, нескомпилированными и примерными шаблонами CSS.

• Все исходные файлы .less
• Полностью скомпилированный и минимизированный CSS
• Полная документация по стилю
• Пример шаблона страницы (скоро будет больше)

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

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

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

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

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

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

Стандартный и простой центрированный макет шириной 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>используется для контактной информации его ближайшего предка или всей совокупности работ. Вот как это выглядит:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Тел
.: (123) 456-7890

Примечание. Каждая строка в файле <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.

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

Неупорядоченный<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.

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

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

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

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

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

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

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

#	Имя	Фамилия	Язык
1	Немного	Один	Английский
2	Джо	Шесть пакетов	Английский
3	Стью	Вмятина	Код

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

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

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

#	Имя	Фамилия	Язык
1	Немного	Один	Английский
2	Джо	Шесть пакетов	Английский
3	Стью	Вмятина	Код

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

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

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

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

#	Имя	Фамилия	Язык
1	Ваш	Один	Английский
2	Джо	Шесть пакетов	Английский
3	Стью	Вмятина	Код

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

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

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

Пример легенды формы

X-большой ввод

Выбирать

1 2 3 4 5

Выбирать

1 2 3 4 5

Нередактируемый ввод

Некоторая ценность здесь

Отключенный ввод

X-большой ввод

Небольшой фрагмент текста справки

Пример легенды формы

Предварительный текст

@

Предварительный флажок

Добавлен флажок

Ввод файла

Пример легенды формы

Список опций

• Первый вариант — это и то — не забудьте указать, почему это здорово
• Второй вариант также можно проверить и включить в результаты формы.
• Третий вариант — да, вы уже догадались — также можно проверить и включить в результаты формы.
• Четвертый вариант проверить нельзя, так как он отключен.

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

Диапазон дат

к Все время указано как стандартное тихоокеанское время (GMT -08:00).

Текстовое поле

Блок текста справки для описания поля выше, если это необходимо.

Список опций

• Первый вариант — это и то — не забудьте указать, почему это здорово
• Второй вариант также можно проверить и включить в результаты формы.

Сохранить изменения  Отмена

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

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

Пример легенды формы

X-большой ввод

Выбирать

1 2 3 4 5

Пример легенды формы

X-большой ввод

Небольшой фрагмент текста справки

Список опций

• Первый вариант — это и то — не забудьте указать, почему это здорово
• Второй вариант также можно проверить и включить в результаты формы.

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

Сохранить изменения  Отмена

Кнопки

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

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

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

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

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

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

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

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

Ссылки

Кнопки

Что это

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

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

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

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

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

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

Создайте простую вторичную навигацию с помощью файла <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>

Пагинация

Крайне упрощенная и минималистичная нумерация страниц, вдохновленная 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>

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

div.alert-message

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

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

div.alert-message.block-message

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

Модальные

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

Советы по инструментам

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

Поповеры

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

Bootstrap был создан с Preboot , набором миксинов и переменных с открытым исходным кодом, которые можно использовать вместе с Less , препроцессором CSS для более быстрой и простой веб-разработки.

Узнайте, как мы использовали Preboot в Bootstrap и как вы можете использовать его, если решите использовать Less в своем следующем проекте.

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

Используйте этот параметр, чтобы в полной мере использовать переменные Bootstrap Less, миксины и вложение в CSS через javascript в вашем браузере.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Не чувствуете решение .js? Попробуйте приложение Less Mac или используйте Node.js для компиляции при развертывании кода.

Что включено

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

Переменные

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

// Ссылки
@linkColor : #8b59c2;         
@linkColorHover :     затемнить ( @linkColor , 10 ); 
 
// Серые
@черный : #000;             
@grayDark :           осветлить ( @black , 25 %); 
@gray :               осветлить ( @black , 50 %); 
@grayLight :          осветлить ( @black , 70 %); 
@grayLighter :        осветлить ( @black , 90 %); 
@белый : #fff ;             
 
// Акцентные цвета
@синий : #08b5fb ;              
@зеленый : #46a546 ;             
@красный : #9d261d ;               
@желтый : #ffc40d;            
@оранжевый : #f89406 ;            
@розовый : #c3325f;              
@фиолетовый : #7a43b6 ;            
 
// Базовая сетка
@basefont : 13 пикселей ;          
@базовый уровень : 18 пикселей ;          

Комментирование

Less также предоставляет другой стиль комментирования в дополнение к обычному /* ... */синтаксису CSS.

// Это комментарий
/* Это тоже комментарий */

Mixins до wazoo

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

Стеки шрифтов

#шрифт {
  . сокращение ( @weight : нормальный , @size : 14px , @lineHeight : 20px ) {     
размер     шрифта : @size ; _ 
вес     шрифта : @weight ; _ 
высота     строки : @lineHeight ; _ 
  }
  . без засечек ( @weight : нормальный , @size : 14px , @lineHeight : 20px ) { _     
семейство     шрифтов : " Helvetica Neue" , Helvetica , Arial , без засечек ;   
размер     шрифта : @size ; _ 
вес     шрифта : @weight ; _ 
высота     строки : @lineHeight ; _ 
  }
  . serif ( @weight : нормальный , @size : 14px , @lineHeight : 20px ) {     
семейство     шрифтов : " Georgia " , Times New Roman , Times , без засечек ;     
размер     шрифта : @size ; _ 
вес     шрифта : @weight ; _ 
высота     строки : @lineHeight ; _ 
  }
  . моноширинный ( @weight : нормальный , @size : 12px , @lineHeight : 20px ) {     
семейство     шрифтов : " Monaco" , Courier New , monospace ;   
размер     шрифта : @size ; _ 
вес     шрифта : @weight ; _ 
высота     строки : @lineHeight ; _ 
  }
}

Градиенты

# градиент {
  . горизонтальный ( @startColor : # 555, @endColor: # 333) { 
цвет     фона : @endColor ; _ 
    фон - повторить : повторить - х ;
    background - image : -khtml - градиент ( линейный , слева вверху , справа вверху , от ( @startColor ), до ( @endColor ) ); // Победитель   
    background - image : -moz - linear - gradient ( left , @startColor , @endColor ) ; // ФФ 3.6+    
    background - image : -ms - linear - gradient ( left , @startColor , @endColor ) ; // IE10    
    фон — изображение : — webkit — градиент ( линейный , слева вверху , справа вверху , цвет — стоп ( 0 %, @startColor ), цвет — стоп ( 100 %, @endColor )); // Сафари 4+, Хром 2+    
    background - image : -webkit - linear - gradient ( left , @startColor , @endColor ) ; // Сафари 5.1+, Хром 10+    
    background - image : -o - linear - gradient ( left , @startColor , @endColor ) ; // Опера 11.10    
    background - image : linear - gradient ( left , @startColor , @endColor ); // Ле стандарт   
  }
  . вертикальный ( @startColor : # 555, @endColor: # 333) { 
цвет     фона : @endColor ; _ 
    фон - повторить : повторить - х ;
    background - image : -khtml - градиент ( линейный , левый верхний , левый нижний , от ( @startColor ) до ( @endColor ) ); // Победитель   
    background - image : -moz - linear - gradient ( @startColor , @endColor ) ; // ФФ 3.6+   
    background - image : -ms - linear - gradient ( @startColor , @endColor ) ; // IE10   
    фон - изображение : -  webkit — градиент ( линейный , слева вверху , слева внизу , цвет — стоп ( 0 %, @startColor ), цвет — стоп ( 100 %, @endColor )); // Сафари 4+, Хром 2+   
    background - image : -webkit - linear - gradient ( @startColor , @endColor ) ; // Сафари 5.1+, Хром 10+   
    background - image : -o - linear - gradient ( @startColor , @endColor ) ; // Опера 11.10   
    фоновое изображение : линейный градиент ( @startColor , @endColor ) ; _ // Стандарт  
  }
  . направленный ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . вертикальный - три цвета ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Операции и сетка

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

// Решетка
@gridColumns : 16 ;       
@gridColumnWidth : 40 пикселей ;   
@gridGutterWidth : 20 пикселей ;   
@siteWidth : ( @gridColumns * @gridColumnWidth )             + ( @gridGutterWidth * ( @gridColumns - 1 ));     
 
// Сеточная система
. контейнер {
  ширина : @siteWidth ; 
  поле : 0 авто ;  
  . ясное исправление ();
}
. столбцы ( @columnSpan : 1 ) {  
  ширина : ( @gridColumnWidth * @columnSpan ) +      ( @gridGutterWidth * ( @columnSpan - 1 ));    
}
. смещение ( @columnOffset : 1 ) {  
  поле слева : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset _         1 ) ) + @extraSpace ;   
}