Bootstrap 4 Kom aan die gang

Wat is Bootstrap?

Bootstrap is 'n gratis front-end raamwerk vir vinniger en makliker webontwikkeling
Bootstrap bevat HTML- en CSS-gebaseerde ontwerpsjablone vir tipografie, vorms, knoppies, tabelle, navigasie, modale, beeldkarrousels en vele ander, sowel as opsionele JavaScript-inproppe
Bootstrap gee jou ook die vermoë om maklik responsiewe ontwerpe te skep

Wat is responsiewe webontwerp?

Responsiewe webontwerp gaan oor die skep van webwerwe wat hulself outomaties aanpas om goed te lyk op alle toestelle, van klein fone tot groot rekenaars.

Bootstrap 4 Voorbeeld

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

Bootstrap weergawes

Hierdie tutoriaal volg Bootstrap 4 , wat in 2018 vrygestel is, as 'n opgradering na Bootstrap 3 , met nuwe komponente, vinniger stylesheetc, meer responsiwiteit, ens.

Bootstrap 5 (vrygestel 2021) is die nuutste weergawe van Bootstrap ; Dit ondersteun die nuutste, stabiele vrystellings van alle groot blaaiers en platforms. Internet Explorer 11 en af word egter nie ondersteun nie.

Die belangrikste verskille tussen Bootstrap 5 en Bootstrap 3 & 4 is dat Bootstrap 5 oorgeskakel het na JavaScript in plaas van jQuery .

Let wel: Bootstrap 3 en Bootstrap 4 word steeds deur die span ondersteun vir kritieke foutoplossings en dokumentasieveranderings, en dit is heeltemal veilig om voort te gaan om dit te gebruik. Nuwe kenmerke sal egter NIE daarby gevoeg word nie.

Waarom Bootstrap gebruik?

Voordele van Bootstrap:

Maklik om te gebruik: Enigiemand met net basiese kennis van HTML en CSS kan Bootstrap begin gebruik
Responsiewe kenmerke: Bootstrap se responsiewe CSS pas by fone, tablette en rekenaars aan
Mobiele-eerste-benadering: In Bootstrap is mobiele-eerste-style deel van die kernraamwerk
Blaaierversoenbaarheid: Bootstrap 4 is versoenbaar met alle moderne blaaiers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari en Opera)

Waar om Bootstrap 4 te kry?

Daar is twee maniere om Bootstrap 4 op jou eie webwerf te begin gebruik.

Jy kan:

Sluit Bootstrap 4 vanaf 'n CDN in
Laai Bootstrap 4 af van getbootstrap.com

Bootstrap 4 CDN

As jy nie self Bootstrap 4 wil aflaai en huisves nie, kan jy dit vanaf 'n CDN (Content Delivery Network) insluit.

jsDelivr bied CDN-ondersteuning vir Bootstrap se CSS en JavaScript. Jy moet ook jQuery insluit:

jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Een voordeel van die gebruik van die Bootstrap 4 CDN:
Baie gebruikers het reeds Bootstrap 4 van jsDelivr afgelaai wanneer hulle 'n ander webwerf besoek. Gevolglik sal dit vanaf die kas gelaai word wanneer hulle jou werf besoek, wat lei tot vinniger laaityd. Die meeste CDN's sal ook seker maak dat sodra 'n gebruiker 'n lêer daarvan versoek, dit vanaf die bediener naaste aan hulle bedien sal word, wat ook lei tot vinniger laaityd.

jQuery en Popper?
Bootstrap 4 gebruik jQuery en Popper.js vir JavaScript-komponente (soos modals, tooltips, popovers, ens.). As jy egter net die CSS-deel van Bootstrap gebruik, het jy dit nie nodig nie.

Sluitbare waarskuwings
Knoppies en merkblokkies/radioknoppies om toestande te wissel
Karrousel vir skyfies, kontroles en aanwysers
Vou in om inhoud te wissel
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

Laai tans Bootstrap 4 af

As jy self Bootstrap 4 wil aflaai en huisves, gaan na https://getbootstrap.com/ en volg die instruksies daar.

Skep eerste webbladsy met Bootstrap 4

1. Voeg die HTML5 doctype by

Bootstrap 4 gebruik HTML-elemente en CSS-eienskappe wat die HTML5-doktipe vereis.

Sluit altyd die HTML5 doctype aan die begin van die bladsy in, saam met die lang kenmerk en die korrekte karakterstel:

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

2. Bootstrap 4 is mobiele eerste

Bootstrap 4 is ontwerp om te reageer op mobiele toestelle. Mobile-first style is deel van die kernraamwerk.

Om behoorlike weergawe en raakzoom te verseker, voeg die volgende <meta>merker binne die <head>element by:

Die width=device-widthdeel stel die breedte van die bladsy in om die skermwydte van die toestel te volg (wat sal wissel na gelang van die toestel).

Die initial-scale=1deel stel die aanvanklike zoomvlak in wanneer die bladsy die eerste keer deur die blaaier gelaai word.

3. Houers

Bootstrap 4 vereis ook 'n bevat-element om werf-inhoud toe te draai.

Daar is twee houerklasse om van te kies:

Die .containerklas bied 'n responsiewe houer met vaste breedte
Die .container-fluidklas bied 'n volle breedte houer wat oor die hele breedte van die uitsigpoort strek

.houer

.houer-vloeistof

Twee Basiese Bootstrap 4-bladsye

Die volgende voorbeeld toon die kode vir 'n basiese Bootstrap 4-bladsy (met 'n responsiewe houer met vaste breedte):

Houer Voorbeeld

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

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

Die volgende voorbeeld toon die kode vir 'n basiese Bootstrap 4-bladsy (met 'n volle breedte houer):

Voorbeeld van houervloeistof

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

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ Vorige Volgende ❯

Bootstrap 4 handleiding

Bootstrap 4-rooster

Bootstrap 4 Ander

Bootstrap 4 Verw