Скафолдинг

Bootstrap 12 баганалы челтәрдә төзелгән. Без шулай ук шул системага нигезләнгән тотрыклы һәм сыеклык киңлеге макетларын керттек.

Килешү 940px челтәр

Bootstrap өлеше буларак бирелгән килешү челтәре 940px киңлектә, 12 баганалы челтәр .

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Монда күрсәтелгәнчә, төп макет ике "багана" белән ясалырга мөмкин, аларның һәрберсе безнең челтәр системасы өлеше итеп билгеләгән 12 нигез баганасын үз эченә ала.

Колонналарны офсетлау

4 офсет 4

3 офсет 3

8 офсет 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Оя баганалары

Ботстраптагы статик (сыек булмаган) челтәр системасы белән оя ясау җиңел. Эчтәлекне оялау өчен, булган багана эчендә яңа .rowһәм баганалар җыелмасы өстәгез ..span*.span*

Мисал

1 нче багана

2 нче дәрәҗә

<div class = "row" > 
  <div class = "span12" > 
    1 нче багана
    <div class = "row" > 
      <div class = "span6" > 2 дәрәҗә </div> 
      <div class = "span6" > 2 дәрәҗә </div> 
    </div>
  </div>
</div>

Челтәрне көйләү

Үзгәрүчән	Килешенгән кыйммәт	Тасвирлау
`@gridColumns`	12	Колонналар саны
`@gridColumnWidth`	60px	Eachәр багананың киңлеге
`@gridGutterWidth`	20px	Колонналар арасында тискәре урын
`@siteWidth`	Барлык баганаларның һәм чокырларның исәпләнгән суммасы	`.container-fixed()`Миксинның киңлеген билгеләү өчен баганалар һәм чокырлар саны

LESS үзгәрүләр

Bootstrap эчендә урнаштырылган, югарыда документлаштырылган 940px челтәр системасын көйләү өчен бик күп үзгәрүләр. Челтәр өчен барлык үзгәрешләр үзгәрүчәннәрдә саклана.

Ничек көйләргә

Челтәрне үзгәртү өч @grid*үзгәрүчене үзгәртү һәм Bootstrap-ны кабатлау дигән сүз. Челтәр үзгәрүчәннәрен үзгәрүчәннәрдә үзгәртегез һәм компиляцияләү өчен документлаштырылган дүрт ысулның берсен кулланыгыз . Әгәр сез күбрәк баганалар өстисез икән, grid.less өчен CSS өстәргә онытмагыз.

Respаваплы булу

Челтәрне көйләү 940px челтәрдә килешү дәрәҗәсендә эшли. Bootstrap-ның җаваплы якларын саклап калу өчен, сез шулай ук челтәрләрне responsive.less'та көйләргә тиеш.

Тикшерелгән макет

Килешү һәм гади 940px киңлектә, бер сайт белән тәэмин ителгән теләсә нинди вебсайт яки бит өчен үзәкләштерелгән макет <div class="container">.

<body>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Сыеклык урнашуы

<div class="container-fluid">сыгылмалы бит структурасын, мин- һәм макс-киңлекләрне, һәм сул як ягы бирә. Бу кушымталар һәм документлар өчен бик яхшы.

<div class = "контейнер-сыеклык" > 
  <div class = "рәт-сыеклык" > 
    <div class = "span2" > 
      <! - Капка тактасы эчтәлеге ->
    </div>
    <div class = "span10" > 
      <! - Тән эчтәлеге ->
    </div>
  </div>
</div>

Ярдәмче җайланмалар

Bootstrap сезнең проектларны төрле җайланмаларда һәм экран резолюцияләрендә урынлырак итәр өчен, берничә медиа соравына ярдәм итә. Менә нәрсә кертелгән:

Ярлык	Таблицаның киңлеге	Колонның киңлеге	Гаттер киңлеге
Смартфоннар	480px һәм аста	Сыек баганалар, тотрыклы киңлекләр юк
Портрет планшетлары	480px - 768px	Сыек баганалар, тотрыклы киңлекләр юк
Пейзаж планшетлары	768px - 940px	44px	20px
Килешү	940px һәм югарырак	60px	20px
Зур дисплей	1210px һәм югары	70px	30px

Алар нәрсә эшлиләр

Медиа соравы CSS өчен берничә шартка нигезләнеп - катнашу, киңлек, күрсәтү төре һ.б. рөхсәт итә, ләкин гадәттә тирә-якка игътибар min-widthитә max-width.

Безнең челтәрдәге багананың киңлеген үзгәртегез
Кирәк булган җирдә йөзү урынына элементларны туплагыз
Devicesайланмалар өчен урынлырак булсын өчен, баш һәм текстның размерын үзгәртегез

Медиа сорауларын куллану

Bootstrap автоматик рәвештә бу медиа сорауларын кертми, ләкин аларны аңлау һәм өстәү бик җиңел һәм минималь көйләү таләп итә. Bootstrap-ның җаваплы үзенчәлекләрен кертү өчен сезнең берничә вариант бар:

Ostыелган җаваплы версияне кулланыгыз, bootstrap-responsive.css
@Import "responsive.less" өстәгез һәм Bootstrap-ны кабатлагыз
Responsзгәртү һәм компенсацияләү

Нигә аны кертмәскә? Дөресен генә әйткәндә, барысы да җаваплы булырга тиеш түгел. Төзүчеләрне бу функцияне бетерергә өндәү урынына, без аны эшләтеп җибәрү өчен иң яхшысы дип саныйбыз.

  // Ландшафт телефоннары һәм аста
  @media ( макс - киңлек : 480px ) { ... }     
 
  // Планшет планшеты өчен пейзаж телефоны
  @media ( макс - киңлек : 768px ) { ... }     
 
  // Пейзаж һәм эш өстәленә портрет планшеты
  @media ( мин - киңлек : 768px ) һәм ( макс - киңлек : 940px ) { ... }        
 
  // Зур эш өстәле
  @media ( мин - киңлек : 1200px ) { .. }