Tshepedišo ya keriti

Mohlala

Tshepedišo ya keriti ya Bootstrap e šomiša lelokelelo la ditshelo, mela, le dikholomo go beakanya le go logaganya diteng. E agilwe ka flexbox gomme e arabela ka botlalo. Ka fase go na le mohlala le tlhalošo ye e tseneletšego ya ka fao tshepedišo ya keriti e kopanago ka gona.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Mohlala wo o lego ka mo godimo o hlola dikholomo te tharo ta bophara bjo bo lekanago go ralala le didiriwa ka moka le mafelo a go lebelela ka go omia diklase ta rena ta keriti te di hlaloitwego e sa le pele. Dikholomo tšeo di tsepame letlakaleng leo le nago le motswadi .container.

Kamoo e šomago ka gona

Go e thuba, mo ke kamoo tshepedišo ya keriti e kopanago ka gona:

• Keriti ya rena e thekga mafelo a tshela a go kgaotša ao a arabelago . Dintlha tša go kgaotša di theilwe godimo ga min-widthdipotšišo tša boraditaba, go ra gore di ama ntlha yeo ya go kgaotša le ka moka tšeo di lego ka godimo ga yona (mohlala, .col-sm-4e šoma go sm, md, lg, xl, le xxl). Se se ra gore o ka laola bogolo bja setshelo le kholomo le boitshwaro ka ntlha ye nngwe le ye nngwe ya go kgaotša.

• Ditshelo setsi le rapameng pad dikahare hao. Šomiša .containerbakeng sa bophara bja dipiksele bjo bo arabelago, .container-fluidbakeng sa width: 100%go putla mafelo ka moka a go lebelela le didirišwa, goba setshelo seo se arabelago (mohlala, .container-md) bakeng sa kopanyo ya seela le bophara bja dipiksele.

• Methaladi ke diphuthelwana tša dikholomo. Kholomo e nngwe le e nngwe e na le e rapaletšego padding(yeo e bitšwago gutter) bakeng sa go laola sekgoba magareng ga tšona. Se paddingse gona se ganetšwa godimo ga methaladi ka mapheko a mabe go netefatša gore diteng ka dikholomong tša gago di logaganywa ka pono go theoga ka lehlakoreng la nngele. Methaladi gape e thekga diklase tša sefetoši go diriša ka go swana bogolo bja kholomo le diklase tša gutter go fetoša sekgoba sa diteng tša gago.

• Dikholomo di fetofetoga le maemo ka mo go makatšago. Go na le dikholomo ta thempleite te 12 te di lego gona ka mothalo, go go dumelela go hlama metswako ye e fapanego ya dielemente te di akaretšago palo efe goba efe ya dikholomo. Diklase tša dikholomo di laetša palo ya dikholomo tša thempleite tšeo di swanetšego go span (mohlala, di col-4span tše nne). widths di bewa ka diphesente ka fao o dula o na le bogolo bjo bo swanago bja go lekana.

• Di-gutter le tšona di a arabela e bile di ka fetošwa. Diklase tša gutter di hwetšagala go ralala le mafelo ka moka a go kgaotša, ka bogolo ka moka bjo bo swanago le sekgoba sa rena sa margin le padding . Fetola di-gutter tše di rapaletšego ka .gx-*diklase, di-gutter tše di emego ka .gy-*, goba di-gutter ka moka tšeo di nago le .g-*diklase. .g-0e hwetšagala gape bakeng sa go tloša di- gutter.

• Sass diphetogo, mebapa, le mixins matla keriti. Ge o sa nyake go šomiša diklase tša keriti tše di hlalošitšwego e sa le pele ka go Bootstrap, o ka šomiša mothopo wa keriti ya rena Sass go hlama ya gago ka go swaya ga semantiki kudu. Re akaretša gape le dithoto tše dingwe tša tlwaelo tša CSS go ja diphetogo tše tša Sass bakeng sa go fetofetoga mo gogolo le go feta go wena.

Hlokomela mellwane le diphošo go dikologa flexbox , go swana le go se kgone go šomiša dielemente tše dingwe tša HTML bjalo ka ditshelo tša flex .

Dikgetho tša keriti

Bootstrap ya keriti tsamaiso e khopo ka ikamahanya le maemo ho pholletsa le tsohle tse tšeletseng default breakpoints, le leha e le efe breakpoints u customize. Magato a tshela a keriti ya go se fetoge ke a a latelago:

• E nyenyane e eketsehileng (xs) .
• E nyenyane (sm) .
• Bogare (md) .
• Kgolo (lg) .
• E kgolo e eketsehileng (xl) .
• E eketsehileng e khōlō e eketsehileng (xxl) .

Bjalo ka ge go lemogilwe ka mo godimo, e nngwe le e nngwe ya dintlha tše tša go kgaotša e na le setshelo sa yona, hlogo ya moswananoši ya sehlopha le diphetoši. Ke ka fao keriti e fetogago ka gona go putla dintlha tše tša go kgaotša:

Dikholomo tša peakanyo ya go itiriša

Šomiša diklase tša dikholomo tše di itšego tša ntlha ya go kgaotša bakeng sa go lekanyetša bogolo bja kholomo bjo bonolo ntle le sehlopha sa dinomoro tše di lego molaleng go swana le .col-sm-6.

Bophara bja go lekana

Go fa mohlala, mo ke dipeakanyo tše pedi tša keriti tšeo di šomago go sedirišwa se sengwe le se sengwe le lefelo la go lebelela, go tloga xsgo go ya go xxl. Oketša palo efe goba efe ya diklase tše di se nago yuniti bakeng sa ntlha ye nngwe le ye nngwe ya go kgaotša yeo o e hlokago gomme kholomo ye nngwe le ye nngwe e tla ba le bophara bjo bo swanago.

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

Go beakanya bophara bja kholomo e tee

Peakanyo ya go itiriša ya dikholomo tša keriti ya flexbox gape e ra gore o ka beakanya bophara bja kholomo e tee gomme wa dira gore dikholomo tša bana babo rena di fetoše bogolo ka go iketla go e dikologa. O ka šomiša diklase tša keriti tše di hlalošitšwego e sa le pele (bjalo ka ge go bontšhitšwe ka fase), di-mixin tša keriti, goba bophara bja ka gare ga mothaladi. Hlokomela gore dikholomo tše dingwe di tla fetoša bogolo go sa šetšwe bophara bja kholomo ya bogareng.

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

Diteng tša bophara bjo bo fetogago

Šomiša col-{breakpoint}-autodiklase go lekanyetša dikholomo go ya ka bophara bja tlhago bja diteng tša tšona.

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

Diklase tše di arabelago

Keriti ya Bootstrap e akaretša maemo a tshela a diklase tše di hlalošitšwego e sa le pele bakeng sa go aga dipeakanyo tše di raraganego tše di arabelago. Tlwaetša bogolo bja dikholomo tša gago go didirišwa tše nnyane kudu, tše nnyane, tša magareng, tše kgolo, goba tše kgolo kudu le ge go le bjalo o bona go swanetše.

Dintlha ka moka tša go kgaotša

Bakeng sa digridi tšeo di swanago go tšwa go tše nnyane kudu tša didirišwa go ya go tše kgolo, šomiša diklase tša .colle . .col-*Laetša sehlopha sa dinomoro ge o nyaka kholomo ya bogolo bjo bo kgethegilego; go sego bjalo, ikwe o lokologile go kgomarela .col.

<div class="container text-center">
  <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 kgobokeditšwe go ya go rapaletšego

Ka go šomiša sete e tee ya .col-sm-*diklase, o ka hlama tshepedišo ya motheo ya keriti yeo e thomago e kgobokeditšwe gomme ya ba ye e rapaletšego ntlheng ye nnyane ya go kgaotša ( sm).

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

Kopanya le go nyalelanya

Ga o nyake gore dikholomo tša gago di no kgoboketšwa ka gare ga maemo a mangwe a keriti? Šomiša kopanyo ya diklase tše di fapanego bakeng sa legato le lengwe le le lengwe ge go nyakega. Bona mohlala wo o lego ka mo tlase bakeng sa kgopolo e kaone ya kamoo ka moka di šomago ka gona.

<div class="container text-center">
  <!-- 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>

Dikholomo tša mothaladi

Šomiša .row-cols-*diklase tše di arabelago go beakanya ka pela palo ya dikholomo tšeo di tšweletšago diteng le peakanyo ya gago gabotse. Le ge diklase tša tlwaelo .col-*di šoma go dikholomo ka botee (mohlala, .col-md-4), diklase tša dikholomo tša mothalo di bewa godimo ga motswadi .rowbjalo ka tsela ye kopana. Ka .row-cols-autoo ka fa dikholomo bophara bona tlhaho.

Šomiša diklase tše tša dikholomo tša mothalo go hlama ka pela dipeakanyo tša motheo tša keriti goba go laola dipeakanyo tša gago tša karata.

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

O ka diriša gape le mixin ya Sass yeo e sepelago le yona, 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);
  }
}

Go dira dihlaga

Go tsenya diteng tša gago ka keriti ya go se fetoge, oketša ye mpsha .rowle sete ya .col-sm-*dikholomo ka gare ga .col-sm-*kholomo ye e lego gona. Methaladi ye e tsentšwego ka gare e swanetše go akaretša sete ya dikholomo tšeo di oketšago go fihla go 12 goba ka fase ga moo (ga go nyakege gore o šomiše dikholomo ka moka tše 12 tše di lego gona).

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

Ge o šomiša difaele tša Sass tša mothopo tša Bootstrap, o na le kgetho ya go šomiša diphetogo tša Sass le mixins go hlama dipeakanyo tša letlakala tša tlwaelo, tša semantiki, le tše di arabelago. Diklase tša rena tša keriti tše di hlalošitšwego e sa le pele di šomiša diphetogo tše tše di swanago le di-mixin go fa sutu ka moka ya diklase tše di loketšego go šomišwa bakeng sa dipeakanyo tše di arabelago ka lebelo.

Diphetogo

Diphetogo le dimmapa di laola palo ya dikholomo, bophara bja gutter, le ntlha ya potšišo ya boraditaba yeo go yona go thongwago dikholomo tše di phaphametšego. Re šomiša tše go tšweletša diklase tša keriti tše di hlalošitšwego e sa le pele tšeo di ngwadilwego ka mo godimo, gammogo le bakeng sa di-mixin tša tlwaelo tšeo di lokeleditšwego ka mo tlase.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

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

Ditswaki

Di-mixin di šomišwa mmogo le diphetogo tša keriti go tšweletša CSS ya semantiki ya dikholomo tša keriti ka botee.

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

Mohlala wa tšhomišo

O ka fetola diphetogo go boleng bja gago bja tlwaelo, goba wa no šomiša di-mixin ka dikelo tša tšona tša go se fetoge. Mohlala wa go šomiša dipeakanyo tša go se fetoge go hlama peakanyo ya dikholomo tše pedi ka sekgoba magareng ke wo.

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

Go dira gore keriti e be ya gago

Ka go šomiša diphetogo tša rena tša keriti tša Sass tše di agetšwego ka gare le dimmapa, go a kgonega go tlwaetša ka botlalo diklase tša keriti tše di hlalošitšwego e sa le pele. Fetoša palo ya maemo, ditekanyo tša potšišo ya methopo ya ditaba, le bophara bja setshelo—ke moka o kgoboketše gape.

Dikholomo le di-gutter

Palo ya dikholomo tša keriti e ka fetošwa ka diphetogo tša Sass. $grid-columnse šomišwa go tšweletša bophara (ka phesente) bja kholomo ye nngwe le ye nngwe ka botee mola $grid-gutter-widthe beakanya bophara bja diphaephe tša kholomo. $grid-row-columnse šomišwa go beakanya palomoka ya dikholomo tša .row-cols-*, palo efe goba efe yeo e fetago moedi wo e a hlokomologwa.

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

Magato a keriti

Go feta dikholomo ka botšona, o ka tlwaetša gape palo ya magato a keriti. Ge o be o nyaka maemo a mane fela a keriti, o be o tla mpshafatša $grid-breakpointsle $container-max-widthsgo selo se sengwe sa go swana le se:

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

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

Ge o dira diphetogo dife goba dife go diphetogo ta Sass goba dimmapa, o tla swanelwa ke go boloka diphetogo ta gago le go kgoboketša gape. Go dira bjalo go tla ntšha sete ye mpsha ya go swana le ya diklase tša keriti tše di hlalošitšwego e sa le pele bakeng sa bophara bja dikholomo, di-offset le go otara. Didirišwa tša go bonagala tše di arabelago le tšona di tla mpshafatšwa go šomiša dintlha tša go kgaotša tša tlwaelo. Kgonthiša gore o beakanya dikelo tša keriti ka go px(e sego rem, em, goba %).