Бутстрап

Будаўнічыя лясы

Bootstrap пабудаваны на спагадных сетках з 12 слупкоў, макетах і кампанентах.

Глабальныя налады

Патрабуецца тып дакумента HTML5

Bootstrap выкарыстоўвае пэўныя элементы HTML і ўласцівасці CSS, якія патрабуюць выкарыстання дакумента HTML5. Уключыце яго ў пачатку ўсіх вашых праектаў.

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

Тыпаграфіка і спасылкі

Bootstrap задае асноўныя глабальныя стылі адлюстравання, тыпаграфікі і спасылак. У прыватнасці, мы:

  • Зняць marginна целе
  • Усталяваць background-color: white;на стbody
  • Выкарыстоўвайце атрыбуты @baseFontFamily, @baseFontSize, і ў якасці нашай друкарскай базы@baseLineHeight
  • Усталюйце глабальны колер спасылкі праз @linkColorі прымяніце падкрэсліванне спасылкі толькі на:hover

Гэтыя стылі можна знайсці ў scaffolding.less .

Скінуць праз Normalize

У Bootstrap 2 стары блок скіду быў адменены на карысць Normalize.css , праекта Нікаласа Галахера , які таксама працуе на HTML5 Boilerplate . Нягледзячы на ​​тое, што мы выкарыстоўваем вялікую частку Normalize у нашым reset.less , мы выдалілі некаторыя элементы спецыяльна для Bootstrap.

Сістэма сеткі па змаўчанні

Прыклад жывой сеткі

Сістэма сеткі Bootstrap па змаўчанні выкарыстоўвае 12 слупкоў , што робіць кантэйнер шырынёй 940 пікселяў без уключаных адаптыўных функцый . З даданнем адаптыўнага файла CSS сетка адаптуецца да шырыні 724 пікселяў і 1170 пікселяў у залежнасці ад вобласці прагляду. Ніжэй вокнаў прагляду 767 пікселяў слупкі становяцца плыўнымі і складаюцца вертыкальна.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Базавая сетка HTML

Для простага макета з двума слупкамі стварыце .rowі дадайце адпаведную колькасць .span*слупкоў. Паколькі гэта сетка з 12 слупкоў, кожны з іх .span*ахоплівае некалькі з гэтых 12 слупкоў і заўсёды павінен складаць 12 для кожнага радка (або колькасці слупкоў у бацькоўскім радку).

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

Улічваючы гэты прыклад, мы маем .span4і .span8, што складае 12 слупкоў і поўны радок.

Зрушэнне слупкоў

Перамясціць слупкі ўправа з дапамогай .offset*класаў. Кожны клас павялічвае левае поле слупка на цэлы слупок. Напрыклад, .offset4перамяшчаецца .span4па чатырох слупках.

4
3 зрушэнне 2
3 зрушэнне 1
3 зрушэнне 2
6 зрушэнне 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Укладзеныя слупкі

Каб укласці свой кантэнт у сетку па змаўчанні, дадайце новы .rowі набор .span*слупкоў у існуючы .span*слупок. Укладзеныя радкі павінны ўключаць набор слупкоў, якія складаюцца з колькасцю слупкоў бацькоўскага радка.

Слупок 1 ўзроўню
Узровень 2
Узровень 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Слупок 1 ўзроўню
  4.     <div class = "row" > 
  5.       <div class = "span6" > Узровень 2 </div> 
  6.       <div class = "span3" > Узровень 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Сістэма вадкай сеткі

Прыклад жывой вадкай сеткі

Сістэма вадкай сеткі выкарыстоўвае працэнты замест пікселяў для шырыні слупкоў. Ён мае такія ж магчымасці рэагавання, што і наша сістэма з фіксаванай сеткай, забяспечваючы правільныя прапорцыі для асноўных раздзяленняў экрана і прылад.

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

Базавая плыўная сетка HTML

Зрабіце любы радок "вадкім", змяніўшы .rowяго на .row-fluid. Класы слупкоў застаюцца такімі ж, што дазваляе лёгка пераключацца паміж фіксаванай і вадкай сеткамі.

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

Залік вадкасці

Дзейнічае гэтак жа, як зрушэнне сістэмы фіксаванай сеткі: дадайце .offset*ў любы слупок, каб зрушыць столькі слупкоў.

4
4 зрушэнне 4
3 зрушэнне 3
3 зрушэнне 3
6 зрушэнне 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Вадкае ўкладванне

Укладванне з вадкімі сеткамі крыху адрозніваецца: колькасць укладзеных слупкоў не павінна супадаць з колькасцю слупкоў бацькоў. Замест гэтага кожны ўзровень укладзеных слупкоў скідаецца, таму што кожны радок займае 100% бацькоўскага слупка.

Вадкасць 12
Вадкасць 6
Вадкасць 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Вадкасць 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Вадкасць 6 </div> 
  6.       <div class = "span6" > Вадкасць 6 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Макеты

Фіксаваны макет

Забяспечвае агульны макет з фіксаванай шырынёй (і, магчыма, адаптыўны) з толькі <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 у сваім праекце, уключыўшы належны метатэг і дадатковую табліцу стыляў у <head>дакумент. Калі вы скампілявалі Bootstrap са старонкі Customize, вам трэба толькі ўключыць метатэг.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <спасылка href = "assets/css/bootstrap-responsive.css" rel = "табліца стыляў" >

Галаву ўверх!Зараз Bootstrap не ўключае адаптыўныя функцыі па змаўчанні, бо не ўсё павінна быць адаптыўным. Замест таго, каб заахвочваць распрацоўшчыкаў выдаліць гэту функцыю, мы лічым, што лепш уключыць яе па меры неабходнасці.

Пра спагадны Bootstrap

Спагадныя прылады

Медыя-запыты дазваляюць карыстальніцкі CSS на аснове шэрагу ўмоў - прапорцый, шырыні, тыпу адлюстравання і г.д. - але звычайна факусуюць вакол min-widthі max-width.

  • Зменіце шырыню слупка ў нашай сетцы
  • Укладвайце элементы ў стопку, а не плавайце там, дзе гэта неабходна
  • Змяніце памер загалоўкаў і тэксту, каб яны больш падыходзілі для прылад

Выкарыстоўвайце медыя-запыты адказна і толькі ў якасці пачатку вашай мабільнай аўдыторыі. Для буйных праектаў варта разглядаць спецыялізаваныя базы кода, а не пласты медыя-запытаў.

Падтрымліваюцца прылады

Bootstrap падтрымлівае некалькі медыя-запытаў у адным файле, каб зрабіць вашыя праекты больш прыдатнымі для розных прылад і розных раздзяленняў экрана. Вось што ўключана:

Этыкетка Шырыня разметкі Шырыня слупка Шырыня жолабы
Вялікі дысплей 1200 пікселяў і вышэй 70 пікселяў 30 пікселяў
Па змаўчанні 980 пікселяў і вышэй 60 пікселяў 20 пікселяў
Планшэты партрэтныя 768 пікселяў і вышэй 42 пікселяў 20 пікселяў
Тэлефоны на планшэты 767 пікселяў і ніжэй Вадкасць слупкоў, без фіксаванай шырыні
Тэлефоны 480 пікселяў і ніжэй Вадкасць слупкоў, без фіксаванай шырыні 
  1. /* Вялікі працоўны стол */
  2. @media ( мінімальная шырыня : 1200 пікселяў ) { ... }     
  3.  
  4. /* Партрэтны планшэт у альбомны і працоўны стол */
  5. @media ( мінімальная шырыня : 768 пікселяў ) і ( максімальная шырыня : 979 пікселяў ) { ... }        
  6.  
  7. /* Альбомная арыентацыя тэлефона на партрэтны планшэт */
  8. @media ( макс . шырыня : 767 пікселяў ) { ... }     
  9.  
  10. /* Гарызантальныя тэлефоны і ўніз */
  11. @media ( макс - шырыня : 480 пікселяў ) { ... }

Адаптыўныя карысныя класы

Для больш хуткай распрацоўкі, зручнай для мабільных прылад, выкарыстоўвайце гэтыя класы ўтыліт для паказу і схавання кантэнту на прыладзе. Ніжэй прыведзена табліца даступных класаў і іх уплыў на дадзены макет медыя-запыту (пазначаны прыладай). Іх можна знайсці ў responsive.less.

Клас Тэлефоны767 пікселяў і ніжэй Таблеткіад 979 пікселяў да 768 пікселяў Настольныя кампутарыПа змаўчанні
.visible-phone Бачны
.visible-tablet Бачны
.visible-desktop Бачны
.hidden-phone Бачны Бачны
.hidden-tablet Бачны Бачны
.hidden-desktop Бачны Бачны

Калі выкарыстоўваць

Выкарыстоўвайце абмежавана і пазбягайце стварэння цалкам розных версій аднаго сайта. Замест гэтага выкарыстоўвайце іх, каб дапоўніць прэзентацыю кожнай прылады. Адаптыўныя ўтыліты не павінны выкарыстоўвацца з табліцамі, таму яны не падтрымліваюцца.

Тэст адаптыўных утыліт

Змяніце памер браўзера або загрузіце яго на розныя прылады, каб праверыць вышэйзгаданыя класы.

Бачна на...

Зялёныя галачкі паказваюць, што клас бачны ў вашым бягучым акне прагляду.

  • Тэлефон✔ Тэлефон
  • Планшэт✔ Планшэт
  • Працоўны стол✔ Працоўны стол

Схаваны на...

Тут зялёныя галачкі паказваюць, што клас схаваны ў вашым бягучым акне прагляду.

  • Тэлефон✔ Тэлефон
  • Планшэт✔ Планшэт
  • Працоўны стол✔ Працоўны стол