Sare sistema

Erabili gure mugikorrerako lehen flexbox sare indartsua forma eta tamaina guztietako diseinuak eraikitzeko, hamabi zutabe-sistemari, erantzun-maila lehenetsiei, Sass aldagaiei eta mixinei eta aurredefinitutako dozenaka klaseri esker.

Orrialde honetan

Adibidea

Bootstrap-en sareta-sistemak edukiontzi, errenkada eta zutabe batzuk erabiltzen ditu edukia diseinatzeko eta lerrokatzeko. Flexbox -ekin eraikita dago eta guztiz sentikorra da. Jarraian, sare-sistema nola elkartzen den jakiteko adibide bat eta azalpen sakona daude.

Flexbox-en berri edo ez duzu ezagutzen? Irakurri CSS Tricks flexbox gida hau atzeko planoa, terminologia, jarraibideak eta kode zatiak ikusteko.

Zutabea

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

Goiko adibideak zabalera berdineko hiru zutabe sortzen ditu gailu eta bistaratze guztietan gure aurrez definitutako sareta-klaseak erabiliz. Zutabe horiek orrialdean zentratuta daude gurasoarekin .container.

Nola dabil

Hau apurtuz, hona hemen sare-sistema nola elkartzen den:

Gure sareak sei etenaldi erreaktibo onartzen ditu . Eten-puntuak multimedia-kontsultetan oinarritzen dira , hau da, eten-puntu horri eta haren gaineko guztiei min-widtheragiten diete (adibidez, , , , , eta ). Horrek esan nahi du edukiontzien eta zutabeen tamaina eta portaera eten puntu bakoitzaren arabera kontrolatu ditzakezula..col-sm-4smmdlgxlxxl
Edukiontziek erdiratu eta horizontalki bete ezazu zure edukia. Erabili .containerpixel-zabalera sentikor baterako, .container-fluidbistaratze width: 100%eta gailu guztietan, edo edukiontzi sentikor bat (adibidez, .container-md) fluidoaren eta pixel-zabalera konbinatzeko.
Errenkadak zutabeentzako bilgarriak dira. Zutabe bakoitzak horizontala du padding(gutuna deritzona) haien arteko espazioa kontrolatzeko. Ondoren padding, marjina negatibodun errenkadetan kontrajartzen da zure zutabeetako edukia ezkerreko aldean lerrokatuta dagoela ziurtatzeko. Errenkadak ere aldatzaile klaseak onartzen ditu zutabeen tamaina uniformeki aplikatzeko eta zure edukiaren tartea aldatzeko gutter klaseak .
Zutabeak izugarri malguak dira. Errenkada bakoitzeko 12 txantiloi-zutabe daude eskuragarri, edozein zutabe hartzen dituzten elementuen konbinazio desberdinak sortzeko aukera emanez. Zutabe-klaseek hedatu beharreko txantiloi-zutabeen kopurua adierazten dute (adibidez, col-4lau hedatzen dira). widths ehunekotan ezartzen dira, beraz, beti tamaina erlatibo berdina izango duzu.
Gutters ere sentikorra eta pertsonalizagarria da. Gutter klaseak eten-puntu guztietan daude eskuragarri, gure marjinaren eta betegarrien tartearen tamaina berdinekin . Aldatu kanalizazio horizontalak .gx-*klaseekin, kanal bertikalekin .gy-*edo .g-*klaseekin kanalizazio guztiak. .g-0erretenak kentzeko ere eskuragarri dago.
Sass aldagaiek, mapek eta mixinek sarean elikatzen dute. Bootstrap-en aurrez zehaztutako sareta-klaseak erabili nahi ez badituzu, gure sareko Sass iturburua erabil dezakezu marka semantiko gehiagorekin zeurea sortzeko. CSS propietate pertsonalizatu batzuk ere sartzen ditugu Sass aldagai hauek kontsumitzeko, zuretzako are malgutasun handiagoa lortzeko.

Kontuan izan flexbox-en inguruko mugak eta akatsak , hala nola HTML elementu batzuk flex edukiontzi gisa erabiltzeko ezintasuna .

Sarearen aukerak

Bootstrap-en sareta-sistema sei eten-puntu lehenetsietan eta pertsonalizatzen dituzun eten-puntuetan molda daiteke. Sare-maila lehenetsiak honako hauek dira:

Oso txikia (xs)
Txikia (SM)
Ertaina (md)
Handia (lg)
Oso handia (xl)
Oso handia (xxl)

Goian esan bezala, eten-puntu horietako bakoitzak bere edukiontzia, klase-aurrizki bakarra eta aldatzaileak ditu. Hona hemen sarea nola aldatzen den eten-puntu hauetan:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Edukiontzia`max-width`	Bat ere ez (automatikoki)	540 px	720 px	960 px	1140 px	1320 px
Klaseko aurrizkia	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
zutabe kopurua	12
Erretenaren zabalera	1.5rem (.75rem ezkerrean eta eskuinean)
Erretenak pertsonalizatuak	Bai
Kokatuta	Bai
Zutabeen ordenazioa	Bai

Diseinu automatikoko zutabeak

Erabili eten puntuko zutabe-klase espezifikoak zutabeen tamaina errazteko, adibidez, zenbakizko klase espliziturik gabe .col-sm-6.

Zabalera berdina

Esate baterako, hona hemen gailu eta ikuslei guztiei aplikatzen zaizkien bi sareta-diseinu, hasi xseta xxl. Gehitu unitaterik gabeko klase kopuru bat behar duzun eten puntu bakoitzeko eta zutabe bakoitzak zabalera berdina izango du.

2tik 1

2tik 2

3tik 1

3tik 2

3tik 3

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

Zutabe bateko zabalera ezartzea

Flexbox sareko zutabeen diseinu automatikoak zutabe baten zabalera ezar dezakezula eta anai-arreben zutabeak automatikoki tamainaz alda ditzakezula esan nahi du. Aurrez definitutako sareta-klaseak (behean erakusten den bezala), sare-nahasketak edo lerroko zabalerak erabil ditzakezu. Kontuan izan beste zutabeek tamaina aldatuko dutela erdiko zutabearen zabalera edozein dela ere.

3tik 1

2tik 3 (zabalagoa)

3tik 3

3tik 1

2tik 3 (zabalagoa)

3tik 3

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

Zabalera aldakorreko edukia

Erabili col-{breakpoint}-autoklaseak zutabeak tamaina bere edukiaren zabalera naturalean oinarrituta.

3tik 1

Zabalera aldakorreko edukia

3tik 3

3tik 1

Zabalera aldakorreko edukia

3tik 3

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

Klase sentikorrak

Bootstrap-en sareak aurredefinitutako sei klase-maila biltzen ditu, erantzun-diseinu konplexuak eraikitzeko. Pertsonalizatu zure zutabeen tamaina gailu txikietan, txikietan, ertainetan, handietan edo oso handietan, komeni zaizun moduan.

Eten puntu guztiak

Gailu txikienetik handienera berdinak diren sareetarako, erabili .coleta .col-*klaseak. Zehaztu zenbakidun klase bat tamaina bereziko zutabe bat behar duzunean; bestela, lasai atxikitzen .col.

kol

kol-8

kol-4

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

Horizontalean pilatuta

Klase multzo bakarra erabiliz, .col-sm-*pilatuta hasten den eta eten-puntu txikian ( ) horizontal bihurtzen den oinarrizko sareta-sistema sor dezakezu sm.

kol-sm-8

kol-sm-4

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

Nahastu eta lotu

Ez dituzu nahi zure zutabeak sare-maila batzuetan pilatzea? Erabili klase ezberdinen konbinazioa maila bakoitzerako, behar izanez gero. Ikusi beheko adibidea dena nola funtzionatzen duen jakiteko.

.col-md-8

.col-6 .col-md-4

.col-6

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

Errenkadako zutabeak

Erabili erantzuneko .row-cols-*klaseak zure edukia eta diseinua hobekien errendatzen duten zutabe kopurua azkar ezartzeko. Klase normalak .col-*zutabe indibidualei aplikatzen zaizkien arren (adibidez, .col-md-4), errenkada-zutabeen klaseak gurasoan ezartzen dira .rowlasterbide gisa. Zutabeei .row-cols-autozabalera naturala eman diezaiekezu.

Erabili errenkada-zutabeen klase hauek oinarrizko sareta-diseinuak azkar sortzeko edo zure txartelen diseinuak kontrolatzeko.

Zutabea

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

Zutabea

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

Zutabea

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

Zutabea

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

Zutabea

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

Zutabea

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

Doako Sass mixin ere erabil dezakezu 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);
  }
}

Habia egitea

Zure edukia sareta lehenetsiarekin habiratzeko, gehitu zutabe berri bat .roweta multzo .col-sm-*bat lehendik dagoen .col-sm-*zutabe batean. Habiaraturiko errenkadek 12 edo gutxiago gehitzen dituzten zutabe multzo bat izan behar dute (ez da beharrezkoa erabilgarri dauden 12 zutabe guztiak erabiltzea).

1. maila: .col-sm-3

2. maila: .col-8 .col-sm-6

2. maila: .col-4 .col-sm-6

<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

Bootstrap-en iturburuko Sass fitxategiak erabiltzean, Sass aldagaiak eta nahasketak erabiltzeko aukera duzu orri-diseinu pertsonalizatuak, semantikoak eta sentikorrak sortzeko. Aurrez definitutako sareko klaseek aldagai eta nahasketa hauek erabiltzen dituzte erabiltzeko prest dauden klase multzo oso bat eskaintzeko, erantzun azkarreko diseinuetarako.

Aldagaiak

Aldagaiek eta mapek zutabe kopurua, erretenaren zabalera eta zutabe mugikorrak hasteko multimedia kontsulta-puntua zehazten dute. Hauek goian dokumentatutako sare-klase aurredefinituak sortzeko erabiltzen ditugu, baita behean zerrendatutako nahasketa pertsonalizatuetarako ere.

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

Mixinak

Mixinak sareko aldagaiekin batera erabiltzen dira sareko zutabe indibidualetarako CSS semantikoa sortzeko.

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

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Erabilera adibidea

Aldagaiak zure balio pertsonalizatuetara alda ditzakezu edo nahasketak erabil ditzakezu balio lehenetsiekin. Hona hemen ezarpen lehenetsiak erabiltzearen adibide bat bi zutabe-diseinua sortzeko tartea duen.

.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);
  }
}

Eduki nagusia

Bigarren mailako edukiak

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

Sarea pertsonalizatzea

Sass sareko aldagaiak eta mapak erabiliz, posible da aurrez definitutako sareta-klaseak guztiz pertsonalizatzea. Aldatu maila-kopurua, multimedia-kontsulten dimentsioak eta edukiontziaren zabalerak; gero birkonpilatu.

Zutabeak eta erretenak

Sass aldagaien bidez sareko zutabe kopurua alda daiteke. $grid-columnszutabe bakoitzaren zabalerak (ehunekotan) sortzeko erabiltzen $grid-gutter-widthda, zutabeen erretenen zabalera ezartzen duen bitartean.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Sare-mailak

Zutabeetatik haratago, sare-maila kopurua ere pertsonaliza dezakezu. Lau sare-maila besterik ez bazenitu nahi, $grid-breakpointseta eguneratuko zenuke $container-max-widthshonelako zerbaitetara:

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

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

Sass aldagaietan edo mapetan aldaketak egiterakoan, aldaketak gorde eta berriro konpilatu beharko dituzu. Hori eginez gero, aurrez definitutako sareta-klaseen multzo berri bat aterako da zutabeen zabaleretarako, desplazamenduetarako eta ordenatzeko. Ikusgarritasun-erabilgarritasunak ere eguneratuko dira eten-puntu pertsonalizatuak erabiltzeko. Ziurtatu sareko balioak px(ez rem, em, edo %) atalean ezartzen dituzula.