Maloba ya ebandeli

Bandá na Bootstrap, cadre oyo eyebani mingi na mokili mobimba mpo na kotonga ba sites oyo ekoki koyanola, oyo ezali ya liboso na telefone ya mabɔkɔ, na jsDelivr mpe lokasa ya kobanda modèle.

Kobanda nokinoki

Ozali koluka kobakisa noki Bootstrap na projet na yo? Salelá jsDelivr, CDN ya ofele oyo ezali na source ouverte. Kosalela gestionnaire ya ba paquets to esengeli ko télécharger ba fichiers source? Motó na lokasa ya ba téléchargements .

CSS

Copier-coller feuille de style <link>na yo <head>avant ba feuilles de style misusu nionso pona ko charger CSS na biso.

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

JS

Mingi ya ba composants na biso esengaka kosalela JavaScript mpo esala. Mingimingi, basengeli na jQuery , Popper , mpe ba plugins na biso moko ya JavaScript. Tosalelaka jQuery's slim build , kasi version mobimba ezali mpe kosungama.

Tia moko ya s oyo elandi<script> pene na nsuka ya nkasa na yo, kaka liboso ya </body>elembo ya bokangami, mpo na kofungola yango. jQuery esengeli eya liboso, sima Popper, mpe na sima ba plugins na biso ya JavaScript.

Liboke

Botia plugin nionso ya JavaScript ya Bootstrap na moko ya ba paquets na biso mibale. Bango mibale bootstrap.bundle.jsmpe bootstrap.bundle.min.jsesangisi Popper mpo na biso toli ya bisaleli mpe popovers, kasi te jQuery . Botia liboso jQuery, sima bosangisi JavaScript ya Bootstrap. Mpo na koyeba makambo mingi na ntina na oyo ezali na kati ya Bootstrap, talá eteni na biso ya makambo oyo ezali na kati.

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

Kokabola

Soki ozwi mokano ya kokende na solution ya ba scripts ekeseni, Popper esengeli eya liboso (soki ozali kosalela ba toli ya bisaleli to ba popovers), mpe na nsima ba plugins na biso ya JavaScript.

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

Ba composants

Curieux ba composants nini explicitement esengaka jQuery, JavaScript na biso, na Popper? Finá na lien oyo ezali kolakisa biloko oyo ezali awa na nse. Soki ozali na bondimi te na ntina ya ebongiseli ya lokasa, kobá kotánga mpo na ndakisa ya motindo 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 plugin na biso ya Collapse mpo na kosalela bizaleli ya koyanola
Scrollspy mpo na bizaleli ya défilement mpe mises à jour ya navigation
Tooltips mpe popovers mpo na kolakisa mpe positionnement (esengaka mpe Popper ) .

Modèle ya démarrage

Kobosana te ete nkasa na yo ezala na mibeko ya sika ya kosala mpe ya kosala yango. Yango elingi koloba kosalela doctype HTML5 mpe kosangisa meta tag ya viewport mpo na bizaleli ya koyanola malamu. Botia yango nionso esika moko pe ba pages na bino esengeli ezala boye:

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

Yango nde nyonso oyo osengeli na yango mpo na masɛngami ya lokasa mobimba. Kota na ba docs ya Layout to ba exemples officiels na biso pona kobanda ko lancer ba contenus ya site na yo na ba composants.

Ba globales ya ntina

Bootstrap esalelaka mwa ndambo ya ba styles mpe ba paramètres ya ntina ya mokili mobimba oyo ekosɛnga ozala na boyebi ntango ozali kosalela yango, oyo nyonso ezali pene na kozala kaka mpo na kosala normalisation ya ba styles ya navigateur croisé. To plonge na kati.

Lolenge ya doctype ya HTML5

Bootstrap esengaka kosalela doctype HTML5. Kozanga yango, okomona mwa funky incomplete styling, kasi kosangisa yango esengeli te kobimisa ata hiccups moko ya monene.

<!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, shrink-to-fit=no">

Okoki komona ndakisa ya likambo oyo na mosala na modèle ya démarrage .

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 logiciel 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 .
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-4).
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.

Ba CSP mpe ba SVG oyo ekɔtisami

Ba composants ebele ya Bootstrap ezali na ba SVGs oyo ekotisami na CSS na biso mpo na ko styler ba composants constamment mpe na pete na kati ya ba navigateurs mpe ba appareils. Mpo na bibongiseli oyo ezali na ba configurations ya CSP ya makasi mingi , tokomi na mikanda ba instances nionso ya ba SVG na biso oyo ekotisami (oyo nyonso esalelami na nzela ya background-image) mpo ete okoka kotala malamumalamu ba options na yo.

Bouton ya kokanga (esalelamaka na ba alertes mpe na ba modal)
Ba cases ya kotiya elembo mpe ba boutons ya radio oyo esalemi na kolanda bamposa ya moto
Ba interrupteurs ya formulaire
Ba icônes ya validation ya formulaire
Ba menu ya kopona na ndenge ya moto ye moko
Ba contrôles ya carrusel
Ba boutons ya kobalusa na Navbar

Based on communauté conversation , ba options mosusu pona ko répondre na yango na codebase na yo moko ezali ko remplacer ba URL na ba biens hébergés localement, ko longola ba images pe kosalela ba images inline (ekoki kosalema te na ba composants nionso), pe ko modifier CSP na yo. Likanisi na biso ezali ya kotalela malamumalamu mibeko na yo moko ya bokengi mpe kozwa ekateli ya nzela ya malamu koleka mpo na kokende liboso, soki esengeli.