Bootstrap 12 баганалы челтәрдә төзелгән. Без шулай ук шул системага нигезләнгән тотрыклы һәм сыеклык киңлеге макетларын керттек.
Bootstrap өлеше буларак бирелгән килешү челтәре 940px киңлектә, 12 баганалы челтәр .
Аның шулай ук төрле җайланмалар һәм карарлар өчен дүрт җаваплы вариациясе бар: телефон, планшет портреты, өстәл пейзажы һәм кечкенә эш өстәлләре, зур экранлы эш өстәлләре.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Монда күрсәтелгәнчә, төп макет ике "багана" белән ясалырга мөмкин, аларның һәрберсе безнең челтәр системасы өлеше итеп билгеләгән 12 нигез баганасын үз эченә ала.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Ботстраптагы статик (сыек булмаган) челтәр системасы белән оя ясау җиңел. Эчтәлекне оялау өчен, булган багана эчендә яңа .row
һәм баганалар җыелмасы өстәгез ..span*
.span*
Ояланган рәтләр аның әти-әнисенең баганалар санына өстәгән баганалар җыелмасын кертергә тиеш. Мәсәлән, ике оя .span3
баганасы а эчендә урнаштырылырга тиеш .span6
.
- <div class = "row" >
- <div class = "span12" >
- 1 нче багана
- <div class = "row" >
- <div class = "span6" > 2 дәрәҗә </div>
- <div class = "span6" > 2 дәрәҗә </div>
- </div>
- </div>
- </div>
Сыеклык челтәре системасы тотрыклы пиксель урынына багана киңлеге өчен процент куллана. Бу шулай ук безнең төп челтәр системасы белән бер үк җаваплы вариацияләргә ия, төп экран резолюцияләре һәм җайланмалары өчен тиешле пропорцияләрне тәэмин итә.
.row
Anyзгәртеп кенә теләсә нинди рәт сыеклык ясагыз .row-fluid
. Колонналар бер үк булып калалар, тотрыклы һәм сыеклык макетлары арасында әйләнү өчен супер туры.
- <div class = "рәт-сыеклык" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Сыеклык челтәрләре белән оя ясау бераз башка: ояланган баганалар саны ата-аналарга туры килергә тиеш түгел. Киресенчә, сезнең баганалар һәр дәрәҗәдә яңартылган, чөнки һәр рәт ата-багананың 100% тәшкил итә.
- <div class = "рәт-сыеклык" >
- <div class = "span12" >
- 1 нче багана
- <div class = "рәт-сыеклык" >
- <div class = "span6" > 2 дәрәҗә </div>
- <div class = "span6" > 2 дәрәҗә </div>
- </div>
- </div>
- </div>
Үзгәрүчән | Килешенгән кыйммәт | Тасвирлау |
---|---|---|
@gridColumns |
12 | Колонналар саны |
@gridColumnWidth |
60px | Eachәр багананың киңлеге |
@gridGutterWidth |
20px | Колонналар арасында тискәре урын |
@siteWidth |
Барлык баганаларның һәм чокырларның исәпләнгән суммасы | .container-fixed() Миксинның киңлеген билгеләү өчен баганалар һәм чокырлар саны |
Bootstrap эчендә урнаштырылган, югарыда документлаштырылган 940px челтәр системасын көйләү өчен бик күп үзгәрүләр. Челтәр өчен барлык үзгәрешләр үзгәрүчәннәрдә саклана.
Челтәрне үзгәртү - өч @grid*
үзгәрүчене үзгәртү һәм Bootstrap-ны кабатлау. Челтәр үзгәрүчәннәрен үзгәрүчәннәрдә үзгәртегез һәм компиляцияләү өчен документлаштырылган дүрт ысулның берсен кулланыгыз . Әгәр сез күбрәк баганалар өстисез икән, grid.less өчен CSS өстәргә онытмагыз.
Челтәрне көйләү 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 - 979px | 42px | 20px |
Килешү | 980px һәм югарырак | 60px | 20px |
Зур дисплей | 1210px һәм югары | 70px | 30px |
Devicesайланмаларның җаваплы битләрне дөрес күрсәтүен тәэмин итү өчен, визуаль мета-тегны кертегез.
- <мета исеме = "күренеш" эчтәлеге = "киңлек = җайланма киңлеге, башлангыч масштаб = 1,0" >
Медиа соравы CSS өчен берничә шартка нигезләнеп - катнашу, киңлек, күрсәтү төре һ.б. рөхсәт итә, ләкин гадәттә тирә-якка игътибар min-width
итә max-width
.
Bootstrap автоматик рәвештә бу медиа сорауларын кертми, ләкин аларны аңлау һәм өстәү бик җиңел һәм минималь көйләү таләп итә. Bootstrap-ның җаваплы үзенчәлекләрен кертү өчен сезнең берничә вариант бар:
Нигә аны кертмәскә? Дөресен генә әйткәндә, барысы да җаваплы булырга тиеш түгел. Төзүчеләрне бу функцияне бетерергә өндәү урынына, без аны эшләтеп җибәрү өчен иң яхшысы дип саныйбыз.
- // Ландшафт телефоннары һәм аста
- @media ( макс - киңлек : 480px ) { ... }
- // Планшет планшеты өчен пейзаж телефоны
- @media ( макс - киңлек : 768px ) { ... }
- // Пейзаж һәм эш өстәленә портрет планшеты
- @media ( мин - киңлек : 768px ) һәм ( макс - киңлек : 980px ) { ... }
- // Зур эш өстәле
- @media ( мин - киңлек : 1200px ) { .. }