На вершині каркасу базові елементи HTML стилізовано та вдосконалено розширюваними класами, щоб забезпечити свіжий, послідовний вигляд і відчуття.
Вся типографічна сітка базується на двох змінних Less у нашому файлі variables.less: @baseFontSizeі @baseLineHeight. Перший — це базовий розмір шрифту, який використовується всюди, а другий — базова висота рядка.
Ми використовуємо ці змінні та трохи математики, щоб створити поля, відступи та висоту рядків усіх наших типів тощо.
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.
Виділіть абзац, додавши .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| елемент | Використання | Додатково |
|---|---|---|
<strong> |
Для виділення важливого фрагмента тексту | Жодного |
<em> |
Для підкреслення фрагмента тексту з наголосом | Жодного |
<abbr> |
Розміщує абревіатури та абревіатури, щоб показати розгорнуту версію при наведенні | Додайте додатковий .initialismклас для абревіатур у верхньому регістрі. |
<address> |
Щоб отримати контактну інформацію щодо найближчого предка або всієї роботи | Зберігайте форматування, закінчуючи всі рядки на<br> |
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.
Примітка. Не соромтеся використовувати <b>і <i>в HTML5, але їх використання дещо змінилося. <b>призначений для виділення слів або фраз без надання додаткової важливості, тоді <i>як переважно для голосу, технічних термінів тощо.
Ось два приклади того, як <address>можна використовувати тег:
Абревіатури з titleатрибутом мають світлу пунктирну нижню рамку та довідковий курсор під час наведення. Це дає користувачам додаткову інформацію про те, що буде показано при наведенні курсора.
Додайте initialismклас до абревіатури, щоб збільшити друкарську гармонію, надавши їй трохи менший розмір тексту.
HTML — це найкраще з часів нарізаного хліба.
Абревіатура слова атрибут - attr .
| елемент | Використання | Додатково |
|---|---|---|
<blockquote> |
Елемент на рівні блоку для цитування вмісту з іншого джерела | Додайте .pull-leftта .pull-rightкласи для плаваючих опцій |
<small> |
Необов’язковий елемент для додавання посилання на користувача, як правило, автора з назвою роботи | Розмістіть <cite>навколо заголовка або назви джерела |
Щоб включити блок цитати, оберніть <blockquote>будь-який HTML як цитату. Для прямих цитат ми рекомендуємо <p>.
Додайте необов’язковий <small>елемент для посилання на джерело, і ви отримаєте тире —перед ним для стилізації.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Хтось відомий </small>
- </blockquote>
Типові цитати мають такий стиль:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Хтось відомий у своїй роботі
Щоб перемістити цитату вправо, додайте class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Хтось відомий у своїй роботі
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Голови вгору! Горизонтальні списки описів скоротять терміни, які занадто довгі, щоб поміститися у виправлення лівого стовпця text-overflow. У вужчих вікнах перегляду вони зміняться на макет у вигляді стопки за замовчуванням.
Оберніть вбудовані фрагменти коду за допомогою <code>.
- Наприклад , розділ < code> </ code > слід обернути як вбудований .
Використовуйте <pre>для кількох рядків коду. Обов’язково зніміть будь-які кутові дужки в коді для правильного відтворення.
<p>Зразок тексту тут...</p>
- <pre>
- <p>Зразок тексту тут...</p>
- </pre>
Примітка. Обов’язково зберігайте код у <pre>тегах якомога ближче до лівого боку; він відобразить усі вкладки.
За бажанням ви можете додати .pre-scrollableклас, який встановить максимальну висоту 350 пікселів і надасть смугу прокрутки по осі Y.
Візьміть той самий <pre>елемент і додайте два необов’язкових класи для покращеного відтворення.
- <p> Зразок тексту тут... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Зразок тексту тут...</p>
- </pre>
Завантажте google-code-prettify і перегляньте readme, щоб дізнатися, як користуватися.
| Тег | опис |
|---|---|
<table> |
Елемент обтікання для відображення даних у табличному форматі |
<thead> |
Елемент-контейнер для рядків заголовків таблиці ( <tr>) для позначення стовпців таблиці |
<tbody> |
Елемент-контейнер для рядків таблиці ( <tr>) у тілі таблиці |
<tr> |
Елемент-контейнер для набору комірок таблиці ( <td>або <th>), який відображається в одному рядку |
<td> |
Комірка таблиці за замовчуванням |
<th> |
Спеціальна клітинка таблиці для міток стовпців (або рядків, залежно від обсягу та розташування) Має використовуватися в межах a <thead> |
<caption> |
Опис або підсумок вмісту таблиці, особливо корисний для програм зчитування з екрана |
- <таблиця>
- <head>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Ім'я | Клас | опис |
|---|---|---|
| За замовчуванням | Жодного | Без стилів, лише стовпці та рядки |
| Базовий | .table |
Тільки горизонтальні лінії між рядами |
| Облямований | .table-bordered |
Заокруглює кути та додає зовнішню межу |
| Зебра-смужка | .table-striped |
Додає світло-сірий колір фону до непарних рядків (1, 3, 5 тощо) |
| Ущільнений | .table-condensed |
Розрізає вертикальний відступ навпіл, від 8 пікселів до 4 пікселів, у всіх елементах tdіth |
Таблиці автоматично стилізуються лише з кількома рамками, щоб забезпечити читабельність і зберегти структуру. З 2.0 .tableклас є обов’язковим.
- <table class = "table" >
- …
- </table>
| # | Ім'я | Прізвище | Ім'я користувача |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яків | Торнтон | @жирний |
| 3 | Ларрі | птах |
Додайте трохи фантазії зі своїми столами, додавши смуги зебри — просто додайте .table-stripedклас.
Примітка. Смугасті таблиці використовують :nth-childселектор CSS і недоступні в IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Ім'я | Прізвище | Ім'я користувача |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яків | Торнтон | @жирний |
| 3 | Ларрі | птах |
Додайте рамки навколо всього столу та закруглені кути для естетичних цілей.
- <table class = "table table-bordered" >
- …
- </table>
| # | Ім'я | Прізвище | Ім'я користувача |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| Марк | Отто | @getbootstrap | |
| 2 | Яків | Торнтон | @жирний |
| 3 | Пташка Ларрі | ||
Зробіть ваші таблиці більш компактними, додавши .table-condensedклас, щоб скоротити відступ клітинок таблиці навпіл (від 8 пікселів до 4 пікселів).
- <table class = "table table-condensed" >
- …
- </table>
| # | Ім'я | Прізвище | Ім'я користувача |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яків | Торнтон | @жирний |
| 3 | Пташка Ларрі | ||
Не соромтеся поєднувати будь-які класи таблиць, щоб отримати різний вигляд, використовуючи будь-який із доступних класів.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Повне ім'я | |||
|---|---|---|---|
| # | Ім'я | Прізвище | Ім'я користувача |
| 1 | Марк | Отто | @mdo |
| 2 | Яків | Торнтон | @жирний |
| 3 | Пташка Ларрі | ||
Найкраща частина форм у Bootstrap полягає в тому, що всі ваші вхідні дані та елементи керування виглядають чудово незалежно від того, як ви створюєте їх у своїй розмітці. Зайвий HTML не потрібен, але ми надаємо шаблони для тих, кому це потрібно.
Складніші макети мають стислі та масштабовані класи для легкого стилізації та зв’язування подій, тож ви будете охоплені на кожному кроці.
Bootstrap підтримує чотири типи макетів форм:
Різні типи макетів форм потребують деяких змін у розмітці, але самі елементи керування залишаються та поводяться так само.
Форми Bootstrap включають стилі для всіх основних елементів керування форми, таких як введення, текстове поле та вибір, який ви очікували. Але він також поставляється з низкою користувальницьких компонентів, таких як додані вхідні дані та підтримка списків прапорців.
Такі стани, як помилка, попередження та успіх, включені для кожного типу елемента керування формою. Також включено стилі для вимкнених елементів керування.
Bootstrap надає просту розмітку та стилі для чотирьох стилів поширених веб-форм.
| Ім'я | Клас | опис |
|---|---|---|
| Вертикальний (за замовчуванням) | .form-vertical (не вимагається) |
Складені мітки, вирівняні за лівим краєм над елементами керування |
| В лінію | .form-inline |
Мітка з вирівнюванням за лівим краєм і вбудовані елементи керування для компактного стилю |
| Пошук | .form-search |
Екстра-округле введення тексту для типової естетики пошуку |
| Горизонтальний | .form-horizontal |
Плаваючі ліворуч, вирівняні праворуч мітки в одному рядку з елементами керування |
Розумні та легкі параметри за замовчуванням без додаткової розмітки.
- <form class = "well" >
- <label> Назва мітки </label>
- <input type = "text" class = "span3" placeholder = "Введіть щось…" >
- <span class = "help-block" > Приклад тексту довідки на рівні блоку тут. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Перевірте мене
- </label>
- <button type = "submit" class = "btn" > Надіслати </button>
- </form>
Додайте .form-searchдо форми та .search-queryдо input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Пошук </button>
- </form>
Додайте .form-inlineвитонченості вертикальне вирівнювання та відстань між елементами керування форми.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > Запам'ятати мене
- </label>
- <button type = "submit" class = "btn" > Увійти </button>
- </form>
Праворуч показано всі стандартні елементи керування форми, які ми підтримуємо. Ось маркований список:
З огляду на наведений вище приклад макета форми, ось розмітка, пов’язана з першою групою введення та керування. Усі класи .control-group, .control-label, і .controlsнеобхідні для стилізації.
- <form class = "form-horizontal" >
- <набір полів>
- <legend> Текст легенди </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Введення тексту </label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Допоміжний текст довідки </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap містить стилі для підтримуваних браузером фокусів і disabledстанів. Ми видаляємо стандартний Webkit outlineі застосовуємо box-shadowзамість нього для :focus.
Він також містить стилі перевірки помилок, попереджень і успіху. Щоб використовувати, додайте клас помилок до оточуючого .control-group.
- <fieldset
- class = "control-group error" >
- …
- </fieldset>
Групи введення — із доданим текстом або перед ним — забезпечують простий спосіб надати більше контексту вашим введенням. Чудові приклади включають знак @ для імен користувачів Twitter або $ для фінансів.
До версії 1.4 Bootstrap вимагав додаткової розмітки навколо прапорців і радіостанцій, щоб їх об’єднати. Тепер просто повторити те <label class="checkbox">, що обертає <input type="checkbox">.
Також підтримуються вбудовані прапорці та радіо. Просто додайте .inlineдо будь -якого .checkboxабо .radioі готово.
Щоб використовувати вхідні дані перед чи додаванням у вбудованій формі, обов’язково розмістіть .add-onта inputв одному рядку без пробілів.
Щоб додати довідковий текст для введених даних форми, додайте вбудований довідковий текст <span class="help-inline">або блок довідкового тексту <p class="help-block">після елемента введення.
Замість того, щоб робити кожну піктограму додатковим запитом, ми зібрали їх у спрайт — купу зображень в одному файлі, який використовує CSS для позиціонування зображень за допомогою background-position. Це той самий метод, який ми використовуємо на Twitter.com, і він добре спрацював для нас.
Усі класи піктограм мають префікс .icon-для правильного простору імен і області видимості, як і інші наші компоненти. Це допоможе уникнути конфліктів з іншими інструментами.
Glyphicons надав нам використання набору Halflings у нашому наборі інструментів з відкритим вихідним кодом, якщо ми надамо посилання та кредит тут, у документах. Будь ласка, подумайте про те саме у своїх проектах.
Bootstrap використовує <i>тег для всіх піктограм, але вони не мають класу case — лише спільний префікс. Щоб використовувати, розмістіть наступний код де завгодно:
- <i class = "icon-search" ></i>
Існують також стилі, доступні для перевернутих (білих) піктограм, створених за допомогою одного додаткового класу:
- <i class = "icon-search icon-white" ></i>
Для ваших значків є 140 класів. Просто додайте <i>тег із потрібними класами, і все готово. Ви можете знайти повний список у sprites.less або прямо тут, у цьому документі.
Голови вгору! Використовуючи поряд із рядками тексту, як у кнопках або навігаційних посиланнях, обов’язково залишайте пробіл після <i>тегу для правильного інтервалу.
Іконки чудові, але де їх використовувати? Ось кілька ідей:
По суті, скрізь, де ви можете розмістити <i>тег, ви можете розмістити піктограму.
Використовуйте їх у кнопках, групах кнопок для панелі інструментів, навігації або введених форм.