Bootstrap

Скеле

Bootstrap е изграден върху адаптивна решетка с 12 колони. Ние също така включихме оформления с фиксирана и течна ширина, базирани на тази система.

Глобални стилове за нулиране на CSS, типография и връзки

Изисква HTML5 doctype

Bootstrap използва HTML елементи и CSS свойства, които изискват използването на HTML5 doctype. Не забравяйте да го включите в началото на всяка Bootstrapped страница във вашия проект.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Типография и връзки

В рамките на файла scaffolding.less задаваме основен глобален дисплей, типография и стилове на връзки. По-конкретно ние:

  • Премахнете полето върху тялото
  • Задайте background-color: white;наbody
  • Използвайте атрибутите @baseFontFamily, @baseFontSize, и като наша типографска база@baseLineHeight
  • Задайте глобалния цвят на връзката чрез @linkColorи приложете подчертаване на връзката само върху:hover

Нулирайте чрез нормализиране

От Bootstrap 2 традиционното нулиране на CSS е еволюирало, за да използва елементи от Normalize.css , проект на Николас Галахър , който също захранва HTML5 Boilerplate .

Новото нулиране все още може да се намери в reset.less , но с много елементи премахнати за краткост и точност.

Мрежова система по подразбиране 12 колони с отзивчив обрат

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Мрежовата система по подразбиране, предоставена в Bootstrap, използва 12 колони , които се изобразяват на ширини от 724px, 940px (по подразбиране без включен CSS отзивчив) и 1170px. Под прозорците за изглед от 767 пиксела колоните стават плавни и се подреждат вертикално.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Както е показано тук, може да се създаде основно оформление с две "колони", всяка от които обхваща няколко от 12-те основни колони, които дефинирахме като част от нашата мрежова система.


Изместване на колони

4
4 отместване 4
3 отместване 3
3 отместване 3
8 отместване 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Вложени колони

Със статичната (не течна) мрежова система в Bootstrap влагането е лесно. За да вложите съдържанието си, просто добавете нова .rowи набор от .span*колони в съществуваща .span*колона.

Пример

Вложените редове трябва да включват набор от колони, които се събират до броя на колоните на неговия родител. Например две вложени .span3колони трябва да бъдат поставени в .span6.

Ниво 1 на колоната
Ниво 2
Ниво 2 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Колона от ниво 1
  4.     <div class = "row" > 
  5.       <div class = "span3" > Ниво 2 </div> 
  6.       <div class = "span3" > Ниво 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid система 12 чувствителни, процентно базирани колони

Течни колони

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Проценти, не пиксели

Системата с течна мрежа използва проценти за ширини на колони вместо фиксирани пиксели. Освен това има същите отзивчиви вариации като нашата система с фиксирана решетка, осигурявайки правилни пропорции за ключови разделителни способности на екрана и устройства.

Течни редове

Направете всеки ред течен, просто като промените .rowна .row-fluid. Колоните остават абсолютно същите, което прави превключването между фиксирани и плавни оформления супер лесно.

Маркиране

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Течно гнездене

Влагането с плавни мрежи е малко по-различно: не е необходимо броят на вложените колони да съвпада с родителския. Вместо това вашите колони се нулират на всяко ниво, тъй като всеки ред заема 100% от родителската колона.

Течност 12
Течност 6
Течност 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Ниво 1 на колоната
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Ниво 2 </div> 
  6.       <div class = "span6" > Ниво 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Персонализиране на мрежата

Променлива Стойност по подразбиране Описание
@gridColumns 12 Брой колони
@gridColumnWidth 60px Ширина на всяка колона
@gridGutterWidth 20px Отрицателно пространство между колоните

Променливи в LESS

В Bootstrap са вградени няколко променливи за персонализиране на мрежовата система от 940px по подразбиране, документирана по-горе. Всички променливи за мрежата се съхраняват във variables.less.

Как да персонализирате

Модифицирането на мрежата означава промяна на трите @grid*променливи и повторно компилиране на Bootstrap. Променете променливите на мрежата във variables.less и използвайте един от четирите документирани начина за повторно компилиране . Ако добавяте повече колони, не забравяйте да добавите CSS за тези в grid.less.

Да останеш отзивчив

Персонализирането на мрежата работи само на нивото по подразбиране, мрежата от 940 пиксела. За да поддържате отзивчивите аспекти на Bootstrap, ще трябва също да персонализирате решетките в responsive.less.

Layouts Основни шаблони за създаване на уеб страници

Фиксирано оформление

Стандартното и просто центрирано оформление с ширина 940 пиксела за почти всеки уебсайт или страница, предоставено от един <div class="container">.

  1. <тяло>
  2.   <div class = "контейнер" > 
  3.     ...
  4.   </div>
  5. </body>

Плавно оформление

<div class="container-fluid">предоставя гъвкава структура на страницата, минимална и максимална ширина и лява странична лента. Страхотен е за приложения и документи.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Съдържание на страничната лента-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Съдържание на тялото-->
  8.     </div>
  9.   </div>
  10. </div>

Отзивчив дизайн Медийни заявки за различни устройства и резолюции

Отзивчиви устройства

Това, което правят

Медийните заявки позволяват персонализиран CSS въз основа на редица условия - съотношения, ширини, тип на дисплея и т.н. - но обикновено се фокусира около min-widthи max-width.

  • Променете ширината на колоната в нашата мрежа
  • Подреждайте елементи вместо плаващи, където е необходимо
  • Преоразмерете заглавията и текста, за да бъдат по-подходящи за устройства

Използвайте медийните заявки отговорно и само като начало на вашите мобилни аудитории. За по-големи проекти помислете за специални кодови бази, а не за слоеве от медийни заявки.

Поддържани устройства

Bootstrap поддържа няколко медийни заявки в един файл, за да ви помогне да направите вашите проекти по-подходящи за различни устройства и разделителни способности на екрана. Ето какво е включено:

Етикет Ширина на оформлението Ширина на колоната Ширина на улука
Смартфони 480px и по-долу Течни колони, без фиксирани ширини
Смартфони към таблети 767px и по-долу Течни колони, без фиксирани ширини
Таблетки за портрети 768px и повече 42px 20px
По подразбиране 980px и нагоре 60px 20px
Голям дисплей 1200px и нагоре 70px 30px

Изисква мета таг

За да гарантирате, че устройствата показват правилно адаптивни страници, включете мета тага на прозореца за изглед.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Използване на медийни заявки

Bootstrap не включва автоматично тези медийни заявки, но разбирането и добавянето им е много лесно и изисква минимална настройка. Имате няколко опции за включване на отзивчивите функции на Bootstrap:

  1. Използвайте компилираната адаптивна версия, bootstrap-responsive.css
  2. Добавете @import "responsive.less" и прекомпилирайте Bootstrap
  3. Променете и прекомпилирайте responsive.less като отделен файл

Защо просто не го включите? Честно казано, не всичко трябва да е отзивчиво. Вместо да насърчаваме разработчиците да премахнат тази функция, смятаме, че е най-добре да я активираме.

  1.   /* Хоризонтални телефони и надолу */
  2.   @media ( максимална ширина : 480px ) { ... } _     
  3.  
  4.   /* Хоризонтален телефон към портретен таблет */
  5.   @media ( максимална ширина : 767px ) { ... } _     
  6.  
  7.   /* Портретен таблет към пейзажен и работен плот */
  8.   @media ( мин . ширина : 768px ) и ( макс . ширина : 979px ) { ... }        
  9.  
  10.   /* Голям работен плот */
  11.   @media ( мин - ширина : 1200px ) { ... }

Отзивчиви полезни класове

Какво са те

За по-бързо разработка, удобна за мобилни устройства, използвайте тези основни помощни класове за показване и скриване на съдържание по устройство.

Кога да използвате

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

Например, можете да покажете <select>елемент за навигация на мобилни оформления, но не и на таблети или настолни компютри.

Поддържащи класове

Тук е показана таблица на поддържаните от нас класове и техния ефект върху дадено оформление на медийна заявка (обозначено по устройство). Те могат да бъдат намерени в responsive.less.

Клас телефони480px и по-долу Таблетки767px и по-долу Настолни компютри768px и повече
.visible-phone Видими
.visible-tablet Видими
.visible-desktop Видими
.hidden-phone Видими Видими
.hidden-tablet Видими Видими
.hidden-desktop Видими Видими

Тестов случай

Преоразмерете браузъра си или заредете на различни устройства, за да тествате горните класове.

Вижда се на...

Зелените отметки показват, че класът е видим в текущия ви прозорец.

  • Телефон✔ Телефон
  • Таблет✔ Таблет
  • работен плот✔ Работен плот

Скрит на...

Тук зелените отметки показват, че класът е скрит в текущия ви прозорец.

  • Телефон✔ Телефон
  • Таблет✔ Таблет
  • работен плот✔ Работен плот