Bandá na Bootstrap

Bootstrap ezali trousse ya bisaleli ya frontend ya makasi, oyo etondi na makambo mingi. Tongela eloko nyonso —kobanda na prototype tii na kobimisa yango —na miniti moke.

Na lokasa oyo

Kobanda nokinoki

Bandá na kokɔtisa CSS mpe JavaScript ya Bootstrap oyo ezali prêt mpo na kobimisa yango na nzela ya CDN kozanga ete ozala na mposa ya kosala ba étapes ya kotonga. Tala yango na pratique na démonstration oyo ya Bootstrap CodePen .

Bosala index.htmlfichier ya sika na root ya projet na bino. Botia <meta name="viewport">tag lokola pona comportement ya réponse ya malamu na ba appareils mobiles.

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

Botia CSS na JS ya Bootstrap. Tia <link>elembo na kati ya <head>mpo na CSS na biso, mpe <script>elembo mpo na liboke na biso ya JavaScript (na kati na yango Popper mpo na kotya ba dropdowns, ba poppers, mpe ba toli ya bisaleli) liboso ya bokangami </body>. Yekola makambo mingi na ntina ya ba liens na biso ya CDN .

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

Okoki pe ko kotisa Popper na JS na biso separatement. Soki ozali kokana te kosalela ba dropdowns, ba popovers, to ba tolips ya bisaleli, bomba mwa kilobytes na kokɔtisáká Popper te.

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

Mbote, mokili! Fungola lokasa na navigateur oyo oponi mpo na komona lokasa na yo ya Bootstrapped. Sikoyo okoki kobanda kotonga na Bootstrap na kosala layout na yo moko , kobakisa ba douzaines ya ba composants , mpe kosalela ba exemples officiels na biso .

Ba liens ya CDN

Comme référence, awa ezali ba liens na biso ya CDN ya liboso.

Ndimbola	URL ya motángo
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`

Okoki mpe kosalela CDN mpo na kozwa moko ya bandako na biso ya kobakisa oyo ezali na lokasa ya Makambo oyo ezali na kati .

Makambo oyo elandi

Tanga mwa mingi na ntina ya mwa ba paramètres ya ntina ya environnement mondial oyo Bootstrap esalela.
Tanga makambo oyo ezali na Bootstrap na eteni na biso ya makambo mpe liste ya biloko oyo esɛngaka JavaScript awa na nse.
Esengeli na mwa nguya mosusu? Tala kotonga na Bootstrap na kokotisa ba fichiers ya source na nzela ya gestionnaire ya ba paquets .
Ozali koluka kosalela Bootstrap lokola module na <script type="module">? Svp tala biso kosalela Bootstrap lokola eteni ya module .

Ba composants ya JS

Curieux ba composants nini explicitement esengaka JavaScript na Popper na biso? Finá na lien oyo ezali kolakisa biloko oyo ezali awa na nse. Soki ozali ata moke te na bondimi na ntina ya ebongiseli ya lokasa ya monene, kobá kotánga mpo na ndakisa ya modèle ya lokasa.

Lakisa ba composants oyo esengaka JavaScript

Ba alertes pona ko démissionner
Ba boutons mpo na ba états ya kobalusa mpe fonctionnalité ya case ya kotiya elembo/radio
Carousel mpo na bizaleli nyonso ya diapositive, ba contrôles, mpe ba indicateurs
Collapse mpo na kobalusa visibilité ya contenus
Ba dropdowns pona kolakisa pe ko positionner (esengaka pe Popper )
Modals mpo na kolakisa, ko positionner, mpe comportement ya défilement
Navbar mpo na koyeisa monene ba plugins na biso ya Collapse mpe Offcanvas mpo na kosalela bizaleli ya koyanola
Navs na plugin ya Tab mpo na kobongola ba panneaux ya contenus
Offcanvases mpo na kolakisa, ko positionner, mpe comportement ya défilement
Scrollspy mpo na bizaleli ya défilement mpe mises à jour ya navigation
Toasts pona kolakisa pe ko démissionner
Tooltips mpe popovers mpo na kolakisa mpe positionnement (esengaka mpe Popper ) .

Ba globales ya ntina

Bootstrap esalelaka mwa ndambo ya ba styles mpe ba paramètres ya ntina ya mokili mobimba, oyo nyonso ezali presque exclusivement orienté na normalisation ya ba styles ya navigateur croisé. To plonge na kati.

Lolenge ya doctype ya HTML5

Bootstrap esengaka kosalela doctype HTML5. Sans yango, okomona mua ba stylings funky et incomplètes.

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

Etiquette ya meta oyo ezo répondre

Bootstrap is developed mobile first , stratégie oyo to optimiser code pona ba appareils mobiles liboso et puis to échelle ba composants ndenge esengeli en utilisant ba requêtes ya média CSS. Mpo na kosala ete kosala malamu mpe kosala zoom ya kosimba mpo na baaparɛyi nyonso, bakisá elembo ya méta ya port de vue oyo ezali koyanola na <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Okoki komona ndakisa ya likambo oyo na misala na ebandeli ya mbangu .

Kosala bonene ya bakɛsi

Mpo na bonene ya semba mingi na CSS, tobongoli box-sizingmotuya ya mokili mobimba uta content-boxna border-box. Yango ezali kosala ete paddingezala na bopusi te likoló na bonene ya nsuka oyo etángamaki ya eloko moko, kasi ekoki kobimisa mikakatano na mwa ba logiciels ya bato mosusu lokola Google Maps mpe Google Custom Search Engine.

Na libaku oyo emonanaka mingi te oyo osengeli koboya yango, salelá eloko lokola oyo elandi:

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

Na eteni oyo ezali likolo, biloko oyo ekangami —na kati na yango makambo oyo esalemi na nzela ya ::beforempe ::after—nyonso ekozwa libula oyo elakisami box-sizingmpo na yango .selector-for-some-widget.

Yekola makambo mingi na ntina ya modèle ya boîte mpe dimensionnement na CSS Tricks .

Bobandi lisusu

Mpo na kobongisa rendu croisé ya navigateur, tosalelaka Reboot mpo na kobongisa makambo oyo ezali na boyokani te na kati ya ba navigateurs mpe ba appareils wana tozali kopesa mwa ba réinitialisations ya makanisi mingi na ba éléments HTML oyo bato mingi basalelaka.

Esika bofandi

Bozala na ntango ya sika na ntina ya bokeli ya Bootstrap mpe bokutana na lisanga na bisaleli oyo ya lisungi.

Tanga mpe s'abonner na Blog Officiel ya Bootstrap .
Tuna mpe tala Masolo na biso ya GitHub .
Chat na baninga Bootstrappers na IRC. Na irc.libera.chatserveur, na #bootstrapchaîne.
Lisalisi ya bosaleli ekoki kozwama na Stack Overflow (ezali na elembo bootstrap-5).
Ba développeurs basengeli kosalela mot clé bootstrapna ba paquets oyo e modifier to ebakisaka na fonctionnalité ya Bootstrap tango ya ko distribuer na nzela ya npm to ba mécanismes ya livraison ya ndenge wana pona découverte maximale.

Okoki pe kolanda @getbootstrap na Twitter pona ba gossip ya sika pe ba vidéos musicales ya somo.