HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Begin

❮ Vorige Volgende ❯

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 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 Geskiedenis

Bootstrap is ontwikkel deur Mark Otto en Jacob Thornton by Twitter, en vrygestel as 'n oopbronproduk in Augustus 2011 op GitHub.

In Junie 2014 was Bootstrap die nr.1-projek op GitHub!

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 3 is mobiele-eerste-style deel van die kernraamwerk
  • Blaaierversoenbaarheid: Bootstrap is versoenbaar met alle moderne blaaiers (Chrome, Firefox, Internet Explorer, Edge, Safari en Opera)

Bootstrap weergawes

Hierdie tutoriaal volg Bootstrap 3 , wat vrygestel is in 2013. Ons dek egter ook nuwer weergawes; Bootstrap 4 (vrygestel 2018) en Bootstrap 5 (vrygestel in 2021) .

Bootstrap 5 is die nuutste weergawe van Bootstrap ; met nuwe komponente, vinniger stylblaaie, meer reaksie, ens. 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.

Waar om Bootstrap te kry?

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

Jy kan:

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

Laai tans Bootstrap af

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

Bootstrap CDN

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

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

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Een voordeel van die gebruik van die Bootstrap CDN:
Baie gebruikers het reeds Bootstrap van MaxCDN afgelaai wanneer hulle 'n ander webwerf besoek. As gevolg hiervan, sal dit vanaf die kas gelaai word wanneer hulle jou webwerf besoek, wat lei tot vinniger laai tyd. 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
Bootstrap gebruik jQuery vir JavaScript-inproppe (soos modals, tooltips, ens.). As jy egter net die CSS-deel van Bootstrap gebruik, het jy nie jQuery nodig nie.

Skep eerste webblad met bootstrap

1. Voeg die HTML5 doctype by

Bootstrap gebruik HTML-elemente en CSS-eienskappe wat die HTML5 doctype 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 3 is mobiele eerste

Bootstrap 3 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:

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

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 vereis ook 'n bevat-element om werf-inhoud toe te draai.

Daar is twee houerklasse om van te kies:

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

Twee basiese selflaaibladsye

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

Voorbeeld

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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-bladsy (met 'n volle breedte houer):

Voorbeeld

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 ❯