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. Shihni 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 ndodh sepse 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>

Kolonat me gjerësi të barabartë mund të ndahen në vija të shumta, por kishte një gabim Safari flexbox që e pengoi këtë të funksiononte pa një të qartë flex-basisose border. Ka zgjidhje për versionet më të vjetra të shfletuesit, por ato nuk duhet të jenë të nevojshme nëse jeni të përditësuar.

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

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>

Shumë rreshta me gjerësi të barabartë

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

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

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. Personalizoni madhësinë e kolonave tuaja në pajisjet ekstra 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="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>

E grumbulluar në horizontale

Duke përdorur një grup të vetëm .col-sm-*klasash, mund të krijoni një sistem bazë rrjeti që fillon i grumbulluar dhe bëhet horizontal në pikën e vogël të ndërprerjes ( 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>

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.

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

Radhitje

Përdorni shërbimet e shtrirjes flexbox për të rreshtuar kolonat vertikalisht dhe horizontalisht.

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 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 reaguese, rirenditjet dhe më shumë).

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

Mbështjellja e kolonës

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

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

Pritet kolona

Thyerja e kolonave në një linjë të re 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="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>

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

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, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </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, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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="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>

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

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

Folezimi

Për të futur përmbajtjen tuaj me rrjetin e paracaktuar, shtoni një grup të ri .rowdhe një grup .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="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

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

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