Inleiding

Begin met Bootstrap, die wêreld se gewildste raamwerk vir die bou van responsiewe, mobiele eerste werwe, met jsDelivr en 'n sjabloon-beginbladsy.

Vinnige begin

Wil jy Bootstrap vinnig by jou projek voeg? Gebruik jsDelivr, 'n gratis open source CDN. Gebruik u 'n pakketbestuurder of moet u die bronlêers aflaai? Gaan na die aflaaibladsy .

CSS

Kopieer-plak die stylblad <link>in jou <head>voor alle ander stylblaaie om ons CSS te laai.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Baie van ons komponente vereis die gebruik van JavaScript om te funksioneer. Spesifiek, hulle benodig jQuery , Popper en ons eie JavaScript-inproppe. Ons gebruik jQuery se skraal gebou , maar die volledige weergawe word ook ondersteun.

Plaas een van die volgende <script>s naby die einde van jou bladsye, reg voor die sluitingsmerker </body>, om hulle te aktiveer. jQuery moet eerste kom, dan Popper, en dan ons JavaScript-inproppe.

Bondel

Sluit elke Bootstrap JavaScript-inprop by een van ons twee bondels in. Beide bootstrap.bundle.jsen bootstrap.bundle.min.jssluit Popper in vir ons tooltips en popovers, maar nie jQuery nie . Sluit eers jQuery in, dan 'n Bootstrap JavaScript-bundel. Vir meer inligting oor wat by Bootstrap ingesluit is, sien asseblief ons inhoudsafdeling .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Skei

As jy besluit om met die aparte skrifte-oplossing te gaan, moet Popper eerste kom (as jy gereedskapwenke of popovers gebruik), en dan ons JavaScript-inproppe.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponente

Nuuskierig watter komponente jQuery, ons JavaScript en Popper eksplisiet vereis? Klik op die wys komponente skakel hieronder. As jy onseker is oor die 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
Navbar vir die uitbreiding van ons Invou-inprop om responsiewe gedrag te implementeer
Scrollspy vir rolgedrag en navigasie-opdaterings
Gereedskapwenke en popovers vir vertoon en posisionering (vereis ook Popper )

Beginner sjabloon

Maak seker dat jou bladsye opgestel is met die nuutste ontwerp- en ontwikkelingstandaarde. Dit beteken om 'n HTML5 doctype te gebruik en 'n viewport-meta-tag in te sluit vir behoorlike responsiewe gedrag. Sit dit alles saam en jou bladsye moet so lyk:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Dit is al wat jy nodig het vir algehele bladsyvereistes. Besoek die uitlegdokumente of ons amptelike voorbeelde om jou werf se inhoud en komponente te begin uitlê.

Belangrike globale

Bootstrap gebruik 'n handvol belangrike globale style en instellings waarvan u bewus moet wees wanneer u dit gebruik, 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 onvolledige stilering sien, maar dit behoort nie aansienlike hik te veroorsaak nie.

<!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, shrink-to-fit=no">

Jy kan 'n voorbeeld hiervan in aksie sien in die beginsjabloon .

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 sommige 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;
}

Met die bogenoemde brokkie sal geneste elemente – insluitend gegenereerde inhoud via ::beforeen ::after– almal die gespesifiseerde box-sizingdaarvoor erf .selector-for-some-widget.

Kom meer te wete oor boksmodel en grootte by CSS Tricks .

Herlaai

Vir verbeterde kruisblaaier-weergawe gebruik ons Reboot om teenstrydighede oor blaaiers en toestelle reg te stel, terwyl ons effens meer eiesinnige terugstellings na algemene HTML-elemente verskaf.

Gemeenskap

Bly op hoogte van die ontwikkeling van Bootstrap en reik uit na die gemeenskap met hierdie nuttige hulpbronne.

Lees en teken in op The Official Bootstrap Blog .
Gesels met ander Bootstrappers in IRC. Op die irc.libera.chatbediener, in die #bootstrapkanaal.
Implementeringshulp kan gevind word by Stack Overflow (gemerk bootstrap-4).
Ontwikkelaars moet die sleutelwoord gebruik bootstrapop pakkette wat die funksionaliteit van Bootstrap verander of byvoeg wanneer hulle deur npm of soortgelyke afleweringsmeganismes versprei word vir maksimum ontdekbaarheid.

Jy kan ook @getbootstrap op Twitter volg vir die nuutste skinderpraatjies en wonderlike musiekvideo's.

CSP's en ingebedde SVG's

Verskeie Bootstrap-komponente bevat ingebedde SVG's in ons CSS om komponente konsekwent en maklik oor blaaiers en toestelle te styl. Vir organisasies met strenger CSP -konfigurasies , het ons alle gevalle van ons ingebedde SVG's (wat almal toegepas word via background-image) gedokumenteer sodat jy jou opsies meer deeglik kan hersien.

Maak toe-knoppie (gebruik in waarskuwings en modale)
Pasgemaakte merkblokkies en radioknoppies
Vorm skakelaars
Vorm validering ikone
Pasgemaakte kiesspyskaarte
Karrouselkontroles
Navbar-wisselknoppies

Gebaseer op gemeenskapsgesprek , sluit sommige opsies om dit in jou eie kodebasis aan te spreek die vervanging van die URL's met bates wat plaaslik gehuisves word, die verwydering van die beelde en die gebruik van inlynbeelde (nie moontlik in alle komponente) in, en die wysiging van jou CSP. Ons aanbeveling is om jou eie sekuriteitsbeleide noukeurig te hersien en te besluit op die beste pad vorentoe, indien nodig.