Etiam porta sem malesuada magna mollis euismod. Меценат faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum та eros.
Коротка історія Bootstrap , підтримка браузера тощо
історія
На початку існування Twitter інженери використовували майже будь-яку бібліотеку, з якою вони були знайомі, щоб відповідати вимогам інтерфейсу. Bootstrap почався як відповідь на виклики, які постали, і розвиток швидко прискорився під час першого Hackweek Twitter.
Завдяки допомозі та відгукам багатьох інженерів у Twitter Bootstrap значно розширився, щоб охопити не лише базові стилі, але й більш елегантні та міцні зовнішні шаблони дизайну.
Читайте більше на dev.twitter.com ›
Підтримка браузера
Bootstrap протестовано та підтримується в основних сучасних браузерах, таких як Chrome, Safari, Internet Explorer і Firefox.
- Остання версія Safari
- Найновіший Google Chrome
- Firefox 4+
- Internet Explorer 7+
- Опера 11
Що включено
Bootstrap постачається в комплекті зі скомпільованими CSS, нескомпільованими та прикладами шаблонів.
- Усі оригінальні файли .less
- Повністю скомпільований і скорочений CSS
- Повна документація стилю
- Приклад шаблону сторінки (незабаром буде більше)
Система сітки Вибирайте стандартні 940 пікселів або створюйте власні
Сітка за замовчуванням
Система сітки за замовчуванням, яка є частиною Bootstrap, є сіткою з 16 стовпців шириною 940 пікселів. Це різновид популярної системи сітки 960, але без додаткових полів/заповнення зліва та справа.
Приклад розмітки сітки
Як показано тут, базовий макет можна створити за допомогою двох «стовпців», кожен з яких охоплює кілька з 16 основних стовпців, які ми визначили як частину нашої сітки. Перегляньте приклади нижче, щоб дізнатися більше варіантів.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16
Зміщення колон
4
8 зсув 4
4 зсув 4
4 зсув 4
5 зсув 3
5 зсув 3
10 зсув 6
Макети Базові шаблони для створення веб-сторінок
Фіксований макет
Стандартний і простий макет шириною 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>використовується для отримання контактної інформації щодо його найближчого предка або всієї роботи. Ось як це виглядає:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Примітка: кожен рядок <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>
- 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>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Ціле число molesteie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- 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.
Таблиці Для, як ви здогадалися, табличних даних
Будівельні столи
<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>
Приклад: Zebra-striped w/ TableSorter.js
Беручи попередній приклад, ми покращуємо корисність наших таблиць, забезпечуючи функцію сортування через 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
Для повідомлень, які потребують трохи пояснень, у нас є сповіщення про стиль абзацу. Вони ідеально підходять для появи довгих повідомлень про помилки, попередження користувача про очікувану дію або просто представлення інформації для більшого акцентування на сторінці.
Компоненти Popovers для відображення вмісту в режимах, підказках і popovers
Модальні
Модальні діалоги або лайтбокси чудово підходять для контекстних дій у ситуаціях, коли важливо зберегти фоновий контекст.
Модальний заголовок
×Одне чудове тіло…
Підказки
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.
нижче!
правильно!
ліворуч!
вище!
Поповери
Використовуйте спливні елементи, щоб надати підтекстову інформацію на сторінці, не впливаючи на макет.
Popover Title
Використання Bootstrap з меншими можливостями Доповніть свій CSS змінними, міксинами та функціями
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.
- // Це коментар
- /* Це теж коментар */
Змішує wazoo
Міксини — це в основному включення або частки для 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 ; _
- шрифт- 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 ;
- }