Lijana

Kamoo li sebetsang kateng

Lits'oants'o ke karolo ea mantlha ea sebopeho ho Bootstrap 'me lia hlokahala ha u sebelisa sistimi ea rona ea kamehla . Lits'oants'o li sebelisetsoa ho kenya, pad, le (ka linako tse ling) ho beha litaba tse ka hare ho tsona. Le hoja lijana li ka etsoa sehlaha, boholo ba libopeho ha li hloke setshelo sa sehlaha.

Bootstrap e tla le lijana tse tharo tse fapaneng:

• .container, e behang sebaka max-widthse seng le se seng se arabelang
• .container-{breakpoint}, e leng width: 100%ho fihlela sebaka se boletsoeng
• .container-fluid, e leng width: 100%likheo tsohle

Tafole e ka tlase e bonts'a hore na sets'oants'o ka seng se max-widthbapisoa joang le sa mantlha .containerle .container-fluidho pholletsa le sebaka se seng le se seng.

Li bone li sebetsa 'me u li bapise mohlaleng oa rona oa Grid .

Setshelo sa kamehla

Sehlopha sa rona sa kamehla .containerke setshelo se arabelang, se bophara bo tsitsitseng, ho bolelang max-widthliphetoho tsa sona sebakeng se seng le se seng.

<div class="container">
  <!-- Content here -->
</div>

Lijana tse arabelang

Lits'oants'o tse arabelang li u lumella ho hlakisa sehlopha se bophara ba 100% ho fihlela sebaka se boletsoeng se fihletsoe, ka mor'a moo re sebelisa max-widths bakeng sa sebaka se seng le se seng se phahameng. Mohlala, .container-smke bophara ba 100% ho qala ho fihlela sebaka sa smphomolo se fihletsoe, moo se tla nyoloha ka md, lg, xl, le xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Lijana tsa metsi

Sebelisa .container-fluidbakeng sa setshelo sa bophara bo felletseng, se pharalla ka bophara ba sebaka sa pono.

<div class="container-fluid">
  ...
</div>

Sass

Joalo ka ha ho bonts'itsoe kaholimo, Bootstrap e hlahisa letoto la litlelase tse boletsoeng esale pele ho u thusa ho aha meralo eo u e lakatsang. U ka etsa litlelase tsena tse boletsoeng esale pele ka ho fetola 'mapa oa Sass (o fumanoang ho _variables.scss) o ba fang matla:

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

Ntle le ho iketsetsa Sass, o ka iketsetsa lijana tsa hau ka motsoako oa rona oa Sass.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Bakeng sa lintlha tse ling le mehlala ea ho fetola 'mapa le mefuta e fapaneng ea Sass, ka kopo sheba karolo ea Sass ea litokomane tsa Grid .