Source

Мрежен систем

Користете ја нашата моќна мрежа за флексибилен прв мобилен телефон за да изградите распоред од сите облици и големини благодарение на системот со дванаесет колони, петте стандардни нивоа кои реагираат, променливите и мешаните Sass и десетици претходно дефинирани класи.

Како работи

Мрежниот систем на Bootstrap користи серија контејнери, редови и колони за распоред и усогласување на содржината. Изграден е со flexbox и целосно реагира. Подолу е пример и длабински поглед на тоа како мрежата се спојува.

Нов или не сте запознаени со flexbox? Прочитајте го овој водич за Flexbox за трикови за CSS за позадина, терминологија, упатства и фрагменти од код.

Една од трите колони

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Горенаведениот пример создава три колони со еднаква ширина на мали, средни, големи и екстра големи уреди користејќи ги нашите предефинирани класи на мрежа. Тие колони се центрирани во страницата со родителот .container.

Разградувајќи го, еве како функционира:

Контејнерите обезбедуваат средство за центрирање и хоризонтално поставување на содржината на вашата страница. Користете .containerго за респонзивна ширина на пиксели или .container-fluidза width: 100%сите пристаништа за гледање и големини на уреди.
Редовите се обвивки за колони. Секоја колона има хоризонтална padding(наречена олук) за контролирање на просторот меѓу нив. Ова paddingпотоа се спротивставува на редовите со негативни маржи. На овој начин, целата содржина во вашите колони е визуелно порамнета на левата страна.
Во мрежниот распоред, содржината мора да биде поставена во колони и само колоните може да бидат непосредни деца на редови.
Благодарение на flexbox, мрежните колони без одредено widthавтоматски ќе се распоредат како колони со еднаква ширина. На пример, четири примероци на .col-smќе бидат автоматски широки 25% од малата точка на прекин и нагоре. Погледнете го делот за колони за автоматско распоредување за повеќе примери.
Класите на колони го покажуваат бројот на колони што сакате да ги користите од можните 12 по ред. Значи, ако сакате три колони со еднаква ширина, можете да користите .col-4.
Колоните widths се поставени во проценти, така што тие се секогаш течни и со големина во однос на нивниот матичен елемент.
Колоните имаат хоризонтални paddingза создавање на олуци помеѓу поединечни колони, сепак, можете да ги отстраните marginод редовите и paddingод колоните со .no-guttersна .row.
За да се направи решетката да реагира, има пет точки на прекин на мрежата, по една за секоја точка на прекин на одговор : сите точки на прекин (екстра мали), мали, средни, големи и екстра големи.
Точките на прекин на мрежата се засноваат на барања за медиум со минимална ширина, што значи дека се однесуваат на таа една точка на прекин и сите оние над неа (на пр., .col-sm-4се однесува на мали, средни, големи и екстра големи уреди, но не и на првата точка на xsпрекин).
Може да користите претходно дефинирани класи на мрежа (како .col-4) или Sass миксови за повеќе семантичко обележување.

Бидете свесни за ограничувањата и грешките околу flexbox , како што е неможноста да користите некои HTML елементи како флекс контејнери .

Опции за мрежа

Додека Bootstrap користи ems или rems за дефинирање на повеќето големини, pxs се користат за точки на прекин на мрежата и ширина на контејнери. Ова е затоа што ширината на приказот е во пиксели и не се менува со големината на фонтот .

Погледнете како функционираат аспектите на мрежниот систем Bootstrap на повеќе уреди со практична табела.

	Екстра мала <576 пиксели	Мала ≥576 px	Средно ≥768 px	Големи ≥992 пиксели	Екстра голема ≥1200 пиксели
Максимална ширина на контејнерот	Никој (автоматски)	540 пиксели	720 пиксели	960 пиксели	1140 пиксели
Префикс за класа	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# колони	12
Ширина на олукот	30 px (15 px на секоја страна од колоната)
Вгнездени	Да
Редење на колони	Да

Автоматски распоред на колони

Користете класи на колони специфични за точката на прекин за лесно одредување на големината на колоните без експлицитна нумерирана класа како .col-sm-6.

Еднаква ширина

На пример, еве два распореди на мрежа што се применуваат на секој уред и приказ на гледање, од xsдо xl. Додајте кој било број класи без единици за секоја точка на прекин што ви треба и секоја колона ќе биде со иста ширина.

1 од 2

2 од 2

1 од 3

2 од 3

3 од 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Колоните со еднаква ширина може да се поделат на повеќе линии, но имаше грешка во Safari flexbox што го спречи ова да работи без експлицитна flex-basisили border. Постојат решенија за постарите верзии на прелистувачот, но тие не треба да бидат неопходни ако сте ажурирани.

Колона

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Поставување ширина на една колона

Автоматскиот распоред за мрежните колони на flexbox, исто така, значи дека можете да ја поставите ширината на една колона, а колоните од браќата или сестрите автоматски да ја менуваат големината околу неа. Може да користите предефинирани класи на мрежа (како што е прикажано подолу), мешавини на решетки или внатрешни ширини. Забележете дека другите колони ќе ја менуваат големината без разлика на ширината на централната колона.

1 од 3

2 од 3 (поширок)

3 од 3

1 од 3

2 од 3 (поширок)

3 од 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Содржина со променлива ширина

Користете col-{breakpoint}-autoкласи за големина на колони врз основа на природната ширина на нивната содржина.

1 од 3

Содржина со променлива ширина

3 од 3

1 од 3

Содржина со променлива ширина

3 од 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Повеќередни редови со еднаква ширина

Создадете колони со еднаква ширина кои опфаќаат повеќе редови со вметнување на .w-100местото каде што сакате колоните да се прекинат во нова линија. Направете ги паузите да бидат одговорни со мешање на .w-100со некои комунални услуги за приказ што реагираат .

пол

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Респонзивни часови

Мрежата на Bootstrap вклучува пет нивоа на предефинирани класи за градење сложени распореди со одговор. Приспособете ја големината на вашите колони на екстра мали, мали, средни, големи или екстра големи уреди како и да ви одговара.

Сите точки на прекин

За мрежи кои се исти од најмалите до најголемите уреди, користете ги .colкласите и .col-*. Наведете нумерирана класа кога ви треба колона со посебна големина; во спротивно, слободно држете се до .col.

пол

коло-8

коло-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Наредени во хоризонтала

Користејќи единечно множество .col-sm-*класи, можете да креирате основен мрежен систем кој започнува наредени и станува хоризонтален на малата точка на прекин ( sm).

коло-см-8

коло-см-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Измешајте и спојте

Не сакате вашите колони едноставно да се натрупуваат во некои мрежни нивоа? Користете комбинација од различни класи за секое ниво по потреба. Погледнете го примерот подолу за подобра идеја за тоа како функционира сето тоа.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Порамнување

Користете ги алатките за порамнување на flexbox за вертикално и хоризонтално усогласување на колоните.

Вертикално порамнување

Една од трите колони

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Една од трите колони

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Хоризонтално порамнување

Една од двете колони

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Без олуци

Олуците помеѓу колоните во нашите предефинирани класи на мрежа може да се отстранат со .no-gutters. Ова ги отстранува негативните margins од .rowи хоризонталата paddingод сите колони непосредни деца.

Еве го изворниот код за креирање на овие стилови. Имајте предвид дека отфрлањата на колоните се опфатени само на првите детски колони и се насочени преку избирачот на атрибути . Иако ова генерира поспецифичен избирач, пополнувањето на колоните сè уште може дополнително да се приспособува со помошни програми за растојание .

Ви треба дизајн од раб до раб? Испуштете го родителот .containerили .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Во пракса, еве како изгледа. Забележете дека можете да продолжите да го користите ова со сите други предефинирани класи на мрежа (вклучувајќи ширина на колони, нивоа на одговор, пренаредување и повеќе).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Обвивка на колона

Ако повеќе од 12 колони се ставени во еден ред, секоја група дополнителни колони, како една единица, ќе се завитка во нова линија.

.col-9

.col-4
Бидејќи 9 + 4 = 13 > 12, оваа дивитација со 4 колони се завиткува на нова линија како една соседна единица.

.col-6
Следните колони продолжуваат по новата линија.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Паузи на колони

Прекинувањето на колоните до нова линија во flexbox бара мал хакер: додадете елемент со width: 100%каде и да сакате да ги завиткате вашите колони во нова линија. Нормално, ова се постигнува со повеќе .rows, но не секој метод на имплементација може да го објасни ова.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Можете исто така да ја примените оваа пауза на одредени точки на прекин со нашите комунални услуги за одговорен приказ .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Повторно нарачување

Нарачајте часови

Користете .order-часови за контролирање на визуелниот редослед на вашата содржина. Овие класи се одговорни, така што можете да ја поставите orderточката на прекин (на пр., .order-1.order-md-2). Вклучува поддршка за 1преку 12сите пет нивоа на мрежа.

Прво, но ненарачано

Второ, но последно

Трето, но прво

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Постојат, исто така, одговорни .order-firstи .order-lastкласи кои го менуваат orderелементот со примена на order: -1и order: 13( order: $columns + 1), соодветно. Овие класи, исто така, може да се мешаат со нумерираните .order-*класи по потреба.

Прво, но последно

Второ, но неуредено

Трето, но прво

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Поместување на колони

Можете да ги офсетите мрежните колони на два начина: нашите респонзивни .offset-мрежни класи и нашите алатки за маргина . Класите на решетката се со големина за да одговараат на колоните, додека маргините се покорисни за брзи распореди каде што ширината на поместувањето е променлива.

Офсет класи

Поместете ги колоните надесно користејќи .offset-md-*класи. Овие класи ја зголемуваат левата маргина на колона по *колони. На пример, .offset-md-4се движи .col-md-4преку четири колони.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Покрај бришењето на колоните при одговорни точки на прекин, можеби ќе треба да ги ресетирате поместувањата. Погледнете го ова во акција во примерот на мрежата .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Маргина комунални услуги

Со преместувањето во flexbox во v4, можете да користите алатки за маргина како .mr-autoда ги принудувате колоните од браќата и сестрите да се оддалечат една од друга.

.col-md-4

.col-md-4 .ml-авто

.col-md-3 .ml-md-авто

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Гнездење

За да ја вгнездите вашата содржина со стандардната мрежа, додајте нова .rowи множество .col-sm-*колони во постоечка .col-sm-*колона. Вгнездените редови треба да вклучуваат збир на колони што се собираат до 12 или помалку (не е потребно да ги користите сите 12 достапни колони).

Ниво 1: .col-sm-9

Ниво 2: .col-8 .col-sm-6

Ниво 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass mixins

Кога користите изворни датотеки Sass на Bootstrap, имате можност да користите Sass променливи и миксини за да креирате прилагодени, семантички и одговорни распореди на страници. Нашите предефинирани мрежни класи ги користат истите овие променливи и мешавини за да обезбедат цела група спремни за употреба класи за распореди кои брзо реагираат.

Променливи

Променливите и мапите го одредуваат бројот на колони, широчината на олукот и точката за пребарување на медиумите од која ќе почнат пловечките колони. Ги користиме за да ги генерираме претходно дефинираните класи на мрежа документирани погоре, како и за сопствените мешавини наведени подолу.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Мешавини

Миксините се користат заедно со променливите на мрежата за да се генерираат семантички CSS за поединечни мрежни колони.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Пример за употреба

Можете да ги менувате променливите до ваши сопствени вредности или само да ги користите миксините со нивните стандардни вредности. Еве пример за користење на стандардните поставки за креирање распоред со две колони со празнина помеѓу.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Главна содржина

Секундарна содржина

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Приспособување на мрежата

Користејќи ги нашите вградени променливи и мапи на мрежата Sass, можно е целосно да се приспособат претходно дефинираните класи на мрежа. Променете го бројот на нивоа, димензиите на барањето за медиуми и ширината на контејнерот - потоа повторно компајлирајте.

Колони и олуци

Бројот на мрежните колони може да се менува преку Sass променливите. $grid-columnsсе користи за генерирање на ширините (во проценти) на секоја поединечна колона додека $grid-gutter-widthја поставува ширината за олуците на колоните.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Нивоа на мрежа

Движејќи се подалеку од самите колони, можете исто така да го прилагодите бројот на нивоа на мрежа. Ако сакавте само четири нивоа на мрежа, би го ажурирале $grid-breakpointsи $container-max-widthsна нешто како ова:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Кога правите какви било промени на променливите или мапите на Sass, ќе треба да ги зачувате промените и повторно да ги компајлирате. Со тоа ќе излезе сосема нов сет на предефинирани класи на мрежа за ширина на колони, поместувања и нарачка. Ќе се ажурираат и алатките за одговорна видливост за да ги користат приспособените точки на прекин. Погрижете се да ги поставите вредностите на мрежата во px(не rem, em, или %).