Сістэма сеткі па змаўчанні, прадстаўленая як частка Bootstrap, - гэта сетка з 12 слупкоў шырынёй 940 пікселяў .

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

Прыклад

Укладзеныя радкі павінны ўключаць набор слупкоў, якія складаюцца з колькасцю слупкоў бацькоўскага радка. Напрыклад, два ўкладзеныя .span3слупкі павінны быць размешчаны ў .span6.

<div class = "row" > 
  <div class = "span12" > 
    Узровень 1 слупка
    <div class = "row" > 
      <div class = "span6" > Узровень 2 </div> 
      <div class = "span6" > Узровень 2 </div> 
    </div>
  </div>
</div>

Працэнты, а не пікселі

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

Плыўныя радкі

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

Разметка

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

<div class = "row-fluid" > 
  <div class = "span12" > 
    Узровень 1 слупка
    <div class = "row-fluid" > 
      <div class = "span6" > Узровень 2 </div> 
      <div class = "span6" > Узровень 2 </div> 
    </div>
  </div>
</div>

Зменныя ў LESS

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

Як наладзіць

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

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

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

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

Стандартны і просты макет шырынёй 940 пікселяў, размешчаны па цэнтры практычна для любога вэб-сайта або старонкі, прадстаўлены адным <div class="container">.

<цела>
  <div class = "кантэйнер" > 
    ...
  </div>
</body>

Плаўны макет

<div class="container-fluid">забяспечвае гнуткую структуру старонкі, мінімальную і максімальную шырыню і бакавую панэль злева. Гэта выдатна падыходзіць для праграм і дакументаў.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Змест бакавой панэлі-->
    </div>
    <div class = "span10" > 
      <!--Асноўны змест-->
    </div>
  </div>
</div>

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

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

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

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

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

Што яны робяць

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

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

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

1. Выкарыстоўвайце скампіляваную адаптыўную версію bootstrap-responsive.css
2. Дадайце @import "responsive.less" і перакампілюйце Bootstrap
3. Змяніце і перакампілюйце responsive.less як асобны файл

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

  // Альбомныя тэлефоны і ўніз
  @media ( макс - шырыня : 480 пікселяў ) { ... }     
 
  // Альбомная арыентацыя тэлефона на партрэтны планшэт
  @media ( макс . шырыня : 768 пікселяў ) { ... }     
 
  // Партрэтны планшэт у альбомны і працоўны стол
  @media ( мінімальная шырыня : 768 пікселяў ) і ( максімальная шырыня : 980 пікселяў ) { ... }        
 
  // Вялікі працоўны стол
  @media ( мінімальная шырыня : 1200 пікселяў ) { .. }