Begin met Bootstrap
Bootstrap is 'n kragtige, funksiebelaaide frontend-gereedskapstel. Bou enigiets - van prototipe tot produksie - binne minute.
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.html
lê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-sizing
waarde van content-box
na border-box
. Dit verseker dat padding
dit 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.