Mokanda ya kofungola

Kobanda na mosala

Botali ya mosala, makambo oyo ezali na kati, mpe ndenge ya kobanda na modèle moko ya pɛtɛɛ.

1. Télécharger

Yambo ya kozwa, sala makasi ozala na éditeur ya code (tosengi Sublime Text 2 ) mpe mwa boyebi ya mosala ya HTML mpe CSS. Tokotambola te na kati ya ba fichiers source awa, kasi ezali disponible pona ko télécharger. Tokotia makanisi na biso na kobanda na ba fichiers ya Bootstrap oyo esangisi.

Télécharger compilé

Lolenge ya mbangu ya kobanda: kozwa ba versions compilées mpe minifiées ya CSS, JS, mpe bilili na biso. Ba docs to ba fichiers ya source original te.

Télécharger Bootstrap

Télécharger source

Bozua ba fichiers original pona CSS na JavaScript nionso, elongo na copie locale ya ba docs na ko télécharger version ya sika directement na GitHub.

Télécharger source ya Bootstrap

2. Bobongisi ya ba fichiers

Na kati ya téléchargement okokuta structure ya fichier oyo elandi mpe makambo oyo ezali na kati, ko grouper logiquement ba biens communs mpe kopesa ba variations compilées mpe minifiées.

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

  bootstrap / ├── css / │ ├── eloko ya kosala na yango . css
   │ ├── eloko ya kofungola . min . css
   ├── js / │ ├── eloko ya kosala na ebandeli . js
   │ ├── eloko ya kokanga na ebandeli . min . js
   └── img / ├── ba glyphicons - ba halflings . png
       └── ba glyphicons - ba halflings - pembe . png

Oyo ezali lolenge ya moboko ya Bootstrap: ba fichiers compilés mpo na usage ya drop-in ya mbangu na presque projet web nionso. Tozali kopesa CSS mpe JS oyo esangisi ( bootstrap.*), bakisa mpe CSS mpe JS ( bootstrap.min.*) oyo esalemi mpe oyo esalemi na ndenge ya moke. Ba fisyé ya bililingi ekangamaka na lisalisi ya ImageOptim , programɛ moko ya Mac mpo na kofinafina ba PNG.

Tosengi oyeba ete ba plugins nionso ya JavaScript esengaka jQuery ezala na kati.

3. Oyo ezali na kati

Bootstrap eyaka na HTML, CSS, mpe JS mpo na makambo ya ndenge nyonso, kasi ekoki kozala na bokuse na mwa ndambo ya biteni oyo ezali komonana na likoló ya mikanda ya Bootstrap .

Biteni ya mikanda

Échafaudage

Ba styles ya mokili mobimba pona nzoto ezo réinitialiser type na fond, ba styles ya lien, système ya grille, na ba layouts mibale ya pete.

Base ya CSS

Ba styles mpo na ba éléments HTML oyo emonanaka mingi lokola typographie, code, ba tableaux, ba formulaires, mpe ba boutons. Lisusu ezali na Glyphicons , ensemble ya ba icônes ya moke ya monene.

Ba composants

Ba styles ya base pona ba composants ya interface commune lokola ba onglets na ba pilule, navbar, ba alertes, ba têtes ya page, pe ebele.

Ba plugins ya JavaScript

Ndenge moko na ba Composants, ba plugins oyo ya JavaScript ezali ba composants interactifs mpo na makambo lokola ba totips ya bisaleli, ba popovers, ba modals, mpe mingi mosusu.

Liste ya ba composants

Elongo, biteni ya Composants mpe ya ba plugins ya JavaScript epesaka ba éléments ya interface oyo elandi:

  • Ba groupes ya ba boutons
  • Ba boutons oyo ezali kokita
  • Ba onglets ya navigation, ba pilili, mpe ba liste
  • Navbar
  • Ba étiquettes
  • Badge ya ba badges
  • Mitó ya nkasa mpe unité ya elombe
  • Ba bililingi ya mike
  • Ba alertes
  • Ba barres ya progrès
  • Ba modaux
  • Ba dropdowns ya kokita
  • Batoli ya bisaleli
  • Bapopovers
  • Accordion
  • Carrousel ya kosala
  • Tyá liboso

Na batambwisi ya mikolo mizali koya, tokoki kotambola na kati ya biteni oyo moko na moko na bozindo mingi. Kino ntango wana, luká mokomoko na yango na mikanda mpo na koyeba ndenge ya kosalela yango mpe kobongisa yango na ndenge ya moto ye moko.

4. Modèle ya HTML ya moboko

Na intro mokuse na contenus libanda ya nzela, tokoki ko focuser na kotia Bootstrap na kosalela. Mpo na kosala yango, tokosalela modèle HTML ya moboko oyo ezali na makambo nyonso oyo tolobelaki na ebongiseli ya Fichier .

Sikawa, talá fisyé HTML ya momeseno :

  1. <!MOKANDA html>
  2. <html>
  3.   <motó>
  4.     <title> Modèle ya 101 ya bobandi </title>
  5.     <meta name = "viewport" content = "bonene=bonene-ya-esaleli, échelle-ya ebandeli=1.0" >  
  6.   </motó>
  7.   <nzoto>
  8.     <h1> Mbote, mokili! </h1>
  9.     <script src = "https://code.jquery.com/jsquery.js" ></script> 
  10.   </nzoto>
  11. </html>

Mpo na kosala oyo modèle ya Bootstrapped , kotia kaka ba fichiers CSS mpe JS oyo ebongi:

  1. <!MOKANDA html>
  2. <html>
  3.   <motó>
  4.     <title> Modèle ya 101 ya bobandi </title>
  5.     <meta name = "viewport" content = "bonene=bonene-ya-esaleli, échelle-ya ebandeli=1.0" >  
  6.     <!-- Mokanda ya kofungola -->
  7.     <link href = "css/bootstrap.min.css" rel = "lokasa ya lolenge" media = "écran" >   
  8.   </motó>
  9.   <nzoto>
  10.     <h1> Mbote, mokili! </h1>
  11.     <script src = "https://code.jquery.com/jsquery.js" ></script> 
  12.     <script src = "js/bobandi.min.js" </script> 
  13.   </nzoto>
  14. </html>

Mpe ozali na esika! Na ba fichiers mibale wana oyo ebakisami, okoki kobanda kosala site to application nionso na Bootstrap.

5. Bandakisa

Boleka modèle ya base na mua ba layouts ya exemple. Tozali kolendisa bato bázongela bandakisa oyo mpe básalela yango kaka te lokola mbano ya nsuka.

  • Modèle ya démarrage

    Mokanda ya HTML ya barebones oyo ezali na ba CSS mpe JavaScript nyonso ya Bootstrap oyo ezali na kati.

  • Site ya marketing ya base

    Ezali na unité ya elombe mpo na message ya liboso mpe ba éléments misato ya soutien.

  • Layout ya fluide

    Esalelaka système na biso ya sika ya grille oyo ezo répondre, fluide pona kosala layout ya liquide sans soudure.

  • Marketing ya moke

    Modèle de marketing mince, léger mpo na ba projets to ba équipes ya mike.

  • Nav oyo elongisami

    Lokasa ya marketing na ba liens ya navigation ya largeur moko na barre ya navigation oyo ebongisami.

  • Kokota na site

    Barebones signer na formulaire na ba contrôles ya formulaire personnalisé, ya minene mpe disposition flexible.

  • Footer ya kokangama

    Pin na nse ya nse ya bosanda oyo ebongwani te na nse ya esika ya kotala ya mosaleli.

  • Jumbotron ya carrusel

    Riff moko ya interactif mingi na site ya marketing ya base oyo ezali na carrousel moko ya lokumu.

Nini na nsima?

Motó na ba docs mpo na koyeba makambo, bandakisa, mpe biteni ya code, to zwa saut oyo elandi mpe bongisa Bootstrap mpo na mosala nyonso oyo ezali koya.

Kota na ba docs ya Bootstrap Personnaliser Bootstrap na ndenge ya yo moko