Бағандар

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 болғандықтан, бұл 4-бағандық кең div жаңа жолға бір сабақтас бірлік ретінде оралады.

.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-215

Біріншіден, 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сыныптары бар . Бұл сыныптарды қажетінше нөмірленген сыныптармен араластыруға болады .orderorder: -1order: 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>

Маржа утилиталары

v4 жүйесінде flexbox-қа көшу арқылы сіз .me-autoбауырлас бағандарды бір-бірінен алшақтататын маржа утилиталарын пайдалана аласыз.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<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-*сыныптарды a сыртында да пайдалануға болады . .rowБаған сыныптары жолдың тікелей емес еншілестері ретінде пайдаланылғанда, толтырғыштар өткізілмейді.

.col-3: ені 25%

.col-sm-9: ені см үзілу нүктесінен 75% жоғары

<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>