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.
На початку існування Twitter інженери використовували майже будь-яку бібліотеку, з якою вони були знайомі, щоб відповідати вимогам інтерфейсу. Bootstrap почався як відповідь на виклики, які постали, і розвиток швидко прискорився під час першого Hackweek Twitter.
Завдяки допомозі та відгукам багатьох інженерів у Twitter Bootstrap значно розширився, щоб охопити не лише базові стилі, але й більш елегантні та міцні зовнішні шаблони дизайну.
Читайте більше на dev.twitter.com ›
Bootstrap протестовано та підтримується в основних сучасних браузерах, таких як Chrome, Safari, Internet Explorer і Firefox.
Bootstrap постачається в комплекті зі скомпільованими CSS, нескомпільованими та прикладами шаблонів.
Система сітки за замовчуванням, яка є частиною Bootstrap, є сіткою з 16 стовпців шириною 940 пікселів. Це різновид популярної системи сітки 960, але без додаткових полів/заповнення зліва та справа.
Як показано тут, базовий макет можна створити за допомогою двох «стовпців», кожен з яких охоплює кілька з 16 основних стовпців, які ми визначили як частину нашої сітки. Перегляньте приклади нижче, щоб дізнатися більше варіантів.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
Стандартний і простий макет шириною 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
. Перший — це базовий розмір шрифту, який використовується всюди, а другий — базова висота рядка.
Ми використовуємо ці змінні та трохи математики, щоб створити поля, відступи та висоту рядків усіх наших типів тощо.
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.
Доктор Юліус Гібберт
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Столи чудові — для багатьох речей. Однак чудові таблиці потребують трохи любові до розмітки, щоб бути корисними, масштабованими та читабельними (на рівні коду). Ось кілька порад, які допоможуть.
Завжди складайте заголовки стовпців <thead>
таким чином, щоб ієрархія була <thead>
> <tr>
> <th>
.
Подібно до заголовків стовпців, весь вміст вашої таблиці має бути загорнутий у те, <tbody>
щоб ваша ієрархія була <tbody>
> <tr>
> <td>
.
Усі таблиці будуть автоматично стилізовані лише з основними межами, щоб забезпечити читабельність і зберегти структуру. Не потрібно додавати додаткові класи чи атрибути.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | Деякі | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
- <таблиця>
- ...
- </table>
Додайте трохи фантазії зі своїми столами, додавши смуги зебри — просто додайте .zebra-striped
клас.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | Деякі | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
Примітка. Zebra-striping — це прогресивне вдосконалення, недоступне для старіших браузерів, таких як IE8 і старіших.
- <table class = "zebra-striped" >
- ...
- </table>
Беручи попередній приклад, ми покращуємо корисність наших таблиць, забезпечуючи функцію сортування через jQuery та плагін Tablesorter . Клацніть заголовок будь-якого стовпця, щоб змінити сортування.
# | Ім'я | Прізвище | Мову |
---|---|---|---|
1 | ваш | Один | англійська |
2 | Джо | Шість пачок | англійська |
3 | Стю | Дент | Код |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <сценарій >
- $ ( функція () {
- $ ( "table#sortTableExample" ). сортувальник таблиць ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
Усім формам надано стилі за замовчуванням, щоб представити їх у зрозумілий та масштабований спосіб. Стилі надаються для введення тексту, списків вибору, текстових областей, перемикачів і прапорців, а також кнопок.
Додайте .form-stacked
до своєї форми HTML, і ви матимете мітки вгорі їхніх полів, а не ліворуч. Це чудово працює, якщо ваші форми короткі або у вас є два стовпці вводу для важчих форм.
За домовленістю кнопки використовуються для дій, а посилання – для об’єктів. Наприклад, «Завантажити» може бути кнопкою, а «останні дії» — посиланням.
Усі кнопки за замовчуванням мають світло-сірий стиль, але ряд функціональних класів можна застосувати для різних колірних стилів. Ці класи включають синій .primary
клас, світло-блакитний .info
клас, зелений .success
клас і червоний .danger
клас. Крім того, створювати власні стилі легко.
Стилі кнопок можна застосовувати до будь-чого, до чого .btn
застосовано. Зазвичай ви бажаєте застосувати їх лише до елементів <a>
, <button>
, і вибраних <input>
елементів. Ось як це виглядає:
Хочете більші чи менші кнопки? Майте на це!
Для кнопок, які не активні або вимкнені програмою з тих чи інших причин, використовуйте стан вимкнено. Це .disabled
стосується посилань і :disabled
елементів <button>
.
div.alert-message
Однорядкові повідомлення для підсвічування невдачі, можливої невдачі або успіху дії. Особливо корисний для форм.
div.alert-message.block-message
Для повідомлень, які потребують трохи пояснень, у нас є сповіщення про стиль абзацу. Вони ідеально підходять для появи довгих повідомлень про помилки, попередження користувача про очікувану дію або просто представлення інформації для більшого акцентування на сторінці.
Модальні діалоги або лайтбокси чудово підходять для контекстних дій у ситуаціях, коли важливо зберегти фоновий контекст.
Одне чудове тіло…
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.
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 ; _
- }
- . 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
- фонове зображення : лінійний градієнт ( ліворуч , @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
- тло - зображення : лінійне - градієнт ( @startColor , @endColor ); // Стандарт
- }
- . спрямований ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . вертикальний - три - кольори ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Пофантазуйте та виконайте трохи математики, щоб створити гнучкі та потужні міксини, як наведений нижче.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40 пікселів ;
- @gridGutterWidth : 20 пікселів ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Грід-система
- . контейнер {
- ширина : @siteWidth ;
- запас : 0 авто ;
- . clearfix ();
- }
- . стовпці ( @columnSpan : 1 ) {
- ширина : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . зсув ( @columnOffset : 1 ) {
- поле - ліворуч : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }