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

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

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

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

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

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

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

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

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

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

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

Заголовки и копия

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

ч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>

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

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

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

Адреса

Элемент addressиспользуется для — как вы уже догадались! — адресов. Вот как это выглядит:

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

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

Сокращения

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

Цитаты

<blockquote> <p> <cite>

Обязательно оберните blockquoteвокруг себя paragraphи citeтеги. При ссылке на источник используйте citeэлемент. CSS автоматически ставит перед именем длинное тире (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua...

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

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

• Джереми Биксби
• Роберт Дезур
• Джош Вашингтон
• Антон Капрези
• Мои товарищи по команде
  • Джордж Кастанца
  • Джерри Сайнфелд
  • Космо Крамер
  • Элейн Беннис
  • Новый человек
• Джон Джейкоб
• Пол Пирс
• Кевин Гарнетт

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

• Джереми Биксби
• Роберт Дезур
• Джош Вашингтон
• Антон Капрези
• Мои товарищи по команде
  • Джордж Кастанца
  • Джерри Сайнфелд
  • Космо Крамер
  • Элейн Беннис
  • Новый человек
• Джон Джейкоб
• Пол Пирс
• Кевин Гарнетт

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

1. Джереми Биксби
2. Роберт Дезур
3. Джош Вашингтон
4. Антон Капрези
5. Мои товарищи по команде
   1. Джордж Кастанца
   2. Джерри Сайнфелд
   3. Космо Крамер
   4. Элейн Беннис
   5. Новый человек
6. Джон Джейкоб
7. Пол Пирс
8. Кевин Гарнетт

Описание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	Стью	Вмятина	Код

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

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

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

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

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< тип сценария = "текст/javascript" > 
  $ ( документ ). готов ( функция () { 
    $ ( "таблица#sortTableExample" ). сортировщик таблиц ( { sortList : [[ 1 , 0 ]]} );   
  });
</скрипт>
< класс таблицы = "полосатая полосатая таблица" > 
  ...
</таблица>

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

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

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

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

Выбирать

1 2 3 4 5

Выбирать

1 2 3 4 5

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

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

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

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

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

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

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

@

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

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

Ввод файла

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

Список опций

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

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

Диапазон дат

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

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

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

Список опций

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

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

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

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

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

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

Выбирать

1 2 3 4 5

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

Список опций

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

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

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

Кнопки

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

Все кнопки по умолчанию светло-серого цвета, но .primaryдоступен синий класс. Кроме того, создавать собственные стили очень просто.

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

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

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

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

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

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

Ссылки

Кнопки

Что это

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

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

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

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

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

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

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

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

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

<ул класс="вкладки"> класс = "вкладки" >
  <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 class="разбиение на страницы"> класс = "разбивка на страницы" >
  <ул>
    <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>

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

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

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

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

Модальные

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

Поповеры

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

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

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

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

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

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.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 ;            
// Базовый уровень
@базовый : 20 пикселей ;          

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

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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 и IE7 
    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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 и IE7 
    фоновое изображение : линейный градиент ( @startColor , @endColor ) ; _ // Стандарт  
  }
  . направленный ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . вертикальный - три цвета ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

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

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

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