Стоўбцы

Даведайцеся, як змяняць слупкі з дапамогай некалькіх варыянтаў выраўноўвання, упарадкавання і зрушэння дзякуючы нашай сістэме сеткі flexbox. Акрамя таго, паглядзіце, як выкарыстоўваць класы слупкоў для кіравання шырынёй несеткавых элементаў.

На гэтай старонцы

Галаву ўверх! Не забудзьцеся спачатку прачытаць старонку сеткі, перш чым паглыбляцца ў тое, як змяняць і наладжваць слупкі сеткі.

Як яны працуюць

Слупкі заснаваны на архітэктуры flexbox сеткі. Flexbox азначае, што ў нас ёсць параметры для змены асобных слупкоў і груп слупкоў на ўзроўні радкоў . Вы выбіраеце, як слупкі растуць, скарачаюцца ці іншым чынам мяняюцца.
Пры пабудове макетаў сеткі ўвесь кантэнт размяшчаецца ў слупках. Іерархія сеткі Bootstrap ідзе ад кантэйнера да радка да слупка да вашага кантэнту. У рэдкіх выпадках вы можаце аб'яднаць змесціва і калонку, але майце на ўвазе, што гэта можа мець непрадбачаныя наступствы.
Bootstrap уключае загадзя вызначаныя класы для стварэння хуткіх макетаў, якія хутка рэагуюць. З шасцю кропкамі разрыву і тузінам слупкоў на кожным узроўні сеткі ў нас ёсць дзесяткі класаў, якія ўжо створаны для вас, каб ствараць жаданыя макеты. Пры жаданні гэта можна адключыць праз Sass.

Выраўноўванне

Выкарыстоўвайце ўтыліты выраўноўвання 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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Абкручванне слупкоў

Калі ў адным радку размешчана больш за 12 слупкоў, кожная група дадатковых слупкоў будзе пераходзіць на новы радок як адно цэлае.

.col-9

.col-4
Паколькі 9 + 4 = 13 > 12, гэты div з 4 слупкоў пераносіцца ў новы радок як адна сумежная адзінка.

.col-6
Наступныя слупкі працягваюцца ўздоўж новага радка.

<div class="container">
  <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>
</div>

Разрываецца калона

Разбіванне слупкоў на новы радок у flexbox патрабуе невялікай хітрыкі: дадайце элемент з месцам, width: 100%дзе вы хочаце перанесці слупкі на новы радок. Звычайна гэта дасягаецца з дапамогай некалькіх .rows, але не кожны метад рэалізацыі можа ўлічыць гэта.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

Вы таксама можаце прымяніць гэты перапынак у пэўных кропках перапынку з дапамогай нашых адаптыўных утыліт дысплея .

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

Змена парадку

Заказ заняткаў

Выкарыстоўвайце .order-класы для кантролю візуальнага парадку вашага кантэнту. Гэтыя класы спагадныя, так што вы можаце ўсталяваць orderкропку перапынку (напрыклад, .order-1.order-md-2). Уключае падтрымку 1праходжання 5праз усе шэсць узроўняў сеткі.

Першы ў DOM, без прымянення парадку

Другі ў DOM, з большым парадкам

Трэцяе месца ў DOM з парадкам 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Ёсць таксама спагадныя класы .order-firstі .order-last, якія змяняюць orderэлемент, ужываючы order: -1і order: 6, адпаведна. Пры неабходнасці гэтыя класы таксама можна змешваць з пранумараванымі .order-*класамі.

Першы ў DOM, замоўлены апошнім

Другі ў DOM, неўпарадкаваны

Трэці ў DOM, замоўлены першым

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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="container">
  <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>
</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="container">
  <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>
</div>

Маржынальныя камунальныя паслугі

З пераходам на flexbox у версіі 4 вы можаце выкарыстоўваць маржынальныя ўтыліты, напрыклад, аддаляць .me-autoроднасныя слупкі адзін ад аднаго.

.col-md-4

.col-md-4 .ms-аўта

.col-md-3 .ms-md-аўта

.col-auto .me-auto

.col-аўта

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Аўтаномныя класы калонак

Класы .col-*таксама могуць выкарыстоўвацца па-за межамі, .rowкаб надаць элементу пэўную шырыню. Кожны раз, калі класы слупкоў выкарыстоўваюцца ў якасці непрамых даччыных элементаў радка, запаўненні апускаюцца.

.col-3: шырыня 25%

.col-sm-9: шырыня 75% над кропкай перапынку sm

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Класы могуць выкарыстоўвацца разам з утылітамі для стварэння адаптыўных рухомых малюнкаў. Не забудзьцеся загарнуць змесціва ў .clearfixабалонку, каб ачысціць паплавок, калі тэкст карацейшы.

Абзац тэксту-запаўняльніка. Мы выкарыстоўваем яго тут, каб паказаць выкарыстанне класа clearfix. Мы дадаем тут даволі шмат бессэнсоўных фраз, каб прадэманстраваць, як слупкі ўзаемадзейнічаюць тут з плаваючай выявай.

Як вы можаце бачыць, абзацы вытанчана абгортваюць плаваючую выяву. А цяпер уявіце, як гэта будзе выглядаць з некаторым сапраўдным зместам, а не проста з гэтым сумным тэкстам-запаўняльнікам, які працягваецца і працягваецца, але на самой справе не дае ніякай адчувальнай інфармацыі. Ён проста займае месца і яго не варта чытаць.

І ўсё ж, вось вы ўсё яшчэ настойліва чытаеце гэты тэкст-запаўняльнік, спадзеючыся атрымаць яшчэ нейкае разуменьне ці нейкі схаваны зьмест пасхалкі. Жарт, магчыма. На жаль, тут гэтага няма.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>