Begin met Bootstrap

Bootstrap is 'n kragtige, funksiebelaaide frontend-gereedskapstel. Bou enigiets - van prototipe tot produksie - binne minute.

Op hierdie bladsy

Vinnige begin

Begin deur Bootstrap se produksie-gereed CSS en JavaScript via CDN in te sluit sonder dat enige boustappe nodig is. Sien dit in die praktyk met hierdie Bootstrap CodePen-demo .

Skep 'n nuwe index.htmllêer in jou projekwortel. Sluit die <meta name="viewport">merker ook in vir behoorlike responsiewe gedrag in mobiele toestelle.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Sluit Bootstrap se CSS en JS in. Plaas die <link>merker in die <head>vir ons CSS, en die <script>merker vir ons JavaScript-bundel (insluitend Popper vir die posisionering van aftrekkies, poppers en gereedskapwenke) voor die sluiting </body>. Kom meer te wete oor ons CDN-skakels .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Jy kan ook Popper en ons JS afsonderlik insluit. As jy nie van plan is om dropdowns, popovers of tooltips te gebruik nie, spaar 'n paar kilogrepe deur nie Popper in te sluit nie.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Hello Wêreld! Maak die bladsy in jou blaaier van jou keuse oop om jou Bootstrapped-bladsy te sien. Nou kan jy begin bou met Bootstrap deur jou eie uitleg te skep , dosyne komponente by te voeg en ons amptelike voorbeelde te gebruik .

CDN skakels

As verwysing, hier is ons primêre CDN-skakels.

Beskrywing	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Jy kan ook die CDN gebruik om enige van ons bykomende bouwerk wat in die Inhoud-bladsy gelys is, te gaan haal .

Volgende stappe

Lees 'n bietjie meer oor 'n paar belangrike globale omgewing-instellings wat Bootstrap gebruik.
Lees oor wat by Bootstrap ingesluit is in ons inhoudsafdeling en die lys komponente wat JavaScript benodig hieronder.
Het jy 'n bietjie meer krag nodig? Oorweeg dit om met Bootstrap te bou deur die bronlêers via pakketbestuurder in te sluit .
Wil jy Bootstrap as 'n module gebruik met <script type="module">? Verwys asseblief na ons gebruik van Bootstrap as 'n module- afdeling.

JS 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
Navbalk om ons Invou- en Offcanvas-inproppe uit te brei om responsiewe gedrag te implementeer
Navs met die Tab-inprop om inhoudvensters te wissel
Offcanvases vir vertoon, posisioneer en blaai gedrag
Scrollspy vir rolgedrag en navigasie-opdaterings
Heildronk vir vertoon en afmaak
Gereedskapwenke en popovers vir vertoon en posisionering (vereis ook Popper )

Belangrike globale

Bootstrap gebruik 'n handvol belangrike globale style en instellings, 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 en onvolledige stilering sien.

<!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 vinnige begin .

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;
}

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Ask and explore our GitHub Discussions.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.