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.

Nan paj sa a

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

JS

Anpil nan eleman nou yo mande pou itilize JavaScript pou fonksyone. Espesyalman, yo mande pou pwòp grefon JavaScript nou yo ak Popper . 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.

Pakèt

Mete chak plugin JavaScript Bootstrap ak depandans 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. 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/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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/@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>

Modil

Si w itilize <script type="module">, tanpri al gade nou itilize Bootstrap kòm yon seksyon modil.

Eleman

Kirye ki eleman klèman mande JavaScript nou an ak Popper? Klike sou lyen montre eleman ki anba a. Si ou pa sèten sou estrikti jeneral 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
Toasts pou montre ak ranvwaye
Konsèy zouti ak popovers pou montre ak pwezante (tou mande pou Popper )
Scrollspy pou konpòtman woulo liv ak mizajou navigasyon

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

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

Pou pwochen etap yo, vizite dokiman Layout yo oswa egzanp ofisyèl nou yo pou kòmanse mete kontni sit ou a ak eleman yo.

Global enpòtan

Bootstrap anplwaye yon ti ponyen estil mondyal enpòtan ak paramèt 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 style funky enkonplè, 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">

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 ::after, tout pral 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è yo 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 pou aplikasyon an nan Stack Overflow (tagged bootstrap-5).
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.