TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan bruke Bootstrap 5 rutenettoppsett?

22

Bootstrap 5 tilbyr et kraftig rutenettoppsettsystem som hjelper deg med å lage mobilvennlige oppsett enkelt. Det er seks responsive brytpunkter for forskjellige størrelser på enheter i Bootstrap grid layout system. Det er 12 kolonner i hver, og ved å blande og matche kan du lage forskjellige oppsett du ønsker. Rutenettsystemet er basert på fleksiboks og reagerer fullt ut.

Opplæringsopplæring for Bootstrap 5 Grid Layout

Denne opplæringen inneholder følgende emner:

  1. Grunnleggende om rutenettoppsett
  2. Tier 5 grid system
  3. Like bredt enkelt rutenett
  4. Én kolonnebredde og endre størrelsen på andre kolonner
  5. Variabel breddeinnhold
  6. Like bredde Flere rader rutenett
  7. Stablet horisontalt rutenett
  8. Vertikal justering
  9. Horisontal justering
  10. Rutenett uten takrenner
  11. Innpakket søylenett
  12. Omorganisering av kolonneinnhold i rutenett
  13. Kolonnekompensasjon
  14. Hekker i rutenettet

1 Grunnleggende om Bootstrap Grid System

Rutenettsystemet bruker tre hoved CSS -klasser for å lage det nødvendige oppsettet – .container, .row og .col. Beholderen dekker hele oppsettet og deretter radene og deretter kolonnene.

  • Bruk .container-klasse for å sentrere innholdet med fast bredde og .container-fluid for responsiv layout i full bredde.
  • Du kan bruke .row -klassen til å inkludere alle horisontale kolonner delt i 12 like bredde.
  • Plasser det faktiske innholdet inne i kolonnene ved å bruke .col eller .col-* klasser. For eksempel kan en rad inneholde to kolonner som .col-8 + .col-4. Kolonnen skal være det nærmeste barnet i radklassen.
  • Alle kolonner bruker flexbox, noe som betyr enkel bruk av .col -klassen vil dele raden i kolonner med samme bredde. For eksempel, når du bruker to .col -klasser innenfor en rad, vil den automatisk komme inn i to 50% områder.
  • Du kan eksplisitt definere kolonnebredde som .col-sm-8 som vil oppta 3/4 (75%) av radens bredde.
  • Som standard har kolonner og rader polstring og margin for bedre synlighet. Du kan fjerne marginen og polstring ved å legge til en ekstra .noglutter -klasse med “.row".
  • Bootstrap 5 tilbyr seks brytpunkter – ekstra liten (xs), liten (sm), middels (md), stor (lg), ekstra stor (xl) og ekstra ekstra stor (xxl).
  • Alle nivåer med bruddpunkter bruker som standard .col -klassen. Alle andre klasser som brukes, vil bli brukt på alle enheter på høyere nivå. For eksempel vil .col-sm-4 (liten) bli brukt på små, mellomstore, store og ekstra store enheter.

2 Tier 6 Grid System

Tabellen nedenfor viser de seks nivåene med breakpoints som tilbys i Bootstrap 5:

Nett Ekstra liten Liten Medium Stor Ekstra stort Ekstra ekstra stort
Brytepunkt <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
CSS -klasse .med- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Beholderens maksimal bredde Ingen (auto) 540px 720px 960px 1140px 1320px
  • Kolonner – Hver rad er delt inn i 12 kolonner med samme bredde.
  • Takrennsbredde – 15 piksler på hver side av kolonnen til totalt 30 piksler.
  • Nesting – Ja, kolonner kan nestes i en annen kolonne.
  • Kolonnebestilling – Ja, innhold i hvilken som helst av kolonnen i en rad kan omorganiseres.

La oss vise forskjellige eksempler for å forstå rutenettet bedre:

3 Enkelt bredde Enkelt rutenett

Lag et enkelt rutenett med like kolonner bare ved å bruke ".col" -klasser. Når du bruker ".col" -klasser, blir raden automatisk delt inn i kolonner med samme bredde. For eksempel når du bruker to ".col" -klasser, blir raden delt inn i to 1/2+1/2 kolonner. Nedenfor er et eksempel på koder for å lage 1/2+1/2 og 1/3+1/3+1/3 kolonner ved hjelp av enkle ".col" -klasser.

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

De like kolonnene vil bli vist i nettleseren som nedenfor:

Hvordan bruke Bootstrap 5 rutenettoppsett?

4 En kolonnebredde og endre størrelsen på andre kolonner

Bootstrap grid system lar deg definere bredden for en kolonne, og de resterende kolonnene i samme rad blir automatisk justert. For eksempel, når du definerer “col + col-6 + col” på en rad, blir den automatisk delt som “1/3 + 1/6 + 1/3” -kolonner. Nedenfor er to eksempler for å definere en kolonne, og deretter vil de to andre kolonnene bli justert tilsvarende.

Hvordan bruke Bootstrap 5 rutenettoppsett?

Nedenfor er koden for justering av kolonner rundt kolonnen med den definerte bredden:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Innhold med variabel bredde

Bredden på kolonnene kan begrenses til det faktiske innholdet ved hjelp av klassen ".col- {breakpoint} -auto", for eksempel ".col-md-auto".

Hvordan bruke Bootstrap 5 rutenettoppsett?

De midterste kolonnene i eksemplet ovenfor justeres automatisk til innholdets bredde. Nedenfor er koden for ovennevnte rutenettoppsett:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 Rutenett med lik bredde

Bare lag et layout med flere kolonner i en rad ved å bruke ".col" -klasser kontinuerlig. Du trenger bare å sette inn ".w-100" -klassen der det kreves et bruddpunkt.

Hvordan bruke Bootstrap 5 rutenettoppsett?

Nedenfor er koden for å lage flere bredder med samme bredde ved hjelp av en enkelt "rad" -klasse.

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 Stabilt horisontalt rutenett

Du kan lage stablet rutenettoppsett ved hjelp av ".col-sm-" klasser som vil bli utvidet til horisontalt rutenett på skrivebordet.

Hvordan bruke Bootstrap 5 rutenettoppsett?

Nedenfor er koden for å lage stablet horisontalt rutenettoppsett som vist ovenfor.

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

8 Vertikal justering

Den vertikale justeringen av innholdet inne i en kolonne kan justeres ved å legge til en av følgende tre klasser med ".row" -klassen som nedenfor:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Horisontal justering

I likhet med vertikal justering kan du også justere den horisontale justeringen av kolonnene som nedenfor:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Dette gir følgende resultat i nettleseren:

Hvordan bruke Bootstrap 5 rutenettoppsett?

10 Rutenett uten takrenner

Som standard vil kolonnene ha horisontal polstring og radene vil ha negative horisontale marginer for bedre justering. Du kan fjerne disse marginene og polstringene ved å bruke klassen "uten takrenner" med "rad" som vist nedenfor.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Det vil gi følgende resultat:

Hvordan bruke Bootstrap 5 rutenettoppsett?

11 Innpakket søylenett

Når du har mer enn 12 kolonner på rad, blir kolonnene automatisk pakket inn til neste rad. For eksempel vil de to kolonnene nedenfor passe inn i første rad (9+2 = 11) mens den tredje og fjerde kolonnen blir pakket inn i en ny linje.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

De innpakkede kolonnene vil se slik ut:

Hvordan bruke Bootstrap 5 rutenettoppsett?

12 Ordning av kolonneinnhold i rutenett

Bootstrap lar deg omorganisere innholdet i en kolonne uavhengig av posisjonen på en rad. For eksempel er det tre kolonner som brukes i rutenettet nedenfor.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Resultatet ser ut som nedenfor uten ordnet kolonne, vil ha forrang for alle andre ordnede kolonner og vist i første kolonne. Innhold i kolonnen som bruker klassen "ordre-12", flyttes til siste posisjon. Og innholdet i kolonnen som bruker “ordre-1” vil bli flyttet til midtre (første) posisjon.

Hvordan bruke Bootstrap 5 rutenettoppsett?

13 Kolonnekompensasjon

Fra Bootstrap 4 droppet de kolonnekompensasjonsfunksjonen på grunn av bruk av flexbox -rutenettoppsett. Men du kan flytte kolonnene vekk ved å bruke marginverktøysklasser som "ml-auto", "mr-auto", etc.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Nedenfor er resultatet av kolonnen som kompenserer ved bruk av marginklasser:

Hvordan bruke Bootstrap 5 rutenettoppsett?

14 Hekker i rutenettet

Du kan også hekke kolonnene i andre kolonner som vist nedenfor:

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

Det vil gi følgende resultat:

Hvordan bruke Bootstrap 5 rutenettoppsett?

Konklusjon

Som du kan se, er det mange standardoppsett du kan lage med Bootstrap 5 -rutenettsystem. Det er også mulig å lage tilpasset CSS for å lage tilpassede oppsett eller endre en av standardoppsettene. Den solide flexbox -rutenettet og gjenbrukbare komponenter gjør Bootstrap 5 sterkere enn den forrige versjonen.


Lær Bootstrap 5 (indeks )


Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon