Source

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, moun yo bay jsDelivr 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Anpil nan eleman nou yo mande pou itilize JavaScript pou fonksyone. Espesyalman, yo mande pou jQuery , Popper.js , ak pwòp grefon JavaScript nou yo. Mete 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.js, ak Lè sa a, grefon JavaScript nou an.

Nou itilize slim build jQuery a , men vèsyon konplè a tou sipòte.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Kirye ki eleman klèman mande jQuery, JS nou an, ak Popper.js? 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.

Nou bootstrap.bundle.jsepi bootstrap.bundle.min.jsenkli Popper , men se pa jQuery . Pou plis enfòmasyon sou sa ki enkli nan Bootstrap, tanpri gade seksyon kontni nou an.

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.js )
  • Modèl pou montre, pwezante, ak konpòtman woulo liv
  • Navbar pou pwolonje Plugin Collapse nou an pou aplike konpòtman ki reponn
  • Konsèy zouti ak popovers pou montre ak pwezante (tou mande pou Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 ak eleman sit ou a.

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, 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 ::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.

  • Swiv @getbootstrap sou Twitter .
  • Li epi abònman nan Blog ofisyèl Bootstrap la .
  • Chat ak Bootstrappers parèy yo nan IRC. Sou irc.freenode.netsèvè a, nan ##bootstrapchanèl la.
  • Ou ka jwenn èd pou 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.