Bootstrap

Исҳоқсозӣ

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 пешниҳод шудааст, шабакаи 940px ва 12 сутун аст.

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

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

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

Ҷойгиркунӣ бо шабакаҳои моеъ каме фарқ мекунад: шумораи сутунҳои лона ба волидайн мувофиқат кардан лозим нест. Ба ҷои ин, сутунҳои шумо дар ҳар сатҳ аз нав танзим карда мешаванд, зеро ҳар як сатр 100% сутуни волидайнро ишғол мекунад.

Моеъ 12
Моеъ 6
Моеъ 6 
  1. <div class = "сатр-моеъ" > 
  2.   <div class = "span12" > 
  3.     Сатҳи 1 сутун
  4.     <div class = "сатр-моеъ" > 
  5.       <div class = "span6" > Сатҳи 2 </div> 
  6.       <div class = "span6" > Сатҳи 2 </div> 
  7.     </div>
  8.   </div>
  9. </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 танзим кунед.

Layouts Шаблонҳои асосӣ барои сохтани саҳифаҳои веб

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

Тарҳбандии пешфарз ва соддаи 940px-и васеъ, мутамарказ барои ҳама гуна вебсайт ё саҳифае, ки аз ҷониби як <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-и фармоишӣ дар асоси як қатор шартҳо - таносубҳо, паҳноиҳо, намуди намоиш ва ғайра - аммо одатан ба атрофи min-widthва max-width.

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

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

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

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

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

Мета тегро талаб мекунад

Барои он, ки дастгоҳҳо саҳифаҳои ҷавобиро дуруст нишон диҳанд, мета теги Viewport -ро дохил кунед.

  1. <meta name = "viewport" мӯҳтавои = "васеъ = паҳнои дастгоҳ, миқёси ибтидоӣ = 1.0" >

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

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

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

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

  1.   // Телефонҳои ландшафтӣ ва поён
  2.   @media ( барои ҳадди аксар : 480px ) { ... }     
  3.  
  4.   // Телефони манзара ба планшети портрет
  5.   @media ( максимум - паҳнои : 768px ) { ... }     
  6.  
  7.   // Планшети портрет ба манзара ва мизи корӣ
  8.   @media ( ҳадди ақал - паҳнои : 768px ) ва ( макс - паҳнои : 980px ) { ... }        
  9.  
  10.   // Мизи кории калон
  11.   @media ( дақ - паҳно : 1200px ) { .. }

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

Онҳо чистанд

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

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

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

Масалан, шумо метавонед як <select>унсури навро дар тарҳҳои мобилӣ нишон диҳед, аммо на дар планшетҳо ё мизи корӣ.

Синфҳои дастгирӣ

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

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

Ҳолати санҷишӣ

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

Дар...

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

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

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