Бутстрап

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

Bootstrap пабудаваны на адаптыўнай сетцы з 12 слупкоў. Мы таксама ўключылі макеты з фіксаванай і плыўнай шырынёй на аснове гэтай сістэмы.

Глабальныя стылі для скіду CSS, тыпаграфікі і спасылак

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

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

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

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

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

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

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

Пачынаючы з 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 слупкоў , якія адлюстроўваюцца з шырынёй 724 пікселяў, 940 пікселяў (па змаўчанні без адаптыўнага CSS) і 1170 пікселяў. Ніжэй вокнаў прагляду 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>

Сістэма плыўнай сеткі 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 60 пікселяў Шырыня кожнага слупка
@gridGutterWidth 20 пікселяў Адмоўны прамежак паміж слупкамі

Зменныя ў LESS

У Bootstrap убудавана некалькі зменных для наладжвання сістэмы сеткі па змаўчанні 940 пікселяў, задакументаванай вышэй. Усе зменныя для сеткі захоўваюцца ў variables.less.

Як наладзіць

Мадыфікацыя сеткі азначае змяненне трох @grid*зменных і паўторную кампіляцыю Bootstrap. Змяніце зменныя сеткі ў variables.less і выкарыстоўвайце адзін з чатырох задакументаваных спосабаў перакампіляцыі . Калі вы дадаеце больш слупкоў, не забудзьцеся дадаць CSS для тых, што знаходзяцца ў grid.less.

Застаючыся спагадным

Настройка сеткі працуе толькі на ўзроўні па змаўчанні, сетцы 940 пікселяў. Каб захаваць спагадныя аспекты Bootstrap, вам таксама трэба будзе наладзіць сеткі ў responsive.less.

Макеты Асноўныя шаблоны для стварэння вэб-старонак

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

Стандартны і просты макет шырынёй 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 падтрымлівае некалькі медыя-запытаў у адным файле, каб зрабіць вашыя праекты больш прыдатнымі для розных прылад і розных раздзяленняў экрана. Вось што ўключана:

Этыкетка Шырыня разметкі Шырыня слупка Шырыня жолабы
Смартфоны 480 пікселяў і ніжэй Вадкасць слупкоў, без фіксаванай шырыні
Са смартфонаў на планшэты 767 пікселяў і ніжэй Вадкасць слупкоў, без фіксаванай шырыні
Планшэты партрэтныя 768 пікселяў і вышэй 42 пікселяў 20 пікселяў
Па змаўчанні 980 пікселяў і вышэй 60 пікселяў 20 пікселяў
Вялікі дысплей 1200 пікселяў і вышэй 70 пікселяў 30 пікселяў

Патрабуецца мета-тэг

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

  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 ( макс - шырыня : 480 пікселяў ) { ... }     
  3.  
  4.   /* Альбомная арыентацыя тэлефона на партрэтны планшэт */
  5.   @media ( макс . шырыня : 767 пікселяў ) { ... }     
  6.  
  7.   /* Партрэтны планшэт у альбомны і працоўны стол */
  8.   @media ( мінімальная шырыня : 768 пікселяў ) і ( максімальная шырыня : 979 пікселяў ) { ... }        
  9.  
  10.   /* Вялікі працоўны стол */
  11.   @media ( мінімальная шырыня : 1200 пікселяў ) { ... }

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

Што яны

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

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

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

Напрыклад, вы можаце паказаць <select>элемент для навігацыі на мабільных макетах, але не на планшэтах або настольных кампутарах.

Дапаможныя заняткі

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

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

Тэставы выпадак

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

Бачна на...

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

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

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

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

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