Базовий CSS

На вершині каркасу базові елементи 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.

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

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

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

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

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

Наголос, звертання та скорочення

елемент Використання Додатково
<strong> Для виділення важливого фрагмента тексту Жодного
<em> Для підкреслення фрагмента тексту з наголосом Жодного
<abbr> Розміщує абревіатури та абревіатури, щоб показати розгорнуту версію при наведенні

Додайте додатковий titleатрибут для розгорнутого тексту

Використовуйте .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>можна використовувати тег:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ПІБ
[email protected]

Приклади скорочень

Абревіатури з titleатрибутом мають світлу пунктирну нижню рамку та довідковий курсор під час наведення. Це дає користувачам додаткову інформацію про те, що буде показано при наведенні курсора.

Додайте initialismклас до абревіатури, щоб збільшити друкарську гармонію, надавши їй трохи менший розмір тексту.

HTML — це найкраще з часів нарізаного хліба.

Абревіатура слова атрибут - attr .

Блок цитат

елемент Використання Додатково
<blockquote> Елемент на рівні блоку для цитування вмісту з іншого джерела

Додайте citeатрибут для URL-адреси джерела

Використання .pull-leftта .pull-rightкласи для плаваючих опцій
<small> Необов’язковий елемент для додавання посилання на користувача, як правило, автора з назвою роботи Розмістіть <cite>навколо заголовка або назви джерела

Щоб включити блок цитати, оберніть <blockquote>будь-який HTML як цитату. Для прямих цитат ми рекомендуємо <p>.

Додайте необов’язковий <small>елемент для посилання на джерело, і ви отримаєте тире &mdash;перед ним для стилізації.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Хтось відомий </small>
  4. </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>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ціле число molesteie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Нестилізований

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ціле число molesteie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Замовив

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Ціле число molesteie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

опис

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

Горизонтальний опис

<dl class="dl-horizontal">

Списки опису
Список описів ідеально підходить для визначення термінів.
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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Голови вгору! Горизонтальні списки описів скоротять терміни, які занадто довгі, щоб поміститися у виправлення лівого стовпця text-overflow. У вужчих вікнах перегляду вони зміняться на макет у вигляді стопки за замовчуванням.

В лінію

Оберніть вбудовані фрагменти коду за допомогою <code>.

  1. Наприклад , розділ < code> </ code > слід обернути як вбудований .

Базовий блок

Використовуйте <pre>для кількох рядків коду. Обов’язково зніміть будь-які кутові дужки в коді для правильного відтворення.

<p>Зразок тексту тут...</p>
  1. <pre>
  2. <p>Зразок тексту тут...</p>
  3. </pre>

Примітка. Обов’язково зберігайте код у <pre>тегах якомога ближче до лівого боку; він відобразить усі вкладки.

За бажанням ви можете додати .pre-scrollableклас, який встановить максимальну висоту 350 пікселів і надасть смугу прокрутки по осі Y.

Google Prettify

Візьміть той самий <pre>елемент і додайте два необов’язкових класи для покращеного відтворення.

  1. <p> Зразок тексту тут... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Зразок тексту тут...</p>
  4. </pre>

Завантажте google-code-prettify і перегляньте readme, щоб дізнатися, як користуватися.

Розмітка таблиці

Тег опис
<table> Елемент обтікання для відображення даних у табличному форматі
<thead> Елемент-контейнер для рядків заголовків таблиці ( <tr>) для позначення стовпців таблиці
<tbody> Елемент-контейнер для рядків таблиці ( <tr>) у тілі таблиці
<tr> Елемент-контейнер для набору комірок таблиці ( <td>або <th>), який відображається в одному рядку
<td> Комірка таблиці за замовчуванням
<th> Спеціальна клітинка таблиці для міток стовпців (або рядків, залежно від обсягу та розташування)
Має використовуватися в межах a<thead>
<caption> Опис або підсумок вмісту таблиці, особливо корисний для програм зчитування з екрана
  1. <таблиця>
  2. <head>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Варіанти таблиці

Ім'я Клас опис
За замовчуванням Жодного Без стилів, лише стовпці та рядки
Базовий .table Тільки горизонтальні лінії між рядами
Облямований .table-bordered Заокруглює кути та додає зовнішню межу
Зебра-смужка .table-striped Додає світло-сірий колір фону до непарних рядків (1, 3, 5 тощо)
Ущільнений .table-condensed Розрізає вертикальний відступ навпіл, від 8 пікселів до 4 пікселів, у всіх елементах tdіth

Приклади таблиць

1. Типові стилі таблиць

Таблиці автоматично стилізуються лише з кількома рамками, щоб забезпечити читабельність і зберегти структуру. З 2.0 .tableклас є обов’язковим.

  1. <table class = "table" >
  2. </table>
# Ім'я Прізвище Ім'я користувача
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Ларрі птах @twitter

2. Смугастий стіл

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

Примітка. Смугасті таблиці використовують :nth-childселектор CSS і недоступні в IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Ім'я Прізвище Ім'я користувача
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Ларрі птах @twitter

3. Облямований стіл

Додайте рамки навколо всього столу та закруглені кути для естетичних цілей.

  1. <table class = "table table-bordered" >
  2. </table>
# Ім'я Прізвище Ім'я користувача
1 Марк Отто @mdo
Марк Отто @getbootstrap
2 Яків Торнтон @жирний
3 Пташка Ларрі @twitter

4. Згорнута таблиця

Зробіть ваші таблиці більш компактними, додавши .table-condensedклас, щоб скоротити відступ клітинок таблиці навпіл (від 8 пікселів до 4 пікселів).

  1. <table class = "table table-condensed" >
  2. </table>
# Ім'я Прізвище Ім'я користувача
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Пташка Ларрі @twitter

5. Об'єднайте їх усіх!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Повне ім'я
# Ім'я Прізвище Ім'я користувача
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Пташка Ларрі @twitter

Гнучкі HTML і CSS

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

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

Включено чотири макети

Bootstrap підтримує чотири типи макетів форм:

  • Вертикальний (за замовчуванням)
  • Пошук
  • В лінію
  • Горизонтальний

Різні типи макетів форм потребують деяких змін у розмітці, але самі елементи керування залишаються та поводяться так само.

Контрольні стани та інше

Форми Bootstrap включають стилі для всіх основних елементів керування форми, таких як введення, текстове поле та вибір, який ви очікували. Але він також поставляється з низкою користувальницьких компонентів, таких як додані вхідні дані та підтримка списків прапорців.

Такі стани, як помилка, попередження та успіх, включені для кожного типу елемента керування формою. Також включено стилі для вимкнених елементів керування.

Чотири типи форм

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

Ім'я Клас опис
Вертикальний (за замовчуванням) .form-vertical (не вимагається) Складені мітки, вирівняні за лівим краєм над елементами керування
В лінію .form-inline Мітка з вирівнюванням за лівим краєм і вбудовані елементи керування для компактного стилю
Пошук .form-search Екстра-округле введення тексту для типової естетики пошуку
Горизонтальний .form-horizontal Плаваючі ліворуч, вирівняні праворуч мітки в одному рядку з елементами керування

Приклади форм із використанням лише елементів керування без додаткової розмітки

Основна форма

Розумні та легкі параметри за замовчуванням без додаткової розмітки.

Приклад тексту довідки на рівні блоку тут.

  1. <form class = "well" >
  2. <label> Назва мітки </label>
  3. <input type = "text" class = "span3" placeholder = "Введіть щось…" >
  4. <span class = "help-block" > Приклад тексту довідки на рівні блоку тут. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Перевірте мене
  7. </label>
  8. <button type = "submit" class = "btn" > Надіслати </button>
  9. </form>

Форма пошуку

Додайте .form-searchдо форми та .search-queryдо input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Пошук </button>
  4. </form>

Вбудована форма

Додайте .form-inlineвитонченості вертикальне вирівнювання та відстань між елементами керування форми.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Запам'ятати мене
  6. </label>
  7. <button type = "submit" class = "btn" > Увійти </button>
  8. </form>

Горизонтальні форми

Праворуч показано всі стандартні елементи керування форми, які ми підтримуємо. Ось маркований список:

  • введення тексту (текст, пароль, електронна пошта тощо)
  • прапорець
  • радіо
  • вибрати
  • множинний вибір
  • введення файлу
  • текстове поле

Крім тексту довільної форми, будь-який текстовий ввід HTML5 виглядає так.

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

З огляду на наведений вище приклад макета форми, ось розмітка, пов’язана з першою групою введення та керування. Усі класи .control-group, .control-label, і .controlsнеобхідні для стилізації.

  1. <form class = "form-horizontal" >
  2. <набір полів>
  3. <legend> Текст легенди </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Введення тексту </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Допоміжний текст довідки </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Контрольні стани форми

Bootstrap містить стилі для підтримуваних браузером фокусів і disabledстанів. Ми видаляємо стандартний Webkit outlineі застосовуємо box-shadowзамість нього для :focus.


Перевірка форми

Він також містить стилі перевірки помилок, попереджень і успіху. Щоб використовувати, додайте клас помилок до оточуючого .control-group.

  1. <fieldset
  2. class = "control-group error" >
  3. </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">після елемента введення.

Використовуйте ті самі .span*класи системи сітки для розмірів введення.

Ви також можете використовувати статичні класи, які не відображаються на сітку, адаптуються до адаптивних стилів CSS або враховують різні типи елементів керування (наприклад, inputпроти select).

@

Ось текст довідки

.00
Ось ще текст довідки
$ .00

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

Кнопка клас="" опис
btn Стандартна сіра кнопка з градієнтом
btn btn-primary Забезпечує додаткову візуальну вагу та визначає основну дію в наборі кнопок
btn btn-info Використовується як альтернатива стилям за замовчуванням
btn btn-success Вказує на успішну або позитивну дію
btn btn-warning Вказує на те, що цю дію слід бути обережним
btn btn-danger Вказує на небезпечну або потенційно негативну дію
btn btn-inverse Альтернативна темно-сіра кнопка, не прив'язана до семантичної дії чи використання

Кнопки для дій

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

Стилі кнопок можна застосовувати до будь-чого, із .btnзастосованим класом. Однак зазвичай ви хочете застосувати їх лише до <a>елементів і <button>.

Кросбраузерна сумісність

IE9 не обрізає фонові градієнти на закруглених кутах, тому ми видаляємо це. Пов’язано з цим, IE9 скасовує вимкнені buttonелементи, відтворюючи текст сірим із неприємною текстовою тінню, яку ми не можемо виправити.

Кілька розмірів

Хочете більші чи менші кнопки? Додайте .btn-large, .btn-smallабо .btn-miniдля двох додаткових розмірів.


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

Для вимкнених кнопок додайте .disabledклас до посилань і disabledатрибут для <button>елементів.

Первинна ланка Посилання

Голови вгору! Ми використовуємо .disabledтут як допоміжний клас, подібний до загального .activeкласу, тому префікс не потрібен.

Один клас, кілька тегів

Використовуйте .btnклас для елемента <a>, <button>, або .<input>

Посилання
  1. <a class = "btn" href = "" > Посилання </a>
  2. <button class = "btn" type = "submit" >
  3. Кнопка
  4. </button>
  5. <input class = "btn" type = "button"
  6. значення = "Вхід" >
  7. <input class = "btn" type = "submit"
  8. значення = "Надіслати" >

Як найкраща практика, намагайтеся відповідати елементу для вашого контексту, щоб забезпечити відповідність міжбраузерним рендерингом. Якщо у вас є input, використовуйте <input type="submit">для своєї кнопки.

  • ікона-скель
  • ікон.-муз
  • іконка-пошук
  • ікона-конверт
  • ікона-серце
  • ікона-зірка
  • значок-зірка-порожній
  • значок користувача
  • ікон-фільм
  • значок-ий-великий
  • значок-й
  • icon-th-list
  • значок-ок
  • значок-видалити
  • icon-zoom-in
  • icon-zoom-out
  • значок вимкнено
  • значок-сигнал
  • значок-гвинтик
  • значок-кошик
  • ікона-дом
  • файл-іконка
  • значок-час
  • ікона-дорога
  • icon-download-alt
  • значок завантаження
  • завантаження значків
  • icon-inbox
  • значок-гра-коло
  • значок-повтор
  • піктограма оновлення
  • icon-list-alt
  • значок-замок
  • значок-прапор
  • значок-навушники
  • icon-volume-off
  • icon-volume-down
  • icon-volume up
  • icon-qrcode
  • значок-штрих-код
  • значок-тег
  • значки-теги
  • іконопис
  • значок-закладка
  • ікона-друк
  • значок-фотоапарат
  • значок-шрифт
  • значок-жирний
  • значок-курсив
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • значок-список
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • ікона-картина
  • значок-олівець
  • значок-карта-маркер
  • налаштування значків
  • відтінок значка
  • icon-edit
  • icon-share
  • значок-перевірка
  • значок-хід
  • icon-step-backward
  • icon-fast-backward
  • значок назад
  • іконогра
  • значок-пауза
  • значок-стоп
  • значок-вперед
  • icon-fast-forward
  • icon-step-forward
  • витягнення значка
  • icon-chevron-left
  • icon-chevron-праворуч
  • значок-плюс
  • значок-знак-мінус
  • icon-remove-sign
  • icon-ok-sign
  • значок-знак питання
  • icon-info-sign
  • іконка-скріншот
  • icon-remove-circle
  • значок-ок-коло
  • значок-заборона-коло
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • значок-плюс
  • значок-мінус
  • значок-зірочка
  • значок-знак оклику
  • ікона-подарунок
  • ікона-лист
  • ікона-вогнище
  • icon-eye-open
  • icon-eye-close
  • значок-попередження-знак
  • ікона-площина
  • ікона-календар
  • значок-випадковий
  • значок-коментар
  • ікона-магніт
  • icon-chevron-up
  • icon-chevron-down
  • значок-ретвіт
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • значок-мегафон
  • ікона-дзвін
  • ікона-грамота
  • значок-великий палець вгору
  • icon-thumbs-down
  • значок-рука-праворуч
  • значок-рука-ліворуч
  • icon-hand-up
  • значок з рук вниз
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • ікона-глобус
  • іконний ключ
  • значки-завдання
  • значок-фільтр
  • ікона-портфель
  • icon-fullscreen

Побудований як спрайт

Замість того, щоб робити кожну піктограму додатковим запитом, ми зібрали їх у спрайт — купу зображень в одному файлі, який використовує CSS для позиціонування зображень за допомогою background-position. Це той самий метод, який ми використовуємо на Twitter.com, і він добре спрацював для нас.

Усі класи піктограм мають префікс .icon-для правильного простору імен і області видимості, як і інші наші компоненти. Це допоможе уникнути конфліктів з іншими інструментами.

Glyphicons надав нам використання набору Halflings у нашому наборі інструментів з відкритим вихідним кодом, якщо ми надамо посилання та кредит тут, у документах. Будь ласка, подумайте про те саме у своїх проектах.

Як використовувати

Bootstrap використовує <i>тег для всіх піктограм, але вони не мають класу case — лише спільний префікс. Щоб використовувати, розмістіть наступний код де завгодно:

  1. <i class = "icon-search" ></i>

Існують також стилі, доступні для перевернутих (білих) піктограм, створених за допомогою одного додаткового класу:

  1. <i class = "icon-search icon-white" ></i>

Для ваших значків є 140 класів. Просто додайте <i>тег із потрібними класами, і все готово. Ви можете знайти повний список у sprites.less або прямо тут, у цьому документі.

Голови вгору! Використовуючи поряд із рядками тексту, як у кнопках або навігаційних посиланнях, обов’язково залишайте пробіл після <i>тегу для правильного інтервалу.

Випадки використання

Іконки чудові, але де їх використовувати? Ось кілька ідей:

  • Як візуальні елементи для вашої бічної панелі навігації
  • Для навігації виключно за допомогою значків
  • Для кнопок, які допомагають передати значення дії
  • З посиланнями для обміну контекстом на місці призначення користувача

По суті, скрізь, де ви можете розмістити <i>тег, ви можете розмістити піктограму.

Приклади

Використовуйте їх у кнопках, групах кнопок для панелі інструментів, навігації або введених форм.