Skala typografika

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.

Text body ohatra

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.

Fampiasana fanamafisana

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.

Adiresy ohatra

Ireto misy ohatra roa amin'ny fampiasana ny <address>tag:

Ohatra fanafohezana

Ny fanafohezana dia atao amin'ny sora-baventy lehibe sy sisiny ambany misy teboka maivana. Izy ireo koa dia manana cursor fanampiana amin'ny hover ka ny mpampiasa dia manana famantarana fanampiny fa hisy zavatra haseho amin'ny hover.

HTML no zavatra tsara indrindra hatramin'ny mofo voatetika.

Ny fanafohezana ny teny hoe attribute dia attr .

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 atao 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

Tsy voalamina

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem sy massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Unstyled

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem sy massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

baiko

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem sy massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Description

<dl>

Lisitry ny famaritana

Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Milahatra

Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>.

Ohatra , <code> fizarana < / code > dia tokony hofonosina inline .  

Boky fototra

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.

Google Prettify

Raiso ny <pre>singa mitovy ary ampio kilasy roa tsy azo atao ho an'ny famandrihana 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.

<latabatra>
  <loha>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </head>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ table>

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>

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>

Manampia sisin-tany manodidina ny latabatra manontolo sy ny zorony boribory ho an'ny tanjona haingo.

<table class = "table table-bordered" > 
  …
</ table>

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>

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>

Flexible HTML sy CSS

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.

Fametrahana efatra no tafiditra

Ny Bootstrap dia tonga miaraka amin'ny fanohanana ireo karazana endrika efatra:

• Mitsangana (default)
• karohy
• Milahatra
• Marindrano

Ny karazana fandrafetana endrika isan-karazany dia mitaky fanovana sasany amin'ny marika, fa ny fanaraha-maso ny tenany dia mijanona ary tsy miova.

Fanjakana mifehy sy ny maro hafa

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.

Fomba fototra

Miaraka amin'ny v2.0, manana endrika maivana kokoa sy marani-tsaina kokoa izahay ho an'ny endrika endrika. Tsy misy marika fanampiny, fifehezana endrika fotsiny.

<form class = "tsara" > 
  <label> Anaran'ny marika </label>
  < type input = "text" class = "span3" placeholder = " Type something…" >   
  <span class = "help-inline" > Lahatsoratra fanampiana mifandraika! </span> 
  <label class = "checkbox" > 
    < karazana fampidirana = "boaty check" > Jereo aho 
  </label>
  <button type = "submit" class = "btn" > Alefaso </bt>  
</form>

Taratasy fikarohana

Maneho taratry ny endrika WebKit default, ampio fotsiny .form-searchho an'ny saha fikarohana boribory fanampiny.

<form class = "well form-search" > 
  < karazana fampidirana = "text" class = "fanontaniana amin'ny fikarohana antonony" >  
  <button type = "submit" class = "btn" > Search </button>  
</form>

Endrika inline

Ny fidirana dia ambaratonga sakana hanombohana. Ho an'ny .form-inlineary .form-horizontal, mampiasa sakana an-tsipika izahay.

<form class = "tsara endrika-inline" > 
  < type input = "text" class = "input-small" placeholder = "Email" >   
  < karazana fampidirana = "password" class = "fidirana-kely" placeholder = "Password" >   
  < karazana bokotra = "manefa" class = "btn" > Mandehana </ bokotra>  
</form>

Ohatra marika

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>

Inona no tafiditra

Aseho eo ankavia ny fanaraha-maso endrika rehetra tohananay. Ity ny lisitry ny bala:

• fampidirana lahatsoratra (soratra, tenimiafina, mailaka, sns)
• checkbox
• fampielezam-peo
• mifidy
• safidy maromaro
• fampidirana rakitra
• textarea

Default vaovao miaraka amin'ny v2.0

Hatrany amin'ny v1.4, ny fomba fanao mahazatra an'ny Bootstrap dia nampiasa ny fisehon'ny marindrano. Miaraka amin'ny Bootstrap 2, nesorinay io teritery io mba hananana default kokoa sy azo scalable amin'ny endrika rehetra.

Toetran'ny navigateur nohavaozina

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.

Fanamarinana endrika

Ao anatin'izany ihany koa ny fomba fanamarinana ny fahadisoana, fampitandremana ary fahombiazana. Raha hampiasaina dia ampio ny kilasy diso amin'ny manodidina .control-group.

<fieldset
  class = "error groupe control" >
  …
</fieldset>

Ampidiro & ampio ny fampidirana

Ny 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.

Boxes sy radios

Hatramin'ny v1.4, Bootstrap dia nitaky marika fanampiny manodidina ny boaty 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.

Taratasy an-tsoratra ary ampiana/fanolorana

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.

Mamoaka lahatsoratra fanampiana

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.

Bokotra ho an'ny hetsika

Amin'ny maha-fifanarahana azy, ny bokotra dia tsy tokony hampiasaina afa-tsy amin'ny hetsika raha toa ka ny hyperlinks dia ampiasaina amin'ny zavatra. Ohatra, ny "Download" dia tokony ho bokotra raha ny "activité vao haingana" dia tokony ho rohy.

Ny fomba bokotra dia azo ampiharina amin'ny zavatra rehetra misy ny .btnkilasy ampiharina. Na izany aza, amin'ny ankapobeny dia tianao ny hampihatra ireo amin'ny singa <a>sy <button>singa ihany.

Mifanaraka amin'ny navigateur

IE9 dia tsy manapaka ny gradient ambadika amin'ny zoro boribory, ka esorinay izany. Mifandraika amin'izany, ny IE9 dia manafoana buttonireo singa kilemaina, manome loko maitso miaraka amin'ny alokaloka ratsy izay tsy azontsika amboarina.

Habe maromaro

Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-large, .btn-small, na .btn-minihabe roa fanampiny.

Hetsika voalohany Action

Hetsika voalohany Action

Hetsika voalohany Action

Fanjakana kilemaina

Ho an'ny bokotra kilemaina, ampio ny .disabledkilasy amin'ny rohy sy ny disabledtoetran'ny <button>singa.

Rohy voalohany Rohy

Bokotra voalohany bokotra

Fampitandremana! Ampiasainay .disabledho kilasy fampiasa eto, mitovy amin'ny .activekilasy mahazatra, ka tsy ilaina ny prefix.

Kilasy iray, marika maromaro

Ampiasao ny .btnkilasy amin'ny singa <a>, <button>, na <input>.

<a class = "btn" href = "" > Rohy </a>  
< btn class = "btn" type = "submit" >  
  bokotra
</bokotra>
<input class = "btn" type = "button"  
         value = "Input" >
<input class = "btn" type = "submit"  
         value = "Alefaso" >

Amin'ny fomba fanao tsara indrindra, andramo ny hampifanaraka ny singa ho anao contexte mba hahazoana antoka fa mifanaraka amin'ny navigateur. Raha manana ianao dia inputampiasao <input type="submit">ny bokotra iray.

• fitaratra kisary
• icon-mozika
• icon-search
• valopy kisary
• icon-fo
• kintana kisary
• icon-star-empty
• mpampiasa icon
• sarimihetsika-kisary
• icon-th-lehibe
• icon-th
• icon-th-list
• icon-ok
• icon-esory
• icon-zoom-in
• icon-zoom-out
• icon-off
• icon-signal
• icon-cog
• kisary-fako
• icon-trano
• icon-file
• icon-time
• kisary-dalana
• icon-download-alt
• kisary-download
• icon-upload
• icon-inbox
• icon-play-circle
• icon-avereno

• icon-refresh
• icon-list-alt
• kisary-hiddy
• saina kisary
• icon-headphones
• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• kisary-tag
• icon-tags
• kisary-boky
• kisary-boky
• kisary-print
• kisary-fakan-tsary
• icon-font
• icon-bold
• icon-italic
• icon-text-haavo
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• kisary-lisitra
• icon-indent-ankavia
• icon-indent-right
• icon-facetime-video
• sary kisary

• icon-pensil
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• kisary-mizara
• icon-check
• icon-move
• icon-step-backward
• icon-fast-backward
• kisary-mihemotra
• kisary-play
• icon-pause
• icon-stop
• icon-forward
• icon-fast-forward
• kisary-dingana-mandroso
• icon-eject
• icon-chevron-left
• icon-chevron-right
• icon-plus-sign
• icon-minus-sign
• icon-remove-sign
• icon-ok-sign
• famantarana-fanontaniana
• icon-info-sign
• icon-screenshot
• icon-remove-circle
• kisary-ok-circle
• icon-ban-circle

• icon-arrow-ankavia
• icon-arrow-right
• icon-arrow-up
• kisary-tsipìka-midina
• icon-share-alt
• icon-resize-feno
• kisary-manova-kely
• icon-plus
• icon-minus
• icon-asterisk
• icon-exclamation-sign
• icon-fanomezana
• kisary-ravina
• kisary-afo
• icon-maso-open
• kisary-maso-akaiky
• famantarana-fampitandremana
• icon-plane
• kalandrie kisary
• icon-random
• icon-comment
• icon-magnet
• icon-chevron-up
• icon-chevron-down
• kisary-retweet
• sarety-miantsena
• icon-folder-akatona
• icon-folder-open
• icon-resize-vertical
• icon-resize-horizontal

Naorina ho sprite

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.

Ny fomba fampiasana

Miaraka amin'ny v2.0.1, dia nisafidy ny hampiasa <i>marika ho an'ny kisary rehetra izahay, saingy tsy misy sokajy 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.

Mampiasa tranga

Tsara ny kisary, fa aiza no hampiasana azy ireo? Ireto misy hevitra vitsivitsy:

• Toy ny sary ho an'ny navigateur sidebar anao
• Ho an'ny fitetezana kisary fotsiny
• Ho an'ny bokotra manampy amin'ny fampitana ny dikan'ny hetsika iray
• Miaraka amin'ny rohy hizarana contexte amin'ny toeran'ny mpampiasa

Amin'ny ankapobeny, na aiza na aiza ahafahanao mametraka <i>marika dia azonao atao ny mametraka kisary.

Havaozina Zahao hoe Mamafa

fanehoan-kevitra Fikirana More Info