Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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.