Bootstrap е изграден на респонзивна мрежа од 12 колони. Вклучивме и распореди со фиксна и флуидна ширина врз основа на тој систем.
Стандардниот мрежен систем обезбеден како дел од Bootstrap е мрежа со 12 колони широка 940 пиксели .
Исто така, има четири одговорни варијации за различни уреди и резолуции: телефон, портрет на таблет, пејзаж на маса и мали десктоп компјутери и големи десктоп компјутери со широк екран.
- <div class = „ред“ >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Како што е прикажано овде, може да се креира основен распоред со две „колони“, од кои секоја опфаќа број од 12-те основни колони што ги дефиниравме како дел од нашиот систем на мрежа.
- <div class = „ред“ >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Со статичниот (не-течен) мрежен систем во Bootstrap, вгнездувањето е лесно. За да ја вгнездите вашата содржина, само додадете нова .row
и множество .span*
колони во постоечка .span*
колона.
Вгнездените редови треба да вклучуваат збир на колони што се собираат на бројот на колони од неговиот родител. На пример, две вгнездени .span3
колони треба да се постават во .span6
.
- <div class = „ред“ >
- <div class = "span12" >
- Ниво 1 од колоната
- <div class = „ред“ >
- <div class = "span6" > Ниво 2 </div>
- <div class = "span6" > Ниво 2 </div>
- </div>
- </div>
- </div>
Системот за флуидна мрежа користи проценти за ширина на колони наместо фиксни пиксели. Исто така, ги има истите варијации што реагираат како нашиот систем за фиксна мрежа, обезбедувајќи соодветни пропорции за клучните резолуции на екранот и уредите.
Направете било кој ред флуид едноставно со промена .row
на .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 |
60 пиксели | Ширина на секоја колона |
@gridGutterWidth |
20 пиксели | Негативен простор помеѓу колоните |
@siteWidth |
Пресметана сума на сите столбови и олуци | Го брои бројот на столбови и олуци за да ја постави ширината на .container-fixed() миксинот |
Вградени во Bootstrap се неколку променливи за прилагодување на стандардниот мрежен систем од 940 пиксели, документирани погоре. Сите променливи за мрежата се складираат во променливи.помалку.
Измената на мрежата значи промена на трите @grid*
променливи и прекомпајлирање на Bootstrap. Променете ги променливите на мрежата во променливите.less и користете еден од четирите документирани начини за повторно компајлирање . Ако додавате повеќе колони, задолжително додадете CSS за оние во grid.less.
Приспособувањето на мрежата работи само на стандардното ниво, мрежата од 940 пиксели. За да ги одржите одговорните аспекти на Bootstrap, исто така ќе треба да ги приспособите мрежите во responsive.less.
Стандардниот и едноставен распоред со ширина од 940 пиксели, центриран за речиси секоја веб-локација или страница обезбедена од еден <div class="container">
.
- <тело>
- <div class = „контејнер“ >
- ...
- </div>
- </body>
<div class="container-fluid">
дава флексибилна структура на страници, минимум и максимални ширини и странична лента од левата страна. Одлично е за апликации и документи.
- <div class = „контејнер-флуид“ >
- <div class = „ред-флуид“ >
- <div class = "span2" >
- <!--Содржина на страничната лента-->
- </div>
- <div class = "span10" >
- <!--Содржина на телото-->
- </div>
- </div>
- </div>
Bootstrap поддржува неколку медиумски барања во една датотека за да ви помогне да ги направите вашите проекти посоодветни на различни уреди и резолуции на екранот. Еве што е вклучено:
Етикета | Ширина на распоред | Ширина на колоната | Ширина на олукот |
---|---|---|---|
Паметни телефони | 480 пиксели и подолу | Течни столбови, без фиксни ширини | |
Таблети за портрети | 480 пиксели до 768 пиксели | Течни столбови, без фиксни ширини | |
Пејзажни таблети | 768 пиксели до 979 пиксели | 42 пиксели | 20 пиксели |
Стандардно | 980 пиксели и повеќе | 60 пиксели | 20 пиксели |
Голем дисплеј | 1210 пиксели и повеќе | 70 пиксели | 30 пиксели |
За да се осигурате дека уредите правилно прикажуваат одговорни страници, вклучете ја мета-ознаката на приказот.
- <meta name = "viewport" content = "width=device-width, почетна скала=1.0" >
Пребарувањата за медиумите дозволуваат прилагодено CSS врз основа на голем број услови - сооднос, ширина, тип на приказ итн. - но обично се фокусира околу min-width
и max-width
.
Bootstrap не ги вклучува автоматски овие медиумски барања, но нивното разбирање и додавање е многу лесно и бара минимално поставување. Имате неколку опции за вклучување на одговорните карактеристики на Bootstrap:
Зошто само да не го вклучите? За волја на вистината, не треба сè да реагира. Наместо да ги охрабруваме програмерите да ја отстранат оваа функција, сметаме дека најдобро е да ја овозможиме.
- // Пејзажни телефони и надолу
- @media ( макс - широчина : 480 пиксели ) { ... }
- // Пејзажен телефон до таблет со портрет
- @media ( макс - широчина : 768 пиксели ) { ... }
- // Портрет таблет на пејзаж и десктоп
- @media ( мин . ширина : 768 пиксели ) и ( макс . ширина : 980 пиксели ) { ... }
- // Голема работна површина
- @media ( мин . ширина : 1200 пиксели ) { .. }