Kozwa

Bootstrap (lelo oyo v3.4.1) ezali na mwa banzela ya pɛtɛɛ mpo na kobanda nokinoki, mokomoko na yango ezali kobenda likebi na nivo ya makoki mpe likambo ya kosalela ekeseni. Tángá mobimba mpo na komona oyo ebongi na bamposa na yo ya sikisiki.

jsDelivr oyo azali

Ba folks likolo na jsDelivr na ngolu kopesa CDN lisungi mpo na Bootstrap ya CSS mpe JavaScript. Salelá kaka ba liens oyo ya jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Installez na Bower

Okoki mpe ko installer mpe ko gérer ba Fonts ya Bootstrap, CSS, JavaScript, mpe ba fonts na nzela ya Bower :

bower install bootstrap

Installez na npm

Okoki pe ko installer Bootstrap na nzela ya npm :

npm install bootstrap@3

require('bootstrap')eko charger ba plugins nionso ya jQuery ya Bootstrap na objet jQuery. Module bootstrapyango moko e exportaka eloko te. Okoki ko charger manuellement ba plugins jQuery ya Bootstrap moko moko na ko charger ba /js/*.jsfichiers na se ya répertoire ya niveau ya likolo ya paquet.

Bootstrap's package.jsonezali na mwa ba métadonnées ya kobakisa na se ya ba touches oyo elandi:

• less- nzela ya fisyé ya source Moins ya monene ya Bootstrap
• style- nzela ya CSS ya Bootstrap oyo ekitisami te oyo esili kosala liboso na kosalelaka ba paramètres ya liboso (personnalisation te)

Installez na Composer

Okoki mpe ko installer mpe ko gérer ba Fonts ya Bootstrap, CSS, JavaScript, mpe ba fonts na nzela ya Composer :

composer require twbs/bootstrap

Autoprefixer esengeli mpo na Less/Sass

Bootstrap esalela Autoprefixer mpo na kosala na ba préfix ya motɛkisi ya CSS . Soki ozali ko compiler Bootstrap à partir ya source na yango Less/Sass mpe ozali kosalela Gruntfile na biso te, ekosenga yo moko o intégrer Autoprefixer na processus ya kotonga na yo. Soki ozali kosalela Bootstrap oyo esalemi liboso to ozali kosalela Gruntfile na biso, osengeli te komitungisa mpo na likambo yango mpo Autoprefixer esi ekotisami na Gruntfile na biso.

Oyo ezali na kati

Bootstrap ezali téléchargeable na ba formes mibale, na kati na yango okokuta ba répertoires mpe ba fichiers oyo elandi, ko grouper logiquement ba ressources communes mpe kopesa ba variations compilées mpe minifiées.

Bootstrap oyo esalemi liboso

Soki osili kozwa yango, fungola dossier oyo enyatami mpo na komona ndenge oyo Bootstrap (oyo esangisi yango) esalemi. Okomona likambo ya ndenge oyo:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Oyo ezali lolenge ya moboko ya Bootstrap: ba fichiers précompilés mpo na usage ya drop-in ya mbangu na projet web presque nionso. Tozali kopesa CSS mpe JS oyo esangisi ( bootstrap.*), bakisa mpe CSS mpe JS ( bootstrap.min.*) oyo esalemi mpe oyo esalemi na mikemike. Ba cartes ya source ya CSS ( bootstrap.*.map) ezali mpo na kosalela na bisaleli ya ba développeurs ya ba navigateurs mosusu. Ba fonts oyo euti na Glyphicons ezali na kati, ndenge moko mpe na thème ya Bootstrap oyo okoki kopona.

Code ya source ya bootstrap

Téléchargement ya code source ya Bootstrap ezali na ba assets ya CSS, JavaScript, mpe ya fonte oyo esalemi liboso, elongo na source Less, JavaScript, mpe mikanda. Na bosikisiki, ezali na makambo oyo elandi mpe makambo mosusu:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Ba less/, js/, mpe fonts/ezali code source ya ba fonts na biso ya CSS, JS, mpe ya icône (respectivement). Dossier dist/yango ezali na makambo nyonso oyo ezali na eteni ya téléchargement oyo esalemi liboso oyo ezali awa na likoló. Dossier docs/ezali na code source ya documentation na biso, mpe examples/ya usage ya Bootstrap. Longola yango, fisyé mosusu nyonso oyo ekotisami epesaka lisungi mpo na ba paquets, nsango ya ndingisa, mpe bokolisi.

Kosangisa CSS mpe JavaScript

Bootstrap esalela Grunt mpo na système na yango ya kotonga, na ba méthodes ya malamu mpo na kosala na cadre. Ezali ndenge to compiler code na biso, tosalaka ba tests, pe ebele.

Kokɔtisa Grunt

Pona ko installer Grunt, esengeli nanu o télécharger pe o installer node.js (oyo ezali na npm). npm elingi koloba ba modules ya node packaged mpe ezali lolenge ya ko gérer ba dépendances ya développement na nzela ya node.js.

1. Botia grunt-clina mokili mobimba na npm install -g grunt-cli.
2. Naviguer na répertoire ya misisa /bootstrap/, sima tambuisa npm install. npm ekotala package.jsonfichier pe eko installer automatiquement ba dépendances locales oyo esengeli oyo etangami kuna.

Ntango osilisi, okozala na likoki ya kosala mitindo ndenge na ndenge ya Grunt oyo epesami uta na molɔngɔ ya mitindo.

Ba commandes ya Grunt oyo ezali

grunt dist(Kaka kosangisa CSS mpe JavaScript)

Ezali kozongisa /dist/répertoire na ba fichiers CSS mpe JavaScript oyo esalemi mpe oyo esalemi moke. En tant que usager ya Bootstrap, oyo ezali normalement commande oyo olingi.

grunt watch(Kotala)

Etalaka ba fichiers source Less mpe e recompiler yango automatiquement na CSS tango nionso obombi changement.

grunt test(Kosala ba tests)

Ezali kosala JSHint mpe kosala ba tests ya QUnit na ba navigateurs ya solo grâce na Karma .

grunt docs(Kotonga & komeka ba biens ya docs)

Etongaka mpe emekaka CSS, JavaScript, mpe biloko mosusu oyo esalelamaka ntango ezali kotambwisa mikanda na esika na nzela ya bundle exec jekyll serve.

grunt(Tonga absolument nionso pe kosala ba tests)

Esangisi mpe ekitisaka CSS mpe JavaScript, etongaka site internet ya mikanda, etambwisaka validateur ya HTML5 contre ba docs, ebongisi lisusu biloko ya Customizer, mpe mingi mosusu. Esengaka Jekyll . Mbala mingi kaka esengeli soki ozali ko pirater na Bootstrap yango moko.

Kosilisa mikakatano

Soki okutani na mikakatano na installation ya ba dépendances to kosala ba commandes ya Grunt, liboso boma /node_modules/répertoire oyo esalemi na npm. Na nsima, kosala lisusu npm install.

Modèle de base

Bandá na modèle oyo ya HTML ya moboko, to bongisá bandakisa oyo . Tozali kolikya ete okobongisa ba modèles mpe bandakisa na biso na ndenge ya moto ye moko, mpe okobongisa yango mpo eyokani na bamposa na yo.

Kopi ya HTML oyo ezali awa na nse mpo na kobanda kosala na mokanda ya Bootstrap oyo ezali moke.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Bandakisa

Tongela na modèle ya base oyo ezali likolo na ba composants ebele ya Bootstrap. Tozali kolendisa yo obongola mpe obongola Bootstrap mpo na kokokisa bamposa ya mosala na yo moko.

Zwá code source mpo na ndakisa nyonso oyo ezali awa na nse na kozwaka ebombelo ya Bootstrap . Bandakisa ekoki kozwama na docs/examples/répertoire.

Kosalela cadre oyo ezali na kati

Modèle ya démarrage

Eloko te kaka ba bases: compilé CSS na JavaScript elongo na conteneur.

Thème ya bootstrap

Charger thème ya Bootstrap oyo okoki kopona mpo na expérience oyo ebakisami na miso.

Ba grille

Bandakisa ebele ya ba layouts ya grille na ba niveaux nionso minei, nesting, pe ebele.

Jumbotron oyo azali

Tongela zingazinga ya jumbotron na navbar mpe mwa makonzí ya grille ya moboko.

Jumbotron ya moke

Tongela lokasa ya bomoto mingi na kokitisaka récipient par défaut mpe jumbotron.

Navbars na mosala

Navbar

Modèle super basic oyo ezali na navbar elongo na mwa makambo ya kobakisa.

Navbar ya likolo ya statique

Modèle super basic na navbar ya likolo statique elongo na mwa makambo ya kobakisa.

Navbar oyo ebongwani

Modèle super basic na navbar ya likolo fixe elongo na mwa makambo ya kobakisa.

Ba composants personnalisés

Ezipeli

Modèle ya lokasa moko mpo na kotonga ba pages ya ndako ya pete mpe ya kitoko.

Carrousel ya kosala

Personnaliser navbar na carousel, sima bakisa mua ba composants ya sika.

Blog ya bato

Layout simple ya blog ya deux colonnes na navigation personnalisé, tête, na type.

Tableau de bord

Structure ya base pona tableau de bord ya admin na barre latérale fixe na navbar.

Lokasa ya kokɔta na site

Layout ya formulaire personnalisé mpe design mpo na signe simple na formulaire.

Nav oyo elongisami

Bosala navbar personnalisé na ba liens justifiés. Mitó likoló! Safari amical mingi te.

Footer ya kokangama

Kangisa nse ya lokasa na nse ya esika ya kotala ntango makambo oyo ezali na kati ezali mokuse koleka yango.

Footer ya kokangama na navbar

Kangisa nse ya lokasa na nse ya esika ya kotala na navbar oyo ekangami na likoló.

Ba expériences

Bootstrap oyo ezo répondre te

Désactiver facilement réponse ya Bootstrap par nos docs .

Off-toile ya kosala

Tongela menu ya navigation hors toile oyo ekoki ko changer pona kosalela na Bootstrap.

Bisaleli

Botlint ya mosala

Bootlint ezali esaleli ya linter HTML ya Bootstrap officiel. Ezali ko vérifier automatiquement ba erreurs HTML ebele oyo emonanaka mingi na ba pages web oyo ezali kosalela Bootstrap na ndenge ya assez "vanille". Ba composants/widgets ya Vanilla Bootstrap esengaka ba parties na bango ya DOM e conformer na ba structures mususu. Bootlint etalaka soki ba instances ya ba composants ya Bootstrap ezali na HTML oyo ebongisami malamu. Tala kobakisa Bootlint na chaîne d'outils na yo ya développement web ya Bootstrap mpo ete moko te ya ba erreurs oyo emonanaka mingi ekitisaka développement ya projet na yo.

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 .
• Chater na baninga Bootstrappers kosalela IRC na irc.freenode.netserveur, na canal ##bootstrap .
• Mpo na lisalisi na kosalela Bootstrap, tuná na StackOverflow na kosalelaka elembotwitter-bootstrap-3 .
• 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.
• Boluka bandakisa ya kofula ya bato oyo bazali kotonga na Bootstrap na Bootstrap Expo .

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

Kokanga eyano

Bootstrap e adaptaka automatiquement ba pages na yo pona ba taille ya écran ndenge na ndenge. Tala ndenge ya ko désactiver fonctionnalité oyo po page na yo esala lokola exemple oyo ezo répondre te .

Matambi mpo na kopekisa eyano ya lokasa

1. Bolongola esika ya kotala <meta>oyo elobelami na mikanda ya CSS
2. Bolongola na widthna .containermpo na nivo moko na moko ya grille na bonene moko, ndakisa width: 970px !important;Sala ete oyo eya nsima ya CSS ya Bootstrap ya liboso. Okoki na bolingi na yo koboya ba !importantna mituna ya media to mwa selector-fu.
3. Soki ozali kosalela ba navbar, longola bizaleli nyonso ya kokweya mpe ya kopanzana ya navbar.
4. Mpo na ba layouts ya grille, salela .col-xs-*ba classes en plus ya, to na esika ya, oyo ya moyenne/ya minene. Komitungisa te, grille ya dispositif extra-petit ezo échelle na ba résolutions nionso.

Okozala kaka na besoin ya Respond.js pona IE8 (po ba queries na biso ya media ezali kaka wana pe esengeli e traité). Yango e désactiver ba aspects ya "site mobile" ya Bootstrap.

Modèle ya bootstrap na réponse désactivé

Tosaleli matambe oyo mpo na ndakisa moko. Tanga code source na yango mpo na komona mbongwana ya sikisiki oyo esalemi.

Tala ndakisa oyo ezali kopesa eyano te

Lisungi ya navigateur mpe ya aparɛyi

Bootstrap etongami mpo na kosala malamu koleka na ba navigateurs ya sika ya bureau mpe ya mobile, elingi koloba ba navigateurs ya kala ekoki kolakisa ba rendus ya style ekeseni, atako ezali kosala mobimba, ya ba composants mosusu.

Ba navigateurs oyo esungami

Mingimingi, tozali kopesa mabɔkɔ na ba versions ya sika ya ba navigateurs mpe ba plateformes oyo elandi.

Ba navigateurs mosusu oyo esalela version ya sika ya WebKit, Blink, to Gecko, ezala directement to na nzela ya API ya vue web ya plateforme, esungami polele te. Kasi, Bootstrap esengeli (mbala mingi) kolakisa mpe kosala malamu na ba navigateurs oyo lokola. Ba informations ya soutien ya sikisiki mingi epesami awa na se.

Ba apareyi ya telefone ya mabɔkɔ

En général, Bootstrap esimbaka ba versions ya sika ya ba navigateurs par défaut ya plateforme moko na moko ya munene. Yeba ete ba navigateurs proxy (lokola Opera Mini, mode Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) esimbami te.

Ba navigateurs ya bureau

Ndenge moko mpe, ba versions ya sika ya ba navigateurs mingi ya bureau esimbami.

Na Windows, tozali kopesa mabɔkɔ na Internet Explorer 8-11 .

Mpo na Firefox, longola bobimisi ya sika ya stable ya momesano, tozali mpe kosunga version ya sika ya bobimisi ya lisungi ya monene (ESR) ya Firefox.

Na ndenge ya ofele te, Bootstrap esengeli kotala mpe komitambwisa malamu mpenza na Chromium mpe Chrome mpo na Linux, Firefox mpo na Linux, mpe Internet Explorer 7, bakisa mpe Microsoft Edge, atako esungami officiellement te.

Mpo na liste ya mwa ba bugs ya navigateur oyo Bootstrap esengeli kobunda na yango, tala Mur na biso ya ba bugs ya navigateur .

Internet Explorer 8 mpe 9

Internet Explorer 8 mpe 9 mpe esungami, nzokande, yeba ete ba propriétés mosusu ya CSS3 mpe ba éléments HTML5 esungami mobimba te na ba navigateurs oyo. En plus, Internet Explorer 8 esengaka kosalela Respond.js mpo na ko activer soutien ya requête ya media.

Kota Nakoki kosalela... mpo na koyeba makambo mosusu na ntina na lisungi ya navigateur ya makambo ya CSS3 mpe HTML5.

Internet Explorer 8 mpe Respond.js

Keba na ba caveats oyo elandi tango ozali kosalela Respond.js na ba environnements na yo ya développement mpe ya production mpo na Internet Explorer 8.

Respond.js mpe CSS ya domaine croisé

Kosalela Respond.js na CSS oyo eyambami na domaine (sub) ekeseni (ndakisa, na CDN) esengaka mwa bobongisi ya kobakisa. Tala ba docs ya Respond.js mpo na koyeba makambo mosusu.

Respond.js mpefile://

Na ntina ya mibeko ya bokengi ya navigateur, Respond.js esalaka te na nkasa oyo etalisami na nzela ya file://protocole (lokola ntango ofungoli fisyé HTML ya esika). Mpo na komeka makambo oyo ekoki koyanola na IE8, talá nkasa na yo na nzela ya HTTP(S). Tala ba docs ya Respond.js mpo na koyeba makambo mosusu.

Respond.js mpe@import

Respond.js esalaka te na CSS oyo ezali na référence na nzela ya @import. Mingimingi, ba configurations mosusu ya Drupal eyebani kosalela @import. Tala ba docs ya Respond.js mpo na koyeba makambo mosusu.

Internet Explorer 8 mpe kosala bonene ya bakɛsi

IE8 esimbaka mobimba te box-sizing: border-box;soki esangani na min-width, max-width, min-height, to max-height. Mpo na ntina wana, kobanda na v3.0.1, tosalelaka lisusu te max-widthna .containers.

Internet Explorer 8 mpe @font-face

IE8 ezali na mwa makambo na @font-facentango esangani na :before. Bootstrap esalela combinaison wana na ba Glyphicons na yango. Soki lokasa moko ezali na cache, mpe ekɔtisami kozanga souris likoló ya lininisa (elingi koloba kobɛta bouton ya kozongisa sika to kokɔtisa eloko moko na iframe) na nsima lokasa yango ekómaka kosala liboso ete fonte ekɔta. Kofandisa likoló ya lokasa (nzoto) ekomonisa mwa bilembo mpe kotya elembo likoló ya bilembo oyo etikali ekomonisa mpe yango. Talá nimero #13863 mpo na koyeba makambo mosusu.

IE Ba modes ya compatibilité

Bootstrap esimbami te na ba modes ya kala ya compatibilité ya Internet Explorer. Mpo na kozala na ntembe te ete ozali kosalela mode ya sika ya kobongola mpo na IE, kanisá kotya <meta>elembo oyo ebongi na nkasa na yo:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirmer mode ya mokanda na kofungolaka ba outils ya débogage: finga F12pe tala "Mode ya mokanda".

Tag oyo ekotisami na mikanda mpe bandakisa nyonso ya Bootstrap mpo na kosala ete bozongisi ya malamu koleka ezala na version moko na moko oyo esungami ya Internet Explorer.

Tala motuna oyo ya StackOverflow mpo na koyeba makambo mosusu.

Internet Explorer 10 na Windows 8 mpe Windows Phone 8

Internet Explorer 10 ekesenisaka te bonene ya aparɛyi na bonene ya port ya botali , mpe bongo esalela malamu te mituna ya media na CSS ya Bootstrap. Normalement olingaki kaka kobakisa fragment ya mbangu ya CSS mpo na kobongisa oyo:

@-ms-viewport       { width: device-width; }

Kasi, yango esalaka te mpo na baaparɛyi oyo ezali na ba versions ya Windows Phone 8 ya kala koleka Update 3 (aka GDR3) , lokola esalaka ete baaparɛyi ya ndenge wana elakisaka mingimingi esika ya kotala na ordinatɛrɛ na esika ya kotala "telefone" ya moke. Mpo na kosilisa likambo yango, ekosɛnga otya CSS mpe JavaScript oyo elandi mpo na kosilisa likambo yango .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Mpo na koyeba makambo mingi mpe malako ya kosalela, tángá Windows Phone 8 mpe Device-Width .

Lokola motó likoló, tozali kokɔtisa yango na mikanda nyonso ya Bootstrap mpe bandakisa lokola elakiseli.

Safari pourcentage ya kosala arrondissement

Moteur ya rendu ya ba versions ya Safari avant v7.1 pona OS X na Safari pona iOS v8.0 ezalaki na mua problème na nombre ya ba places décimales oyo esalemi na .col-*-1ba classes na biso ya grille. Na yango, soki ozalaki na makonzí 12 ya grille mokomoko, olingaki komona ete eyaki mokuse soki tokokanisi yango na milɔngɔ mosusu ya makonzí. Longola kosala mise à niveau ya Safari/iOS, ozali na mwa ba options mpo na ba solutions:

• Bakisa .pull-rightna colonne ya grille na yo ya suka mpo na kozwa alignment ya makasi-droite
• Tweak ba pourcentages na yo manuellement pona kozua arrondissement parfait pona Safari (difficile koleka option ya liboso)

Ba modales, ba navbars, na ba claviers virtuels

Débordement mpe kosala défilement

Soutien mpo overflow: hiddenna na <body>élément ezali assez limité na iOS mpe Android. Mpo na yango, ntango ozali koleka likoló to na nse ya modal moko na moko ya ba navigateurs ya baaparɛyi yango, <body>makambo oyo ezali na kati ekobanda kotambola. Tala likambo ya Chrome #175502 (ebongisamaki na Chrome v40) mpe likambo ya WebKit #153852 .

Ba champs ya texte ya iOS na défilement

Kobanda na iOS 9.3, ntango modal ezali polele, soki kosimba ya ebandeli ya geste ya défilement ezali na kati ya ndelo ya textual <input>to a <textarea>, <body>makambo oyo ezali na nse ya modal ekozala défilé na esika ya modal yango moko. Tala likambo ya WebKit #153856 .

Ba claviers virtuels

Lisusu, yeba ete soki ozali kosalela navbar fixe to ozali kosalela ba entrées na kati ya modal, iOS ezali na bug ya rendu oyo ezo mettre à jour te position ya ba éléments fixes tango clavier virtuel e déclenché. Mwa ba solutions pona yango ezali ko transformer ba éléments na yo na position: absoluteto ko invoquer chronomètre na focus pona koluka ko corriger positionnement manuellement. Yango esimbami na Bootstrap te, yango wana ezali na yo kozwa ekateli ya kozwa solution nini ezali malamu mpo na application na yo.

Ba Dropdowns ya Navbar

Elemento .dropdown-backdropyango esalelamaka te na iOS na nav mpo na complexité ya z-indexing. Na yango, mpo na kokanga ba dropdowns na ba navbars, esengeli o cliquer directement élément déroulant (to élément mosusu nionso oyo ekobeta événement ya clic na iOS ).

Kosala zoom ya navigateur

Zoom ya page e présenter inévitablement ba artifacts ya rendu na ba composants mosusu, ezala na Bootstrap mpe na reste ya web. Na kotalela likambo yango, tokoki kobongisa yango (luka liboso mpe na nsima kofungola likambo soki esengeli). Kasi, tozalaka na momeseno ya koboya makambo yango mpamba te mbala mingi bazalaka na solution directe te longola kaka ba workarounds ya hacky.

Kokangama :hover/ :focusna telefone ya mabɔkɔ

Ata soki hovering ya solosolo ezali possible te na ba écrans tactiles mingi, ba navigateurs mobiles mingi ba imiter soutien ya hovering mpe basalaka :hover"sticky". Na maloba mosusu, :hoverba styles ebandi ko appliquer sima ya ko toucher élément moko mpe etika ko appliquer kaka sima ya usager ko toucher quelque élément mosusu. Yango ekoki kosala ete ba :hoverétats ya Bootstrap ekoma "kokangama" na ndenge oyo elingi te na ba navigateurs ya ndenge wana. Ba navigateurs mosusu ya telefone mpe esalaka ete :focusbákangama ndenge moko. Na tango oyo ezali na solution simple te pona ba problèmes oyo autre que kolongola ba styles ya boye entièrement.

Konyata mikanda

Ata na ba navigateurs mosusu ya mikolo oyo, imprimerie ekoki kozala quirky.

Mingimingi, lokola ya Chrome v32 mpe kozanga kotalela ba paramètres ya marge, Chrome esalelaka bonene ya esika ya kotala oyo ezali mpenza moke koleka bonene ya papier physique ntango ezali kosilisa mituna ya media ntango ezali konyata lokasa ya Internet. Yango ekoki kosala ete grille extra-small ya Bootstrap esala na mbalakaka ntango ozali konyata. Tala nimero #12078 mpe Chrome bug #273306 mpo na mwa makambo. Makambo oyo bapesi mpo na kosilisa yango:

• Embrasser grille extra-petit mpe sala que page na yo ezala acceptable na se na yango.
• Personnaliser ba valeurs ya ba @screen-*variables Moins po papier na yo ya imprimante ezala munene koleka extra-small.
• Bakisa mituna ya media personnalisé mpo na kobongola ba points de rupture ya taille ya grille mpo na media ya impression kaka.

Lisusu, kobanda na Safari v8.0, fixed-width .containers ekoki kosala ete Safari esalela bonene ya makomi ya moke mpenza ntango ezali konyata. Tala #14868 mpe WebKit bug #138192 mpo na koyeba makambo mingi. Moko ya kosilisa likambo oyo ekoki kosilisa yango ezali kobakisa CSS oyo elandi:

@media print {
  .container {
    width: auto;
  }
}

Navigateur ya stock Android

Out of the box, Android 4.1 (et même ba sorties ya sika apparemment) envoyé na app Navigateur comme navigateur web par défaut ya choix (na bokeseni na Chrome). Malheureusement, appli Navigateur ezali na ebele ya ba bugs mpe ba inconsistance na CSS en général.

Poná ba menu

Na <select>ba éléments, navigateur stock Android ekolakisama te ba contrôles ya côté soki ezali na border-radiusmpe/to borderesalemi. (Talá motuna oyo ya StackOverflow mpo na koyeba makambo mosusu.) Salelá mwa ndambo ya code oyo ezali awa na nse mpo na kolongola CSS oyo ezali kozokisa mpe komonisa <select>lokola eloko oyo ezali na lolenge te na navigateur stock ya Android. Sniffing ya agent ya mosaleli ekimi interférence na ba navigateurs Chrome, Safari, mpe Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Olingi komona ndakisa moko? Tala démonstration oyo ya JS Bin.

Ba validateurs

Pona kopesa expérience ya malamu koleka na ba navigateurs ya kala pe ya ba buggy, Bootstrap esalelaka ba hacks ya navigateur CSS na bisika ebele pona ko cibler CSS spécial na ba versions ya navigateur mosusu pona ko travailler autour ya ba bugs na ba navigateurs yango moko. Ba hacks oyo compréhensiblement esalaka que ba validateurs ya CSS ba se plaindre que bazali invalides. Na bisika mibale, tosalelaka mpe makambo ya CSS oyo ezali kobima makila oyo ezali naino te mobimba na ndenge oyo ebongi, kasi oyo esalelami kaka mpo na kobongisa makambo oyo ezali kokende liboso.

Ba avertissements oyo ya validation ezali na tina te na pratique puisque portion non hacky ya CSS na biso e valider entièrement mpe ba portions hacky e interférer te na fonctionnement correct ya portion non hacky, d'où pourquoi to ignorer délibérément ba avertissements oyo particulier.

Ba docs na biso ya HTML ezali mpe na mwa makebisi ya validation HTML oyo ezali na ntina te mpe oyo ezali na ntina te mpo na kokɔtisa na biso likambo ya kosilisa likambo moko boye ya Firefox .

Lisungi ya bato ya misato

Atako tozali kosunga officiellement te ba plugins to ba add-ons ya bato mosusu, tozali kopesa mwa toli ya ntina mpo na kosalisa na koboya mikakatano oyo ekoki kobima na misala na yo.

Kosala bonene ya bakɛsi

Ba logiciels mosusu ya troisième partie, na kati na yango Google Maps mpe Google Custom Search Engine, ezali na matata na Bootstrap mpo na * { box-sizing: border-box; }, mobeko oyo esalaka ete ezala bongo paddingezali na bopusi te likoló na bonene ya nsuka oyo etángamaki ya eloko moko. Yekola makambo mingi na ntina ya modèle ya boîte mpe dimensionnement na CSS Tricks .

Na kotalela contexte, okoki koboya ndenge esengeli (Option 1) to kozongisa bonene ya boîte mpo na ba régions mobimba (Option 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Kozala na makoki ya kozwa yango

Bootstrap elandaka mibeko ya web oyo bato mingi basalelaka mpe —na milende mingi te ya kobakisa —ekoki kosalelama mpo na kosala basite oyo ekoki kokɔta na baoyo bazali kosalela AT .

Salá koleka na navigation

Soki navigation na yo ezali na ba liens ebele mpe eyaka liboso ya makambo ya ntina na DOM, bakisa Skip to main contentlien liboso ya navigation (mpo na ndimbola ya pete, tala article oyo ya Projet A11Y na oyo etali ba liens ya navigation ya koleka ). Kosalela .sr-onlykelasi ekobomba na miso lien ya kopumbwa, mpe .sr-only-focusablekelasi ekosala ete lien ekoma komonana mbala moko etalisami (mpo na basaleli ya klaviatware oyo bamonaka).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Mitó ya makambo oyo ekangami na kati

Ntango ozali kosala nesting ya mitó ya makambo ( <h1>- <h6>), motó ya mokanda na yo ya liboso esengeli kozala <h1>. Mitó ya makambo oyo ekolanda esengeli kosalela malamu <h2>- <h6>na ndenge ete batángi ya écran bakoki kotonga tableau ya makambo mpo na nkasa na yo.

Yekola makambo mingi na HTML CodeSniffer mpe AccessAbility ya Penn State .

Bokeseni ya langi

Sikawa, mwa ndambo ya masangani ya langi ya liboso oyo ezali na Bootstrap (lokola bakelasi ya bouton oyo ezali na lolenge ndenge na ndenge , mwa ndambo ya balangi ya konyata code oyo esalelami mpo na ba blocs ya code ya moboko , kelasi ya mosungi .bg-primary ya fond ya contexte , mpe langi ya lien ya liboso ntango esalelami na fond ya pembe) bazali na ratio ya bokeseni moke (na nse ya ratio oyo esɛngami ya 4,5:1 ). Yango ekoki kobimisa mikakatano epai ya basaleli oyo bamonaka malamu te to oyo bakufaka na langi te. Ba couleurs oyo ya défaut ekoki kozala na besoin ya ko modifier pona komatisaka contraste na yango pe legibilité na yango.

Biloko ya kobakisa

• "HTML Codesniffer" bookmarklet mpo na koyeba makambo ya bozwi
• Extension ya Bisaleli ya Ba développeurs ya Accessibilité ya Chrome
• Analyseur ya contraste ya couleur
• Projet ya A11Y
• Mikanda ya bozwi ya MDN

Mituna oyo batunaka mingi mpo na kozwa ndingisa

Bootstrap ebimi na licence ya MIT mpe ezali na droit d'auteur 2019 Twitter. Soki balambi yango tii na biteni mikemike, ekoki kolimbolama na makambo oyo elandi.

Esɛngaka ete osala makambo oyo:

• Bomba liyebisi ya licence mpe ya droit d’auteur oyo ezali na kati ya ba fichiers CSS mpe JavaScript ya Bootstrap ntango ozali kosalela yango na misala na yo

Ezali kopesa yo nzela ya kosala:

• Télécharger mpe salela Bootstrap ofele, na mobimba to na ndambo, mpo na ntina ya moto ye moko, ya moto ye moko, ya kati ya kompanyi, to ya mombongo
• Salelá Bootstrap na ba paquets to ba distributions oyo osali
• Bobongola code source
• Pesa sous-licence mpo na kobongisa mpe kokabola Bootstrap na bato mosusu oyo bazali na licence te

Epekisi yo:

• Bokamba bakomi mpe bankolo ya ndingisa na mokumba ya mbeba lokola Bootstrap epesami kozanga garantie
• Bokanga basali to baye bazali na droit d'auteur ya Bootstrap na mokumba
• Bokabola lisusu eteni nionso ya Bootstrap sans attribution ya malamu
• Salelá bilembo nyonso oyo ezali ya Twitter na ndenge nyonso oyo ekoki koloba to komonisa ete Twitter endimi kokabolama na yo
• Salelá bilembo nyonso oyo ezali ya Twitter na ndenge nyonso oyo ekoki koloba to komonisa ete osali programɛ ya Twitter oyo ezali kolobelama

Ezali kosɛnga te ete osala boye:

• Botia source ya Bootstrap yango moko, to ya ba modifications nionso oyo okoki kosala na yango, na redistribution nionso oyo okoki kosangisa oyo ezali na yango
• Tinda mbongwana oyo osali na Bootstrap lisusu na projet ya Bootstrap (atako makanisi ya ndenge wana elendisami)

Licence ya Bootstrap mobimba ezali na ebombelo ya projet mpo na koyeba makambo mingi.

Mabongoli

Bato ya lisanga babongoli mikanda ya Bootstrap na minoko ndenge na ndenge. Moko te azali na lisungi ya officiel mpe ekoki kozala ntango nyonso na ntango te.

• Boto ya kokangama 中文文档 (Chinois)
• Bootstrap på Dansk (Danois) Ezali ndenge nini?
• Bootstrap en Français (Lifalanse) .
• Bootstrap auf Deutsch (na lokota ya Allemagne) .
• Botas en Italiano (Italiano) .
• Bootstrap 한국어 (Liloba ya Corée)
• Bootstrap em Português do Brasil (Portugais ya Brésil)
• Bande de bottes по-русски (Russie) Ezali ndenge nini?
• Bootstrap en Español (Espagnol) .
• Türkçe Bottes (Turc) Ezali ndenge moko na .
• Botape ya kokangama українською (Ukrainien)
• Botangi ya liboso ya Việt (Vietnam)

Tosalisaka te na kobongisa to koyamba mabongoli, tosalaka kaka lien na yango.

Osilisi libongoli ya sika to ya malamu koleka? Fungola demande ya kobenda mpo na kobakisa yango na liste na biso.