Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Kòmanse ak Bootstrap

Bootstrap se yon zouti entèfas ki gen anpil karakteristik. Bati nenpòt bagay-soti nan pwototip nan pwodiksyon-nan minit.

Nan paj sa a

Demaraj rapid

Kòmanse pa enkli CSS ak JavaScript ki pare pou pwodiksyon Bootstrap atravè CDN san yo pa bezwen okenn etap konstriksyon. Gade li an pratik ak Demo Bootstrap CodePen sa a .


  1. Kreye yon nouvo index.htmldosye nan rasin pwojè ou a. Mete <meta name="viewport">tag la tou pou bon konpòtman reponn nan aparèy mobil.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Mete CSS ak JS Bootstrap la. Mete <link>tag nan <head>pou CSS nou an, ak <script>tag pou pake JavaScript nou an (ki gen ladan Popper pou pwezante dropdowns, poppers, ak konsèy sou zouti) anvan fèmen an </body>. Aprann plis sou lyen CDN nou yo .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Ou ka gen ladan tou Popper ak JS nou an separeman. Si ou pa planifye pou itilize dropdowns, popovers, oswa tooltips, sove kèk kilobyte pa enkli Popper.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Bonjou, mond! Louvri paj la nan navigatè ou chwazi a pou wè paj Bootstrapped ou a. Koulye a, ou ka kòmanse bati ak Bootstrap lè w kreye pwòp layout ou , ajoute plizyè douzèn konpozan , epi itilize egzanp ofisyèl nou yo .

Kòm referans, isit la se lyen prensipal CDN nou yo.

Deskripsyon URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Ou kapab tou itilize CDN a pou chèche nenpòt nan konstriksyon adisyonèl nou yo ki nan lis nan paj Kontni an .

Pwochen etap yo

JS konpozan

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 grefon Collapse ak Offcanvas nou yo pou aplike konpòtman ki reponn
  • Navs ak Plugin Tab la pou baskile fenèt kontni
  • Offcanvases pou montre, pwezante, ak konpòtman woulo liv
  • Scrollspy pou konpòtman woulo liv ak mizajou navigasyon
  • Toasts pou montre ak ranvwaye
  • Konsèy zouti ak popovers pou montre ak pwezante (tou mande pou Popper )

Global enpòtan

Bootstrap anplwaye yon ti ponyen estil mondyal ak anviwònman enpòtan, tout nan yo se prèske sèlman oryante nan nòmalizasyon an nan estil kwaze navigatè. Ann plonje nan.

HTML5 doctype

Bootstrap mande pou itilize HTML5 doctype. San li, ou pral wè kèk style funky ak enkonplè.

<!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 kòmansman an rapid .

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 .
  • Mande epi eksplore Diskisyon GitHub nou yo .
  • 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.