TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur använder jag Bootstrap 5 rutnätlayouter?

2

Bootstrap 5 erbjuder ett kraftfullt gridlayout -system som hjälper till att enkelt skapa mobilvänliga layouter. Det finns sex responsiva brytpunkter för olika storlekar av enheter i Bootstrap grid layout system. Det finns 12 kolumner i varje och genom att mixa och matcha kan du skapa olika layouter du önskar. Gridsystemet är baserat på flexbox och är fullt lyhörd.

Bootstrap 5 rutnätlayout

Denna handledning innehåller följande ämnen:

  1. Grunderna i layouten
  2. Nivå 5 -nätsystem
  3. Lika bredd enkelt rutnät
  4. En kolumnbredd och ändra storlek på andra kolumner
  5. Variabel breddinnehåll
  6. Jämn bredd Flera rader
  7. Staplat horisontellt rutnät
  8. Vertikal inriktning
  9. Horisontell linjering
  10. Rutnät utan rännor
  11. Inslagna kolumnnät
  12. Ordning av kolumninnehåll i rutnät
  13. Kolumnförskjutning
  14. Häckar i rutnätet

1 Grunderna i Bootstrap Grid System

Nätsystemet använder tre huvudsakliga CSS -klasser för att skapa den layout som behövs – .container, .row och .col. Behållaren täcker hela layouten och sedan raderna och sedan kolumnerna.

  • Använd .container-klass för att centrera innehållet med fast bredd och .container-fluid för responsiv layout i full bredd.
  • Du kan använda .row -klassen för att inkludera alla horisontella kolumner uppdelade i 12 lika breda.
  • Placera det faktiska innehållet inuti kolumnerna med .col eller .col-* klasser. Till exempel kan en rad innehålla två kolumner som .col-8 + .col-4. Kolumnen ska vara den närmaste underordnade i radklassen.
  • Alla kolumner använder flexbox vilket innebär enkel användning av .col -klassen kommer att dela raden i kolumner med samma bredd. Till exempel, när du använder två .col -klasser inom en rad kommer det automatiskt in i två 50% -områden.
  • Du kan uttryckligen definiera kolumnbredd som .col-sm-8 som kommer att uppta 3/4 (75%) av radens bredd.
  • Som standard har kolumner och rader vaddering och marginal för bättre synlighet. Du kan ta bort marginalen och vadderingen genom att lägga till ytterligare en ".noglutter" -klass med ".row".
  • Bootstrap 5 erbjuder sex brytpunkter – extra liten (xs), liten (sm), medium (md), stor (lg), extra stor (xl) och extra extra stor (xxl).
  • Alla nivåer med brytpunkter använder som standard .col -klassen. Alla andra klasser som används kommer att tillämpas på alla enheter på högre nivå. Till exempel kommer .col-sm-4 (liten) att tillämpas på små, medelstora, stora och extra stora enheter.

2 Tier 6 Grid System

Tabellen nedan visar de sex nivåerna med brytpunkter som erbjuds i Bootstrap 5:

Rutnät Extra liten Små Medium Stor Extra stor Extra Extra Large
Brytpunkt <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
CSS -klass .med- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Behållarens maximala bredd Ingen (auto) 540px 720px 960px 1140px 1320px
  • Kolumner – Varje rad är uppdelad i 12 lika breda kolumner.
  • Rännviddsbredd – 15 pixlar på varje sida av kolonnen, totalt 30 pixlar.
  • Kapsling – Ja, kolumner kan kapslas i andra kolumner.
  • Kolumnordning – Ja, innehåll i någon av kolumnerna i en rad kan ordnas om.

Låt oss visa olika exempel för att förstå gallren bättre:

3 Enkelt bredd Enkelt rutnät

Skapa ett enkelt rutnät med lika kolumner bara med ".col" -klasser. När du använder ".col" -klasser delas raden automatiskt i kolumner med samma bredd. Om du till exempel använder två ".col" -klasser kommer raden att delas upp i två 1/2+1/2 -kolumner. Nedan finns ett exempel på koder för att skapa 1/2+1/2 och 1/3+1/3+1/3 kolumner med enkla ".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 lika kolumnerna visas i webbläsaren som nedan:

Hur använder jag Bootstrap 5 rutnätlayouter?

4 En kolumnbredd och ändra storlek på andra kolumner

Bootstrap grid system låter dig definiera bredden för en kolumn och de återstående kolumnerna inom samma rad justeras automatiskt. Till exempel, när du definierar “col + col-6 + col" i rad kommer det automatiskt att delas upp som “1/3 + 1/6 + 1/3” -kolumner. Nedan finns två exempel för att definiera en kolumn och sedan justeras de återstående två andra kolumnerna därefter.

Hur använder jag Bootstrap 5 rutnätlayouter?

Nedan finns koden för justering av kolumner som omger kolumnen med den definierade 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 Innehåll i variabel bredd

Kolumnernas bredd kan begränsas till det faktiska innehållet med klassen ".col- {breakpoint} -auto", till exempel ".col-md-auto".

Hur använder jag Bootstrap 5 rutnätlayouter?

De mellersta kolumnerna i exemplet ovan justeras automatiskt till innehållets bredd. Nedan är koden för ovanstående rutnätlayout:

<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 Rutnät med lika bredd Flera rader

Skapa helt enkelt en layout med flera kolumner inom en rad med ".col" -klasser kontinuerligt. Du behöver bara infoga klassen ".w-100" där en brytpunkt krävs.

Hur använder jag Bootstrap 5 rutnätlayouter?

Nedan är koden för att skapa flera bredder med samma bredd med en enda "rad" -klass.

<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 Staplat horisontellt rutnät

Du kan skapa staplade rutnätlayout med hjälp av ".col-sm-" klasser som kommer att utökas till horisontellt rutnät på skrivbordet.

Hur använder jag Bootstrap 5 rutnätlayouter?

Nedan finns koden för att skapa staplad horisontell rutnätlayout enligt ovan.

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

Den vertikala inriktningen av innehållet i en kolumn kan justeras genom att lägga till en av följande tre klasser med ".row" -klassen som nedan:

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

I likhet med vertikal inriktning kan du också justera den horisontella inriktningen av kolumnerna enligt nedan:

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

Detta ger följande resultat i webbläsaren:

Hur använder jag Bootstrap 5 rutnätlayouter?

10 Rutnät utan rännor

Som standard har kolumnerna horisontell stoppning och raderna har negativa horisontella marginaler för bättre inriktning. Du kan ta bort dessa marginaler och stoppningar genom att använda klassen "utan hängrännor" med "rad" enligt nedan.

<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 ger följande resultat:

Hur använder jag Bootstrap 5 rutnätlayouter?

11 Inslagna kolumnnät

När du har mer än 12 kolumner i rad kommer kolumnerna automatiskt att svepas till nästa rad. Till exempel, med nedanstående kommer de första två kolumnerna att passa i första raden (9+2 = 11) medan den tredje och fjärde kolumnen kommer att lindas in i en ny rad.

<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 inslagna kolumnerna kommer att se ut nedan:

Hur använder jag Bootstrap 5 rutnätlayouter?

12 Ordning av kolumninnehåll i rutnät

Bootstrap låter dig ändra ordningen på innehållet i en kolumn oavsett position i en rad. Det finns till exempel tre kolumner som används i nedanstående rutnätlayout.

<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 nedan utan ordnad kolumn kommer att ha företräde för alla andra ordnade kolumner och visas i första kolumnen. Innehåll i kolumnen som använder klassen "order-12" flyttas till den sista positionen. Och innehållet i kolumnen med "order-1" flyttas till mitt (första) läge.

Hur använder jag Bootstrap 5 rutnätlayouter?

13 Kolumnförskjutning

Från Bootstrap 4 tappade de kolumnförskjutningsfunktionen på grund av användningen av flexbox -rutnätlayout. Men du kan fortfarande flytta bort kolumnerna med hjälp av marginalverktygsklasser 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>

Nedan visas resultatet av kolumnen som kompenserar med marginalklasser:

Hur använder jag Bootstrap 5 rutnätlayouter?

14 Häckning i rutnät

Du kan också nesta kolumnerna i andra kolumner enligt nedan:

<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 ger följande resultat:

Hur använder jag Bootstrap 5 rutnätlayouter?

Slutsats

Som du kan se finns det gott om standardlayouter som du kan skapa med Bootstrap 5 rutsystems layout. Det är också möjligt att skapa anpassad CSS för att skapa anpassade layouter eller ändra en av standardlayouterna. Den fasta flexbox -rutnätlayouten och återanvändbara komponenter gör Bootstrap 5 starkare än den tidigare versionen.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer