Eo an-tampon'ny scaffolding, ny singa HTML fototra dia novolavolaina sy hatsaraina miaraka amin'ny kilasy azo itarina mba hanomezana endrika vaovao sy tsy miovaova.
Ny grids typografika manontolo dia mifototra amin'ny variable Less roa ao amin'ny rakitra variables.less: @baseFontSizesy @baseLineHeight. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra.
Mampiasa ireo fari-pahalalana ireo izahay, ary ny matematika sasany, mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazana rehetra misy anay sy ny maro hafa.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| singa | Fampiasana | tsy voatery |
|---|---|---|
<strong> |
Mba hanamafisana sombin-tsoratra misy zava- dehibe | tsy misy |
<em> |
Mba hanamafisana sombin-tsoratra misy adin -tsaina | tsy misy |
<abbr> |
Manarona fanafohezana sy fanafohezan-teny hanehoana ny dikan-teny miitatra amin'ny hover | Ampidiro ny .initialismny kilasy ho an'ny fanafohezana lehibe. |
<address> |
Mba hahazoana fampahalalana momba ny fifandraisana amin'ny razambeny akaiky indrindra na ny vondron'asa manontolo | Tehirizo ny format amin'ny famaranana ny andalana rehetra amin'ny<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Fanamarihana: Aza misalasala mampiasa <b>sy <i>amin'ny HTML5, fa niova kely ny fampiasana azy. <b>dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny fa <i>indrindra amin'ny feo, teny teknika, sns.
Ireto misy ohatra roa amin'ny fampiasana ny <address>tag:
Ny fanafohezana miaraka amin'ny titletoetra dia manana sisiny ambany misy teboka maivana ary cursor fanampiana eo amin'ny hover. Manome famantarana fanampiny ho an'ny mpampiasa izany fa hisy zavatra haseho amin'ny hover.
Ampio ny initialismkilasy amin'ny fanafohezana mba hampitomboana ny firindran'ny typografika amin'ny fanomezana azy habe lahatsoratra kely kokoa.
HTML no zavatra tsara indrindra hatramin'ny mofo voatetika.
Ny fanafohezana ny teny hoe attribute dia attr .
| singa | Fampiasana | tsy voatery |
|---|---|---|
<blockquote> |
Singa ambaratonga sakana amin'ny fitanisana votoaty avy amin'ny loharano hafa | Ampio .pull-leftsy .pull-rightkilasy ho an'ny safidy mitsingevana |
<small> |
Singa azo atao amin'ny fanampiana teny nalaina ho an'ny mpampiasa, mazàna mpanoratra manana lohatenin'ny asa | Apetraho <cite>manodidina ny lohateny na anaran'ny loharano |
Mba hampidirana blockquote dia aforeto <blockquote>ny HTML rehetra ho toy ny teny nindramina. Ho an'ny teny fohy dia manoro hevitra izahay <p>.
Ampidiro <small>singa iray azo ampiasaina mba hitanisana ny loharanonao ary hahazo tsipika em —alohan'ny hanaovana styling ianao.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Olona malaza </ small>
- </blockquote>
Default blockquotes dia natao toy izao:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Olona malaza ao amin'ny Body of work
Raha te-hitsinkafona ny blockquote anao miankavanana, ampio class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Olona malaza ao amin'ny Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Fampitandremana! Ny lisitry ny famaritana marindrano dia hanapaka ny teny lava loatra ka tsy ho tafiditra ao amin'ny fanamboarana tsanganana havia text-overflow. Amin'ny toerana fijerena tery kokoa dia hiova ho amin'ny fisehon'ny stacked default izy ireo.
Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>.
- Ohatra , <code> fizarana < / code > dia tokony hofonosina inline .
Ampiasao <pre>amin'ny andalana maromaro maromaro. Aza hadino ny mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy.
<p>Santionany lahatsoratra eto...</p>
- <pre>
- <p>Santionany lahatsoratra eto...</p>
- </pre>
Fanamarihana: Tandremo tsara ny mitazona ny kaody ao anatin'ny <pre>marika manakaiky ny ankavia araka izay azo atao; izany dia hanome ny tabilao rehetra.
Azonao atao ihany koa ny manampy ny .pre-scrollablekilasy izay hametraka ny haavon'ny 350px ambony indrindra ary hanome scrollbar y-axis.
Raiso ny <pre>singa iray ihany ary ampio kilasy roa tsy voatery ho an'ny fandikana nohatsaraina.
- <p> Santionany lahatsoratra eto... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Santionany lahatsoratra eto...</p>
- </pre>
Ampidino ny google-code-prettify ary jereo ny readme momba ny fampiasana azy.
| tenifototra | Description |
|---|---|
<table> |
Singa famonosana hanehoana angona amin'ny endrika tabilao |
<thead> |
Singa fitoeran'entana ho an'ny andalana lohatenin'ny latabatra ( <tr>) hanamarihana ny tsanganana latabatra |
<tbody> |
Singa fitoeran'entana ho an'ny andalana latabatra ( <tr>) ao amin'ny vatan'ny latabatra |
<tr> |
Singa fitoeran'entana ho an'ny selan'ny latabatra ( <td>na <th>) izay miseho amin'ny andalana tokana |
<td> |
Default table cell |
<th> |
Efitra latabatra manokana ho an'ny tsanganana (na andalana, miankina amin'ny sehatra sy ny fametrahana) etikety Tsy maintsy ampiasaina ao anatin'ny a <thead> |
<caption> |
Famaritana na famintinana ny zavatra tazonin'ny latabatra, indrindra ho an'ny mpamaky efijery |
- <latabatra>
- <loha>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ table>
| Anarana | KILASY | Description |
|---|---|---|
| toerana misy anao | tsy misy | Tsy misy fomba, tsanganana sy andalana fotsiny |
| fototra | .table |
Tsipika marindrano ihany eo anelanelan'ny andalana |
| nanamorona | .table-bordered |
Manodidina ny zorony ary manampy sisin-tany ivelany |
| Zebra-stripe | .table-striped |
Manampy loko miloko mavo mavo amin'ny andalana hafahafa (1, 3, 5, sns) |
| Voafintina | .table-condensed |
Manapaka padding mitsangana amin'ny antsasany, manomboka amin'ny 8px ka hatramin'ny 4px, ao anatin'ny singa rehetra tdsy ny thsinga |
Ny latabatra dia natao ho azy miaraka amin'ny sisiny vitsivitsy mba hiantohana ny famakian-teny sy ny fikojakojana ny rafitra. Miaraka amin'ny 2.0, .tableilaina ny kilasy.
- < kilasy latabatra = "table" >
- …
- </ table>
| # | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
|---|---|---|---|
| 1 | marika | Otto | @mdo |
| 2 | Jakoba | Thornton | @matavy |
| 3 | Larry | ny Vorona |
Ataovy mahafinaritra kely ny latabatrao amin'ny fampidirana zebra-striping—ampio fotsiny ny .table-stripedkilasy.
Fanamarihana: Mampiasa ny :nth-childmpifidy CSS ny latabatra miolakolaka ary tsy hita ao amin'ny IE7-IE8.
- < table class = "table table-striped" >
- …
- </ table>
| # | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
|---|---|---|---|
| 1 | marika | Otto | @mdo |
| 2 | Jakoba | Thornton | @matavy |
| 3 | Larry | ny Vorona |
Ampio sisin-tany manodidina ny latabatra manontolo sy ny zorony boribory ho an'ny tanjona haingo.
- <table class = "table table-bordered" >
- …
- </ table>
| # | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
|---|---|---|---|
| 1 | marika | Otto | @mdo |
| marika | Otto | @getbootstrap | |
| 2 | Jakoba | Thornton | @matavy |
| 3 | Larry the Bird | ||
Ataovy mirindra kokoa ny latabatrao amin'ny alalan'ny fampidirana ny .table-condensedkilasy hanapaka ny fonon'ny sela latabatra ho antsasany (avy amin'ny 8px ka hatramin'ny 4px).
- < table class = "table table-condensed" >
- …
- </ table>
| # | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
|---|---|---|---|
| 1 | marika | Otto | @mdo |
| 2 | Jakoba | Thornton | @matavy |
| 3 | Larry the Bird | ||
Aza misalasala manambatra ny kilasy latabatra mba hahazoana endrika samihafa amin'ny fampiasana ny kilasy misy.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </ table>
| Anarana feno | |||
|---|---|---|---|
| # | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
| 1 | marika | Otto | @mdo |
| 2 | Jakoba | Thornton | @matavy |
| 3 | Larry the Bird | ||
Ny ampahany tsara indrindra amin'ny endrika ao amin'ny Bootstrap dia ny fampidiranao sy ny fanaraha-maso rehetra dia mijery tsara na manao ahoana na manao ahoana ny fananganana azy amin'ny marikao. Tsy ilaina ny HTML tafahoatra, fa manome ny lamina ho an'ireo izay mitaky izany izahay.
Ny fandrindrana sarotra kokoa dia tonga miaraka amin'ny kilasy fohy sy azo esorina ho an'ny fanaingoana mora sy famatorana hetsika, ka voarakotra isaky ny dingana ianao.
Ny Bootstrap dia tonga miaraka amin'ny fanohanana ireo karazana endrika efatra:
Ny karazana fandrafetana endrika isan-karazany dia mitaky fanovana sasany amin'ny marika, fa ny fanaraha-maso ny tenany dia mijanona ary tsy miova.
Ny endrik'i Bootstrap dia misy fomba ho an'ny fanaraha-maso endrika fototra rehetra toy ny fampidirana, textarea ary fifantenana andrasanao. Saingy miaraka amin'ny singa mahazatra maromaro toy ny fampidirana apetaka sy efa voaomana ary fanohanana ny lisitry ny boaty.
Ny fanjakana toy ny fahadisoana, fampitandremana ary fahombiazana dia ampidirina ho an'ny karazana fanaraha-maso isan-karazany. Misy ihany koa ny fomba fanaraha-maso ho an'ny kilemaina.
Bootstrap dia manome marika sy fomba tsotra ho an'ny endrika efatra amin'ny endrika tranonkala mahazatra.
| Anarana | KILASY | Description |
|---|---|---|
| Mitsangana (default) | .form-vertical (tsy takiana) |
Etikety mivondrona miankavia eo amin'ny fanaraha-maso |
| Milahatra | .form-inline |
Etikety mirindra ankavia sy fanaraha-maso sakana an-tsipika ho an'ny fomba compact |
| karohy | .form-search |
Fampidirana lahatsoratra mihoatra ny boribory ho an'ny estetika fikarohana mahazatra |
| Marindrano | .form-horizontal |
Atsipazo ny etikety miankavia miankavanana amin'ny tsipika mitovy amin'ny fanaraha-maso |
Smart sy maivana default tsy misy marika fanampiny.
- <form class = "tsara" >
- <label> Anaran'ny marika </label>
- < type input = "text" class = "span3" placeholder = " Type something…" >
- <span class = "help-block" > Ohatra lahatsoratra fanampiana ambaratonga sakana eto. </span>
- <label class = "checkbox" >
- < karazana fampidirana = "boaty check" > Jereo aho
- </label>
- <button type = "submit" class = "btn" > Alefaso </bt>
- </form>
Ampio .form-searchamin'ny endrika sy .search-queryamin'ny input.
- <form class = "well form-search" >
- < karazana fampidirana = "text" class = "fanontaniana amin'ny fikarohana antonony" >
- <button type = "submit" class = "btn" > Search </button>
- </form>
Ampio .form-inlinehanatsara ny fampifanarahana mitsangana sy ny elanelan'ny fanaraha-maso endrika.
- <form class = "tsara endrika-inline" >
- < type input = "text" class = "input-small" placeholder = "Email" >
- < karazana fampidirana = "password" class = "fidirana-kely" placeholder = "Password" >
- <label class = "checkbox" >
- < karazana fampidirana = "boasary" > Tsarovy aho
- </label>
- <button type = "submit" class = "btn" > Midira </button>
- </form>
Aseho eo ankavanana ny fanaraha-maso ny endrika rehetra tohananay. Ity ny lisitry ny bala:
Raha jerena ny fandrafetana endrika ohatra etsy ambony, ity ny marika mifandraika amin'ny vondrona fampidirana sy fanaraha-maso voalohany. Ny .control-group, .control-label, ary ny .controlskilasy dia ilaina amin'ny famolavolana.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> lahatsoratra angano </legend>
- <div class = "vondrona fanaraha-maso" >
- <label class = "control-label" for = "input01" > Fampidirana lahatsoratra </label>
- <div class = "controls" >
- < karazana fampidirana = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > lahatsoratra fanampiana fanohanana </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap dia manasongadina fomba ho an'ny navigateur-tohanan'ny mifantoka sy ny disabledfanjakana. Esorinay ny Webkit default outlineary ampiharo box-shadowamin'ny toerany ny :focus.
Ao anatin'izany ihany koa ny fomba fanamarinana ny fahadisoana, ny fampitandremana ary ny fahombiazana. Raha hampiasaina dia ampio ny kilasy diso amin'ny manodidina .control-group.
- <fieldset
- class = "error groupe control" >
- …
- </fieldset>
Vondrona fampidirana—miaraka amin'ny lahatsoratra ampiana na apetraka mialoha—dia manome fomba mora hanomezana teny manodidina bebe kokoa ho an'ny fampidiranao. Ohatra tsara dia ahitana ny famantarana @ ho an'ny mpampiasa Twitter na $ ho an'ny vola.
Hatramin'ny v1.4, ny Bootstrap dia nitaky marika fanampiny manodidina ny boaty fisavana sy radio mba hametahana azy ireo. Ankehitriny, resaka tsotra ny mamerina ilay <label class="checkbox">izay mandrakotra ny <input type="checkbox">.
Tohanana ihany koa ny boaty fisavana sy radio. Ampio fotsiny .inlineny iray .checkboxna .radiodia vita ianao.
Raha hampiasa ny fampidirana mialoha na ampiana amin'ny endrika inline dia ataovy izay hametrahana ny .add-onsy inputeo amin'ny tsipika iray ihany, tsy misy elanelana.
Raha te hampiditra lahatsoratra fanampiana ho an'ny fampidiran-ketrao dia ampidiro lahatsoratra fanampiana an-tserasera miaraka amin'ny sakan-tsoratra <span class="help-inline">fanampiana miaraka <p class="help-block">aorian'ny singa fampidirana.
Raha tokony hataonay ho fangatahana fanampiny ny kisary tsirairay, dia natambatray ho sprite izy ireo—sary maromaro ao anaty rakitra iray izay mampiasa CSS hametrahana ireo sary miaraka amin'ny background-position. Io ihany no fomba ampiasaintsika ao amin'ny Twitter.com ary nandaitra tsara ho antsika izany.
Ny kilasin'ny kisary rehetra dia voafantina miaraka .icon-amin'ny elanelan'ny anarana sy ny scoping, mitovy amin'ny singa hafa. Izany dia hanampy amin'ny fisorohana ny fifandonana amin'ny fitaovana hafa.
Ny Glyphicons dia nanome anay ny fampiasana ny Halflings napetraka ao amin'ny kitapom-pitaovana open-source raha mbola manome rohy sy crédit eto amin'ny doka izahay. Azafady, diniho ny hanao toy izany amin'ny tetikasanao.
Bootstrap dia mampiasa <i>tenifototra ho an'ny kisary rehetra, saingy tsy manana kilasy tranga izy ireo - prefix iombonana ihany. Raha hampiasaina dia apetraho na aiza na aiza ity kaody manaraka ity:
- <i class = "icon-search" ></i>
Misy ihany koa ny fomba azo alaina ho an'ny kisary mivadika (fotsy), namboarina miaraka amin'ny kilasy fanampiny:
- <i class = "icon-search icon-white" ></i>
Misy kilasy 120 azo isafidianana ho an'ny kisaryo. Manampia <i>marika fotsiny miaraka amin'ny kilasy mety dia vonona ianao. Azonao atao ny mahita ny lisitra feno amin'ny sprites.less na eto amin'ity rakitra ity.
Fampitandremana! Rehefa mampiasa anilan'ny tadin-tsoratra, toy ny amin'ny bokotra na rohy nav, dia aoka ho azo antoka ny hamela toerana aorian'ny <i>marika mba hahazoana elanelana mety.
Tsara ny kisary, fa aiza no hampiasana azy? Ireto misy hevitra vitsivitsy:
Amin'ny ankapobeny, na aiza na aiza ahafahanao mametraka <i>marika dia azonao atao ny mametraka kisary.
Ampiasao izy ireo amin'ny bokotra, vondrona bokotra ho an'ny fitaovana, fitetezana, na fampidirana endrika efa voaomana.