Scaffolding

Bootstrap жооп берүүчү 12 тилкелүү тордо курулган. Биз ошондой эле ошол системанын негизинде туруктуу жана суюктуктун кеңдигинен макеттерди киргиздик.

Демейки 940px тор

Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең, 12 тилкелүү тор .

Ал ошондой эле ар кандай түзмөктөр жана резолюциялар үчүн төрт жооп берүүчү вариацияга ээ: телефон, планшеттин портрети, столдун пейзаждары жана кичинекей иш такталары жана чоң кең экрандуу иш такталары.

<div класс = "сап" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 12 фундаменталдык мамычалардын санын камтыйт.

Мамычаларды алмаштыруу

4 офсет 4

3 офсет 3

8 офсет 4

<div класс = "сап" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Уюшкан мамычалар

Bootstrapдагы статикалык (суюк эмес) тор системасы менен уя салуу оңой. Мазмунуңузду уячага салуу үчүн, учурдагы тилкеге жаңы .rowжана мамычалар топтомун кошуңуз ..span*.span*

Мисал

Мамычанын 1-деңгээли

2-деңгээл

<div класс = "сап" > 
  <div class = "span12" > 
    Мамычанын 1-деңгээли
    <div класс = "сап" > 
      <div class = "span6" > 2-деңгээл </div> 
      <div class = "span6" > 2-деңгээл </div> 
    </div>
  </div>
</div>

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

Variable	Демейки маани	Description
`@gridColumns`	12	Мамычалардын саны
`@gridColumnWidth`	60px	Ар бир мамычанын туурасы
`@gridGutterWidth`	20px	Мамычалардын ортосундагы терс боштук
`@siteWidth`	Бардык мамычалар менен каналдардын эсептелген суммасы	Микстин туурасын коюу үчүн мамычалардын жана каналдардын санын `.container-fixed()`эсептейт

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

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

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

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

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

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

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

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

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

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

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

<div класс = "контейнер-суюктук" > 
  <div класс = "катар-суюктук" > 
    <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 ) { .. }