Bootstrap 5 Basics

Aanbevolen cursus:

  • Wat is Bootstrap?
  • Bootstrap bevat ontwerptemplates gebaseerd op HTML en CSS, voor lay-out, formulieren, knoppen, tabellen, navigatie, modaal, slideshow enz.
  • Bootstrap biedt een rijke verzameling JavaScript-plug-ins
  • Bootstrap maakt het u gemakkelijk om responsieve ontwerpen te maken

Wat is responsief webontwerp?

Responsieve webontwerp is bedoeld om websites te creëren die automatisch aanpassen, zodat de gebruikerservaring op alle apparaten verbeterd wordt, of het nu een mobiel of een groot desktop is.

Bootstrap 5 voorbeeld

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Mijn eerste Bootstrap-pagina</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Colom 1: Voorjaar</h3>
      <p>Op een heldere dag zoek ik naar geurige bloemen aan de oever van de Sishui, de onbegrensde landschappen zijn plotseling nieuw.</p>
      <p>Met gemak herken ik het gezicht van de oostelijke wind, duizenden kleuren zijn altijd voorjaar.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colom 2: Eerste zomerse absolute</h3>
      <p>De felrode en paarse bloemen zijn tot stof geworden, de klokkenluider roept dat de zomer nieuw is.</p>
      <p>De wilgen en vlas langs de weg zijn eindeloos, pas nu weet ik dat ik een vredevol mens ben.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colom 3: Bergwandeling</h3>
      <p>Ver van de koude heuveltoppen loopt een steile steenweg, waar iemand woont in de wolkendichte vallei.</p>
      <p>Stop en geniet van de avond in het vallende loofhout, de vriesdroppels zijn roder dan de bloemen in februari.</p>
    </div>
  </div>
</div>

Probeer het zelf

Bootstrap versie

Bootstrap 5 (gepubliceerd in 2021) is de nieuwste versie van Bootstrap (gepubliceerd in 2013); met nieuwe componenten, snellere stijlsheets biedt het een snellere responsiviteit.

Bootstrap 5 ondersteunt de nieuwste stabiele versies van alle主要 browsers en platforms. Maar het ondersteunt geen Internet Explorer 11 en oudere versies.

Het belangrijkste verschil tussen Bootstrap 5 en Bootstrap 3 & 4 is dat Bootstrap 5 is overgeschakeld naar Vanilla JavaScript in plaats van jQuery.

Opmerking:Het team ondersteunt nog steeds cruciale foutcorrecties en documentwijzigingen voor Bootstrap 3 en Bootstrap 4, het is volledig veilig om ze te blijven gebruiken. Maar er zullen geen nieuwe functies aan worden toegevoegd.

Waarom Bootstrap gebruiken?

De voordelen van Bootstrap:

  • Gebruiksvriendelijk:Iedereen die basisbegrip heeft van HTML en CSS kan Bootstrap direct beginnen te gebruiken.
  • Responsive eigenschappen:Bootstrap's responsive CSS kan worden aangepast voor smartphones, tablets en desktops.
  • Mobiele-first aanpak:In Bootstrap is het mobiele-first stijl een integraal onderdeel van het kernekader.
  • Browser compatibiliteit:Bootstrap 5 is compatibel met alle moderne browsers (Chrome, Firefox, Edge, Safari en Opera).

Let op:Als u ondersteuning nodig heeft voor IE11 en oudere versies, moet u BS4 of BS3 gebruiken.

Waar kunt u Bootstrap 5 verkrijgen?

Er zijn twee manieren om Bootstrap 5 op uw eigen website te gebruiken.

U kunt:

  • Bevat Bootstrap 5 van de CDN
  • Bootstrap 5 van getbootstrap.com downloaden

Bootstrap 5 CDN

Als u Bootstrap 5 niet zelf wilt downloaden en hosten, kunt u het引用 van CDN (Content Delivery Network).

CodeW3C.com biedt CDN-ondersteuning voor Bootstrap CSS en JavaScript:

MaxCDN:

<!-- Nieuwst gecompileerde en gecomprimeerde CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- Nieuwst gecompileerde JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Een van de voordelen van het gebruik van Bootstrap 5 CDN:

Vele gebruikers hebben Bootstrap 5 al gedownload van jsDelivr toen ze een andere site bezochten. Daarom wordt het van de cache geladen wanneer ze uw website bezoeken, wat de laadtijd verkort. Bovendien zorgen de meeste CDN's ervoor dat zodra een gebruiker een bestand van hen aanvraagt, het van de dichtstbijzijnde server wordt geleverd, wat ook een snellere laadtijd tot gevolg heeft.

JavaScript?

Bootstrap 5 gebruikt JavaScript voor verschillende componenten (zoals modalen, tooltips, pop-ups, enz.). Maar als u alleen de CSS-delen van Bootstrap gebruikt, zijn deze niet nodig.

Bootstrap 5 Downloaden

Als u Bootstrap 5 zelf wilt downloaden en hosten, bezoek dan https://getbootstrap.com/en volg daarna de instructies daar.

Maak uw eerste webpagina met Bootstrap 5

1. Voeg de HTML5 Document Type toe

Bootstrap 5 gebruikt HTML-elementen en CSS-eigenschappen die de HTML5 doctype vereisen.

Gebruik altijd de HTML5 doctype aan het begin van de pagina, samen met de lang-eigenschap en de juiste titel, en character set:

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

2. Bootstrap 5 Mobile First

Het ontwerpdoel van Bootstrap 5 is responsieve mobiele apparaten. Mobile first-stijlen zijn onderdeel van het kernekader.

Om de juiste weergave en aanraakvergroting te waarborgen, voeg dan <head> Voeg de volgende binnen het element toe <meta> Markering:

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

width=device-width Stelt de breedte van de pagina in om te volgen met het device-width van het apparaat (kan variëren per apparaat).

initial-scale=1 Stelt de initiële schaal in van de browser bij het laden van de pagina.

3. Container

Bootstrap 5 nog een element nodig om de inhoud van de site te verpakken.

Er zijn twee containerklassen beschikbaar voor keuze:

  1. .container De klasse biedt een responsieve vaste breedte container
  2. .container-fluid De klasse biedt een volledige breedte container, die de hele breedte van het venster overspant

Twee basis Bootstrap 5-pagina's

Container Voorbeeld

Het volgende voorbeeld toont de code van een basis Bootstrap 5-pagina (met een responsieve vaste breedte container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Voorbeeld</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>Mijn eerste Bootstrap-pagina</h1>
  <p>Deze sectie bevindt zich in de .container klasse.</p>
  <p>.container klasse biedt een responsieve vaste breedte container.</p>
</div>
</body>
</html>

Probeer het zelf

Container Fluid Voorbeeld

Het volgende voorbeeld toont de code van een basis Bootstrap 5-pagina (met een volledige breedte container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Voorbeeld</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>Mijn eerste Bootstrap-pagina</h1>
  <p>Deze sectie bevindt zich in de .container-fluid klasse.</p>
  <p>.container-fluid klasse biedt een volledige breedte container, die de hele breedte van het venster overspant.</p>
</div>
</body>
</html>

Probeer het zelf