Begjinne mei Bootstrap

Bootstrap is in krêftige, mei funksjes fol frontend toolkit. Bou alles - fan prototype oant produksje - yn minuten.

Op dizze side

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.htmlbestâ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-sizingwearde fan content-boxnei border-box. Dit soarget foar paddinggjin 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.