Bootstrap

Сақтау

Bootstrap жауап беретін 12 бағанды ​​торға салынған. Біз сондай-ақ осы жүйеге негізделген бекітілген және сұйық ені орналасуларын қостық.

CSS қалпына келтіруге, типографияға және сілтемелерге арналған жаһандық стильдер

HTML5 құжат түрін қажет етеді

Bootstrap HTML5 құжат түрін пайдалануды қажет ететін HTML элементтері мен CSS сипаттарын пайдаланады. Оны жобаңыздағы әрбір Bootstrapped бетінің басында қосуды ұмытпаңыз.

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

Типография және сілтемелер

scaffolding.less файлында біз негізгі жаһандық дисплей, типография және сілтеме мәнерлерін орнатамыз. Атап айтқанда, біз:

  • Денедегі жиекті алып тастаңыз
  • background-color: white;параметріне орнатыңызbody
  • @baseFontFamily, @baseFontSize, және @baseLineHeightатрибуттарын типографиялық негіз ретінде пайдаланыңыз
  • Жаһандық сілтеме түсін арқылы орнатыңыз @linkColorжәне сілтеменің астын сызуды тек параметріне қолданыңыз:hover

Қалпына келтіру арқылы Қалпына келтіру

Bootstrap 2 нұсқасынан бастап дәстүрлі CSS қалпына келтіру HTML5 Boilerplate жүйесін қуаттайтын Николас Галлахердің жобасы Normalize.css элементтерін пайдалану үшін дамыды .

Жаңа қалпына келтіруді әлі де reset.less ішінде табуға болады , бірақ қысқалық пен дәлдік үшін көптеген элементтер жойылған.

Әдепкі тор жүйесі жауап беретін бұрылысы бар 12 баған

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Bootstrap бағдарламасында берілген әдепкі тор жүйесі 724px, 940px (жауап беретін CSS қосылмаған әдепкі) және 1170px енінде көрсетілетін 12 бағанды ​​пайдаланады. 767px көру порттарынан төмен бағандар сұйық болады және тігінен жинақталады.

  1. <div класс = "жол" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Мұнда көрсетілгендей, негізгі орналасуды екі «бағанмен» жасауға болады, олардың әрқайсысы біздің тор жүйеміздің бөлігі ретінде біз анықтаған 12 негізгі бағандардың санын қамтиды.


Есеп айырысу бағандары

4
4 офсет 4
3 офсет 3
3 офсет 3
8 офсет 4 
  1. <div класс = "жол" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Кірістірілген бағандар

Bootstrap жүйесіндегі статикалық (сұйық емес) тор жүйесі арқылы ұя салу оңай. Мазмұнды кірістіру үшін бар бағанға жаңа .rowжәне бағандар жинағын қосыңыз ..span*.span*

Мысал

Кірістірілген жолдар оның негізгі бағандарының санына дейін қосылатын бағандар жинағын қамтуы керек. Мысалы, екі кірістірілген .span3бағанды ​​ішіне орналастыру керек .span6.

Бағанның 1-деңгейі
2-деңгей
2-деңгей 
  1. <div класс = "жол" > 
  2.   <div class = "span6" > 
  3.     1-деңгей бағаны
  4.     <div класс = "жол" > 
  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 = "қатар сұйықтығы" > 
  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 Бағандар арасындағы теріс бос орын

LESS ішіндегі айнымалылар

Bootstrap ішіне орнатылған әдепкі 940px тор жүйесін теңшеуге арналған бірнеше айнымалы мәндер жоғарыда құжатталған. Торға арналған барлық айнымалылар variables.less ішінде сақталады.

Қалай теңшеуге болады

Торды өзгерту үш @grid*айнымалы мәнді өзгертуді және Bootstrap қайта құрастыруды білдіреді. variables.less ішіндегі тор айнымалы мәндерін өзгертіңіз және қайта құрастыру үшін құжатталған төрт жолдың бірін пайдаланыңыз . Қосымша бағандарды қосып жатсаңыз, grid.less ішіндегілер үшін CSS қосуды ұмытпаңыз.

Жауапты болу

Торды теңшеу тек әдепкі деңгейде, яғни 940px торында жұмыс істейді. Bootstrap қолданбасының жауап беретін аспектілерін сақтау үшін responsive.less ішінде торларды теңшеу керек.

Орналасулар Веб-беттерді жасауға арналған негізгі үлгілер

Бекітілген орналасу

Әдепкі және қарапайым ені 940 пиксель, бір ұсынатын кез келген веб-сайт немесе бет үшін орталықтандырылған орналасу <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

Мета тег қажет

Құрылғылардың жауап беретін беттерді дұрыс көрсетуін қамтамасыз ету үшін көру портының мета тегін қосыңыз.

  1. <мета атауы = "көру алаңы" мазмұны = "ені = құрылғының ені, бастапқы масштаб = 1.0" >

Бұқаралық ақпарат құралдарының сұрауларын пайдалану

Bootstrap бұл медиа сұрауларды автоматты түрде қамтымайды, бірақ оларды түсіну және қосу өте оңай және минималды орнатуды қажет етеді. Сізде Bootstrap жауап беретін мүмкіндіктерін қосудың бірнеше нұсқасы бар:

  1. Құрастырылған жауап беру нұсқасын пайдаланыңыз, bootstrap-responsive.css
  2. @import "responsive.less" қосыңыз және Bootstrap файлын қайта құрастырыңыз
  3. Responsive.less файлын бөлек файл ретінде өзгертіңіз және қайта құрастырыңыз

Неге оны жай ғана қоспасқа? Шынын айту керек, барлығына жауап беру керек емес. Әзірлеушілерді бұл мүмкіндікті жоюға шақырудың орнына, біз оны қосуды жөн санаймыз.

  1.   /* пейзаждық телефондар және төмен */
  2.   @media ( макс . ені : 480px ) { ... }     
  3.  
  4.   /* пейзаждық телефоннан портреттік планшетке */
  5.   @media ( макс . ені : 767px ) { ... }     
  6.  
  7.   /* пейзажға және жұмыс үстеліне портреттік планшет */
  8.   @media ( мин - ені : 768px ) және ( макс . ені : 979px ) { ... }        
  9.  
  10.   /* Үлкен жұмыс үстелі */
  11.   @media ( мин - ені : 1200px ) { ... }

Жауапты утилита кластары

Олар не

Ұялы телефонға ыңғайлырақ әзірлеу үшін осы негізгі утилита сыныптарын құрылғы арқылы мазмұнды көрсету және жасыру үшін пайдаланыңыз.

Қашан пайдалану керек

Шектеулі негізде пайдаланыңыз және бір сайттың мүлдем басқа нұсқаларын жасаудан аулақ болыңыз. Оның орнына оларды әрбір құрылғының көрсетілімін толықтыру үшін пайдаланыңыз.

Мысалы, сіз <select>мобильді орналасуларда шарлау элементін көрсете аласыз, бірақ планшеттерде немесе жұмыс үстелінде емес.

Қолдау сабақтары

Мұнда біз қолдайтын сыныптардың кестесі және олардың медиа сұрауының берілген орналасуына әсері (құрылғы бойынша белгіленген) көрсетілген. Оларды табуға болады responsive.less.

Сынып Телефондар480px және одан төмен Планшеттер767px және одан төмен Жұмыс үстелдері768px және одан жоғары
.visible-phone Көрінетін
.visible-tablet Көрінетін
.visible-desktop Көрінетін
.hidden-phone Көрінетін Көрінетін
.hidden-tablet Көрінетін Көрінетін
.hidden-desktop Көрінетін Көрінетін

Сынақ жағдайы

Жоғарыдағы сыныптарды тексеру үшін браузердің өлшемін өзгертіңіз немесе әртүрлі құрылғыларға жүктеңіз.

Мына жерде көрінеді...

Жасыл құсбелгілер сыныптың ағымдағы қарау терезесінде көрінетінін көрсетеді.

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Жұмыс үстелі✔ Жұмыс үстелі

Жасырылған...

Мұнда жасыл құсбелгілер сыныптың ағымдағы қарау терезесінде жасырылғанын көрсетеді.

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Жұмыс үстелі✔ Жұмыс үстелі