Etiam porta sem malesuada ya monene ya mollis euismod. Maecenas faucibus mollis oyo ezali na kati. Morbi leo risus, porta ac consectetur ac, vestibulum na eros.
Bootstrap ezali buku ya bisaleli oyo euti na Twitter oyo ebongisami mpo na kobanda kosala ba webapps mpe ba sites.
Ezali na CSS ya base mpe HTML mpo na typographie, ba formulaire, ba boutons, ba tableaux, ba grilles, navigation, mpe mingi mosusu.
Nerd alerte: Bootstrap etongami na Less mpe esalemaki mpo na kosala libanda ya porte na ba navigateurs ya mikolo oyo na makanisi.
Mpo na kobanda nokinoki mpe na pɛtɛɛ nyonso, kosala kaka kopi ya eteni oyo na lokasa na yo ya Internet.
Fan ya kosalela Moins? Probleme te, cloner kaka repo pe bakisa ba lignes oyo:
Télécharger, fourchette, benda, ba problèmes ya fichier, pe ebele na repo officiel ya Bootstrap na Github.
Na mikolo ya liboso ya Twitter, ba ingénieurs basalelaki pene na bibliothèque nionso oyo bayebaki malamu mpo na kokokisa masengami ya front-end. Bootstrap ebandaki lokola eyano na mikakatano oyo elakisama mpe bokoli noki noki na ntango ya Hackweek ya yambo ya Twitter.
Na lisalisi mpe makanisi ya ba ingénieurs mingi na Twitter, Bootstrap ekoli mingi mpo na kosangisa kaka ba styles ya moboko te, kasi ba modèles ya design ya front-end ya elegan mpe ya koumela mingi.
Tanga makambo mosusu na dev.twitter.com ›
Bootstrap emekami mpe esungami na ba navigateurs minene ya mikolo oyo lokola Chrome, Safari, Internet Explorer, mpe Firefox.
Bootstrap eyaka mobimba na CSS oyo esangisi, oyo esalemi te, mpe ba modèles ya ndakisa.
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.
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 kelasi="molongo"> classe = "molongo" >
- <div classe = "span6 ya makonzí" >
- ...
- </div>
- <div classe = "ba colonnes ya span10" >
- ...
- </div>
- </div>
Layout ya conteneur ya base ya largeur ya 940px, na centre pona kaka soki site to page nionso.
- <nzoto>
- <div classe = "conteneur" >
- ...
- </div>
- </nzoto>
Struktur ya lokasa ya fluide to liquide oyo ekoki kobongwana na min- mpe max-largeur mpe barre ya mopanzi ya loboko ya mwasi. Ezali malamu mingi mpo na ba apps.
- <nzoto>
- <div class = "eloko-ya-conteneur" >
- <div classe = "barre ya mopanzi" >
- ...
- </div>
- <div classe = "makambo oyo ezali na kati" >
- ...
- </div>
- </div>
- </nzoto>
Hiérarchie typographique standard mpo na ko structurer ba pages web na yo.
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.
Kosalela accent, ba adresses, & ba abréviations
<strong>
<em>
<address>
<abbr>
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 .
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.
Liyebisi: Ezali kaka malamu kosalela <b>
mpe <i>
bilembo na HTML5, kasi eyaka lisusu te na ba styles inhérents. <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.
Elemento <address>
esalelamaka mpo na ba informations ya contact mpo na nkɔkɔ na yango ya penepene, to nzoto mobimba ya mosala. Talá ndenge oyo ezali komonana:
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.
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.
<blockquote>
<p>
<small>
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
<ul>
<ul.unstyled>
<ol>
dl
<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>
.
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.
# . | Prenom | Nkombo ya libota | Lokota |
---|---|---|---|
1. 1. | Mosusu | Moko | Lingelesi |
2. 2 | Joe | Sixpack ya nzoto | Lingelesi |
3 | Stu | Dent | Code |
- <tableau classe="mesa-ya-ya-komonana"> classe = "mesa-ya-ya-komonana" >
- ...
- </tableau>
Bozwa mwa kitoko na bamesa na bino na kobakisa zebra-striping —bakisa kaka .zebra-striped
kelasi.
# . | Prenom | Nkombo ya libota | Lokota |
---|---|---|---|
1. 1. | Mosusu | Moko | Lingelesi |
2. 2 | Joe | Sixpack ya nzoto | Lingelesi |
3 | Stu | Dent | Code |
Liyebisi: Zebra-striping ezali bobongisi ya kokende liboso oyo ezali te mpo na ba navigateurs ya kala lokola IE8 mpe na nse.
- <table class="mesa-ya-ya-ya-komona zébra-rayé"> class = "mesa ya momesano ya zébré-rayé" >
- ...
- </tableau>
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.
# . | Prenom | Nkombo ya libota | Lokota |
---|---|---|---|
1. 1. | Ya yo | Moko | Lingelesi |
2. 2 | Joe | Sixpack ya nzoto | Lingelesi |
3 | Stu | Dent | Code |
- <script src="js/jquery/jquery.mobongisi ya mesa.min.js"></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>
- <tableau classe = "mesa-ya-ya-ba-rayé zébré" >
- ...
- </tableau>
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.
Bakisa .form-stacked
na 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.
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, mais .primary
classe ya bleu ezali. Plus, ko rouler ba styles na yo moko eza facile peasy.
Ba styles ya boutons ekoki kozala appliqué na eloko nionso na oyo .btn
esalemi. Na momesano okolinga kosalela yango kaka na <a>
, <button>
, mpe kopona <input>
biloko. Talá ndenge oyo ezali komonana:
Fancy ba boutons ya minene to ya mike? Zalá na yango!
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 .disabled
mpo na ba liens mpe :disabled
mpo na <button>
ba éléments.
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ɛ.
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.
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.
Nzoto moko ya malamu...
Twipsies ezali super utile pona ko aider usager confus pe ko pointer bango na direction ya bien.
Lorem ipsum dolar sit amet illo errer ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus conséquuuntur consequuuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo vanda lokola fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Salelá ba popovers mpo na kopesa nsango ya nse ya makomi na lokasa moko kozanga ete ezala na bopusi likoló na layout.
Etiam porta sem malesuada ya monene ya mollis euismod. Maecenas faucibus mollis oyo ezali na kati. Morbi leo risus, porta ac consectetur ac, vestibulum na eros.
Bootstrap etongamaki na Preboot , pack ya source ouverte ya ba mixins mpe ba variables oyo ekosalelama elongo na Less , préprocesseur ya CSS mpo na développement web ya mbangu mpe ya pete.
Tala ndenge tosalelaki Preboot na Bootstrap mpe ndenge nini okoki kosalela yango soki oponi kosala Less na projet na yo ya sima.
Salelá option oyo mpo na kosalela malamu ba variables Less ya Bootstrap, mixins, mpe nesting na CSS na nzela ya javascript na navigateur na yo.
- <link rel = "lokasa ya lolenge/moke" href = "moke/bootstrap.moke" media = "nyonso" />
- <script src = "js/moke-1.0.41.min.js" ></script>
Ozali koyoka te solution ya .js? Meka appli Less Mac to salela Node.js mpo na ko compiler tango ozali ko déployer code na yo.
Tala mwa makambo ya ntina ya oyo ezali na kati ya Twitter Bootstrap lokola eteni ya Bootstrap. Motó na site Internet ya Bootstrap to lokasa ya projet Github mpo na kozwa mpe koyeba makambo mingi.
Variables na Moins ezali parfait pona ko maintenir pe ko mettre à jour CSS na yo sans mutu pasi. Ntango olingi kobongola motuya ya langi to motuya oyo osalelaka mingi, salá yango na esika moko mpe otye yango.
- // Ba liens
- @LienColor : #8b59c2 na mokili mobimba;
- @LienColorHover : molili ( @LienColor , 10 );
- // Ba gris
- @moindo : #000;
- @grayDark : kopesa pole ( @moindo , 25 %);
- @gris : kopelisa pole ( @noir , 50 %);
- @Light ya gris : kopelisa ( @noir , 70 %);
- @grayLighter : kopelisa pole ( @moindo , 90 %);
- @mondele : #fff;
- // Ba couleurs ya accent
- @bleu : #08b5fb na mokili mobimba;
- @vert : #46a546 na mokili mobimba;
- @motane : #9d261d;
- @ya langi ya jaune : #ffc40d;
- @orange : #f89406 na mokili mobimba;
- @rose : #c3325f na mokili mobimba;
- @violet : #7a43b6 na mokili mobimba;
- // Molongo ya ebandeli
- @molongo ya ebandeli : 20px ;
/* ... */
Less epesaka pe style mosusu ya commentaire en plus ya syntaxe normale ya CSS .
- // Oyo ezali commentaire
- /* Oyo pe eza commentaire */
Mixins ezali essentiellement inclus to partiels pona CSS, permettant yo kosangisa bloc ya code na moko. Bazali malamu mpo na ba propriétés ya préfix ya motɛkisi lokola box-shadow
, ba gradients ya navigateur croisé, ba stacks ya ba fonts, mpe mingi mosusu. Awa na se ezali na échantillon ya ba mixins oyo ezali na kati ya Bootstrap.
- #fonte { .
- . stenographie ( @kilo : normal , @taille : 14px , @Bolai ya ligne : 20px ) {
- fonte - bonene : @bonene ;
- font - kilo : @kilo ;
- molai ya molongo : @Bolai ya molongo ;
- } .
- . sans - serif ( @kilo : normal , @taille : 14px , @Bolai ya ligne : 20px ) {
- libota ya makomi : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- fonte - bonene : @bonene ;
- font - kilo : @kilo ;
- molai ya molongo : @Bolai ya molongo ;
- } .
- . serif ( @kilo : normal , @taille : 14px , @Bolai ya ligne : 20px ) {
- libota ya makomi : "Géorgie" , Times New Roman , Times , sans - serif ;
- fonte - bonene : @bonene ;
- font - kilo : @kilo ;
- molai ya molongo : @Bolai ya molongo ;
- } .
- . monospace ( @kilo : normal , @taille : 12px , @Bolai ya ligne : 20px ) {
- font - famille : "Monaco" , Courier Nouveau , esika moko ;
- fonte - bonene : @bonene ;
- font - kilo : @kilo ;
- molai ya molongo : @Bolai ya molongo ;
- } .
- } .
- #gradient { Ezali ndenge nini?
- . horizontal ( @Couleur ya ebandeli : #555, @Couleur ya suka: #333) {
- langi ya nsima : @endColor ;
- fond - kozongela : kozongela - x ;
- fond - image : - khtml - gradient ( linéaire , likolo ya gauche , likolo ya droite , kobanda ( @startColor ), tii na ( @endColor )); // Moto oyo azali kosala mobulu
- fond - image : - moz - linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // FF 3,6+ ezali
- fond - image : - ms - lineaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // IE10
- fond - image : - webkit - gradient ( linéaire , likolo gauche , likolo ya droite , couleur - arrêt ( 0 %, @startColor ), couleur - arrêt ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fond - image : - webkit - linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // Safari 5.1+, Chrome 10+
- fond - image : - o - linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // Opéra 11.10
- - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(langi ya ebandeli='%d', langi ya nsuka='%d', Lolenge ya gradient=1)" , @Langi ya ebandeli , @Langi ya nsuka ); // Ezali na IE8+
- filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(langi ya ebandeli='%d', langi ya nsuka='%d', Lolenge ya gradient=1)" , @Langi ya ebandeli , @Langi ya nsuka )); // IE6 mpe IE7
- fond - image : linéaire - gradient ( gauche , @Couleur ya ebandeli , @Couleur ya suka ); // Le standard
- } .
- . vertical ( @Langi ya ebandeli : #555, @Langi ya suka: #333) {
- langi ya nsima : @endColor ;
- fond - kozongela : kozongela - x ;
- fond - image : - khtml - gradient ( linéaire , likolo na gauche , na se gauche , kobanda na ( @startColor ), tii na ( @endColor )); // Moto oyo azali kosala mobulu
- fond - image : - moz - linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // FF 3,6+ ezali
- fond - image : - ms - linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // IE10
- fond - elilingi : - webkit - gradient ( linéaire , gauche haut , gauche na se , couleur - arrêt ( 0 %, @startColor ), couleur - arrêt ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fond - image : - webkit - linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // Safari 5.1+, Chrome 10+
- fond - image : - o - lineaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // Opéra 11.10
- - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(langi ya ebandeli='%d', langi ya nsuka='%d', Lolenge ya gradient=0)" , @Langi ya ebandeli , @Langi ya nsuka ); // Ezali na IE8+
- filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(langi ya ebandeli='%d', langi ya nsuka='%d', Lolenge ya gradient=0)" , @Langi ya ebandeli , @Langi ya nsuka )); // IE6 mpe IE7
- fond - image : linéaire - gradient ( @Couleur ya ebandeli , @Couleur ya suka ); // Mobeko ya momesano
- } .
- . directionnel ( @Couleur ya ebandeli : #555, @Couleur ya suka: #333, @deg: 45deg) {
- ...
- } .
- . vertical - misato - balangi ( @Couleur ya ebandeli : #00b3ee, @Couleur ya katikati: #7a43b6, @CouleurStop: 0.5, @Couleur ya suka: #c3325f) {
- ...
- } .
- } .
Bozua fancy pe bosala mua mathématiques pona ko produire ba mixins flexibles et puissants lokola oyo ezali awa na se.
- // Griditude ya kosala
- @gridMakonzí : 16 ;
- @gridBolai ya Likonzí : 40px ;
- @gridBolai ya Gutter : 20px ;
- // Système ya grille
- . eloko oyo ezali na kati { .
- bonene : @Bolai ya esika ;
- marge : 0 na ndenge ya automatique ;
- . bobongisi ya polele ();
- } .
- . makonzí ( @columnSpan : 1 ) { .
- kolakisa : na kati ya molongo ;
- float : na loboko ya mwasi ;
- bonene : ( @gridBonene ya Likonzí * @Epanzi ya Likonzí ) + ( @Bolai ya Likonzí ya grille * ( @Etando ya Likonzí - 1 ));
- marge - gauche : @gridBonene ya Gutter ;
- &: ya liboso - mwana { .
- marge - gauche : 0 ;
- } .
- } .
- . offset ya kosala ( @columnOffset : 1 ) { Ezali ndenge nini?
- margin - gauche : ( @Bolai ya Likolo ya grille * @Offset ya colonne ) + ( @Bolai ya Gutter ya grille * ( @Offset ya colonne - 1 )) ! ya ntina ;
- } .