Begjinne mei Bootstrap
Bootstrap is in krêftige, mei funksjes fol frontend toolkit. Bou alles - fan prototype oant produksje - yn minuten.
Flugge start
Begjinne troch Bootstrap's produksje-klear CSS en JavaScript fia CDN op te nimmen sûnder de needsaak foar boustappen. Sjoch it yn 'e praktyk mei dizze Bootstrap CodePen-demo .
-
Meitsje in nij
index.html
bestân yn jo projektroot. Omfetsje de<meta name="viewport">
tag ek foar goed responsyf gedrach yn mobile apparaten.<!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>
-
Omfetsje Bootstrap's CSS en JS. Plak de
<link>
tag yn 'e<head>
foar ús CSS, en de<script>
tag foar ús JavaScript-bondel (ynklusyf Popper foar it pleatsen fan dropdowns, poppers en tooltips) foar it sluten</body>
. Learje mear oer ús CDN-keppelings .<!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>
Jo kinne ek Popper en ús JS apart opnimme. As jo net fan plan binne dropdowns, popovers of tooltips te brûken, bewarje dan wat kilobytes troch Popper net op te nimmen.
<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>
-
Hallo wrâld! Iepenje de side yn jo browser fan kar om jo Bootstrapped-side te sjen. No kinne jo begjinne te bouwen mei Bootstrap troch jo eigen yndieling te meitsjen , tsientallen komponinten ta te foegjen en ús offisjele foarbylden te brûken .
CDN keppelings
As referinsje binne hjir ús primêre CDN-keppelings.
Beskriuwing | 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 |
Jo kinne ek de CDN brûke om ien fan ús oanfoljende builds op te heljen neamd yn 'e ynhâld side .
Folgjende stappen
-
Lês in bytsje mear oer guon wichtige globale omjouwingsynstellingen dy't Bootstrap brûkt.
-
Lês oer wat is opnaam yn Bootstrap yn ús seksje ynhâld en de list mei komponinten dy't JavaScript nedich binne hjirûnder.
-
In bytsje mear krêft nedich? Beskôgje it bouwen mei Bootstrap troch de boarnebestannen op te nimmen fia pakketbehearder .
-
Op syk nei Bootstrap te brûken as in module mei
<script type="module">
? Ferwize asjebleaft nei ús gebrûk fan Bootstrap as module seksje.
JS komponinten
Benijd hokker komponinten ús JavaScript en Popper eksplisyt fereaskje? Klikje op 'e keppeling foar komponinten sjen litte hjirûnder. As jo net wis binne oer de algemiene sidestruktuer, bliuw dan lêze foar in foarbyldsidesjabloan.
Toan komponinten dy't JavaScript nedich binne
- Alerts foar ûntslach
- Knoppen foar it wikseljen fan steaten en karfakje / radiofunksjonaliteit
- Carousel foar alle slide gedrach, kontrôles en yndikatoaren
- Ynklap foar it wikseljen fan sichtberens fan ynhâld
- Dropdowns foar werjaan en posysjonearring (fereasket ek Popper )
- Modalen foar werjaan, posysjonearring en rôljegedrach
- Navbar foar it útwreidzjen fan ús Collapse en Offcanvas-plugins om responsyf gedrach te ymplementearjen
- Navs mei de Tab-plugin foar it wikseljen fan ynhâldpanielen
- Offcanvases foar werjaan, posysjonearring en rôljegedrach
- Scrollspy foar scrollgedrach en navigaasjeupdates
- Toasts foar werjaan en ûntslaan
- Tooltips en popovers foar werjaan en posysjonearring (fereasket ek Popper )
Wichtige globalen
Bootstrap brûkt in hantsjefol wichtige globale stilen en ynstellingen, dy't allegear hast allinich binne rjochte op de normalisaasje fan cross-browserstilen. Lit ús dûke yn.
HTML5 doctype
Bootstrap fereasket it gebrûk fan it HTML5 doctype. Sûnder it sille jo wat funky en ûnfolsleine styling sjen.
<!doctype html>
<html lang="en">
...
</html>
Responsive meta tag
Bootstrap wurdt earst mobyl ûntwikkele , in strategy wêryn wy earst koade optimalisearje foar mobile apparaten en dan komponinten opskaalje as nedich mei CSS-mediafragen. Foegje de responsive viewport-metatag ta oan jo <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Jo kinne in foarbyld fan dit yn aksje sjen yn 'e rappe start .
Box-sizing
Foar mear rjochtlinige grutte yn CSS, skeakelje wy de globale box-sizing
wearde fan content-box
nei border-box
. Dit soarget foar padding
gjin ynfloed op de definitive berekkene breedte fan in elemint, mar it kin problemen feroarsaakje mei guon software fan tredden lykas Google Maps en Google Custom Search Engine.
By de seldsume gelegenheid moatte jo it oerskriuwe, brûk sa'n ding as it folgjende:
.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.