Bootstrap 5: Kom igång


Innehållsförteckning

    Visa innehållsförteckning

Vad är Bootstrap?

  • Bootstrap är ett gratis front-end-ramverk för snabbare och enklare webbutveckling

  • Bootstrap inkluderar HTML- och CSS-baserade designmallar för typografi, formulär, knappar, tabeller, navigering, modaler, bildkaruseller och många andra, såväl som valfria JavaScript-plugins

  • Bootstrap ger dig också möjligheten att enkelt skapa responsiva designs

Vad är responsiv webbdesign?

Responsiv webbdesign handlar om att skapa webbplatser som automatiskt anpassar sig för att se bra ut på alla enheter, från små telefoner till stora stationära datorer.

Bootstrap 5 Exempel

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Prova själv →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap-versioner

Bootstrap 5 (släpptes 2021) är den senaste versionen av Bootstrap (släppt 2013); med nya komponenter, snabbare stilmall och mer lyhördhet.

Bootstrap 5 stöder de senaste, stabila utgåvorna av alla större webbläsare och plattformar. Internet Explorer 11 och senare stöds dock inte.

De största skillnaderna mellan Bootstrap 5 och Bootstrap 3 & 4 är att Bootstrap 5 har bytt till vanilla JavaScript istället för jQuery.

Obs: Bootstrap 3 och Bootstrap 4 stöds fortfarande av teamet för kritiska buggfixar och dokumentationsändringar, och det är helt säkert att fortsätta använda dem. Nya funktioner kommer dock INTE att läggas till dem.

Varför använda Bootstrap?

Fördelar med Bootstrap:

  • Lätt att använda: Alla som bara har grundläggande kunskaper om HTML och CSS kan börja använda Bootstrap

  • Responsiva funktioner: Bootstraps responsiva CSS anpassas till telefoner, surfplattor och stationära datorer

  • Mobile-first approach: I Bootstrap är mobil-först-stilar en del av kärnramverket

  • Webbläsarkompatibilitet: Bootstrap 5 är kompatibel med alla moderna webbläsare (Chrome, Firefox, Edge, Safari och Opera). Observera att om du behöver stöd för IE11 och nedåt måste du använda antingen BS4 eller BS3.

Var får man Bootstrap 5?

Det finns två sätt att börja använda Bootstrap 5 på din egen webbplats.

Du kan:

  • Inkludera Bootstrap 5 från ett CDN

  • Ladda ner Bootstrap 5 från getbootstrap.com

Bootstrap 5 CDN

Om du inte vill ladda ner och vara värd för Bootstrap 5 själv kan du inkludera den från ett CDN (Content Delivery Network).

jsDelivr tillhandahåller CDN-stöd för Bootstraps CSS och JavaScript:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

En fördel med att använda Bootstrap 5 CDN:
Många användare har redan laddat ner Bootstrap 5 från jsDelivr vid besök en annan sida. Som ett resultat kommer det att laddas från cachen när de besöker din webbplats, vilket leder till snabbare laddningstid. De flesta CDN:er kommer också att se till att när en användare begär en fil från den, kommer den att serveras från servern närmast dem, vilket också leder till snabbare laddningstid.

JavaScript?
Bootstrap 5 använder JavaScript för olika komponenter (som modals, verktygstips, popovers etc). Men om du bara använder CSS-del av Bootstrap, du behöver dem inte.

Laddar ner Bootstrap 5

Om du vill ladda ner och vara värd för Bootstrap 5 själv, gå till https://getbootstrap.com/, och följ instruktionerna där.

Skapa din första webbsida med Bootstrap 5

1. Lägg till HTML5-dokumenttypen

Bootstrap 5 använder HTML-element och CSS-egenskaper som kräver HTML5-dokumenttypen.

Inkludera alltid HTML5 doctype i början av sidan, tillsammans med attributet lang och korrekt titel och teckenuppsättning:

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

2. Bootstrap 5 är mobilt först

Bootstrap 5 är designad för att vara lyhörd för mobila enheter. Mobile-first stilar är en del av kärnramen.

För att säkerställa korrekt rendering och pekzoomning lägger du till följande -tagg inuti element:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width-delen ställer in sidans bredd så att den följer skärmens bredd på enheten (vilket kommer att variera beroende på enheten).

initial-scale=1-delen ställer in den initiala zoomnivån när sidan först laddas av webbläsaren.

3. Behållare

Bootstrap 5 kräver också ett innehållande element för att omsluta webbplatsens innehåll.

Det finns två containerklasser att välja mellan:

  1. Klassen .container tillhandahåller en responsiv behållare med fast bredd

  2. Klassen .container-fluid tillhandahåller en full breddbehållare som spänner över hela bredden av visningsporten

.container
.container-fluid

Två Basic Bootstrap 5-sidor

Följande exempel visar koden för en grundläggande Bootstrap 5-sida (med en responsiv behållare med fast bredd):

Exempel på behållare

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Prova själv →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

Följande exempel visar koden för en grundläggande Bootstrap 5-sida (med en behållare med full bredd):

Behållarvätska Exempel

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Prova själv →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>