Inkqubo yegridi

Umzekelo

Inkqubo yegridi yeBootstrap isebenzisa uthotho lwezikhongozeli, iirowu, kunye neekholamu kuyilo kunye nokulungelelanisa umxholo. Yakhiwe nge- flexbox kwaye iyaphendula ngokupheleleyo. Ngezantsi umzekelo kunye nenkcazo enzulu malunga nendlela inkqubo yegridi edibana ngayo.

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

Lo mzekelo ungasentla udala iikholamu ezintathu zobubanzi obulinganayo kuzo zonke izixhobo kunye neendawo zokujonga kusetyenziswa iiklasi zethu zegridi ezichazwe kwangaphambili. Ezo kholamu zibekwe embindini wephepha elinomzali .container.

Ingaba isebenza kanjani

Ukuyichitha, nantsi indlela inkqubo yegridi edibana ngayo:

• Igridi yethu ixhasa ikhefu ezintandathu eziphendulayo . Ii-Breakpoints zisekwe min-widthkwimibuzo yemithombo yeendaba, oku kuthetha ukuba ziyayichaphazela loo ndawo yoqhawulo-mtshato kunye nabo bonke abangaphezulu kwayo (umzekelo, .col-sm-4iyasebenza sm, md, lg, xlkunye xxl). Oku kuthetha ukuba unokulawula isikhongozeli kunye nobungakanani bekholamu kunye nokuziphatha ngenqaku ngalinye.

• Iziko lemigqomo kunye nephedi ngokuthe tye umxholo wakho. Sebenzisa .containerkububanzi bepikseli ephendulayo, .container-fluidkuzo width: 100%zonke iindawo zokujonga kunye nezixhobo, okanye isikhongozeli esiphendulayo (umzekelo, .container-md) kwindibaniselwano yolwelo kunye nobubanzi bepikseli.

• Imiqolo ziziqwenga zemiqolo. Ikholamu nganye ine-horizontal padding(ebizwa ngokuba yigutter) yokulawula isithuba phakathi kwayo. Oku paddingke kuyachaswa kwimiqolo enemida engalunganga ukuqinisekisa ukuba umxholo kwikholamu yakho ulungelelaniswa ngokubonakalayo phantsi kwicala lasekhohlo. Imiqolo ikwaxhasa iiklasi zohlengahlengiso ukuze zisebenzise ngokufanayo ubungakanani bekholamu kunye neeklasi zegutter ukutshintsha isithuba somxholo wakho.

• Iikholamu zibhetyebhetye ngendlela emangalisayo. Kukho iikholamu zetemplate ezili-12 ezikhoyo kumqolo ngamnye, ezikuvumela ukuba wenze indibaniselwano eyahlukeneyo yezinto ezithatha naliphi na inani leekholamu. Iiklasi zekholamu zibonisa inani leekholamu zeethemplethi ukuya kwisithuba (umz., col-4ispans four). widths zicwangciswe ngokweepesenti ukuze uhlale unomlinganiselo ofanayo wokulinganisa.

• Iigutters nazo ziyaphendula kwaye zenziwe ngokwezifiso. Iiklasi zeGutter ziyafumaneka kuzo zonke iindawo zokuphumla, nazo zonke iisayizi ezifanayo njengemida yethu kunye nesithuba se-padding . Guqula iigatha ezithe tyaba .gx-*ezineeklasi, iigutha ezithe nkqo ezine .gy-*, okanye zonke iigatha .g-*ezineeklasi. .g-0iyafumaneka kwakhona ukususa iigatha.

• Iinguqu zeSass, iimephu, kunye nemixube inika amandla igridi. Ukuba awufuni ukusebenzisa iiklasi zegridi echazwe kwangaphambili kwiBootstrap, ungasebenzisa umthombo wethu wegridi iSass ukwenza eyakho ngophawulo lwesemantic. Sikwabandakanya ezinye iipropathi zesiko le-CSS ukusebenzisa ezi ziguquguqukayo ze-Sass ukuze ube bhetyebhetye ngakumbi kuwe.

Yamkela imida kunye neebugs ezijikeleze iflexbox , njengokungakwazi ukusebenzisa ezinye izinto zeHTML njengezikhongozeli eziguqukayo .

Iinketho zegridi

Inkqubo yegridi ye-Bootstrap inokuziqhelanisa kuzo zonke iindawo ezithandathu zoqhawulo olungagqibekanga, kunye naziphi na iindawo zoqhawulo ozenzayo. Amanqanaba amathandathu egridi angagqibekanga ami ngolu hlobo lulandelayo:

• Incinci kakhulu (xs)
• Incinci (sm)
• Phakathi (md)
• Enkulu (lg)
• Enkulu kakhulu (xl)
• Eyongezelelweyo enkulu kakhulu (xxl)

Njengoko kuphawuliwe ngasentla, nganye kwezi ndawo zoqhawulo zinezikhongozeli zazo, isimaphambili sodidi esikhethekileyo, kunye nezilungisi. Nantsi indlela igridi etshintsha ngayo kuzo zonke ezi ndawo zokuphumla:

Imiqolo yoyilo oluzenzekelayo

Sebenzisa iiklasi zekholamu ezikhethekileyo zokulinganisa iikholamu ngokulula ngaphandle kodidi oluneenombolo olucacileyo njenge .col-sm-6.

Ububanzi obulinganayo

Umzekelo, nantsi indlela yoyilo lwegridi emibini esebenza kwisixhobo ngasinye kunye nendawo yokujonga, ukusuka xsukuya kwi xxl. Yongeza naliphi na inani leeklasi ezingaphantsi kweyunithi kwi-breakpoint nganye oyifunayo kwaye yonke ikholamu iya kuba nobubanzi obufanayo.

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

Ukucwangcisa ububanzi bekholamu enye

Uyilo oluzenzekelayo lwekholamu yegridi ye-flexbox ikwathetha ukuba unokuseta ububanzi bekholamu enye kwaye ube neekholamu zabazalwana noodade ngokuzenzekelayo ukujikeleza kuyo. Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (njengoko kubonisiwe ngezantsi), imixube yegridi, okanye ububanzi bomgca. Qaphela ukuba ezinye iikholamu ziya kwenza ubungakanani kwakhona kungakhathaliseki ububanzi boluhlu oluphakathi.

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

Umxholo wobubanzi obuguquguqukayo

Sebenzisa col-{breakpoint}-autoiiklasi ukuya kwiikholomu zobungakanani ngokusekelwe kububanzi bendalo bomxholo wabo.

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

Iiklasi eziphendulayo

Igridi yeBootstrap ibandakanya amanqanaba amathandathu eeklasi ezichazwe kwangaphambili zokwakhiwa koyilo olunzima oluphendulayo. Yenza ngokwezifiso ubungakanani bekholamu yakho kwizinto ezincinci, ezincinci, eziphakathi, ezinkulu, okanye ezikhulu ezongezelelweyo nangona ubona kufanelekile.

Zonke iindawo zokuqhawula

Kwiigridi ezifanayo ukusuka kwezona zixhobo zincinci ukuya kwezikhulu, sebenzisa i .colkunye .col-*neeklasi. Cacisa udidi olunamanani xa ufuna ikholamu enobungakanani obukhulu; kungenjalo, zive ukhululekile ukunamathela .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>

Ibekwe ngokuthe tye

Usebenzisa iseti enye .col-sm-*yeeklasi, ungenza isixokelelwano segridi esisiseko eqala ngokupakishwa kwaye ibe ithe tye kwindawo encinci yokwaphuka ( 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>

Hlanganisa kwaye udibanise

Awufuni ukuba iikholamu zakho zibekwe ngokulula kwezinye imigangatho yegridi? Sebenzisa indibaniselwano yeeklasi ezahlukeneyo kwinqanaba ngalinye njengoko kufuneka. Jonga lo mzekelo ungezantsi ukuze ufumane ingcamango engcono yendlela esebenza ngayo yonke into.

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

Imiqolo emqolo

Sebenzisa .row-cols-*iiklasi eziphendulayo ukuseta ngokukhawuleza inani leekholomu ezinikezela kakuhle umxholo wakho kunye noyilo. Ngelixa iiklasi eziqhelekileyo .col-*zisebenza kwikholamu nganye (umzekelo, .col-md-4), iiklasi zemiqolo yemigca zisetwa kumzali .rownjengento emiselweyo kwimiqolo equlethweyo. Ngawe .row-cols-autounokunika iikholomu ububanzi bazo bendalo.

Sebenzisa ezi klasi zeekholamu zomqolo ukwenza ngokukhawuleza uyilo lwegridi esisiseko okanye ukulawula uyilo lwekhadi lakho kunye nokubhala ngaphezulu xa kufuneka kwinqanaba lekholomu.

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

Ungasebenzisa kwakhona i-Sass mixin ehamba nayo 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);
  }
}

Ukuzalela

Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .rowkunye neseti .col-sm-*yeekholamu ngaphakathi koluhlu olukhoyo .col-sm-*. Imiqolo ebekwe kwizindlu kufuneka ibandakanye uluhlu lwezintlu ezidibanisa ukuya kutsho kwi-12 okanye ngaphantsi (akufuneki ukuba usebenzise zonke iikholamu ezili-12 ezikhoyo).

<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

Xa usebenzisa iifayile ze-Sass zomthombo we-Bootstrap, unokhetho lokusebenzisa ii-variables ze-Sass kunye nemixube ukwenza isiko, i-semantic, kunye noyilo lwephepha eliphendulayo. Iiklasi zethu zegridi ezichazwe kwangaphambili zisebenzisa ezi ziguquguqukayo ezifanayo kunye nemixube ukubonelela ngesuti epheleleyo yeeklasi ezilungele ukusetyenziswa kwiindlela zoyilo eziphendula ngokukhawuleza.

Izinto eziguquguqukayo

Izinto eziguquguqukayo kunye neemephu zimisela inani leekholamu, ububanzi begutter, kunye nendawo yombuzo wemidiya apho kuza kuqalwa khona iikholamu ezidadayo. Sisebenzisa ezi ukuvelisa iiklasi zegridi ezichazwe kwangaphambili ezibhalwe ngasentla, kunye nemixube yesiko edweliswe ngezantsi.

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

Imixube

Imixube isetyenziswa ngokudityaniswa noguquguquko lwegridi ukuvelisa i-CSS ye-semantic yeekholamu zegridi nganye.

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

Umzekelo wokusetyenziswa

Uyakwazi ukuguqula izinto eziguquguqukayo kumaxabiso akho esiko, okanye usebenzise nje imixube ngexabiso labo elingagqibekanga. Nanku umzekelo wokusebenzisa useto olungagqibekanga ukwenza ubeko lwekholamu ezimbini kunye nomsantsa phakathi.

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

Ukulungelelanisa igridi

Ukusebenzisa igridi yethu eyakhelwe-ngaphakathi iSass eguquguqukayo kunye neemephu, kuyenzeka ukuba wenze ngokwezifiso iiklasi zegridi ezichazwe kwangaphambili. Guqula inani lamanqanaba, imilinganiselo yombuzo wemidiya, kunye nobubanzi besikhongozeli-emva koko uhlanganise.

Iikholamu kunye neegutters

Inani leekholamu zegridi zinokulungiswa kusetyenziswa iiguquguquko zeSass. $grid-columnsisetyenziselwa ukuvelisa ububanzi (ngepesenti) yekholamu nganye nganye ngelixa $grid-gutter-widthibeka ububanzi bemijelo yomhlathi.

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

Imigangatho yegridi

Ukuhamba ngaphaya kweekholamu ngokwazo, unokwenza ngokwezifiso inani legridi yemigangatho. Ukuba ubufuna amanqanaba egridi amane kuphela, unokuhlaziya $grid-breakpointskunye $container-max-widthsnento enje:

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

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

Xa usenza naluphi na utshintsho kwizinto eziguquguqukayo ze-Sass okanye iimephu, kuya kufuneka ugcine utshintsho lwakho kwaye uqokelele kwakhona. Ukwenza njalo kuya kukhupha iseti entsha yeeklasi zegridi ezichazwe kwangaphambili kububanzi bekholomu, i-offsets, kunye nokuodola. Izixhobo ezibonakalayo eziphendulayo nazo ziya kuhlaziywa ukuze kusetyenziswe iindawo zokuqhawula ngokwesiko. Qinisekisa ukuseta amaxabiso egridi kwi px(hayi rem, em, okanye %).