Ynlieding

Begjin mei Bootstrap, it populêrste ramt fan 'e wrâld foar it bouwen fan responsive, mobile-earste siden, mei jsDelivr en in sjabloanstartpagina.

Flugge start

Wolle jo Bootstrap fluch tafoegje oan jo projekt? Brûk jsDelivr, in frije iepen boarne CDN. In pakketbehearder brûke of de boarnebestannen moatte downloade? Gean nei de downloadside .

CSS

Kopiearje-plakke it stylblêd <link>yn jo <head>foar alle oare stylblêden om ús CSS te laden.

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

JS

In protte fan ús komponinten fereaskje it gebrûk fan JavaScript om te funksjonearjen. Spesifyk fereaskje se jQuery , Popper , en ús eigen JavaScript-plugins. Wy brûke jQuery's slim build , mar de folsleine ferzje wurdt ek stipe.

Plak ien fan de folgjende <script>s tichtby it ein fan jo siden, rjochts foar de ôfslutende </body>tag, om se yn te skeakeljen. jQuery moat earst komme, dan Popper, en dan ús JavaScript-plugins.

Bondel

Omfetsje elke Bootstrap JavaScript-plugin mei ien fan ús twa bondels. Beide bootstrap.bundle.jsen bootstrap.bundle.min.jsomfetsje Popper foar ús tooltips en popovers, mar net jQuery . Meitsje earst jQuery op, dan in Bootstrap JavaScript-bundel. Foar mear ynformaasje oer wat is opnommen yn Bootstrap, sjoch asjebleaft ús seksje ynhâld .

<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>

Skiede

As jo beslute om te gean mei de aparte skriptoplossing, moat Popper earst komme (as jo tooltips of popovers brûke), en dan ús JavaScript-plugins.

<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>

Components

Benijd hokker komponinten eksplisyt jQuery, ús JavaScript, en Popper fereaskje? Klikje op 'e keppeling foar komponinten sjen litte hjirûnder. As jo net wis binne oer de 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-plugin om responsyf gedrach te ymplementearjen
Scrollspy foar scrollgedrach en navigaasjeupdates
Tooltips en popovers foar werjaan en posysjonearring (fereasket ek Popper )

Starter sjabloan

Wês wis dat jo siden ynsteld hawwe mei de lêste noarmen foar ûntwerp en ûntwikkeling. Dat betsjut dat jo in HTML5-doktype brûke en in viewport-meta-tag opnimme foar juste responsive gedrach. Set it allegear byinoar en jo siden moatte der sa útsjen:

<!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>

Dat is alles wat jo nedich binne foar algemiene side-easken. Besykje de Layout -dokuminten as ús offisjele foarbylden om de ynhâld en komponinten fan jo side te begjinnen.

Wichtige globalen

Bootstrap brûkt in hantsjefol wichtige globale stilen en ynstellingen wêrfan jo moatte bewust wêze as jo it brûke, 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 ûnfolsleine styling sjen, mar ynklusyf it soe gjin grutte hik moatte feroarsaakje.

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

Jo kinne in foarbyld fan dit yn aksje sjen yn it startersjabloan .

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

Mei it boppesteande snippet sille geneste eleminten - ynklusyf generearre ynhâld fia ::beforeen - allegear de spesifisearre foar dat ::aftererfje .box-sizing.selector-for-some-widget

Learje mear oer doazemodel en maatwurk by CSS Tricks .

Reboot

Foar ferbettere cross-browser-rendering, brûke wy Reboot om inkonsistinsjes oer browsers en apparaten te korrigearjen, wylst wy wat mear opinige resets leverje oan gewoane HTML-eleminten.

Mienskip

Bliuw op 'e hichte oer de ûntwikkeling fan Bootstrap en berikke de mienskip mei dizze nuttige boarnen.

Lês en abonnearje op The Official Bootstrap Blog .
Petear mei oare Bootstrappers yn IRC. Op de irc.libera.chattsjinner, yn it #bootstrapkanaal.
Implementaasjehelp kin fûn wurde by Stack Overflow (tagged bootstrap-4).
Untwikkelders moatte it kaaiwurd brûke bootstrapop pakketten dy't de funksjonaliteit fan Bootstrap wizigje of tafoegje by it fersprieden fia npm of ferlykbere leveringsmeganismen foar maksimale ûntdekking.

Jo kinne ek @getbootstrap folgje op Twitter foar de lêste roddels en bjusterbaarlike muzykfideo's.

CSP's en ynbêde SVG's

Ferskate Bootstrap-komponinten omfetsje ynbêde SVG's yn ús CSS om komponinten konsekwint en maklik te stylearjen oer browsers en apparaten. Foar organisaasjes mei strangere CSP -konfiguraasjes hawwe wy alle eksimplaren fan ús ynbêde SVG's dokumintearre (dy't allegear wurde tapast fia background-image), sadat jo jo opsjes yngeandiger kinne besjen.

Knop slute (brûkt yn warskôgings en modalen)
Oanpaste karfakjes en radioknoppen
Form switches
Form validaasje ikoanen
Oanpaste selektearje menu's
Carousel kontrôles
Navbar wikselje knoppen

Op grûn fan mienskipskonversaasje omfetsje guon opsjes foar it oanpakken fan dit yn jo eigen koadebase it ferfangen fan de URL's mei lokaal hostearre aktiva, it fuortsmiten fan de ôfbyldings en it brûken fan ynline-ôfbyldings (net mooglik yn alle komponinten), en it wizigjen fan jo CSP. Us oanbefelling is om jo eigen feiligensbelied soarchfâldich te besjen en as nedich te besluten oer in bêste paad foarút.