Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

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 .


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

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

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.