Sistemi i rrjetit

Përdorni rrjetën tonë të fuqishme flexbox të celularit të parë për të ndërtuar struktura të të gjitha formave dhe madhësive falë një sistemi dymbëdhjetë kolonash, pesë niveleve të paracaktuara të përgjegjshme, variablave dhe mikseve Sass dhe dhjetëra klasave të paracaktuara.

Si punon

Sistemi i rrjetit të Bootstrap përdor një seri kontejnerësh, rreshtash dhe kolonash për të vendosur dhe përafruar përmbajtjen. Është ndërtuar me flexbox dhe është plotësisht e përgjegjshme. Më poshtë është një shembull dhe një vështrim i thellë se si rrjeti bashkohet.

I ri ose i panjohur me flexbox? Lexoni këtë udhëzues CSS Tricks flexbox për sfondin, terminologjinë, udhëzimet dhe copat e kodit.

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

Shembulli i mësipërm krijon tre kolona me gjerësi të barabartë në pajisje të vogla, të mesme, të mëdha dhe ekstra të mëdha duke përdorur klasat tona të paracaktuara të rrjetit. Këto kolona janë të përqendruara në faqen me prindin .container.

Duke e zbërthyer, ja se si funksionon:

• Kontejnerët ofrojnë një mjet për të përqendruar dhe vendosur horizontalisht përmbajtjen e faqes suaj. Përdoreni .containerpër një gjerësi pikselësh të përgjegjshme ose .container-fluidpër width: 100%të gjitha madhësitë e pamjes dhe të pajisjes.
• Rreshtat janë mbështjellës për kolonat. Çdo kolonë ka horizontale padding(i quajtur ulluq) për të kontrolluar hapësirën midis tyre. Kjo paddingmë pas kundërveprohet në rreshtat me marzhe negative. Në këtë mënyrë, e gjithë përmbajtja në kolonat tuaja rreshtohet vizualisht në anën e majtë.
• Në një plan urbanistik, përmbajtja duhet të vendoset brenda kolonave dhe vetëm kolonat mund të jenë fëmijë të menjëhershëm të rreshtave.
• Falë flexbox, kolonat e rrjetës pa një specifikim widthdo të vendosen automatikisht si kolona me gjerësi të barabartë. Për shembull, katër raste të .col-smvullnetit secili automatikisht është 25% i gjerë nga pika e vogël e ndërprerjes e lart. Shikoni seksionin e kolonave të paraqitjes automatike për më shumë shembuj.
• Klasat e kolonave tregojnë numrin e kolonave që dëshironi të përdorni nga 12 të mundshme për rresht. Pra, nëse dëshironi tre kolona me gjerësi të barabartë, mund të përdorni .col-4.
• Kolonat widths vendosen në përqindje, kështu që ato janë gjithmonë të rrjedhshme dhe me madhësi në krahasim me elementin e tyre prind.
• Kolonat kanë horizontale paddingpër të krijuar ulluqe midis kolonave individuale, megjithatë, ju mund të hiqni marginnga rreshtat dhe paddingnga kolonat me .no-guttersnë .row.
• Për ta bërë rrjetin të përgjegjshëm, ekzistojnë pesë pika ndërprerjeje të rrjetit, një për çdo pikë ndërprerjeje reaguese : të gjitha pikat e ndërprerjes (ekstra të vogla), të vogla, të mesme, të mëdha dhe tepër të mëdha.
• Pikat e ndërprerjes së rrjetit bazohen në pyetjet e medias me gjerësi minimale, që do të thotë se ato zbatohen për atë një pikë ndërprerjeje dhe të gjitha ato mbi të (p.sh., .col-sm-4zbatohet për pajisjet e vogla, të mesme, të mëdha dhe shumë të mëdha, por jo pikën e parë të xsndërprerjes).
• Ju mund të përdorni klasa të paracaktuara të rrjetit (si .col-4) ose përzierje Sass për më shumë shënime semantike.

Jini të vetëdijshëm për kufizimet dhe gabimet rreth flexbox , si pamundësia për të përdorur disa elementë HTML si kontejnerë fleksibël .

Opsionet e rrjetit

Ndërsa Bootstrap përdor ems ose rems për përcaktimin e shumicës së madhësive, pxs përdoren për pikat e ndërprerjes së rrjetit dhe gjerësinë e kontejnerëve. Kjo është për shkak se gjerësia e portit të pamjes është në pixel dhe nuk ndryshon me madhësinë e shkronjave .

Shihni se si funksionojnë aspektet e sistemit të rrjetit Bootstrap nëpër pajisje të shumta me një tabelë të dobishme.

Shtylla me paraqitje automatike

Përdorni klasa kolone specifike për pikën e ndërprerjes për madhësinë e lehtë të kolonës pa një klasë të qartë të numëruar si .col-sm-6.

Me gjerësi të barabartë

Për shembull, këtu janë dy paraqitje rrjeti që zbatohen për çdo pajisje dhe porta të shikimit, nga xsderi në xl. Shtoni çdo numër klasash pa njësi për çdo pikë ndërprerjeje që ju nevojitet dhe çdo kolonë do të ketë të njëjtën gjerësi.

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

Shumë rreshta me gjerësi të barabartë

Krijoni kolona me gjerësi të barabartë që përfshijnë linja të shumta duke futur një .w-100ku dëshironi që kolonat të thyhen në një vijë të re. Bëjini ndërprerjet të përgjegjshme duke i përzier .w-100me disa shërbime reaguese të ekranit .

Kishte një gabim Safari flexbox që e pengoi këtë të funksiononte pa një flex-basisose të qartë border. Ka zgjidhje për versionet më të vjetra të shfletuesit, por ato nuk duhet të jenë të nevojshme nëse shfletuesit tuaj të synuar nuk bien në versionet me gabime.

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

Vendosja e një gjerësie kolone

Paraqitja automatike për kolonat e rrjetës flexbox do të thotë gjithashtu se mund të vendosni gjerësinë e një kolone dhe t'i ndryshoni madhësinë automatikisht kolonave të motrës rreth saj. Ju mund të përdorni klasa të paracaktuara të rrjetit (siç tregohet më poshtë), kombinime të rrjetit ose gjerësi inline. Vini re se kolonat e tjera do të ndryshojnë madhësinë pa marrë parasysh gjerësinë e kolonës qendrore.

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

Përmbajtja me gjerësi të ndryshueshme

Përdorni col-{breakpoint}-autoklasa për të përmasuar kolonat bazuar në gjerësinë natyrore të përmbajtjes së tyre.

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

Klasa të përgjegjshme

Rrjeti i Bootstrap përfshin pesë nivele të klasave të paracaktuara për ndërtimin e strukturave komplekse të përgjegjshme. Personalizojeni madhësinë e kolonave tuaja në pajisje shumë të vogla, të vogla, të mesme, të mëdha ose ekstra të mëdha, sido që ju e shihni të arsyeshme.

Të gjitha pikat e ndërprerjes

Për rrjetet që janë të njëjta nga pajisjet më të vogla te më të mëdhatë, përdorni klasat .coldhe . .col-*Specifikoni një klasë të numëruar kur keni nevojë për një kolonë me madhësi të veçantë; përndryshe, mos ngurroni t'i përmbaheni .col.

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

E grumbulluar në horizontale

Duke përdorur një grup të vetëm .col-sm-*klasash, mund të krijoni një sistem bazë të rrjetit që fillon i grumbulluar dhe bëhet horizontal në pikën e vogël të ndërprerjes ( sm).

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

Përziejeni dhe përzieni

A nuk dëshironi që kolonat tuaja thjesht të grumbullohen në disa nivele të rrjetit? Përdorni një kombinim të klasave të ndryshme për çdo nivel sipas nevojës. Shihni shembullin më poshtë për një ide më të mirë se si funksionon gjithçka.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Ulluqe

Ulluqet mund të rregullohen në mënyrë të përgjegjshme nga mbushjet specifike për pikën e ndërprerjes dhe klasat e përdorimit të marzhit negativ. Për të ndryshuar ulluqet në një rresht të caktuar, çiftoni një mjet me diferencë negative në pajisjen .rowdhe mjetet e përshtatshme të mbushjes në .cols. Prindi .containerose .container-fluidprindi mund të kenë nevojë të rregullohen gjithashtu për të shmangur tejmbushjen e padëshiruar, duke përdorur përsëri programin e përshtatjes së mbushjes.

Ja një shembull i personalizimit të rrjetit Bootstrap në pikën e madhe të lgndërprerjes ( ) dhe më lart. Ne kemi rritur .colmbushjen me .px-lg-5, e kemi kundërshtuar atë me .mx-lg-n5në prind .rowdhe më pas e rregulluam .containermbështjellësin me .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Kolonat e rreshtave

Përdorni .row-cols-*klasat e përgjegjshme për të vendosur shpejt numrin e kolonave që japin më mirë përmbajtjen dhe paraqitjen tuaj. Ndërsa .col-*klasat normale zbatohen për kolonat individuale (p.sh., .col-md-4), klasat e kolonave të rreshtave vendosen në prind .rowsi një shkurtore.

Përdorni këto klasa të kolonave të rreshtave për të krijuar shpejt paraqitjet bazë të rrjetit ose për të kontrolluar paraqitjet e kartave tuaja.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Ju gjithashtu mund të përdorni përzierjen shoqëruese Sass, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Radhitje

Përdorni shërbimet e shtrirjes flexbox për të rreshtuar kolonat vertikalisht dhe horizontalisht. Internet Explorer 10-11 nuk mbështet shtrirjen vertikale të artikujve flex kur kontejneri flex ka një min-heightsiç tregohet më poshtë. Shihni Flexbugs #3 për më shumë detaje.

Rreshtimi vertikal

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

Rreshtimi horizontal

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

Nuk ka ulluqe

Ulluqet midis kolonave në klasat tona të paracaktuara të rrjetit mund të hiqen me .no-gutters. Kjo heq margins negative nga .rowdhe horizontale paddingnga të gjitha kolonat e fëmijëve të afërt.

Këtu është kodi burimor për krijimin e këtyre stileve. Vini re se anulimet e kolonave shtrihen vetëm në kolonat e para të fëmijëve dhe synohen nëpërmjet përzgjedhësit të atributeve . Ndërsa kjo gjeneron një përzgjedhës më specifik, mbushja e kolonës mund të personalizohet akoma më tej me shërbimet e ndarjes .

Keni nevojë për një dizajn nga skaji në skaj? Hiq prindin .containerose .container-fluid.

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

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

Në praktikë, ja se si duket. Vini re se mund të vazhdoni ta përdorni këtë me të gjitha klasat e tjera të paracaktuara të rrjetit (përfshirë gjerësinë e kolonave, nivelet e përgjegjshme, rirenditjet dhe më shumë).

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

Mbështjellja e kolonës

Nëse më shumë se 12 kolona vendosen brenda një rreshti të vetëm, çdo grup kolonash shtesë, si një njësi, do të mbyllet në një rresht të ri.

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

Pritet kolona

Thyerja e kolonave në një rresht të ri në flexbox kërkon një hak të vogël: shtoni një element width: 100%kudo që dëshironi të mbështillni kolonat tuaja në një rresht të ri. Normalisht kjo realizohet me .rows të shumëfishta, por jo çdo metodë zbatimi mund ta llogarisë këtë.

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

Ju gjithashtu mund ta aplikoni këtë ndërprerje në pika të veçanta ndërprerjeje me shërbimet tona të ekranit të përgjegjshëm .

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

Rirenditje

Porositni klasa

Përdorni .order-klasa për të kontrolluar rendin vizual të përmbajtjes suaj. Këto klasa janë të përgjegjshme, kështu që ju mund të vendosni pikën e orderndërprerjes (p.sh., .order-1.order-md-2). Përfshin mbështetje për 1të 12gjitha pesë nivelet e rrjetit.

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

Ekzistojnë gjithashtu responsive .order-firstdhe .order-lastklasa që ndryshojnë orderelementin duke aplikuar order: -1dhe order: 13( order: $columns + 1), përkatësisht. Këto klasa gjithashtu mund të përzihen me .order-*klasat e numëruara sipas nevojës.

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

Kompensimi i kolonave

Ju mund të kompensoni kolonat e rrjetit në dy mënyra: .offset-klasat tona të rrjetit të përgjegjshëm dhe shërbimet tona të marzhit . Klasat e rrjetit janë të madhësisë që të përputhen me kolonat ndërsa margjinat janë më të dobishme për paraqitjet e shpejta ku gjerësia e kompensimit është e ndryshueshme.

Klasat e kompensimit

Zhvendosni kolonat në të djathtë duke përdorur .offset-md-*klasat. Këto klasa rrisin kufirin e majtë të një kolone me *kolona. Për shembull, .offset-md-4lëviz .col-md-4mbi katër kolona.

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

Përveç pastrimit të kolonës në pikat e ndërprerjes reaguese, mund t'ju duhet të rivendosni kompensimet. Shihni këtë në veprim në shembullin e rrjetit .

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

Shërbimet e marzhit

Me kalimin në flexbox në v4, mund të përdorni shërbime të marzhit si .mr-autopër të detyruar kolonat e vëllezërve dhe motrave të largohen nga njëri-tjetri.

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

Folezimi

Për të futur përmbajtjen tuaj me rrjetin e parazgjedhur, shtoni një .rowgrup të ri .col-sm-*kolonash brenda një .col-sm-*kolone ekzistuese. Rreshtat e mbivendosur duhet të përfshijnë një grup kolonash që shtojnë deri në 12 ose më pak (nuk kërkohet që të përdorni të 12 kolonat e disponueshme).

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

Sass mixins

Kur përdorni skedarët burimor Sass të Bootstrap, ju keni mundësinë e përdorimit të variablave dhe mikseve Sass për të krijuar paraqitje të personalizuara, semantike dhe të përgjegjshme të faqeve. Klasat tona të paracaktuara të rrjetit përdorin të njëjtat variabla dhe miks për të ofruar një grup të tërë klasash të gatshme për përdorim për paraqitje të shpejta të përgjegjshme.

Variablat

Variablat dhe hartat përcaktojnë numrin e kolonave, gjerësinë e kanalit dhe pikën e pyetjes së medias në të cilën do të fillojnë kolonat lundruese. Ne i përdorim këto për të gjeneruar klasat e paracaktuara të rrjetit të dokumentuara më sipër, si dhe për përzierjet e personalizuara të listuara më poshtë.

$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
);

Përzierjet

Përzierjet përdoren në lidhje me variablat e rrjetit për të gjeneruar CSS semantike për kolonat individuale të rrjetit.

// 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);

Shembull i përdorimit

Mund t'i modifikoni variablat në vlerat tuaja të personalizuara, ose thjesht përdorni miksin me vlerat e tyre të paracaktuara. Këtu është një shembull i përdorimit të cilësimeve të paracaktuara për të krijuar një plan urbanistik me dy kolona me një hendek midis tyre.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

Përshtatja e rrjetit

Duke përdorur variablat dhe hartat tona të integruara të rrjetit Sass, është e mundur që të personalizohen plotësisht klasat e paracaktuara të rrjetit. Ndryshoni numrin e niveleve, dimensionet e pyetjes së medias dhe gjerësinë e kontejnerit—më pas ripërpiloni.

Kolona dhe ulluqe

Numri i kolonave të rrjetit mund të modifikohet nëpërmjet variablave Sass. $grid-columnspërdoret për të gjeneruar gjerësinë (në përqindje) të secilës kolonë individuale ndërsa $grid-gutter-widthcakton gjerësinë për ulluqet e kolonës.

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

Nivelet e rrjetit

Duke lëvizur përtej vetë kolonave, mund të personalizoni gjithashtu numrin e niveleve të rrjetit. Nëse dëshironi vetëm katër nivele të rrjetit, do të përditësoni $grid-breakpointsdhe $container-max-widthsnë diçka si kjo:

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

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

Kur bëni ndonjë ndryshim në variablat ose hartat Sass, do t'ju duhet të ruani ndryshimet dhe t'i rikompiloni. Duke vepruar kështu, do të prodhohet një grup i ri i klasave të paracaktuara të rrjetit për gjerësinë e kolonave, zhvendosjet dhe renditjen. Shërbimet e dukshmërisë së përgjegjshme do të përditësohen gjithashtu për të përdorur pikat e ndërprerjes me porosi. Sigurohuni që të vendosni vlerat e rrjetit në px(jo rem, em, ose %).