Bootstrap 5 introduktion

Hvad er Bootstrap?

  • Bootstrap er en gratis frontend-framework, der gør webudvikling hurtigere og lettere
  • Bootstrap inkluderer designmønstre baseret på HTML og CSS til layout, formulær, knapper, tabeller, navigation, modaler, billedgalleri osv.
  • Bootstrap tilbyder et rigtigt udvalg af JavaScript-plugin
  • Bootstrap gør det nemt at skabe responsiv design

Hvad er responsivt webdesign?

Responsiv webdesign sigter mod at skabe hjemmesider, der automatisk tilpasser sig, hvilket forbedrer brugeroplevelsen på alle enheder, uanset om det er en mobiltelefon eller en stor stationær computer.

Bootstrap 5 eksempel

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Min første Bootstrap-side</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Colonne 1: Forår</h3>
      <p>En fantastisk dag til at lede efter blomster ved Sishui, uendelige scener er nye på én gang.</p>
      <p>Let kan jeg genkende østvinden, tusindfarvede blomster er altid foråret.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colonne 2: Før sommerens digt</h3>
      <p>De mange røde og blå blomster er blevet støv, sommeren er ny i gøggets røst.</p>
      <p>Den tunge blomst og linolie går ikke til ende, før jeg forstår, at jeg er en fredelig person.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colonne 3: Bjerget</h3>
      <p>Fra fjeretoppen af den kolde bjergsti, er der et hjem et sted.</p>
      <p>Stop og nyd efter aftenen i bøgskoven, isblade røde er mere smukke end blomsterne i februar.</p>
    </div>
  </div>
</div>

Prøv det selv

Bootstrap version

Bootstrap 5 (udgivet i 2021) er den nyeste version af Bootstrap (udgivet i 2013); med nye komponenter, hurtigere stilark og hurtigere responsivitet.

Bootstrap 5 understøtter den nyeste stabile version af alle største browsere og platforme. Men det understøtter ikke Internet Explorer 11 og ældre versioner.

Den vigtigste forskel mellem Bootstrap 5 og Bootstrap 3 & 4 er, at Bootstrap 5 er skiftet til Vanilla JavaScript i stedet for jQuery.

Kommentarer:Deres team fortsætter med at støtte kritiske fejlrettelser og dokumentationsændringer for Bootstrap 3 og Bootstrap 4, så det er helt sikkert at fortsætte med at bruge dem. Men der vil ikke blive tilføjet nogen nye funktioner til dem.

Hvorfor bruge Bootstrap?

Bootstrap's fordele:

  • Enkelhed i brug:Enhver, der har grundlæggende kendskab til HTML og CSS, kan straks begynde at bruge Bootstrap.
  • Responsive egenskaber:Bootstrap's responsive CSS kan tilpasses til mobiltelefoner, tablets og stationære computere.
  • Mobile-first-metoden:I Bootstrap er mobile-first-stilarter en del af kerneframeværket.
  • Browserkompatibilitet:Bootstrap 5 er kompatibel med alle moderne browsere (Chrome, Firefox, Edge, Safari og Opera).

Bemærk:Hvis du har brug for at støtte IE11 og ældre versioner, skal du bruge BS4 eller BS3.

Hvor får du Bootstrap 5?

Der er to metoder til at bruge Bootstrap 5 på din egen hjemmeside.

Du kan:

  • Inkluder Bootstrap 5 fra CDN
  • Download Bootstrap 5 fra getbootstrap.com

Bootstrap 5 CDN

Hvis du ikke vil downloade og hoste Bootstrap 5 selv, kan du referere til det fra CDN (content delivery network).

CodeW3C.com tilbyder CDN-støtte til Bootstrap's CSS og JavaScript:

MaxCDN:

<!-- Nyest komprimeret CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- Nyest compilleret JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

En af fordelene ved at bruge Bootstrap 5 CDN er:

Mange brugere har allerede downloadet Bootstrap 5 fra jsDelivr, når de besøger et andet websted. Derfor vil det blive indlæst fra cache, hvilket forkorter indlæsningstiden. Derudover sikrer de fleste CDN, at det fra det nærmeste server til brugeren serveres, hvilket også medfører hurtigere indlæsningstid.

JavaScript?

Bootstrap 5 bruger JavaScript til forskellige komponenter (som modal, tooltip, popup osv.). Men hvis du kun bruger Bootstrap's CSS-del, har du ikke brug for dem.

Download Bootstrap 5

Hvis du vil downloade og hoste Bootstrap 5 selv, besøg https://getbootstrap.com/og følg derefter instruktionerne der.

Opret din første webside med Bootstrap 5

1. Tilføj HTML5 dokumenttype

Bootstrap 5 bruger HTML-elementer og CSS-attributter, der kræver HTML5 doctype.

Inkluder altid HTML5 doctype, samt lang-attribut og korrekt titel, tegnsætning:

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

2. Bootstrap 5 mobile-first

Bootstrap 5's designmål er responsivitet til mobile enheder. Mobile-first-stil er en del af kernekassen.

For at sikre korrekt rendering og touch-zoom, skal du i <head> Tilføj følgende i elementet <meta> Mærke:

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

width=device-width Indstiller siderens bredde til at følge enhedens screen-width (kan variere afhængigt af enhed).

initial-scale=1 Indstiller browserens første skærmindlæsningsinitialskala.

3. Kontainer

Bootstrap 5 endnu brug for en element, der kan indpakke webstedets indhold.

Der er to containerklasser til rådighed at vælge imellem:

  1. .container klassen tilbyder en responsiv fast bredde container
  2. .container-fluid klassen tilbyder en fuld bredde container, der strækker sig over hele vinduesbredden

To grundlæggende Bootstrap 5-sider

Container-eksempel

Følgende eksempel viser koden til en grundlæggende Bootstrap 5-side (med responsiv fast bredde container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap-eksempel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Min første Bootstrap-side</h1>
  <p>Dette er placeret i .container-klassen.</p>
  <p>.container-klassen tilbyder en responsiv fast bredde container.</p>
</div>
</body>
</html>

Prøv det selv

Container Fluid-eksempel

Følgende eksempel viser koden til en grundlæggende Bootstrap 5-side (med fuld bredde container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap-eksempel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Min første Bootstrap-side</h1>
  <p>Dette er placeret i .container-fluid-klassen.</p>
  <p>.container-fluid-klassen tilbyder en fuld bredde container, der strækker sig over hele vinduesbredden.</p>
</div>
</body>
</html>

Prøv det selv