Сітка за замовчуванням

Система сітки за замовчуванням, яка є частиною Bootstrap, є сіткою з 16 стовпців шириною 940 пікселів. Це різновид популярної системи сітки 960, але без додаткових полів/заповнення зліва та справа.

Приклад розмітки сітки

Як показано тут, базовий макет можна створити за допомогою двох «стовпців», кожен з яких охоплює кілька з 16 основних стовпців, які ми визначили як частину нашої сітки. Перегляньте приклади нижче, щоб дізнатися більше варіантів.

<div class="row">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Фіксований макет

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

<тіло>
  <div class = "container" > 
    ...
  </div>
</body>

Гнучкий макет

Гнучка плавна або рідка структура сторінки з мінімальною та максимальною шириною та лівою бічною панеллю. Чудово підходить для програм.

<тіло>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

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

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

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

h2. Заголовок 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. Меценат faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Адреси

Елемент addressвикористовується для — ви здогадалися! — адрес. Ось як це виглядає:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (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

Списки опису

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

Euismod

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	Стю	Дент	Код

<table class="common-table"> class = "common-table" >
  ...
</table>

Приклад: смугастий зебра

Додайте трохи фантазії зі своїми столами, додавши смуги зебри — просто додайте .zebra-stripedклас.

#	Ім'я	Прізвище	Мову
1	Деякі	Один	англійська
2	Джо	Шість пачок	англійська
3	Стю	Дент	Код

<table class="common-table zebra-striped"> class = "common-table zebra-striped" >
...
</table>

Приклад: Zebra-striped w/ 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> 
<script type = "text/javascript" > 
  $ ( документ ). готовий ( функція () { 
    $ ( "table#sortTableExample" ). сортувальник таблиць ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Стилі за замовчуванням

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

Приклад легенди форми

X-Large Input

Виберіть

1 2 3 4 5

Виберіть

1 2 3 4 5

Нередагований вхід

Тут певна цінність

Вимкнено введення

X-Large Input

Невеликий фрагмент довідкового тексту

Приклад легенди форми

Доданий текст

@

Доданий прапорець

Доданий прапорець

Введення файлу

Приклад легенди форми

Список опцій

• Варіант один — те й те — обов’язково вкажіть, чому це чудово
• Другий варіант також можна перевірити та включити до результатів форми
• Варіант третій — так, ви здогадалися — також можна перевірити та включити до результатів форми
• Варіант четвертий не можна перевірити, оскільки він вимкнений.

Примітка. Мітки оточують усі параметри для значно більших областей клацання та зручнішої форми.

Проміжок часу

до Весь час показано за тихоокеанським стандартним часом (GMT -08:00).

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

Блок довідкового тексту для опису поля вище, якщо це необхідно.

Список опцій

• Варіант один — те й те — обов’язково вкажіть, чому це чудово
• Другий варіант також можна перевірити та включити до результатів форми

Зберегти зміни Скасувати

Складені форми

Додайте .form-stackedдо своєї форми HTML, і ви матимете мітки вгорі їхніх полів, а не ліворуч. Це чудово працює, якщо ваші форми короткі або у вас є два стовпці вводу для важчих форм.

Приклад легенди форми

X-Large Input

Виберіть

1 2 3 4 5

Приклад легенди форми

Список опцій

• Варіант один — те й те — обов’язково вкажіть, чому це чудово
• Другий варіант також можна перевірити та включити до результатів форми

Примітка. Мітки оточують усі параметри для значно більших областей клацання та зручнішої форми.

Зберегти зміни Скасувати

кнопки

За домовленістю кнопки використовуються для дій, а посилання – для об’єктів. Наприклад, «Завантажити» може бути кнопкою, а «останні дії» — посиланням.

Усі кнопки за замовчуванням мають світло-сірий стиль, але .primaryдоступний синій клас. Крім того, створювати власні стилі легко.

Приклад кнопок

Стилі кнопок можна застосовувати до будь-чого, до чого .btnзастосовано. Зазвичай ви бажаєте застосувати їх лише до елементів a, button, і вибраних inputелементів. Ось як це виглядає:

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

Хочете більші чи менші кнопки? Майте на це!

Відключений стан

Для кнопок, які не активні або вимкнені програмою з тих чи інших причин, використовуйте стан вимкнено. Це .disabledстосується посилань і :disabledелементів button.

Посилання

кнопки

Що це

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

Можливість налаштування

Усі елементи всередині, а також уся верхня панель є необов’язковими. Ви можете додати логотип/ім’я, навігацію, пошук і додаткову навігацію або будь-яку комбінацію цього.

Випадаючі меню включено

Як частину основної навігації ми включили можливість додавати розкривні меню до навігації. Перегляньте додаткову навігацію вище (вирівняну за правим краєм), щоб побачити, як це робиться.

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

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

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

• додому
• Профіль
• Повідомлення
• Налаштування
• контакт

<ul class="tabs"> class = "tabs" >
  <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="таблетки"> 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="pagination"> class = "pagination" >
  <ul>
    <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 = "next" ><a href = "" > Next → </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 ;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@рожевий : #c3325f ;              
@фіолетовий : #7a43b6 ;            
// Базова лінія
@baseline : 20px ;          

Коментування

Less також надає інший стиль коментування на додаток до звичайного /* ... */синтаксису CSS.

// Це коментар
/* Це теж коментар */

Змішує wazoo

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

Стоси шрифтів

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

градієнти

#градієнт {
  . горизонтальний ( @startColor : #555, @endColor: #333) { 
колір     фону : @endColor ; _ 
    фон - повтор : повтор - x ;
    фонове зображення : - khtml - градієнт ( лінійний , ліворуч зверху , праворуч зверху , від ( @startColor ), до ( @endColor ) ); // Konqueror   
    фонове зображення : - moz - linear - gradient ( ліворуч , @startColor , @endColor ) ; // FF 3.6+    
    фонове зображення : - мс - лінійне - градієнт ( ліворуч , @startColor , @endColor ) ; // IE10    
    фонове зображення : - webkit - градієнт ( лінійний , ліворуч зверху , праворуч зверху , колір - зупинка ( 0 %, @startColor ), колір - стоп ( 100 %, @endColor ) ); // Safari 4+, Chrome 2+    
    фонове зображення : - webkit - лінійне - градієнт ( ліворуч , @startColor , @endColor ) ; // Safari 5.1+, Chrome 10+    
    фонове зображення : - o - лінійне - градієнт ( ліворуч , @startColor , @endColor ) ; // Opera 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 
    фонове зображення : лінійний градієнт ( ліворуч , @startColor , @endColor ) ; _ // Le standard   
  }
  . вертикальний ( @startColor : #555, @endColor: #333) { 
колір     фону : @endColor ; _ 
    фон - повтор : повтор - x ;
    фонове зображення : - khtml - градієнт ( лінійний , ліворуч зверху , ліворуч знизу , від ( @startColor ), до ( @endColor ) ); // Konqueror   
    тло - зображення : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    тло - зображення : - мс - лінійне - градієнт ( @startColor , @endColor ); // IE10   
    тло - зображення : - webkit - градієнт ( лінійний , ліворуч зверху , ліворуч знизу , колір - стоп ( 0 %, @startColor ), колір - стоп ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    тло - зображення : - webkit - лінійне - градієнт ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    тло - зображення : - o - лінійне - градієнт ( @startColor , @endColor ); // Opera 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) { 
    ...
  }
}

Операції та грід-система

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

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40 пікселів ;   
@gridGutterWidth : 20 пікселів ;   
// Грід-система
. контейнер {
  ширина : @siteWidth ; 
  запас : 0 авто ;  
  . clearfix ();
}
. стовпці ( @columnSpan : 1 ) {  
  дисплей : вбудований ; 
  float : ліворуч ;
  ширина : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  поле - зліва : @gridGutterWidth ; 
  &: перша - дитина {
    поле - зліва : 0 ; 
  }
}
. зсув ( @columnOffset : 1 ) {  
  поле - ліворуч : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! важливий ;          
}