Entwodiksyon

Kòmanse ak Bootstrap, fondasyon ki pi popilè nan mond lan pou bati sit ki reponn ak mobil premye, ak jsDelivr ak yon paj demaraj modèl.

Demaraj rapid

Kap chèche ajoute Bootstrap byen vit nan pwojè ou a? Sèvi ak jsDelivr, yon CDN sous louvri gratis. Sèvi ak yon manadjè pake oswa ou bezwen telechaje dosye sous yo? Ale nan paj telechajman an .

CSS

Kopi-kole stylesheet la <link>nan ou <head>anvan tout lòt stylesheets pou chaje CSS nou an.

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

JS

Anpil nan eleman nou yo mande pou itilize JavaScript pou fonksyone. Espesyalman, yo mande pou jQuery , Popper , ak pwòp grefon JavaScript nou yo. Nou itilize slim build jQuery a , men vèsyon konplè a tou sipòte.

Mete youn nan sa ki annapre <script>yo toupre fen paj ou yo, jis anvan </body>tag fèmen a, pou pèmèt yo. jQuery dwe vini an premye, Lè sa a Popper, ak Lè sa a, grefon JavaScript nou an.

Pakèt

Mete chak plugin JavaScript Bootstrap ak youn nan de pakèt nou yo. Tou de bootstrap.bundle.jsepi bootstrap.bundle.min.jsenkli Popper pou konsèy nou yo ak popovers, men se pa jQuery . Mete jQuery an premye, Lè sa a, yon pake JavaScript Bootstrap. Pou plis enfòmasyon sou sa ki enkli nan Bootstrap, tanpri gade seksyon kontni nou an.

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

Separe

Si w deside ale ak solisyon an scripts separe, Popper dwe vini an premye (si w ap itilize konsèy sou zouti oswa popovers), ak Lè sa a, grefon JavaScript nou an.

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

Eleman

Kirye ki konpozan klèman mande jQuery, JavaScript nou an, ak Popper? Klike sou lyen montre eleman ki anba a. Si w pa sèten sou estrikti paj la, kontinye li pou yon egzanp paj modèl.

Montre konpozan ki mande JavaScript

Alèt pou ranvwaye
Bouton pou chanje eta ak kaz / fonksyon radyo
Carousel pou tout konpòtman glise, kontwòl, ak endikatè
Efondre pou chanje vizibilite nan kontni
Dropdowns pou montre ak pwezante (tou mande pou Popper )
Modèl pou montre, pwezante, ak konpòtman woulo liv
Navbar pou pwolonje Plugin Collapse nou an pou aplike konpòtman ki reponn
Scrollspy pou konpòtman woulo liv ak mizajou navigasyon
Konsèy zouti ak popovers pou montre ak pwezante (tou mande pou Popper )

Starter modèl

Asire ou ke ou mete paj ou yo ak dènye estanda konsepsyon ak devlopman yo. Sa vle di lè l sèvi avèk yon doctype HTML5 epi ki gen ladan yon meta tag viewport pou bon konpòtman reponn. Mete li tout ansanm ak paj ou yo ta dwe sanble tankou sa a:

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

Sa a tout sa ou bezwen pou kondisyon jeneral paj. Vizite dokiman Layout yo oswa egzanp ofisyèl nou yo pou kòmanse mete kontni sit ou a ak konpozan.

Global enpòtan

Bootstrap anplwaye yon ti ponyen estil mondyal ak paramèt enpòtan ke w ap bezwen konnen lè w ap itilize li, tout sa yo prèske sèlman vize pou nòmalizasyon estil kwaze navigatè. Ann plonje nan.

HTML5 doctype

Bootstrap mande pou itilize HTML5 doctype. San li, ou pral wè kèk manier enkonplè funky, men enkli li pa ta dwe lakòz okenn okèt konsiderab.

<!doctype html>
<html lang="en">
  ...
</html>

Repons meta tag

Bootstrap devlope mobil premye , yon estrateji kote nou optimize kòd pou aparèy mobil yo an premye epi answit ogmante konpozan jan sa nesesè lè l sèvi avèk CSS medya requêtes. Pou asire bon rannman ak manyen rale pou tout aparèy, ajoute tag meta viewport ki reponn nan <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Ou ka wè yon egzanp sa a nan aksyon nan modèl starter la .

Bwat-gwosè

Pou dimensionnement pi senp nan CSS, nou chanje box-sizingvalè mondyal la soti content-boxnan border-box. Sa a asire paddingpa afekte lajè final la kalkile nan yon eleman, men li ka lakòz pwoblèm ak kèk lojisyèl twazyèm pati tankou Google Maps ak Google Custom Search Engine.

Nan okazyon ki ra ou bezwen pase sou tèt li, sèvi ak yon bagay tankou sa ki annapre yo:

.selector-for-some-widget {
  box-sizing: content-box;
}

Avèk snippet ki pi wo a, eleman enbrike—ki gen ladan kontni pwodwi atravè ::beforeak —yo ::aftertout ap eritye sa ki espesifye box-sizingpou sa .selector-for-some-widget.

Aprann plis sou modèl bwat ak gwosè nan CSS Tricks .

Rdemare

Pou amelyore rannman kwa-navigatè, nou itilize Redemaraj pou korije enkonsistans atravè navigatè ak aparèy pandan y ap bay yon ti kras plis reset eleman HTML komen.

Kominote

Rete ajou sou devlopman Bootstrap epi kontakte kominote a ak resous itil sa yo.

Li epi abònman nan Blog Ofisyèl Bootstrap la .
Chat ak Bootstrappers parèy yo nan IRC. Sou irc.libera.chatsèvè a, nan #bootstrapchanèl la.
Ou ka jwenn èd aplikasyon an nan Stack Overflow (tagged bootstrap-4).
Devlopè yo ta dwe itilize mo kle a bootstrapsou pakè ki modifye oswa ajoute nan fonksyonalite Bootstrap lè yo distribye atravè npm oswa mekanis livrezon ki sanble pou dekouvèt maksimòm.

Ou kapab tou swiv @getbootstrap sou Twitter pou dènye tripotay ak videyo mizik awizom.

CSP ak SVG entegre

Plizyè konpozan Bootstrap gen ladan SVG entegre nan CSS nou an pou mete konpozan yo toujou ak fasil atravè navigatè ak aparèy yo. Pou òganizasyon ki gen konfigirasyon CSP ki pi strik , nou te dokimante tout ka SVG entegre nou yo (yo tout yo aplike atravè background-image) pou ou ka revize opsyon ou yo pi byen.

Bouton fèmen (itilize nan alèt ak modal)
Bwat repòtaj ak bouton radyo
Fòm switch
Ikon validasyon fòm
Custom chwazi meni
Kontwòl Carousel
Navbar bouton baskile

Dapre konvèsasyon kominote a , kèk opsyon pou adrese sa a nan pwòp kodbaz ou genyen ladan yo ranplase URL yo ak byen ki te akomode lokalman, retire imaj yo epi sèvi ak imaj inline (pa posib nan tout eleman), ak modifye CSP ou a. Rekòmandasyon nou an se ak anpil atansyon revize pwòp règleman sekirite ou epi deside sou yon pi bon chemen pou pi devan, si sa nesesè.