Bootstrap

Scaffolding

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 класс = "катар-суюктук" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Суюктук уясы

Суюк торлор менен уя салуу бир аз башкача: уя салынган мамычалардын саны ата-энеге дал келүүнүн кереги жок. Анын ордуна, мамычаларыңыз ар бир деңгээлде баштапкы абалга келтирилет, анткени ар бир сап негизги тилкенин 100% ээлейт.

Суюктук 12
Суюктук 6
Суюктук 6 
  1. <div класс = "катар-суюктук" > 
  2.   <div class = "span12" > 
  3.     Мамычанын 1-деңгээли
  4.     <div класс = "катар-суюктук" > 
  5.       <div class = "span6" > 2-деңгээл </div> 
  6.       <div class = "span6" > 2-деңгээл </div> 
  7.     </div>
  8.   </div>
  9. </div>

Тор ыңгайлаштыруу

Variable Демейки маани Description
@gridColumns 12 Мамычалардын саны
@gridColumnWidth 60px Ар бир мамычанын туурасы
@gridGutterWidth 20px Мамычалардын ортосундагы терс боштук

LESS ичиндеги өзгөрмөлөр

Bootstrap ичинде орнотулган демейки 940px тор системасын ыңгайлаштыруу үчүн бир нече өзгөрмөлөр бар, жогоруда документтештирилген. Тор үчүн бардык өзгөрмөлөр variables.less ичинде сакталат.

Кантип ыңгайлаштыруу керек

Торду өзгөртүү үч @grid*өзгөрмөлөрдү өзгөртүүнү жана Bootstrapты кайра компиляциялоону билдирет. variables.less ичиндеги тор өзгөрмөлөрдү өзгөртүңүз жана кайра компиляциялоо үчүн документтештирилген төрт жолдун бирин колдонуңуз . Эгер сиз көбүрөөк мамычаларды кошуп жатсаңыз, анда grid.less ичиндегилер үчүн CSS кошууну унутпаңыз.

Жооптуу болуу

Торду ыңгайлаштыруу демейки деңгээлде, 940px тордо гана иштейт. Bootstrap'тин жооп берүүчү аспектилерин сактап калуу үчүн, ошондой эле responsive.less ичинде торлорду ыңгайлаштырышыңыз керек болот.

Макеттер Веб баракчаларды түзүү үчүн негизги калыптар

Фиксалдуу макет

Демейки жана жөнөкөй 940px кеңдиги, бир гана веб-сайт же барагы үчүн борборлоштурулган макет <div class="container">.

  1. <дене>
  2.   <div класс = "контейнер" > 
  3.     ...
  4.   </div>
  5. </body>

Суюктуктун жайгашуусу

<div class="container-fluid">ийкемдүү бет түзүмүн, мин- жана максимум-туураларын жана сол жак каптал тилкесин берет. Бул колдонмолор жана документтер үчүн сонун.

  1. <div класс = "контейнер-суюктук" > 
  2.   <div класс = "катар-суюктук" > 
  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. <meta name = "viewport" content = "туурасы = түзмөктүн туурасы, баштапкы масштаб = 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>мобилдик макеттерде navigasyon үчүн элементти көрсөтсөңүз болот, бирок планшеттерде же иш такталарында эмес.

Колдоо класстары

Бул жерде биз колдогон класстардын таблицасы жана алардын берилген медиа сурамынын макетине тийгизген таасири (түзмөк менен белгиленген). Алардан тапса болот responsive.less.

Класс Телефондор480px жана андан төмөн Планшеттер767px жана андан төмөн Иш такталары768px жана андан жогору
.visible-phone Көрүнүүчү
.visible-tablet Көрүнүүчү
.visible-desktop Көрүнүүчү
.hidden-phone Көрүнүүчү Көрүнүүчү
.hidden-tablet Көрүнүүчү Көрүнүүчү
.hidden-desktop Көрүнүүчү Көрүнүүчү

Сыноо иши

Жогорудагы класстарды текшерүү үчүн браузериңиздин өлчөмүн өзгөртүңүз же башка түзмөктөргө жүктөңүз.

Төмөнкүдө көрүнөт...

Жашыл белгилер класс учурдагы көрүү терезеңизде көрүнөрүн көрсөтүп турат.

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Иш такта✔ Иш такта

Жашырылган...

Бул жерде, жашыл белгилер класс учурдагы көрүү терезеңизде жашырылганын көрсөтүп турат.

  • Телефон✔ Телефон
  • Планшет✔ Планшет
  • Иш такта✔ Иш такта