Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

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.

Op dizze side

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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

In protte fan ús komponinten fereaskje it gebrûk fan JavaScript om te funksjonearjen. Spesifyk fereaskje se ús eigen JavaScript-plugins en Popper . Plak ien fan de folgjende <script>s tichtby it ein fan jo siden, rjochts foar de ôfslutende </body>tag, om se yn te skeakeljen.

Bondel

Omfetsje elke Bootstrap JavaScript-plugin en ôfhinklikens mei ien fan ús twa bondels. Beide bootstrap.bundle.jsen bootstrap.bundle.min.jsomfetsje Popper foar ús tooltips en popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Modules

As jo ​​​​brûke <script type="module">, ferwize dan nei ús Bootstrap brûke as module seksje.

Components

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-plugin om responsyf gedrach te ymplementearjen
  • Toasts foar werjaan en ûntslaan
  • Tooltips en popovers foar werjaan en posysjonearring (fereasket ek Popper )
  • Scrollspy foar scrollgedrach en navigaasjeupdates

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

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Foar folgjende stappen, besykje de Layout -dokuminten of ús offisjele foarbylden om te begjinnen mei it pleatsen fan de ynhâld en komponinten fan jo side.

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 rjochte binne 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">

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-5).
  • 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.