Bootstrap жооп берүүчү 12 тилкелүү тордо курулган. Биз ошондой эле ошол системанын негизинде туруктуу жана суюктуктун кеңдигинен макеттерди киргиздик.
Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең, 12 тилкелүү тор .
Ал ошондой эле ар кандай түзмөктөр жана резолюциялар үчүн төрт жооп берүүчү вариацияга ээ: телефон, планшеттин портрети, столдун пейзаждары жана кичинекей иш такталары жана чоң кең экрандуу иш такталары.
- <div класс = "сап" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 12 фундаменталдык мамычалардын санын камтыйт.
- <div класс = "сап" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Bootstrapдагы статикалык (суюк эмес) тор системасы менен уя салуу оңой. Мазмунуңузду уячага салуу үчүн, учурдагы тилкеге жаңы .row
жана мамычалар топтомун кошуңуз ..span*
.span*
Уюшкан саптар анын ата-энесинин мамычаларынын санына чейин кошулган мамычаларды камтышы керек. Мисалы, эки уя салынган .span3
мамычаларды .span6
.
- <div класс = "сап" >
- <div class = "span12" >
- Мамычанын 1-деңгээли
- <div класс = "сап" >
- <div class = "span6" > 2-деңгээл </div>
- <div class = "span6" > 2-деңгээл </div>
- </div>
- </div>
- </div>
Суюк тор системасы белгиленген пикселдердин ордуна мамычанын туурасы үчүн пайыздарды колдонот. Ал ошондой эле биздин туруктуу тор тутумубуз сыяктуу эле жооп берүүчү вариацияларга ээ, бул негизги экрандын токтомдору жана түзмөктөрү үчүн тийиштүү пропорцияларды камсыз кылат.
Катар суюктугун жөн гана өзгөртүү .row
менен жасаңыз .row-fluid
. Мамычалар так ошол бойдон калууда, бул стационардык жана суюк схемалардын ортосунда өтүүнү оңой кылат.
- <div класс = "катар-суюктук" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Суюк торлор менен уя салуу бир аз башкача: уя салынган мамычалардын саны ата-энеге дал келүүнүн кереги жок. Анын ордуна, мамычаларыңыз ар бир деңгээлде баштапкы абалга келтирилет, анткени ар бир сап негизги тилкенин 100% ээлейт.
- <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() эсептейт |
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 пикселден 979 пикселге чейин | 42px | 20px |
Демейки | 980px жана андан жогору | 60px | 20px |
Чоң дисплей | 1210px жана андан жогору | 70px | 30px |
Түзмөктөр жооп берүүчү баракчаларды туура көрсөтүшү үчүн, көрүү портунун мета тегин кошуңуз.
- <meta name = "viewport" content = "туурасы = түзмөктүн туурасы, баштапкы масштаб = 1.0" >
Медиа сурамдары бир катар шарттардын негизинде ыңгайлаштырылган CSS'ге мүмкүндүк берет - катыштар, тууралар, дисплей түрү min-width
, max-width
ж.б.
Bootstrap бул медиа сурамдарды автоматтык түрдө камтыбайт, бирок аларды түшүнүү жана кошуу абдан оңой жана минималдуу орнотууну талап кылат. Сизде Bootstrapтин жооп берүүчү функцияларын кошуу үчүн бир нече варианттар бар:
Эмне үчүн аны жөн эле камтыбайт? Чынын айтсам, баары эле жооп бериши керек эмес. Иштеп чыгуучуларды бул функцияны алып салууга үндөгөндүн ордуна, биз аны иштетүүнү эң жакшы деп эсептейбиз.
- // Пейзаж телефондору жана төмөн
- @media ( макс . туурасы : 480px ) { ... }
- // Пейзаждык телефондон портреттик планшетке
- @media ( макс . туурасы : 768px ) { ... }
- // Таблеткадан пейзажга жана иш тактага портрет
- @media ( мин - туурасы : 768px ) жана ( макс - туурасы : 980px ) { ... }
- // Чоң иш тактасы
- @media ( мин - туурасы : 1200px ) { .. }