Приклади швидкого запуску

Потрібні швидкі шаблони? Перегляньте ці основні приклади, які ми зібрали:

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

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

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

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

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

Вкладені стовпці

За необхідності вставте свій вміст, створивши .rowв наявному стовпці.

Приклад вкладених стовпців

<div class = "row" > 
  <div class = "span12" > 
    1 рівень колонки
    <div class = "row" > 
      <div class = "span6" > 
        Рівень 2
      </div>
      <div class = "span6" > 
        Рівень 2
      </div>
    </div>
  </div>
</div>

Розгорніть власну сітку

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

Всередині сітки

Усі змінні, необхідні для модифікації системи сітки, наразі знаходяться в preboot.less.

Тепер для налаштування

Зміна сітки означає зміну трьох @grid-*змінних і перекомпіляцію файлів Less.

Bootstrap оснащений системою сітки до 24 стовпців; за замовчуванням лише 16. Ось як виглядатимуть ваші змінні сітки, налаштовані на сітку з 24 стовпців.

@gridColumns : 24 ;       
@gridColumnWidth : 20 пікселів ;   
@gridGutterWidth : 20 пікселів ;   

Після перекомпіляції ви будете готові!

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

Стандартний і простий макет шириною 940 пікселів по центру майже для будь-якого веб-сайту чи сторінки, наданий одним <div.container>.

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

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

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

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

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

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

Вся типографічна сітка базується на двох змінних Less у нашому файлі preboot.less: @basefontі @baseline. Перший — це базовий розмір шрифту, який використовується всюди, а другий — базова висота рядка.

Ми використовуємо ці змінні та трохи математики, щоб створити поля, відступи та висоту рядків усіх наших типів тощо.

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

Примітка. Використовувати теги <b>і <i>в HTML5 можна, і їх не потрібно виділяти напівжирним шрифтом і курсивом відповідно (хоча, якщо є більш семантичний елемент, використовуйте його). <b>призначений для виділення слів або фраз без надання додаткової важливості, тоді <i>як здебільшого для голосу, технічних термінів тощо.

Адреси

Елемент <address>використовується для отримання контактної інформації щодо його найближчого предка або вс��єї роботи. Ось два приклади того, як це можна використовувати:

Примітка: кожен рядок <address>має закінчуватися розривом рядка ( <br />) або бути загорнутий у тег рівня блоку (наприклад, <p>), щоб правильно структурувати вміст.

Скорочення

Для абревіатур і абревіатур використовуйте <abbr>тег ( <acronym>не підтримується в HTML5 ). Помістіть скорочену форму в тег і встановіть назву для повної назви.

Блок цитат

<blockquote> <p> <small>

Як цитувати

Щоб включити цитату, оберніть <blockquote>і <p>теги <small>. Використовуйте <small>елемент, щоб цитувати своє джерело, і ви отримаєте тире —перед ним.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Доктор Юліус Гібберт

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Доктор Юліус Гібберт </small>
</blockquote>

Невпорядкований<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.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.

Код

<code> <pre>

Проведіть свій код стильно за допомогою двох простих тегів. Для ще більшої приголомшливості через javascript додайте бібліотеку коду Google prettify і все готово.

Представлення коду

Код, блоки або просто вбудовані фрагменти можна стильно відобразити, просто загорнувши правильний тег. Для блоків коду, що охоплюють кілька рядків, використовуйте <pre>елемент. Для вбудованого коду використовуйте <code>елемент.

<div>
  <h1>Заголовок</h1>
  <p>Щось тут...</p>
</div>

<div> <h1> Заголовок </h1> <p> Щось тут... </p> </div>
  
  

Вбудовані мітки

<span class="label">

Привертайте увагу до будь-якої фрази в основному тексті або позначайте її.

Позначте будь-що

Завжди потрібен був один із тих модних Новинок ! або Важливі позначки під час написання коду? Ну, тепер вони у вас є. Ось що включено за умовчанням:

Медіа сітка

Відображайте мініатюри різного розміру на сторінках з низьким вмістом HTML і мінімальними стилями.

Приклади мініатюр

Мініатюри .media-gridможуть бути будь-якого розміру, але вони найкраще працюють, якщо зіставляються безпосередньо з вбудованою сітковою системою Bootstrap. Ширина зображень, як-от 90, 210 і 330, поєднується з кількома пікселями заповнення, щоб дорівнювати розмірам .span2, .span4, і .span6стовпців.

Великий

Середній

Маленький

Кодування їх

Медіа-сітки прості у використанні та досить прості з боку розмітки. Їхні розміри залежать виключно від розміру включених зображень.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Будівельні столи

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

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

Завжди складайте заголовки стовпців <thead>таким чином, щоб ієрархія була <thead>> <tr>> <th>.

Подібно до заголовків стовпців, увесь вміст основного вмісту вашої таблиці має бути загорнуто в , <tbody>щоб ваша ієрархія була <tbody>> <tr>> <td>.

Приклад: стилі таблиці за замовчуванням

Усі таблиці будуть автоматично стилізовані лише з основними межами, щоб забезпечити читабельність і зберегти структуру. Не потрібно додавати додаткові класи чи атрибути.

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

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

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

Примітка. Zebra-striping — це прогресивне вдосконалення, недоступне для старіших браузерів, таких як IE8 і старіших.

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

Приклад: Zebra-striped w/ TableSorter.js

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

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

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

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

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

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

Розміри поля форми

Налаштуйте будь-яку форму input, selectабо textareaширину, додавши лише кілька класів до розмітки.

Починаючи з версії 1.3.0, ми додали класи розмірів на основі сітки для елементів форми. Будь ласка, використовуйте це замість існуючих класів .mini, .small, тощо.

кнопки

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

Усі кнопки за замовчуванням мають світло-сірий стиль, але ряд функціональних класів можна застосувати для різних колірних стилів. Ці класи включають синій .primaryклас, світло-блакитний .infoклас, зелений .successклас і червоний .dangerклас.

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

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

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

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

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

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

Посилання

кнопки

Що це

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

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

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

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

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

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

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

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

• додому
• Профіль
• Повідомлення
• Налаштування
• контакт
• спадний список
  • Вторинна ланка
  • Тут ще щось
  • Ще одне посилання

<ul 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 = "таблетки" > 
  <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 = "breadcrumb" > 
  <li><a href = "#" > Домашня сторінка </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Середня сторінка </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ще один </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Ви тут </li> 
</ul>

Пагінація

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

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

Основні оповіщення

.alert-message

Однорядкові повідомлення для підсвічування невдачі, можливої ​​невдачі або успіху дії. Особливо корисний для форм.

Отримати javascript »

Приклад коду

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Свято гуакамоле! </strong> Краще перевірте себе, ви виглядаєте не дуже добре. </p>
</div>

Блокувати повідомлення

.alert-message.block-message

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

Отримати javascript »

Приклад коду

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Святе гуакамоле! Це попередження! </strong> Краще перевірте себе, ви виглядаєте не дуже добре. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Виконайте цю дію </a> <a class = "btn small" href = "#" > Або зробіть це </a>     
  </div>
</div>

Модальні

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

Отримати javascript »

Підказки

Twipsies надзвичайно корисні, щоб допомогти заплутаному користувачеві та вказати йому правильний напрямок.

Отримати javascript »

Поповери

Використовуйте спливні елементи, щоб надати підтекстову інформацію на сторінці, не впливаючи на макет.

Отримати javascript »

Починаємо

Інтегрувати javascript із бібліотекою Bootstrap надзвичайно просто. Нижче ми розглянемо основи та надамо вам кілька чудових плагінів, які допоможуть вам почати!

Переглянути документи javascript »

Що включено

Оживіть деякі з основних компонентів Bootstrap за допомогою нових спеціальних плагінів, які працюють із jQuery та Ender . Ми заохочуємо вас розширювати та змінювати їх відповідно до ваших конкретних потреб розробки.

Чи потрібен javascript?

ні! Bootstrap розроблено, перш за все, як бібліотеку CSS. Цей JavaScript надає базовий інтерактивний шар поверх включених стилів.

Тим не менш, для тих, кому потрібен javascript, ми надали плагіни вище, щоб допомогти вам зрозуміти, як інтегрувати Bootstrap з javascript, і надати вам швидкий, легкий варіант для базових функцій відразу.

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