Bootstrap

Исҳоқсозӣ

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 сутунро истифода мебарад , ки барои контейнери васеъи 940px бе хусусиятҳои ҷавобӣ фаъол мешавад. Бо илова кардани файли ҷавобгӯи CSS, шабака вобаста ба намуди намоиши шумо ба 724px ва 1170px васеъ мутобиқ мешавад. Дар поён аз 767px портҳои намоишӣ, сутунҳо моеъ мешаванд ва амудӣ ҷойгир мешаванд.

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 = "сатр" > 
  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 = "сатр" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

Барои ҷойгир кардани мундариҷаи худ бо шабакаи пешфарз, дар дохили сутуни мавҷуда сутунҳои нав .rowва маҷмӯи сутунҳоро илова кунед . Сатрҳои ҷойгиршуда бояд маҷмӯи сутунҳоро дар бар гиранд, ки ба шумораи сутунҳои волидайни он илова мекунанд..span*.span*

Сутуни сатҳи 1
Сатҳи 2
Сатҳи 2 
  1. <div class = "сатр" > 
  2.   <div class = "span9" > 
  3.     Сутуни сатҳи 1
  4.     <div class = "сатр" > 
  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 = "сатр-моеъ" > 
  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 = "сатр-моеъ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Ҷойгиркунии моеъ

Шабакаҳои моеъ лонаро ба таври гуногун истифода мебаранд: ҳар як сатҳи лонаҳои сутунҳо бояд то 12 сутун илова кунанд. Ин аз он сабаб аст, ки шабакаи моеъ барои муқаррар кардани паҳнои пикселҳо, на фоизҳоро истифода мебарад.

Моеъ 12
Моеъ 6
Моеъ 6
Моеъ 6
Моеъ 6 
  1. <div class = "сатр-моеъ" > 
  2.   <div class = "span12" > 
  3.     Моеъ 12
  4.     <div class = "сатр-моеъ" > 
  5.       <div class = "span6" > 
  6.         Моеъ 6
  7.         <div class = "сатр-моеъ" > 
  8.           <div class = "span6" > Моеъ 6 </div> 
  9.           <div class = "span6" > Моеъ 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Моеъ 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Тарҳҳо

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

Тарҳбандии умумии собит (ва ихтиёрӣ ҷавобгӯ) бо танҳо <div class="container">лозимиро таъмин мекунад.

  1. <бадан>
  2.   <div class = "контейне��" > 
  3.     ...
  4.   </div>
  5. </body>

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

Саҳифаи моеъ ва <div class="container-fluid">дусутун эҷод кунед, ки барои барномаҳо ва ҳуҷҷатҳо олӣ аст.

  1. <div class = "контейнер-моеъ" > 
  2.   <div class = "сатр-моеъ" > 
  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" мӯҳтавои = "васеъ = паҳнои дастгоҳ, миқёси ибтидоӣ = 1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Сарҳо боло!Bootstrap дар айни замон хусусиятҳои вокунишро дар бар намегирад, зеро на ҳама чиз бояд ҷавобгӯ бошад. Ба ҷои ташвиқи таҳиягарон барои нест кардани ин хусусият, мо беҳтар мешуморем, ки онро дар ҳолати зарурӣ фаъол созем.

Дар бораи Bootstrap ҷавобгӯ

Дастгоҳҳои ҷавобгӯ

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

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

Пурсишҳои ВАО-ро бомасъулият ва танҳо ҳамчун ибтидо барои шунавандагони мобилии худ истифода баред. Барои лоиҳаҳои калонтар, на қабатҳои пурсишҳои ВАО, балки пойгоҳҳои коди махсусро баррасӣ кунед.

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

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

Нишон Паҳнои тарҳ Паҳнои сутун Бари ҷӯйбор
Намоиши калон 1200px ва боло 70px 30px
Пешфарз 980px ва боло 60px 20px
Таблетҳои портретӣ 768px ва болотар 42px 20px
Телефонҳо ба планшетҳо 767px ва поёнтар Сутунҳои моеъ, ҳеҷ паҳнои собит
Телефонҳо 480px ва поёнтар Сутунҳои моеъ, ҳеҷ паҳнои собит 
  1. /* Мизи кории калон */
  2. @media ( дақ - паҳно : 1200px ) { ... }     
  3.  
  4. /* Планшети портретӣ ба манзара ва мизи корӣ */
  5. @media ( ҳадди ақал - паҳнои : 768px ) ва ( макс - паҳнои : 979px ) { ... }        
  6.  
  7. /* Телефони ландшафтӣ ба планшети портрет */
  8. @media ( максимум - паҳнои : 767px ) { ... }     
  9.  
  10. /* Телефонҳои манзарӣ ва поён */
  11. @media ( барои ҳадди аксар : 480px ) { ... }

Синфҳои коммуналии ҷавобгӯ

Барои рушди зудтари мобилӣ, аз ин синфҳои хидматрасонӣ барои намоиш ва пинҳон кардани мундариҷа тавассути дастгоҳ истифода баред. Дар зер ҷадвали синфҳои дастрас ва таъсири онҳо ба тарҳбандии дархости медиавӣ (бо дастгоҳ нишонгузорӣ шудааст) оварда шудааст. Онҳоро дар responsive.less.

Синф Телефонҳо767px ва поёнтар Таблетҳо979 пиксел ба 768 пиксел Мизи корииПешфарз
.visible-phone Ба назар намоён
.visible-tablet Ба назар намоён
.visible-desktop Ба назар намоён
.hidden-phone Ба назар намоён Ба назар намоён
.hidden-tablet Ба назар намоён Ба назар намоён
.hidden-desktop Ба назар намоён Ба назар намоён

Кай истифода бурдан

Дар асоси маҳдуд истифода баред ва аз эҷоди версияҳои комилан гуногуни як сайт худдорӣ намоед. Ба ҷои ин, онҳоро барои пурра кардани ҳар як намоиши дастгоҳ истифода баред. Утилитҳои ҷавобӣ набояд бо ҷадвалҳо истифода шаванд ва аз ин рӯ дастгирӣ намешаванд.

Ҳолати санҷиши хидматрасониҳои ҷавобӣ

Андозаи браузери худро тағир диҳед ё ба дастгоҳҳои гуногун бор кунед, то синфҳои дар боло зикршударо санҷед.

Дар...

Аломатҳои сабз нишон медиҳанд, ки синф дар намоишгоҳи ҳозираи шумо намоён аст.

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Мизи корӣ✔ Мизи корӣ

Пинҳон дар...

Дар ин ҷо, аломатҳои сабз нишон медиҳанд, ки синф дар намоишгоҳи ҳозираи шумо пинҳон аст.

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Мизи корӣ✔ Мизи корӣ