Bandakisa ya kobanda nokinoki

Ozali na mposa ya mwa ba modèles ya mbangu? Tala bandakisa oyo ya moboko oyo totie esika moko:

Grille ya liboso

Système ya grille par défaut oyo epesami lokola eteni ya Bootstrap ezali grille ya 940px ya largeur ya 16 colonnes. Ezali elengi ya système ya grille 960 oyo eyebani mingi, kasi kozanga marge/padding ya kobakisa na ngambo ya gauche mpe ya droite.

Ndakisa ya kosala bilembo ya grille

Ndenge elakisami awa, bobongisi ya moboko ekoki kosalama na "makonzí" mibale, moko na moko etali motango ya makonzí 16 ya moboko oyo tolimbolaki lokola eteni ya système na biso ya grille. Tala bandakisa oyo ezali awa na nse mpo na koyeba bokeseni mosusu.

<div classe = "molongo" > 
  < kelasi ya div = "span6" > 
    ...
  </div>
  < kelasi ya div = "span10" > 
    ...
  </div>
</div>

Ba colonnes ya kosala zumbu

Nest contenus na yo soki esengeli na kosala a na .rowkati ya colonne oyo ezali.

Ndakisa ya makonzí oyo ekangami

<div classe = "molongo" > 
  < kelasi ya div = "span12" > 
    Niveau 1 ya colonne
    <div classe = "molongo" > 
      < kelasi ya div = "span6" > 
        Niveau ya 2
      </div>
      < kelasi ya div = "span6" > 
        Niveau ya 2
      </div>
    </div>
  </div>
</div>

Roulez grille na yo moko

Etongami na kati ya Bootstrap ezali mwa ndambo ya ba variables mpo na ko personnaliser système ya grille ya 940px par défaut. Na mwa personnalisation, okoki ko modifier taille ya ba colonnes, ba gouttières na yango, na récipient oyo efandaka na kati.

Na kati ya grille

Ba variables oyo esengeli pona ko modifier système ya grille actuellement nionso efandi na variables.less.

Sikoyo pona ko personnaliser

Ko modifier grille elakisi ko changer ba @grid-*variables misatu pe ko recompiler ba fichiers Moins.

Bootstrap eza équipé pona ko gérer système ya grille na jusqu'à 24 colonnes; par défaut ezali kaka 16. Tala ndenge ba variables ya grille na yo ekozala personnalisé na grille ya 24 colonnes.

@gridMakonzí : 24 ;       
@gridBolai ya Likonzí : 20px ;   
@gridBolai ya Gutter : 20px ;   

Une fois recompilé, okozala set!

Layout oyo ebongwani

Layout ya défaut mpe ya pete ya 940px-wide, centred mpo na kaka pene na site internet to lokasa nyonso oyo epesami na moko <div.container>.

<nzoto>
  <div classe = "conteneur" > 
    ...
  </div>
</nzoto>

Layout ya fluide

Struktur ya lokasa ya fluide ya ndenge mosusu, oyo ekoki kobongwana na bonene ya min- mpe max mpe barre ya mopanzi ya lobɔkɔ ya mwasi. Ezali malamu mingi mpo na ba apps mpe ba docs.

<nzoto>
  <div class = "eloko-ya-conteneur" > 
    <div classe = "barre ya mopanzi" > 
      ...
    </div>
    <div classe = "makambo oyo ezali na kati" > 
      ...
    </div>
  </div>
</nzoto>

Mitó ya makambo & kopi

Hiérarchie typographique standard mpo na ko structurer ba pages web na yo.

Grille typographique mobimba esalemi na ba variables mibale ya Moins na fichier na biso ya variables.less: @basefontmpe @baseline. Ya liboso ezali base font-size oyo esalelami na mobimba mpe ya mibale ezali base line-height.

Tosalelaka ba variables wana, mpe mwa matematiki, mpo na kosala ba marges, ba paddings, mpe ba line-heights ya lolenge na biso nyonso mpe mingi mosusu.

h1. Motó ya likambo 1

h2. Motó ya likambo 2

h3. Motó ya likambo 3

h4. Motó ya likambo 4

h5. Motó ya likambo 5

h6. Motó ya likambo 6

Ndakisa ya paragrafe

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus na magnis ya kobota, nascetur ridiculus mus. Nullam id dolor id nibh ultricies mituka ut id elit.

Ndakisa ya motó ya likambo Ezali na motó ya likambo moke...

Misc. biloko oyo ezali na kati

Kosalela accent, ba adresses, & ba abréviations

<strong> <em> <address> <abbr>

Ntango nini osengeli kosalela

Esengeli kosalela bilembo ya konyata likebi ( <strong>mpe <em>) mpo na komonisa ntina mosusu to ya konyata liloba to fraze moko soki tokokanisi yango na kopi oyo ezali zingazinga na yango. Salelá <strong>mpo na ntina mpe <em>mpo na konyata mitungisi .

Konyata na paragrafe moko

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa kaka kofanda amet risus. Maecenas faucibus mollis oyo ezali na kati. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue.

Note: Ezali kaka malamu kosalela <b>mpe <i>ba tags na HTML5 mpe esengeli te kozala na style ya gras mpe italic, respectivement (bien que soki ezali na élément moko ya sémantique mingi, salela yango). <b>ezali mpo na kobimisa maloba to bafraze kozanga kopesa ntina mosusu, nzokande <i>ezali mingimingi mpo na mongongo, maloba ya tekiniki, mpe bongo na bongo.

Baadrɛsi

Elemento <address>esalelamaka mpo na ba informations ya contact mpo na nkɔkɔ na yango ya penepene, to nzoto mobimba ya mosala. Talá bandakisa mibale ya ndenge oyo bakokaki kosalela yango:

Liyebisi: Molongo moko na moko na kati <address>esengeli kosuka na ligne-break ( <br />) to kozingama na tag ya niveau ya bloc (ndakisa, <p>) mpo na kobongisa malamu makambo oyo ezali na kati.

Maloba ya mokuse

Mpo na ba abréviations mpe ba sigles, salelá <abbr>tag ( <acronym>ezali déprecated na HTML5 ). Tia formulaire ya stenographie na kati ya tag mpe tia titre mpo na kombo mobimba.

Ba citations ya bloc

<blockquote> <p> <small>

Ndenge ya kosala citatio

Mpo na kotya blockquote, zipa <blockquote>mpe <p>bilembo <small>. Salelá <small>élément mpo na ko citer source na yo mpe okozwa em dash —liboso na yango.

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba oyo ezali na ntango ya liboso ya venenatis dapibus oyo ezali na velit aliquet.

Monganga Julius Hibbert

<bokangami ya maloba>
  <p> Lorem ipsum dolor vandi amet, consectetur adipiscing elit. Motango mobimba oyo ezali na ntango ya liboso ya venenatis dapibus oyo ezali na velit aliquet. </p>
  <moke> Monganga Julius Hibbert </moke>
</blockquote ya maloba>

Ezali na ordre te<ul>

• Lorem ipsum dolor vanda amet
• Consectetur oyo ezali kopesa nzoto elit
• Moléstie ya motángo mobimba lorem na massa
• Facilisis na aliquet ya nisl ya prétium
• Nulla volutpat azali na nzoto kolɔngɔnɔ
  • Eloko oyo babengi Phasellus iaculis neque
  • Purus sodales ya ba ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libéré volutpat na
• Faucibus porta lacus oyo ezali na mpɛmbɛ
• Aenean afanda amet erat nunc
• Eget porttitor lorem na kombo ya nzambe

Kozanga style<ul.unstyled>

• Lorem ipsum dolor vanda amet
• Consectetur oyo ezali kopesa nzoto elit
• Moléstie ya motángo mobimba lorem na massa
• Facilisis na aliquet ya nisl ya prétium
• Nulla volutpat azali na nzoto kolɔngɔnɔ
  • Eloko oyo babengi Phasellus iaculis neque
  • Purus sodales ya ba ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libéré volutpat na
• Faucibus porta lacus oyo ezali na mpɛmbɛ
• Aenean afanda amet erat nunc
• Eget porttitor lorem na kombo ya nzambe

Epesamaki mitindo<ol>

1. Lorem ipsum dolor vanda amet
2. Consectetur oyo ezali kopesa nzoto elit
3. Moléstie ya motángo mobimba lorem na massa
4. Facilisis na aliquet ya nisl ya prétium
5. Nulla volutpat azali na nzoto kolɔngɔnɔ
6. Faucibus porta lacus oyo ezali na mpɛmbɛ
7. Aenean afanda amet erat nunc
8. Eget porttitor lorem na kombo ya nzambe

Ndimboladl

Ba liste ya bandimbola

Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida na eget metus.

Malesuada ezali porta

Etiam porta sem malesuada ya monene ya mollis euismod.

Code

<code> <pre>

Pimp code na yo na style na deux balises simples. Pona encore plus d'awesomeness na nzela ya javascript, bwaka na code ya Google prettify bibliothèque pe oza set.

Kolakisa code

Code, ba blocs ya to kaka ba fragments inline, ekoki kolakisa na style kaka na ko envelopper na tag ya malamu. Mpo na ba blocs ya code oyo ezali na ba lignes ebele, salela <pre>élément. Mpo na code ya kati, salelá <code>eleman.

<bokaboli>
  <h1>Motó ya likambo</h1>
  <p>Eloko moko kaka awa...</p>
</div>

<div> <h1> Motó ya likambo </h1> <p> Eloko moko kaka awa... </p> </div>
  
  

Ba étiquettes ya kati ya ligne

<span class="label">

Benga likebi to tyá elembo na fraze nyonso oyo ezali na makomi ya nzoto na yo.

Tyá elembo na eloko nyonso

Jamais na besoin ya moko ya ba fancy New! to Ba drapeaux ya ntina tango ya kokoma code? Bon, sikoyo ozali na bango. Tala oyo ekotisami na ndenge ya défaut:

Grille ya ba médias

Lakisa bililingi ya mike ya bonene ekeseni na nkasa oyo ezali na etando ya makolo ya HTML ya nse mpe na mitindo ya moke.

Ndakisa ya bililingi ya mikemike

Ba miniatures na kati .media-gridekoki kozala na taille nionso, kasi esalaka malamu mingi soki esalemi na carte directement na système ya grille ya Bootstrap oyo etongami na kati. Bolai ya bilili lokola 90, 210, mpe 330 esangani na mwa ba pixels ya padding mpo na kokokana na bonene ya .span2, .span4, mpe .span6ya makonzí.

Monene

Katikati

Moke

Kosala code na bango

Ba grilles ya média ezali facile ya kosalela mpe plutôt simple na côté ya marquage. Bokeseni na bango ezali kaka na kotalela bonene ya bililingi oyo ezali na kati.

<ul classe = "grille-ya-media" > 
  <li>
    <a href = "#" > 
      <img class = "elilingi ya moke" src = "https://esika.yango/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "elilingi ya moke" src = "https://esika.yango/330x230" alt = "" >   
    </a>
  </li>
</ul>

Kotonga bamesa

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Bamesa ezali malamu mpenza —mpo na makambo mingi. Ba tableaux ya minene, cependant, esengeli na mua bolingo ya marquage po ezala na tina, évolutif, pe etangama (na niveau ya code). Talá mwa batoli oyo okoki kosalisa.

Envelopper ntango nyonso mitó ya makonzí na yo na <thead>ndenge oyo ete hiérarchie ezala <thead>> <tr>> <th>.

Ndenge moko na mitó ya makonzí, makambo nyonso ya nzoto ya tableau na yo esengeli kozingama na <tbody>yango mpo hiérarchie na yo ezala <tbody>> <tr>> <td>.

Ndakisa: Ba styles ya tableau par défaut

Ba tableaux nionso ekozala automatiquement styled na kaka ba frontières essentielles pona ko assurer lecture pe ko maintenir structure. Pas besoin ya kobakisa ba classes to ba attributs ya likolo.

<mesa>
  ...
</tableau>

Ndakisa: Mesa oyo esalemi na mokuse

Mpo na ba tableaux oyo esengaka ba données mingi na ba espaces ya serré, salela goût condensé oyo ekataka padding na kati. Ekoki mpe kosalelama elongo na bandelo mpe ba zébra-stripes, kaka lokola ba styles ya tableau par défaut.

Ndakisa: Mesa oyo ezali na ndelo

Sala ba tables na yo ezala kaka mua moke sleeker na ko arrondir ba coins na yango pe kobakisa ba frontières na ngambo nionso.

< kelasi ya mesa = "tableau-ya ndelo" > 
  ...
</tableau>

Ndakisa: Ezali na bansinga ya zébra

Bozwa mwa kitoko na bamesa na bino na kobakisa zebra-striping —bakisa kaka .zebra-stripedkelasi.

Liyebisi: Zebra-striping ezali bobongisi ya kokende liboso oyo ezali te mpo na ba navigateurs ya kala lokola IE8 mpe na nse.

< kelasi ya mesa = "ezali na bansinga ya zébré" > 
  ...
</tableau>

Ndakisa: Zébra-rayé w/ TableSorter.js

Soki tozwi ndakisa ya liboso, tobongisi litomba ya ba tableaux na biso na kopesaka mosala ya kosala triage na nzela ya jQuery mpe plugin ya Tablesorter . Finá na motó ya likambo ya colonne nyonso mpo na kobongola ndenge oyo ozali kosala.

<script src = "js/jquery/jquery.molongo ya ba tableaux.min.js" ></script> 
<script ya makambo > 
  $ ( mosala () { . 
    $ ( "tableau#kobongisa Ndakisa ya Tableau" ). mobongisi ya mesa ({ Liste ya molongo : [[ 1 , 0 ]] });  
  });
</script>
< kelasi ya mesa = "ezali na bansinga ya zébré" > 
  ...
</tableau>

Ba styles ya défaut

Ba formulaire nionso epesami ba styles par défaut pona ko présenter yango na ndenge ya kotanga pe ya ko évoluer. Ba styles epesami mpo na bokotisi makomi, ba liste ya kopona, bisika ya makomi, ba boutons ya radio mpe ba cases ya kotiya bilembo, mpe ba boutons.

Baformilɛrɛ oyo batyá ebele

Bakisa .form-stackedna HTML ya formulaire na yo mpe okozala na ba étiquettes likolo ya ba champs na bango au lieu ya na gauche na bango. Yango esalaka malamu soki ba formulaire na yo ezali mokuse to ozali na ba colonne mibale ya ba entrées mpo na ba formulaire ya kilo.

Bosala bonene ya bilanga

Bongisá formulaire nyonso input, select, to textareabonene na kobakisa kaka mwa bakelasi na bilembo na yo.

Kobanda na v1.3.0, tobakisi ba classes ya dimensionnement basée na grille pona ba éléments ya formulaire. Svp salela ba oyo likolo ya ba classes .mini, .small, etc oyo ezali.

Ba boutons

Lokola boyokani, ba boutons esalelamaka mpo na misala nzokande ba liens esalelamaka mpo na biloko. Ndakisa, "Télécharger" ekoki kozala bouton mpe "activité récente" ekoki kozala lien.

Ba boutons nionso par défaut na style ya gris clair, kasi nombre ya ba classes fonctionnelles ekoki kosalelama pona ba styles ya couleur différente. Bakelasi yango ezali na kelasi ya langi ya bule .primary, kelasi ya langi ya bule makasi .info, kelasi ya langi ya vert .success, mpe kelasi ya motane .danger.

Ndakisa ya ba boutons

Ba styles ya boutons ekoki kozala appliqué na eloko nionso na oyo .btnesalemi. Na momesano okolinga kosalela yango kaka na <a>, <button>, mpe kopona <input>biloko. Talá ndenge oyo ezali komonana:

Bokeseni ya ba taille

Fancy ba boutons ya minene to ya mike? Zalá na yango!

Etat ya désactivé

Mpo na ba boutons oyo ezali activé te to oyo ezali désactivé na appli mpo na ntina moko to mosusu, salelá état désactivé. Yango ezali .disabledmpo na ba liens mpe :disabledmpo na <button>ba éléments.

Ba liens

Ba boutons

Ezali nini

Barre na biso ya likolo ezali barre fixe oyo ezali na logo to kombo ya site internet, navigation ya liboso, mpe formulaire ya recherche.

Personnalisable na ndenge ya moto ye moko

Ba éléments nionso na kati, pe topbar mobimba lokola, ezali optionnel. Okoki kopona kotya logo/kombo, nav, boluki, mpe nav ya mibale —to kosangisa nyonso ya yango.

Ba dropdowns ezali na kati

Lokola eteni ya navigation principale, totie makoki mpo na yo kobakisa ba dropdowns na nav na yo. Tala nav secondaire oyo ezali likolo (aligné na droite) po omona ndenge esalemaka. liBa tags ya ba dropdowns esalisaka pe kolakisa .activepona ya lokasa ya lelo.

Ba onglets na ba pilili

Bosala navigation secondaire simple na <ul>. Bobongola kati na ba onglets to ba pilili na kobakisa kelasi oyo ebongi.

Grand mpo na ba sous-sections ya contenus lokola ba pages ya paramètres ya compte na biso mpe ba timelines ya usager mpo na toggling entre ba pages ya contenus lokola. Ezali na ba styles ya tabbed to ya pilili.

Ba onglets ya base exemple

Ba onglets ekoki kosalelama lokola navigation régulière (ko charger ba pages ya libanda na onglet moko) to lokola ba zones ya contenus tabbables pona ko swapping libanda ba panneaux ya contenus. Tozali na plugin ya ba onglets oyo ekoki kosalelama pona ko intégrer oyo ya suka.

• Ndako
• Profil
• Ba messages
• Ba paramètres
• Kokutana
• Kokita ya nse
  • Lien ya mibale
  • Eloko mosusu awa
  • Lien mosusu

<ul classe = "ba onglets" > 
  <li kelasi = "mosala" ><a href = "#" > Ndako </a></li>  
  <li><a href = "#" > Lisolo ya bato </a></li> 
  <li><a href = "#" > Ba sango </a></li> 
  <li><a href = "#" > Bobongisi </a></li> 
  <li><a href = "#" > Bosololi na </a></li> 
</ul>

Ba pilili ya moboko ndakisa

• Ndako
• Profil
• Ba messages
• Ba paramètres
• Kokutana

<ul classe = "pilili" > 
  <li kelasi = "mosala" ><a href = "#" > Ndako </a></li>  
  <li><a href = "#" > Lisolo ya bato </a></li> 
  <li><a href = "#" > Ba sango </a></li> 
  <li><a href = "#" > Bobongisi </a></li> 
  <li><a href = "#" > Bosololi na </a></li> 
</ul>

Biloko ya kosala mampa

Navigation ya Breadcrumb esalelamaka lokola lolenge ya kolakisa basaleli esika bazali na kati ya app to site moko, kasi mpo na navigation ya liboso te.

• Ndako

• Ndako /
• Lokasa ya katikati

• Ndako /
• Lokasa ya katikati / .
• Mosusu

• Ndako /
• Lokasa ya katikati / .
• Mosusu moko / .
• Ozali awa

<ul class = "mbuma ya mampa" > 
  <li><a href = "#" > Ndako </a> < kalasi ya span = "mokabola" > / </span></li>   
  <li><a href = "#" > Lokasa ya katikati </a> < kalasi ya span = "mokabola" > / </span></li>   
  <li><a href = "#" > Mosusu </a> <span class = "mokabola" > / </span></li>   
  <li class = "active" > Ozali awa </li> 
</ul>

Kosala ba paginations

Pagination ultra simpliste et minimalement style inspirée par Rdio. Bloc ya monene ezali mpasi mpo na kozanga, ekoki ko évoluer na pete, mpe epesaka bisika ya minene ya ko cliquer.

<div classe = "kosala lokasa" > 
  <ul>
    <li class = "liboso ekangamaki" ><a href = "#" > ← Liboso </a></li>  
    <li kelasi = "mosala" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > 3 </a></li> Ezali ndenge nini? 
    <li><a href = "#" > 4 ​​</a></li> Ezali ndenge nini? 
    <li><a href = "#" > 5 </a></li> Ezali ndenge nini? 
    <li class = "oyo elandi" ><a href = "#" > Oyo elandi → </a></li>  
  </ul>
</div>

Ba alertes ya base

.alert-message

Ba messages ya ligne moko pona ko souligner échec, échec oyo ekoki kozala, to elonga ya action moko. Mingimingi ezali na ntina mpo na baformilɛrɛ.

Bozua javascript »

Ndakisa ya code

<div class = "kebisi ya nsango ya likebisi" > 
  <a kelasi = "kokanga" href = "#" > × </a>  
  <p><strong> Guacamole mosantu! </strong> Meilleur vérifier yo yo moko, ozali komonana malamu mingi te. </p>
</div>

Bokanga ba messages

.alert-message.block-message

Mpo na ba messages oyo esengaka mua explication, tozali na ba alertes ya style ya paragraphe. Yango ezali malamu mpenza mpo na kobimisa bansango ya mabunga milai, kokebisa mosaleli na likambo oyo ezali kozela, to kaka kolakisa makambo mpo na kotya likebi mingi na lokasa.

Bozua javascript »

Ndakisa ya code

<div class = "alert-message bloc-message likebisi" > 
  <a kelasi = "kokanga" href = "#" > × </a>  
  <p><strong> Guacamole mosantu! Oyo ezali likebisi! </strong> Meilleur vérifier yo yo moko, ozali komonana malamu mingi te. Nulla vitae elit libero, oyo ezali na mbula-mpɛmbɛ oyo babengi pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "misala-ya-kebisi" > 
    <a class = "btn moke" href = "#" > Sala likambo oyo </a> <a class = "btn moke" href = "#" > To sala boye </a>     
  </div>
</div>

Ba modaux

Modals —ba dialogues to ba lightboxes —ezali malamu mingi mpo na misala ya contexte na makambo oyo ezali na ntina ete contexte ya sima ebatelama.

Bozua javascript »

Batoli ya bisaleli

Twipsies ezali super utile pona ko aider usager confus pe ko pointer bango na direction ya bien.

Bozua javascript »

Bapopovers

Salelá ba popovers mpo na kopesa nsango ya nse ya makomi na lokasa moko kozanga ete ezala na bopusi likoló na layout.

Bozua javascript »

Kobanda na mosala

Kosangisa javascript na bibliothèque ya Bootstrap ezali super facile. Na nse tozali koleka na makambo ya moboko mpe tozali kopesa yo mwa ba plugins ya kokamwa mpo na kobanda!

Tala mikanda ya javascript »

Oyo ezali na kati

Mema mwa ndambo ya ba composants ya liboso ya Bootstrap na bomoi na ba plugins ya sika ya personnalisé oyo esalaka na jQuery mpe Ender . Tolendisi yo obakisa mpe obongola yango mpo na kokokana na bamposa na yo ya sikisiki ya botomboli.

Javascript ezali na ntina?

Te! Bootstrap esalemi liboso mpe libosoliboso mpo na kozala bibliotɛkɛ ya CSS. Javascript oyo epesaka couche interactive ya base likolo ya ba styles oyo ekotisami.

Kasi, mpo na baoyo bazali na mposa ya javascript, topesi ba plugins oyo ezali awa na likoló mpo na kosalisa yo oyeba ndenge ya kosangisa Bootstrap na javascript mpe mpo na kopesa yo nzela ya mbangu mpe ya pɛpɛlɛ mpo na mosala ya moboko mbala moko.

Mpo na koyeba makambo mingi mpe mpo na komona mwa ba démonstrations en direct, tala na lokasa na biso ya mikanda ya plugin .