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

Bootstrap 5 startmall

2

Bootstrap 5 släpptes som en slutlig offentlig version. Detta betyder i huvudsak att du bör förbereda migreringen från tidigare version och använda den nya versionen för att bygga nya webbplatser. Oavsett om du migrerar eller startar en ny webbplats, bör du först lära dig minimum eller startmallen. I den här självstudien kommer vi att förklara hur du skapar grundläggande startmall för Bootstrap 5 för att starta dina projekt med enkla exempel.

Använda Bootstrap 5 startmall

  1. Ladda ner Bootstrap -källfiler
  2. Hosting Bootstrap 5 -filer på din server
  3. Använda Bootstrap 5 startmall med CDN -länkar
  4. Anpassa Bootstrap 5 -komponenter
  5. Tar startmallen vidare
  6. Använda medföljande skriptfil i version 5
  7. Inklusive Bootstrap -ikoner
  8. Använda statiska webbplatsgeneratorer

1 Ladda ner Bootstrap 5 källfiler

Som slutanvändare finns det två sätt att använda Bootstrap CSS- och JavaScript -filer. En är att ladda ner de förkompilerade filerna och inkludera dem i dina projekt och den andra är att använda CDN -länkarna.

Du kan lära dig mer om hur du får Bootstrap -filer för att komma igång med Bootstrap -artikeln.

2 Använda Bootstrap -filer på din egen server

Du kan ladda ner de förkompilerade CSS- och JavaScript -filerna från GitHub -förvaret. Zip -filen ska ha CSS- och JS -mappar. Nedan finns de tillgängliga filerna i CSS -mappar:

Bootstrap 5 startmall

Bootstrap 5 -filer

Det finns flera CSS -versioner tillgängliga i den nedladdade källfilen:

  • Standard och minifierade CSS -filer som du kan använda med alla projekt
  • Verktygsfilen
  • Endast rutnätversion
  • Starta om version endast

På en produktionsserver kan du använda den minifierade versionen "bootstrap.min.css" för alla dina behov. Källkartfilerna hjälper till att kartlägga mellan källan och de förkompilerade minifierade versionerna. Du behöver inte använda omstart, rutnät och karta filer för regelbunden användning på webbplatserna.

Obs! När du bara använder “bootstrap.min.css" -filen på din webbplats kommer vissa webbläsare som Safari att visa fel eller varning i utvecklarkonsolen att källkartfilen saknas. För att åtgärda felet öppnar du Bootstrap CSS -filen och tar bort den sista raden ” / # sourceMappingURL = bootstrap.min.css.map /”.

I likhet med CSS -filer kommer JS -mappen att ha "bootstrap.js" och "bootstrap.bundle.js". "Bootstrap.js" -filen innehåller inte Popper -skript, men paketversionen innehåller Popper -skriptet. Med tidigare Bootstrap 4 -version måste du inkludera jQuery separat för att JavaScript -komponenterna ska fungera korrekt. Bootstrap 5 behöver dock inte jQuery som en del av ramverket och är utformad för att fungera utan jQuery.

Bootstrap 5 startmall

Bootstrap 5 JS -filer

Med ovanstående förståelse kommer källfilerna att ha följande struktur som innehåller många CSS- och JS -filer.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Den grundläggande startmallen ska se ut nedan när du är värd för ovanstående filer på din server:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Kom ihåg att om du inte använder den medföljande JS -filen måste du inkludera separata JS- och popper -skriptfiler. Om du har märkt ordentligt finns det många ytterligare taggar och skript i startmallen.

  • Bootstrap använder HTML5 DOCTYPE för mallarna. Se därför till att inkludera <! DOCTYPE HTML> i början av HTML -mallen för att undvika oväntat beteende.
  • Du måste använda viewport -metataggen för att säkerställa att mallen är lyhörd baserad på renderingsenheten.
  • Om du lägger till jQuery, se till att lägga till före "popper.min.js" och "bootstrap.min.js" -skripten.
  • Du kan också ladda ner Popper -skriptet från Popper -webbplatsen och ladda upp dem på webbplatsens mapp “assets/js/”.
  • Kom ihåg att Popper -skriptet är viktigt för att Bootstrap -plugins ska fungera korrekt. Popper är ett JavaScript -bibliotek som främst används för att placera flytande element som verktygstipskomponent i Bootstrap.

Observera att vi har använt "assets/css/bootstrap.min.css" och "assets/js/bootstrap.bundle.min.js" som filvägar. Det är en bra vana att ha alla CSS- och JS -filer i en separat mapp så att det är enkelt att hantera. Detta betyder i huvudsak att du ska skapa motsvarande mappar på din server och ladda upp Bootstrap CSS- och JS -filerna manuellt. Förvara också bilderna i separata "bilder" -mappen och HTML -filer på roten på din webbplats. Så hela strukturen ska se ut ungefär som nedan på din server:

Bootstrap 5 startmall

Bootstrap 5 -temafilstruktur

"Temamappen" i exemplet ovan är webbplatsens rotmapp som bör vara din domän eller underdomän eller underkatalog.

3 Använda startmall med CDN

Att lagra alla nödvändiga filer på din server är rätt sätt, men det kommer att påverka laddningshastigheten och värdkapaciteten. Så vi rekommenderar att du använder CDN -länkar för CSS- och JS -filer istället för att vara värd för dem på din egen server. Detta säkerställer snabb leverans av dessa statiska filer och förbättrar sidladdningshastigheten. Nedan finns en Bootstrap 5 -startmall med CDN -länkar för CSS och skript. Du kan helt enkelt lägga till innehåll i kroppsdelen för att börja bygga din webbplats eller ditt tema. Tidigare var Bootstrap 4 -versionen från Bootstrap CDN -nätverk och den senaste versionen 5 är från jsDelivr.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

4 Anpassa Bootstrap -källfiler

Det är inte nödvändigt att använda hela mallfilerna i alla fall. Till exempel, när du bara vill använda Bootstrap -knappar kan du bara använda lämpliga stilar för knapparna. Bootstrap erbjuder en anpassare för den tidigare versionen 3.4 där du kan välja vilka komponenter som krävs och generera de förkompilerade filerna.

Bootstrap 5 startmall

Anpassa Bootstrap -filer

För närvarande finns ingen detaljerad anpassare tillgänglig för Bootstrap 5 -versionen. Du kan dock hänvisa till den officiella dokumentationssajten för mer information om anpassning av Bootstrap 5.

5 Ta startmallen vidare

Nu när du har din sista startmall antingen värd på din server eller använder CDN -länkar. Nästa steg är att lägga till innehåll och börja bygga din webbplats. Nedan följer ett enkelt exempel där vi har skapat olika sammanhangsknappar med standard Bootstrap -knappklasser.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Utdata ska se ut nedan i webbläsaren:

Bootstrap 5 startmall

Helst behöver du inte använda jQuery-, popper- och Bootstrap -skriptfiler för att skapa enkla knappar som styrs via CSS. Vi har visat exemplet för fullständigheten av startmallen. När du lägger till fler komponenter bör den medföljande skriptfilen inkluderas.

6 Använda Bootstrap Bundled Script Version

Som förklarats ovan har Bootstrap 5 en medföljande skriptfil som kombinerar "bootstrap.min.js" och "popper.min.js". Så om du vill använda den medföljande versionen, ändra sedan startmallen som nedan med filen "bootstrap.bundle.min.js".

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7 Inklusive Bootstrap -ikoner i mall

Bootstrap version 5 har 1300+ gratis SVG -ikoner som du enkelt kan inkludera på dina webbplatser. Det hjälper till att eliminera beroendet av externa ikoner som Font Awesome -ikoner. Det finns flera sätt att inkludera ikonerna i din startmall och det bästa alternativet är att använda CDN CSS som nedan. Vi har visat en exempelikon i kroppsdelen med varningskomponent. Du kan få den fullständiga listan över CSS -klasser för ikonerna här.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Använda statiska webbplatsgeneratorer

Det är enkelt att skapa en statisk webbplats med Bootstrap -startmall, men att ändra flera statiska filer på en större webbplats kommer att ta mycket tid. En enda webbsida innehåller olika avsnitt som sidhuvud, huvudinnehåll, sidfot och sidofält. Alla andra sektioner än huvudinnehållet används på hela sidan med samma information. Statiska generatorer använder konceptet med partials genom att ha basmallarna för var och en av sektionerna som sidhuvud, sidfot och sidofält. Slutligen monteras alla dessa basmallar med huvudkroppens innehåll på varje sida separat.

När det behövs en ändring i sidhuvudet, sidfoten och sidofältet kan du ändra basmallarna istället för att ändra varje sida individuellt. När webbplatsen är klar kan du generera HTML-, CSS- och JavaScript -filer för att ladda upp dem på din server. En av de populära statiska platsgeneratorerna är Harp.js som du kan installera på din lokala maskin för vidareutveckling av startmallen. Kom ihåg att Harp.js behöver Node.js/NPM som ett beroende, därför borde du ha installerat dessa komponenter i förväg. Alternativt kan du använda generatorappar som Mobirise för att använda Bootstrap -ramverket utan att behöva förstå kodning.


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