Исҳоқсозӣ

Bootstrap дар шабакаи ҷавобгӯи 12 сутун сохта шудааст. Мо инчунин тарҳҳои собит ва паҳнои моеъро дар асоси ин система дохил кардем.

Шабакаи пешфарз 940px

Системаи пешфарз шабакаи пешфарз, ки ҳамчун як қисми Bootstrap пешниҳод шудааст, шабакаи 940px ва 12 сутун аст.

Он инчунин дорои чаҳор варианти ҷавобгӯ барои дастгоҳҳо ва қарорҳои гуногун: телефон, портрети планшет, манзараи ҷадвал ва мизи кории хурд ва мизи кории васеъэкрани калон.

<div class = "сатр" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Тавре ки дар ин ҷо нишон дода шудааст, тарҳбандии асосиро бо ду "сутун" сохтан мумкин аст, ки ҳар кадоми онҳо як қатор 12 сутуни бунёдиро дар бар мегиранд, ки мо ҳамчун як қисми системаи шабакаи мо муайян кардем.

Баҳисобгирии сутунҳо

4 офсет 4

3 офсет 3

8 офсет 4

<div class = "сатр" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Сутунҳои лона

Бо системаи шабакаи статикӣ (ғайримоеъ) дар Bootstrap, лона гузоштан осон аст. Барои ҷойгир кардани мундариҷаи худ, танҳо як сутуни нав .rowва маҷмӯи .span*сутунҳоро дар сутуни мавҷуда илова кунед .span*.

Мисол

Сатҳи 1 сутун

Сатҳи 2

<div class = "сатр" > 
  <div class = "span12" > 
    Сатҳи 1 сутун
    <div class = "сатр" > 
      <div class = "span6" > Сатҳи 2 </div> 
      <div class = "span6" > Сатҳи 2 </div> 
    </div>
  </div>
</div>

Мутобиқсозии шабака

Тағйирёбанда	Арзиши пешфарз	Тавсифи
`@gridColumns`	12	Шумораи сутунҳо
`@gridColumnWidth`	60px	Бари ҳар як сутун
`@gridGutterWidth`	20px	Фосилаи манфӣ байни сутунҳо
`@siteWidth`	Маблағи ҳисобшудаи ҳамаи сутунҳо ва ҷӯйборҳо	Шумораи сутунҳо ва ҷӯйборҳоро барои муқаррар кардани паҳнои `.container-fixed()`омехта ҳисоб мекунад

Тағирёбандаҳо дар LESS

Дар Bootstrap як қатор тағирёбандаҳо барои танзими системаи пешфарзии 940px, ки дар боло ҳуҷҷатгузорӣ шудаанд, сохта шудаанд. Ҳама тағирёбандаҳои шабака дар variables.less нигоҳ дошта мешаванд.

Чӣ тавр танзим кардан

Тағир додани шабака маънои тағир додани се @grid*тағирёбанда ва дубора тартиб додани Bootstrap мебошад. Тағйирёбандаҳои шабакаро дар variables.less тағир диҳед ва яке аз чаҳор роҳе, ки ҳуҷҷатгузорӣ шудааст, истифода баред . Агар шумо сутунҳои бештар илова кунед, ҳатман CSS-ро барои онҳое, ки дар grid.less илова мекунанд, илова кунед.

Муносиб мондан

Мутобиқсозии шабака танҳо дар сатҳи пешфарз, шабакаи 940px кор мекунад. Барои нигоҳ доштани ҷанбаҳои ҷавобгӯи Bootstrap, шумо инчунин бояд шабакаҳоро дар responsive.less танзим кунед.

Тарҳбандии собит

Тарҳбандии пешфарз ва соддаи 940px-и васеъ, мутамарказ барои ҳама гуна вебсайт ё саҳифае, ки аз ҷониби як <div class="container">.

<бадан>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Тарҳбандии моеъ

<div class="container-fluid">сохтори чандири саҳифа, паҳнои ҳадди ақал ва макс ва панели паҳлӯи чапро медиҳад. Ин барои барномаҳо ва ҳуҷҷатҳо олӣ аст.

<div class = "контейнер-моеъ" > 
  <div class = "сатр-моеъ" > 
    <div class = "span2" > 
      <!--Мӯҳтавои панели паҳлӯӣ-->
    </div>
    <div class = "span10" > 
      <!--Мӯҳтавои бадан-->
    </div>
  </div>
</div>

Дастгоҳҳои дастгирӣшаванда

Bootstrap як қатор дархостҳои медиаро дастгирӣ мекунад, то лоиҳаҳои шуморо дар дастгоҳҳои гуногун ва қарорҳои экран мувофиқтар созанд. Ин аст он чизе ки дар бар мегирад:

Нишон	Паҳнои тарҳ	Паҳнои сутун	Бари ҷӯйбор
Смартфонҳо	480px ва поёнтар	Сутунҳои моеъ, ҳеҷ паҳнои собит
Таблетҳои портретӣ	480 пиксел ба 768 пиксел	Сутунҳои моеъ, ҳеҷ паҳнои собит
Планшетҳои ландшафтӣ	768 пиксел то 940 пиксел	44px	20px
Пешфарз	940px ва боло	60px	20px
Намоиши калон	1210px ва боло	70px	30px

Онҳо чӣ кор мекунанд

Дархостҳои ВАО имкон медиҳанд, ки CSS-и фармоишӣ дар асоси як қатор шартҳо - таносубҳо, паҳноиҳо, намуди намоиш ва ғайра - аммо одатан ба атрофи min-widthва max-width.

Дар шабакаи мо паҳнои сутунро тағир диҳед
Элементҳоро ба ҷои шино дар ҳама ҷое, ки лозим аст, ҷойгир кунед
Андозаи сарлавҳаҳо ва матнро тағир диҳед, то барои дастгоҳҳо мувофиқтар бошанд

Истифодаи пурсишҳои ВАО

Bootstrap ба таври худкор ин дархостҳои медиаро дар бар намегирад, аммо фаҳмидан ва илова кардани онҳо хеле осон аст ва танзими ҳадди ақалро талаб мекунад. Шумо якчанд имконот барои дохил кардани хусусиятҳои ҷавобгӯи Bootstrap доред:

Нусхаи ҷавобии тартибдодашуда, bootstrap-responsive.css -ро истифода баред
@import "responsive.less" -ро илова кунед ва Bootstrap-ро дубора тартиб диҳед
responsive.less-ро ҳамчун алоҳида тағир диҳед ва дубора тартиб диҳед

Чаро танҳо онро дохил накунед? Рости гап, на ҳама чиз бояд ҷавобгар бошад. Ба ҷои ташвиқи таҳиягарон барои нест кардани ин хусусият, мо беҳтар мешуморем, ки онро фаъол созем.

  // Телефонҳои ландшафтӣ ва поён
  @media ( барои ҳадди аксар : 480px ) { ... }     
 
  // Телефони манзара ба планшети портрет
  @media ( максимум - паҳнои : 768px ) { ... }     
 
  // Планшети портрет ба манзара ва мизи корӣ
  @media ( ҳадди ақал - паҳнои : 768px ) ва ( макс - паҳнои : 940px ) { ... }        
 
  // Мизи кории калон
  @media ( дақ - паҳно : 1200px ) { .. }