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.

Na lokasa oyo

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

JS

Mingi ya ba composants na biso esengaka kosalela JavaScript mpo esala. Mingimingi, basengeli na ba plugins na biso moko ya JavaScript mpe Popper . 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.

Liboke

Botia plugin nionso ya JavaScript ya Bootstrap na dépendance na moko ya ba paquets na biso mibale. Bango mibale bootstrap.bundle.jsmpe bootstrap.bundle.min.jsesangisi Popper mpo na ba tolips na biso ya bisaleli mpe ba popovers. 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/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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/@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>

Ba modules

Soki osaleli <script type="module">, tala eteni na biso ya kosalela Bootstrap lokola module .

Ba composants

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 plugin na biso ya Collapse mpo na kosalela bizaleli ya koyanola
Toasts pona kolakisa pe ko démissionner
Tooltips mpe popovers mpo na kolakisa mpe positionnement (esengaka mpe Popper ) .
Scrollspy mpo na bizaleli ya défilement mpe mises à jour ya navigation

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

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

Mpo na makambo oyo ekolanda, kota na docs ya Layout to bandakisa na biso ya officiel mpo na kobanda kotanda makambo mpe biloko oyo ezali na site na yo.

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

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