Source

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, oyo epesami ofele na bato na jsDelivr. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Mingi ya ba composants na biso esengaka kosalela JavaScript mpo esala. Mingimingi, esɛngaka jQuery , Popper.js , mpe ba plugins na biso moko ya JavaScript. Tia 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.js, mpe na sima ba plugins na biso ya JavaScript.

Tosalelaka jQuery's slim build , kasi version mobimba ezali mpe kosungama.

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

Curieux ba composants nini explicitement esengaka jQuery, JS na biso, na Popper.js? 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.

Ya biso bootstrap.bundle.jsmpe bootstrap.bundle.min.jsesangisi Popper , kasi jQuery te . Mpo na koyeba makambo mingi na ntina na oyo ezali na Bootstrap, talá eteni na biso ya makambo oyo ezali na kati.

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 mpo na kolakisa mpe ko positionner (esengaka mpe Popper.js )
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
Tooltips mpe popovers mpo na kolakisa mpe positionnement (esengaka mpe Popper.js )
Scrollspy mpo na bizaleli ya défilement mpe mises à jour ya navigation

Modèle de 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-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>

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.

Bolanda @getbootstrap na Twitter .
Tanga mpe s'abonner na Blog Officiel ya Bootstrap .
Chat na baninga Bootstrappers na IRC. Na irc.freenode.netserveur, 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.