Kradsistemo

Ekzemplo

La kradsistemo de Bootstrap uzas serion da ujoj, vicoj kaj kolumnoj por aranĝi kaj vicigi enhavon. Ĝi estas konstruita kun flexbox kaj estas plene respondema. Malsupre estas ekzemplo kaj profunda klarigo pri kiel la kradsistemo kuniĝas.

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

La supra ekzemplo kreas tri egallarĝajn kolumnojn tra ĉiuj aparatoj kaj vidfenestroj uzante niajn antaŭdifinitajn kradklasojn. Tiuj kolumnoj estas centritaj en la paĝo kun la gepatro .container.

Kiel ĝi funkcias

Malkonstruante ĝin, jen kiel la kradsistemo kuniĝas:

• Nia krado subtenas ses respondemajn rompopunktojn . Rompopunktoj estas bazitaj sur min-widthamaskomunikilaj demandoj, signifante ke ili influas tiun rompopunkton kaj ĉiujn tiujn super ĝi (ekz. .col-sm-4validas por sm, md, lg, xl, kaj xxl). Ĉi tio signifas, ke vi povas kontroli grandecon kaj konduton de ujo kaj kolumno per ĉiu rompopunkto.

• Ujoj centras kaj horizontale alŝutas vian enhavon. Uzu .containerpor respondema piksela larĝo, .container-fluidpor width: 100%tra ĉiuj vidfenestroj kaj aparatoj, aŭ respondema ujo (ekz, .container-md) por kombinaĵo de fluidaj kaj pikselaj larĝoj.

• Vicoj estas envolvaĵoj por kolonoj. Ĉiu kolono havas horizontalan padding(nomitan kanalon) por kontroli la spacon inter ili. Ĉi paddingtio tiam estas kontraŭagata sur la vicoj kun negativaj randoj por certigi, ke la enhavo en viaj kolumnoj estas vide vicigita maldekstre. Vicoj ankaŭ subtenas modifklasojn por unuforme apliki kolumngrandecon kaj fluklasojn por ŝanĝi la interspacon de via enhavo.

• Kolumnoj estas nekredeble flekseblaj. Estas 12 ŝablonaj kolumnoj disponeblaj per vico, ebligante al vi krei malsamajn kombinaĵojn de elementoj kiuj ampleksas ajnan nombron da kolumnoj. Kolumnaj klasoj indikas la nombron da ŝablonaj kolumnoj por enhavi (ekz., col-4ampleksas kvar). widths estas fiksitaj en procentoj do vi ĉiam havas la saman relativan grandecon.

• Defluiloj ankaŭ estas respondemaj kaj agordeblaj. Gutter-klasoj estas haveblaj tra ĉiuj rompopunktoj, kun ĉiuj samaj grandecoj kiel nia marĝeno kaj remburaĵinterspaco . Ŝanĝu horizontalajn kanaletojn kun .gx-*klasoj, vertikalajn kanaletojn per .gy-*, aŭ ĉiujn kanaletojn kun .g-*klasoj. .g-0disponeblas ankaŭ por forigi kanaletojn.

• Sass-variabloj, mapoj kaj miksaĵoj funkciigas la kradon. Se vi ne volas uzi la antaŭdifinitajn kradklasojn en Bootstrap, vi povas uzi la fonton de nia krado Sass por krei vian propran kun pli semantika markado. Ni ankaŭ inkluzivas iujn CSS kutimajn propraĵoj por konsumi ĉi tiujn Sass-variablojn por eĉ pli granda fleksebleco por vi.

Estu konscia pri la limigoj kaj eraroj ĉirkaŭ flexbox , kiel la malkapablo uzi kelkajn HTML-elementojn kiel fleksujojn .

Kradaj opcioj

La kradsistemo de Bootstrap povas adaptiĝi tra ĉiuj ses defaŭltaj rompopunktoj, kaj ajnaj rompopunktoj, kiujn vi agordas. La ses defaŭltaj kradniveloj estas kiel sekvas:

• Ekstremalgranda (xs)
• Malgranda (m)
• Mezo (md)
• Granda (lg)
• Ekstregranda (xl)
• Ekstregranda (xxl)

Kiel notite supre, ĉiu el ĉi tiuj rompopunktoj havas sian propran ujon, unikan klasprefikson kaj modifilojn. Jen kiel la krado ŝanĝiĝas tra ĉi tiuj rompopunktoj:

Aŭtomata aranĝo kolumnoj

Uzu romppunkto-specifajn kolumnklasojn por facila kolumna grandeco sen eksplicita numerita klaso kiel .col-sm-6.

Egale-larĝo

Ekzemple, jen du kradaj aranĝoj, kiuj validas por ĉiu aparato kaj vidfenestro, de xsĝis xxl. Aldonu ajnan nombron da unuo-malpli klasoj por ĉiu rompo kiun vi bezonas kaj ĉiu kolumno estos la sama larĝo.

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

Agordi unu kolumnlarĝon

Aŭtomata aranĝo por flexbox kradaj kolumnoj ankaŭ signifas, ke vi povas agordi la larĝon de unu kolumno kaj havi la gefratajn kolumnojn aŭtomate regrandigi ĉirkaŭ ĝi. Vi povas uzi antaŭdifinitajn kradklasojn (kiel montrite sube), kradmiksaĵojn aŭ enliniajn larĝojn. Notu, ke la aliaj kolumnoj regrandigos sendepende de la larĝo de la centra kolumno.

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

Enhavo de ŝanĝiĝema larĝo

Uzu col-{breakpoint}-autoklasojn por grandeco kolumnoj surbaze de la natura larĝo de ilia enhavo.

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

Respondema klasoj

La krado de Bootstrap inkluzivas ses nivelojn de antaŭdifinitaj klasoj por konstrui kompleksajn respondemajn aranĝojn. Agordu la grandecon de viaj kolumnoj sur ekstraj, malgrandaj, mezaj, grandaj aŭ tro grandaj aparatoj kiel vi konvenas.

Ĉiuj rompopunktoj

Por kradoj, kiuj estas la samaj de la plej malgranda el aparatoj ĝis la plej granda, uzu la .colkaj .col-*klasojn. Specifu numeritan klason kiam vi bezonas aparte grandan kolumnon; alie, bonvolu resti al .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>

Stakitaj al horizontalo

Uzante ununuran aron de .col-sm-*klasoj, vi povas krei bazan kradsistemon, kiu komenciĝas stakigita kaj iĝas horizontala ĉe la malgranda rompopunkto ( 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>

Miksi kaj kongrui

Ĉu vi ne volas, ke viaj kolumnoj simple stakiĝas en iuj kradaj niveloj? Uzu kombinaĵon de malsamaj klasoj por ĉiu nivelo laŭbezone. Vidu la ekzemplon sube por pli bona ideo pri kiel ĉio funkcias.

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

Vicaj kolumnoj

Uzu la respondemajn .row-cols-*klasojn por rapide agordi la nombron da kolumnoj, kiuj plej bone prezentas vian enhavon kaj aranĝon. Dum normalaj .col-*klasoj validas por la unuopaj kolumnoj (ekz, .col-md-4), la vicaj kolumnoj klasoj estas agordita sur la gepatro .rowkiel defaŭlta por enhavitaj kolumnoj. Kun .row-cols-autovi povas doni al la kolumnoj sian naturan larĝon.

Uzu ĉi tiujn vickolumnajn klasojn por rapide krei bazajn kradajn aranĝojn aŭ por kontroli viajn kartajn aranĝojn kaj anstataŭi kiam necesas ĉe la kolumna nivelo.

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

Vi ankaŭ povas uzi la akompanan Sass-miksaĵon, 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);
  }
}

Nestumado

Por nesti vian enhavon kun la defaŭlta krado, aldonu novan .rowkaj aron da .col-sm-*kolumnoj en ekzistanta .col-sm-*kolumno. Nestitaj vicoj devus inkluzivi aron da kolumnoj kiuj sumiĝas ĝis 12 aŭ malpli (ne necesas, ke vi uzu ĉiujn 12 disponeblajn kolumnojn).

<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

Kiam vi uzas la fontajn dosierojn Sass de Bootstrap, vi havas la eblon uzi variablojn kaj miksaĵojn de Sass por krei kutimajn, semantikajn kaj respondemajn paĝajn aranĝojn. Niaj antaŭdifinitaj kradaj klasoj uzas ĉi tiujn samajn variablojn kaj miksaĵojn por provizi tutan serion da uzeblaj klasoj por rapidaj respondemaj aranĝoj.

Variabloj

Variabloj kaj mapoj determinas la nombron da kolumnoj, la defluillarĝon, kaj la amaskomunikilaron demandpunkton ĉe kiu komenci flosajn kolonojn. Ni uzas ĉi tiujn por generi la antaŭdifinitajn kradklasojn dokumentitajn supre, same kiel por la kutimaj miksaĵoj listigitaj sube.

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

Miksinoj

Miksinoj estas uzitaj lige kun la kradvariabloj por generi semantikan CSS por individuaj kradkolumnoj.

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

Ekzempla uzado

Vi povas modifi la variablojn al viaj propraj kutimaj valoroj, aŭ simple uzi la miksaĵojn kun iliaj defaŭltaj valoroj. Jen ekzemplo de uzado de la defaŭltaj agordoj por krei du-kolumnan aranĝon kun interspaco.

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

Agordo de la krado

Uzante niajn enkonstruitajn krad-variablojn kaj mapojn Sass, eblas tute personecigi la antaŭdifinitajn kradklasojn. Ŝanĝu la nombron da niveloj, la amaskomunikilaraj demandaj dimensioj kaj la ujlarĝoj—tiam rekompilu.

Kolumnoj kaj defluiloj

La nombro da kradaj kolumnoj povas esti modifita per Sass-variabloj. $grid-columnsestas uzata por generi la larĝojn (en procentoj) de ĉiu individua kolumno dum $grid-gutter-widthfiksas la larĝon por la kolumnoj defluiloj.

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

Kradaj niveloj

Movante preter la kolumnoj mem, vi ankaŭ povas agordi la nombron da kradaj niveloj. Se vi volus nur kvar kradnivelojn, vi ĝisdatigus la $grid-breakpointskaj $container-max-widthsal io tia:

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

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

Kiam vi faras ajnajn ŝanĝojn al la Sass-variabloj aŭ mapoj, vi devos konservi viajn ŝanĝojn kaj rekompili. Farante tion eligos tute novan aron de antaŭdifinitaj kradaj klasoj por kolumnlarĝoj, ofsetoj kaj mendo. Respondema videblecaj utilecoj ankaŭ estos ĝisdatigitaj por uzi la kutimajn rompopunktojn. Certiĝu agordi kradvalorojn en px(ne rem, emaŭ %).