Etiam porta sem malesuada magna mollis euismod. Меценат faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum та eros.
Bootstrap — це набір інструментів від Twitter, призначений для швидкого запуску розробки веб-додатків і сайтів.
Він містить базовий CSS і HTML для типографіки, форм, кнопок, таблиць, сіток, навігації тощо.
Попередження для ботаніка: Bootstrap створено за допомогою Less і розроблено для роботи з сучасними браузерами.
Для найшвидшого та найпростішого початку просто скопіюйте цей фрагмент на свою веб-сторінку.
Любите використовувати Less? Не проблема, просто клонуйте репо та додайте ці рядки:
Завантаження, розгалуження, вилучення, проблеми з файлами тощо з офіційним репозиторієм Bootstrap на Github.
Наразі v1.3.0
Інженери Twitter історично використовували майже будь-яку бібліотеку, з якою вони були знайомі, щоб відповідати вимогам інтерфейсу. Bootstrap почався як відповідь на виклики, які виникли. Завдяки допомозі багатьох чудових людей Bootstrap значно виріс.
Читайте більше на dev.twitter.com ›
Bootstrap протестовано та підтримується в основних сучасних браузерах, таких як Chrome, Safari, Internet Explorer і Firefox.
Bootstrap постачається в комплекті зі скомпільованими CSS, нескомпільованими та прикладами шаблонів.
Система сітки за замовчуванням, яка є частиною 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 пікселів. Трохи налаштувавши, ви можете змінювати розмір колон, їхні жолоби та контейнер, у якому вони розташовані.
Усі змінні, необхідні для модифікації системи сітки, наразі знаходяться в variables.less
.
змінна | Значення за замовчуванням | опис |
---|---|---|
@gridColumns |
16 | Кількість стовпців у сітці |
@gridColumnWidth |
40 пікселів | Ширина кожного стовпця в сітці |
@gridGutterWidth |
20 пікселів | Від’ємний пробіл між кожним стовпцем |
@siteWidth |
Обчислена сума всіх колон і жолобів | Ми використовуємо базовий відповідник, щоб підрахувати кількість стовпчиків і жолобів і встановити ширину .fixed-container() міксину. |
Зміна сітки означає зміну трьох @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 у нашому файлі variables.less: @basefont
і @baseline
. Перший — це базовий розмір шрифту, який використовується всюди, а другий — базова висота рядка.
Ми використовуємо ці змінні та трохи математики, щоб створити поля, відступи та висоту рядків усіх наших типів тощо.
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>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Стильно проведіть свій код за допомогою двох простих тегів. Для ще більшої приголомшливості через javascript додайте бібліотеку коду Google prettify і все готово.
Код, блоки або просто вбудовані фрагменти можна стильно відобразити, просто загорнувши правильний тег. Для блоків коду, що охоплюють кілька рядків, використовуйте <pre>
елемент. Для вбудованого коду використовуйте <code>
елемент.
елемент | Результат |
---|---|
<code> |
У такому рядку тексту ваш обернутий код виглядатиме як цей <html> елемент. |
<pre> |
<div> <h1>Заголовок</h1> <p>Щось тут...</p> </div> Примітка. Обов’язково зберігайте код у |
<pre class="prettyprint"> |
Використовуючи бібліотеку google-code-prettify, ваші блоки коду отримують дещо інший візуальний стиль і автоматичне підсвічування синтаксису. <div> <h1> Заголовок </h1> <p> Щось тут... </p> </div> Завантажте google-code-prettify і перегляньте readme, щоб дізнатися, як користуватися. |
<span class="label">
Привертайте увагу до будь-якої фрази в основному тексті або позначайте її.
Завжди потрібен був один із тих модних Новинок ! або Важливі позначки під час написання коду? Ну, тепер вони у вас є. Ось що включено за умовчанням:
Мітка | Результат |
---|---|
<span class="label">Default</span> |
За замовчуванням |
<span class="label success">New</span> |
новий |
<span class="label warning">Warning</span> |
УВАГА |
<span class="label important">Important</span> |
важливо |
<span class="label notice">Notice</span> |
Повідомлення |
Відображайте мініатюри різного розміру на сторінках з низьким вмістом 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>
.
Усі таблиці будуть автоматично стилізовані лише з основними межами, щоб забезпечити читабельність і зберегти структуру. Не потрібно додавати додаткові класи чи атрибути.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | Деякі | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
- <таблиця>
- ...
- </table>
Для таблиць, які вимагають більше даних у обмеженому просторі, використовуйте згорнутий смак, який скорочує відступ наполовину. Його також можна використовувати в поєднанні з рамками та смужками зебри, як і стандартні стилі таблиць.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | Деякі | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
Зробіть ваші столи трохи витонченішими, закругливши їхні кути та додавши рамки з усіх боків.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | Деякі | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
- <table class = "bordered-table" >
- ...
- </table>
Додайте трохи фантазії зі своїми столами, додавши смуги зебри — просто додайте .zebra-striped
клас.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | Деякі | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
протягнути 4 стовпчики | |||
протягнути 2 стовпчики | протягнути 2 стовпчики |
Примітка. Zebra-striping — це прогресивне вдосконалення, недоступне для старіших браузерів, таких як IE8 і старіших.
- <table class = "zebra-striped" >
- ...
- </table>
Беручи попередній приклад, ми покращуємо корисність наших таблиць, забезпечуючи функцію сортування через jQuery та плагін Tablesorter . Клацніть заголовок будь-якого стовпця, щоб змінити сортування.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
1 | ваш | Один | англійська |
- <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>
.
.alert-message
Однорядкові повідомлення для підсвічування невдачі, можливої невдачі або успіху дії. Особливо корисний для форм.
- <div class = "alert-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Святе гуакамоле! </strong> Краще перевірте себе, ви виглядаєте не дуже добре. </p>
- </div>
.alert-message.block-message
Для повідомлень, які потребують трохи пояснень, у нас є сповіщення про стиль абзацу. Вони ідеально підходять для появи довгих повідомлень про помилки, попередження користувача про очікувану дію або просто представлення інформації для більшого акцентування на сторінці.
- <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>
Модальні діалоги або лайтбокси чудово підходять для контекстних дій у ситуаціях, коли важливо зберегти фоновий контекст.
Одне чудове тіло…
Twipsies надзвичайно корисні, щоб допомогти заплутаному користувачеві та вказати йому правильний напрямок.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit acceptantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae Accusantium fugit voluptas nemo voluptas voluptatem rem quaesi aut veritaetis.
Використовуйте спливні елементи, щоб надати підтекстову інформацію на сторінці, не впливаючи на макет.
Etiam porta sem malesuada magna mollis euismod. Меценат faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum та eros.
Інтегрувати javascript із бібліотекою Bootstrap надзвичайно просто. Нижче ми розглянемо основи та надамо вам кілька чудових плагінів, які допоможуть вам почати!
Оживіть деякі з основних компонентів Bootstrap за допомогою нових спеціальних плагінів, які працюють із jQuery та Ender . Ми заохочуємо вас розширювати та змінювати їх відповідно до ваших конкретних потреб розробки.
Файл | опис |
---|---|
bootstrap-modal.js | Наш модальний плагін — це надзвичайно тонка версія традиційного модального плагіна js! Ми приділили особливу увагу тому, щоб включити лише ту функціональність, яка потрібна нам у twitter. |
bootstrap-alerts.js | Плагін сповіщень — це надзвичайно маленький клас для додавання функціональних можливостей до сповіщень. |
bootstrap-dropdown.js | Цей плагін призначений для додавання взаємодії зі спадним списком до верхньої панелі початкового завантаження або навігації з вкладками. |
bootstrap-scrollspy.js | Плагін ScrollSpy призначений для додавання автоматичного оновлення навігації на основі положення прокрутки до верхньої панелі початкового завантаження. |
bootstrap-buttons.js | Плагін ScrollSpy призначений для додавання автоматичного оновлення навігації на основі положення прокрутки до верхньої панелі початкового завантаження. |
bootstrap-tabs.js | Цей плагін додає швидку динамічну вкладку та функціональність таблетки для циклічного перегляду локального вмісту. |
bootstrap-twipsy.js | На основі чудового плагіна jQuery.tipsy, написаного Джейсоном Фреймом; twipsy — це оновлена версія, яка не покладається на зображення, використовує css3 для анімації та атрибути даних для локального зберігання заголовків! |
bootstrap-popover.js | Плагін popover надає простий інтерфейс для додавання спливаючих вікон до вашої програми. Він розширює плагін boostrap-twipsy.js , тож обов’язково візьміть цей файл, коли додасте спливаючих зображень у свій проект! |
ні! Bootstrap розроблено, перш за все, як бібліотеку CSS. Цей JavaScript надає базовий інтерактивний шар поверх включених стилів.
Тим не менш, для тих, кому потрібен javascript, ми надали плагіни вище, щоб допомогти вам зрозуміти, як інтегрувати Bootstrap з javascript, і надати вам швидкий, легкий варіант для базових функцій відразу.
Для отримання додаткової інформації та перегляду демонстрацій у реальному часі зверніться до нашої сторінки документації плагінів .
Bootstrap було створено на основі Preboot , пакета міксинів і змінних із відкритим вихідним кодом, який використовуватиметься разом із Less , препроцесором CSS для швидшої та легшої веб-розробки.
Перевірте, як ми використовували Preboot у Bootstrap і як ви можете використовувати його, якщо ви вирішите запустити Less у своєму наступному проекті.
Використовуйте цей параметр, щоб повною мірою використовувати змінні Bootstrap Less, міксини та вкладення в CSS за допомогою JavaScript у вашому браузері.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.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 ;
- // Базова сітка
- @basefont : 13 пікселів ;
- @baseline : 18px ;
Less також надає інший стиль коментування на додаток до звичайного /* ... */
синтаксису CSS.
- // Це коментар
- /* Це теж коментар */
Міксини — це в основному включення або частки для 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 ; _
- }
- ...
- }
- #градієнт {
- ...
- . вертикальний ( @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
- тло - зображення : лінійне - градієнт ( @startColor , @endColor ); // Стандарт
- }
- ...
- }
Пофантазуйте та виконайте трохи математики, щоб створити гнучкі та потужні міксини, як наведений нижче.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40 пікселів ;
- @gridGutterWidth : 20 пікселів ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Створіть кілька стовпців
- . стовпці ( @columnSpan : 1 ) {
- ширина : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Після зміни .less
файлів у /lib/ вам потрібно буде їх перекомпілювати, щоб повторно створити файли bootstrap-*.*.*.css і bootstrap-*.*.*.min.css. Якщо ви надсилаєте запит на отримання в GitHub, вам потрібно завжди перекомпілювати.
метод | Кроки |
---|---|
Вузол із make-файлом | Встановіть компілятор командного рядка less за допомогою npm, виконавши таку команду: $ npm install lessc Після встановлення просто запустіть Крім того, якщо у вас встановлено watchr , ви можете запустити |
Javascript | Завантажте останню версію Less.js і додайте шлях до неї (і Bootstrap) у
Щоб перекомпілювати файли .less, просто збережіть їх і перезавантажте сторінку. Less.js компілює їх і зберігає в локальному сховищі. |
Командний рядок | Якщо у вас уже встановлено інструмент командного рядка less, просто виконайте таку команду: $lessc ./lib/bootstrap.less > bootstrap.css Обов’язково включіть |
Менше програми Mac | Неофіційна програма Mac стежить за каталогами файлів .less і компілює код у локальні файли після кожного збереження перегляданого файлу .less. Якщо хочете, ви можете перемикати параметри в додатку для автоматичного скорочення та те, у який каталог потрапляють скомпільовані файли. |