Sistemi i rrjetit

Shembull

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

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Shembulli i mësipërm krijon tre kolona me gjerësi të barabartë në të gjitha pajisjet dhe portat e shikimit duke përdorur klasat tona të paracaktuara të rrjetit. Këto kolona janë të përqendruara në faqen me prindin .container.

Si punon

Duke e zbërthyer atë, ja se si bashkohet sistemi i rrjetit:

• Rrjeti ynë mbështet gjashtë pika ndërprerjeje të përgjegjshme . Pikat e ndërprerjes bazohen në min-widthpyetjet e medias, që do të thotë se ato ndikojnë në atë pikë ndërprerjeje dhe të gjitha ato mbi të (p.sh., .col-sm-4vlen për sm, md, lg, xldhe xxl). Kjo do të thotë që ju mund të kontrolloni madhësinë dhe sjelljen e kontejnerit dhe kolonës sipas çdo pikë ndërprerjeje.

• Kontejnerët në qendër dhe mbulojnë horizontalisht përmbajtjen tuaj. Përdoreni .containerpër një gjerësi pikselësh të përgjegjshëm, .container-fluidpër width: 100%të gjitha portat e pamjes dhe pajisjet, ose një kontejner reagues (p.sh., .container-md) për një kombinim të gjerësive fluide dhe pikselësh.

• 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 margjina negative për të siguruar që përmbajtja në kolonat tuaja të jetë vizualisht e rreshtuar në anën e majtë. Rreshtat gjithashtu mbështesin klasat e modifikuesve për të aplikuar në mënyrë uniforme madhësinë e kolonës dhe klasat e ulluqeve për të ndryshuar ndarjen e përmbajtjes suaj.

• Kolonat janë tepër fleksibël. Ekzistojnë 12 kolona shabllone të disponueshme për rresht, duke ju lejuar të krijoni kombinime të ndryshme elementësh që përfshijnë çdo numër kolonash. Klasat e kolonave tregojnë numrin e kolonave të shabllonit që duhet të shtrihen (p.sh. col-4shtrihet katër). widths janë vendosur në përqindje, kështu që ju keni gjithmonë të njëjtën madhësi relative.

• Ulluqet janë gjithashtu të përgjegjshme dhe të personalizueshme. Klasat e ulluqeve janë të disponueshme në të gjitha pikat e ndërprerjes, me të gjitha madhësitë si diferenca jonë dhe hapësira e mbushjes . Ndryshoni ulluqet horizontale me .gx-*klasa, ulluqet vertikale me .gy-*, ose të gjitha ulluqet me .g-*klasa. .g-0është gjithashtu i disponueshëm për të hequr ulluqet.

• Variablat Sass, hartat dhe përzierjet e fuqizojnë rrjetin. Nëse nuk dëshironi të përdorni klasat e paracaktuara të rrjetit në Bootstrap, mund të përdorni burimin e rrjetit tonë Sass për të krijuar tuajin me më shumë shënime semantike. Ne përfshijmë gjithashtu disa veti të personalizuara CSS për të konsumuar këto variabla Sass për një fleksibilitet edhe më të madh për ju.

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

Sistemi i rrjetit të Bootstrap mund të përshtatet në të gjashtë pikat e paracaktuara të ndërprerjes dhe çdo pikë ndërprerjeje që ju personalizoni. Gjashtë nivelet e paracaktuara të rrjetit janë si më poshtë:

• Tepër i vogël (xs)
• E vogël (sm)
• Mesatare (md)
• I madh (lg)
• Shumë i madh (xl)
• Ekstra ekstra i madh (xxl)

Siç u përmend më lart, secila prej këtyre pikave të ndërprerjes ka kontejnerin e vet, prefiksin unik të klasës dhe modifikuesit. Ja se si ndryshon rrjeti në këto pika:

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

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

Raft 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ërzieni 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>

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 parazgjedhje për kolonat e përfshira. Me .row-cols-autoju mund t'u jepni kolonave gjerësinë e tyre natyrore.

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 dhe për të anashkaluar kur nevojitet në nivelin e kolonës.

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

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-3">
      Level 1: .col-sm-3
    </div>
    <div class="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

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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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: 1.5rem !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 %).