Inleiding

Begin met Bootstrap, die wêreld se gewildste raamwerk vir die bou van responsiewe, mobiele eerste werwe, met jsDelivr en 'n sjabloon-beginbladsy.

Op hierdie bladsy

Vinnige begin

Wil jy Bootstrap vinnig by jou projek voeg? Gebruik jsDelivr, 'n gratis open source CDN. Gebruik u 'n pakketbestuurder of moet u die bronlêers aflaai? Gaan na die aflaaibladsy .

CSS

Kopieer-plak die stylblad <link>in jou <head>voor alle ander stylblaaie om ons CSS te laai.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Baie van ons komponente vereis die gebruik van JavaScript om te funksioneer. Spesifiek, hulle benodig ons eie JavaScript-inproppe en Popper . Plaas een van die volgende <script>s naby die einde van jou bladsye, reg voor die sluitingsmerker </body>, om hulle te aktiveer.

Bondel

Sluit elke Bootstrap JavaScript-inprop en afhanklikheid by een van ons twee bondels in. Beide bootstrap.bundle.jsen bootstrap.bundle.min.jssluit Popper in vir ons tooltips en popovers. Vir meer inligting oor wat by Bootstrap ingesluit is, sien asseblief ons inhoudsafdeling .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Skei

As jy besluit om met die aparte skrifte-oplossing te gaan, moet Popper eerste kom (as jy gereedskapwenke of popovers gebruik), en dan ons JavaScript-inproppe.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modules

As jy gebruik <script type="module">, verwys asseblief na ons gebruik van Bootstrap as 'n module- afdeling.

Komponente

Nuuskierig watter komponente ons JavaScript en Popper uitdruklik vereis? Klik op die wys komponente skakel hieronder. As jy enigsins onseker is oor die algemene bladsystruktuur, bly lees vir 'n voorbeeldbladsysjabloon.

Wys komponente wat JavaScript vereis

Waarskuwings vir afwysing
Knoppies vir omskakeling van toestande en merkblokkie/radiofunksionaliteit
Karrousel vir alle glygedrag, kontroles en aanwysers
Vou in om die sigbaarheid van inhoud te wissel
Aftrekkies vir vertoon en posisionering (vereis ook Popper )
Modale vir vertoon, posisioneer en blaai gedrag
Navbar vir die uitbreiding van ons Invou-inprop om responsiewe gedrag te implementeer
Offcanvases vir vertoon, posisioneer en blaai gedrag
Heildronk vir vertoon en afmaak
Gereedskapwenke en popovers vir vertoon en posisionering (vereis ook Popper )
Scrollspy vir rolgedrag en navigasie-opdaterings

Beginner sjabloon

Maak seker dat jou bladsye opgestel is met die nuutste ontwerp- en ontwikkelingstandaarde. Dit beteken om 'n HTML5 doctype te gebruik en 'n viewport-meta-tag in te sluit vir behoorlike responsiewe gedrag. Sit dit alles saam en jou bladsye moet so lyk:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Vir volgende stappe, besoek die uitlegdokumente of ons amptelike voorbeelde om jou werf se inhoud en komponente te begin uitlê.

Belangrike globale

Bootstrap gebruik 'n handvol belangrike globale style en instellings waarvan u bewus moet wees wanneer u dit gebruik, wat almal byna uitsluitlik gerig is op die normalisering van kruisblaaierstyle. Kom ons duik in.

HTML5 doctype

Bootstrap vereis die gebruik van die HTML5 doctype. Daarsonder sal jy 'n paar funky onvolledige stilering sien, maar dit behoort nie aansienlike hik te veroorsaak nie.

<!doctype html>
<html lang="en">
  ...
</html>

Responsiewe metatag

Bootstrap word eers mobiel ontwikkel , 'n strategie waarin ons eers kode vir mobiele toestelle optimeer en dan komponente opskaal soos nodig met behulp van CSS-medianavrae. Om behoorlike weergawe en raakzoom vir alle toestelle te verseker, voeg die responsiewe kykpoort-metamerker by jou <head>.

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

Jy kan 'n voorbeeld hiervan in aksie sien in die beginsjabloon .

Doos-grootte

Vir meer eenvoudige groottes in CSS, skakel ons die globale box-sizingwaarde van content-boxna border-box. Dit verseker dat paddingdit nie die finale berekende breedte van 'n element beïnvloed nie, maar dit kan probleme veroorsaak met sekere derdeparty-sagteware soos Google Maps en Google Custom Search Engine.

By die seldsame geleentheid wat jy dit moet ignoreer, gebruik iets soos die volgende:

.selector-for-some-widget {
  box-sizing: content-box;
}

Met die bogenoemde brokkie sal geneste elemente – insluitend gegenereerde inhoud via ::beforeen ::after– almal die gespesifiseerde box-sizingdaarvoor erf .selector-for-some-widget.

Kom meer te wete oor boksmodel en grootte by CSS Tricks .

Herlaai

Vir verbeterde kruisblaaier-weergawe gebruik ons Reboot om teenstrydighede oor blaaiers en toestelle reg te stel, terwyl ons effens meer eiesinnige terugstellings na algemene HTML-elemente verskaf.

Gemeenskap

Bly op hoogte van die ontwikkeling van Bootstrap en reik uit na die gemeenskap met hierdie nuttige hulpbronne.

Lees en teken in op The Official Bootstrap Blog .
Gesels met ander Bootstrappers in IRC. Op die irc.libera.chatbediener, in die #bootstrapkanaal.
Implementeringshulp kan gevind word by Stack Overflow (gemerk bootstrap-5).
Ontwikkelaars moet die sleutelwoord gebruik bootstrapop pakkette wat die funksionaliteit van Bootstrap verander of byvoeg wanneer hulle deur npm of soortgelyke afleweringsmeganismes versprei word vir maksimum ontdekbaarheid.

Jy kan ook @getbootstrap op Twitter volg vir die nuutste skinderpraatjies en wonderlike musiekvideo's.