Typographic scale

Ang tibuok typographic grid gibase sa duha ka Less variables sa among variables.less file: @baseFontSizeug @baseLineHeight. Ang una mao ang base nga gidak-on sa font nga gigamit sa tibuok ug ang ikaduha mao ang base-line-gitas-on.

Gigamit namo kadtong mga baryable, ug pipila ka matematika, sa paghimo sa mga margin, paddings, ug line-heights sa tanan namong tipo ug uban pa.

Pananglitan sa teksto sa lawas

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Panguna nga kopya sa lawas

Paghimo og usa ka parapo nga talagsaon pinaagi sa pagdugang .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Gigamit ang pagpasiugda

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Nulla vitae elit libero, usa ka pharetra augue.

Mubo nga sulat: Mobati nga gawasnon sa paggamit <b>ug <i>sa HTML5, apan ang ilang paggamit nausab og gamay. <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya samtang <i>kadaghanan alang sa tingog, teknikal nga mga termino, ug uban pa.

Pananglitan nga mga adres

Ania ang duha ka pananglitan kung giunsa paggamit ang <address>tag:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Tibuok Ngalan
[email protected]

Pananglitan nga mga minubo

Ang mga abbreviation nga adunay titleattribute adunay light dotted bottom border ug help cursor sa hover. Naghatag kini sa mga tiggamit og dugang nga timailhan nga adunay ipakita sa hover.

Idugang ang initialismklase sa usa ka minubo aron madugangan ang typographic harmony pinaagi sa paghatag niini og gamay nga gidak-on sa teksto.

Ang HTML mao ang labing maayo nga butang sukad sa hiniwa nga tinapay.

Ang minubo sa pulong nga attribute kay attr .

Aron maapil ang usa ka blockquote, ibutang <blockquote>ang bisan unsang HTML ingon nga kinutlo. Alang sa tul-id nga mga kinutlo among girekomendar ang usa ka <p>.

Ilakip ang usa ka opsyonal <small>nga elemento sa pagkutlo sa imong tinubdan ug makakuha ka og em dash —sa wala pa kini alang sa mga katuyoan sa pag-istilo.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Usa ka tawo nga bantogan </small>
</blockquote>

Ang mga default nga blockquotes gi-istilo sa ingon:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Usa ka sikat sa Lawas sa trabaho

Aron molutaw ang imong blockquote sa tuo, idugang class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Usa ka sikat sa Lawas sa trabaho

Wala ma-order

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ug masa
• Facilisis sa pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Espesye sa tanom nga bulak ang Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ug
• Faucibus porta lacus fringilla vel
• Aenean naglingkod amet erat nunc
• Eget porttitor lorem

Dili istilo

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ug masa
• Facilisis sa pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Espesye sa tanom nga bulak ang Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ug
• Faucibus porta lacus fringilla vel
• Aenean naglingkod amet erat nunc
• Eget porttitor lorem

Nagmando

<ol>

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

Deskripsyon

<dl>

Mga lista sa paghulagway

Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.

Euismod

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

Donec id elit non mi porta gravida ug eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Horizontal nga paghulagway

<dl class="dl-horizontal">

Mga lista sa paghulagway

Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.

Euismod

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

Donec id elit non mi porta gravida ug eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Espesye sa tanom nga bulak ang Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

---

Taas ang ulo! Ang pinahigda nga mga lista sa deskripsyon moputol sa mga termino nga taas kaayo aron mohaum sa wala nga kolum nga ayuhon text-overflow. Sa mas pig-ot nga viewports, sila mag-ilis sa default stacked layout.

Inline

I-wrap ang inline nga mga snippet sa code gamit ang <code>.

Pananglitan , < code> section </ code > kinahanglang iputos isip inline .  

Basic block

Gigamit <pre>alang sa daghang linya sa code. Siguruha nga makalikay sa bisan unsang mga anggulo nga bracket sa code alang sa husto nga paghubad.

<p>Sample nga teksto dinhi...</p>

<pre>
  <p>Sample nga teksto dinhi...</p>
</pre>

Mubo nga sulat: Siguroha nga ibutang ang code sulod sa <pre>mga tag nga duol sa wala kutob sa mahimo; kini maghatag sa tanan nga mga tab.

Mahimo nimong idugang ang .pre-scrollableklase nga magbutang usa ka taas nga gitas-on nga 350px ug maghatag usa ka y-axis scrollbar.

Google Pagpatahom

Kuhaa ang parehas <pre>nga elemento ug idugang ang duha nga opsyonal nga mga klase alang sa gipaayo nga paghubad.

<p> Sample nga teksto dinhi... </p>

<pre class = "prettyprint 
     linyanum" >
  <p>Sample nga teksto dinhi...</p>
</pre>

Pag-download sa google-code-prettify ug tan-awa ang readme kung unsaon paggamit.

Tag	Deskripsyon
<table>	Pagputos nga elemento alang sa pagpakita sa datos sa usa ka tabular nga pormat
<thead>	Elemento sa sudlanan alang sa mga laray sa header sa lamesa ( <tr>) aron markahan ang mga kolum sa lamesa
<tbody>	Kontainer nga elemento para sa mga laray sa lamesa ( <tr>) sa lawas sa lamesa
<tr>	Container element para sa set sa table cell ( <td>o <th>) nga makita sa usa ka laray
<td>	Default nga selyula sa lamesa
<th>	Espesyal nga table cell para sa column (o row, depende sa scope ug placement) nga mga label Kinahanglang gamiton sulod sa a<thead>
<caption>	Deskripsyon o summary sa kung unsa ang gihuptan sa lamesa, labi na mapuslanon alang sa mga magbabasa sa screen

<lamesa>
  <ulo>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </head>
  <lawas>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Ang mga lamesa awtomatiko nga gi-istilo nga adunay pipila ra nga mga utlanan aron masiguro nga mabasa ug mapadayon ang istruktura. Uban sa 2.0, .tablegikinahanglan ang klase.

< klase sa lamesa = "lamesa" > 
  …
</table>

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

Paglingaw og gamay sa imong mga lamesa pinaagi sa pagdugang og zebra-striping—idugang lang ang .table-stripedklase.

Mubo nga sulat: Ang mga striped nga lamesa naggamit sa :nth-childCSS selector ug dili magamit sa IE7-IE8.

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

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry	Ang langgam	@twitter

Idugang ang mga utlanan sa tibuok lamesa ug mga lingin nga mga kanto para sa aesthetic nga mga katuyoan.

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

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
	Mark	Si Otto	@getbootstrap
2	Jacob	Thornton	@tambok
3	Larry ang Langgam		@twitter

Himua nga mas compact ang imong mga lamesa pinaagi sa pagdugang sa .table-condensedklase sa pagputol sa table cell padding sa tunga (gikan sa 8px hangtod sa 4px).

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

#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry ang Langgam		@twitter

Mobati nga gawasnon sa paghiusa sa bisan unsang mga klase sa lamesa aron makab-ot ang lainlaing hitsura pinaagi sa paggamit sa bisan unsang magamit nga mga klase.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

	Tibuok nga ngalan
#	Unang Ngalan	Apelyido	Username
1	Mark	Si Otto	@mdo
2	Jacob	Thornton	@tambok
3	Larry ang Langgam		@twitter

Flexible nga HTML ug CSS

Ang labing kaayo nga bahin bahin sa mga porma sa Bootstrap mao nga ang tanan nimong mga input ug mga kontrol nindot tan-awon bisan giunsa nimo kini paghimo sa imong markup. Wala'y gikinahanglan nga sobra nga HTML, apan naghatag kami og mga sumbanan alang niadtong nagkinahanglan niini.

Ang labi ka komplikado nga mga layout moabut uban ang malip-ot ug mabag-o nga mga klase alang sa dali nga pag-istilo ug pagbugkos sa panghitabo, mao nga nasakup ka sa matag lakang.

Upat ka mga layout gilakip

Ang Bootstrap adunay suporta alang sa upat ka mga klase sa mga layout sa porma:

• Bertikal (default)
• Pangitaa
• Inline
• Pahigda

Ang lain-laing mga matang sa porma nga mga layout nanginahanglan pipila ka mga pagbag-o sa pagmarka, apan ang mga kontrol sa ilang kaugalingon nagpabilin ug naglihok nga parehas.

Control states ug uban pa

Ang mga porma sa Bootstrap naglakip sa mga estilo alang sa tanan nga mga kontrol sa base nga porma sama sa input, textarea, ug pagpili nga imong gipaabut. Apan kini usab adunay daghang mga naandan nga sangkap sama sa gidugtong ug giandam nga mga input ug suporta alang sa mga lista sa mga checkbox.

Ang mga estado sama sa sayup, pasidaan, ug kalampusan gilakip alang sa matag matang sa pagkontrol sa porma. Apil usab ang mga estilo para sa mga kontrol nga may kapansanan.

Batakang porma

Smart ug gaan nga mga default nga wala’y dugang nga marka.

Ngalan sa label

Pananglitan nga teksto sa tabang sa lebel sa block dinhi.

Susiha ko Isumite

<porma nga klase = "maayo" > 
  <label> Ngalan sa label </label>
  <input type = "text" class = "span3" placeholder = "Type something..." >   
  <span class = "help-block" > Pananglitan nga block-level help text dinhi. </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Susiha ko 
  </label>
  <button type = "submit" class = "btn" > Isumite </button>  
</porma>

Pagpangita nga porma

Idugang .form-searchsa porma ug .search-querysa input.

Pangitaa

<form class = "well form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Pangitaa </button>  
</porma>

Inline nga porma

Idugang .form-inlinearon mapino ang bertikal nga paglinya ug gilay-on sa mga kontrol sa porma.

Hinumdomi ako Sign in

<form class = "maayong porma-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Hinumdumi ko 
  </label>
  <button type = "submit" class = "btn" > Sign in </button>  
</porma>

Gipakita sa tuo ang tanan nga default nga mga kontrol sa porma nga among gisuportahan. Ania ang bullet list:

• mga input sa teksto (teksto, password, email, ug uban pa)
• checkbox
• radyo
• pilia
• daghang pagpili
• input sa file
• textarea

Pag-input sa teksto

Dugang sa freeform nga teksto, ang bisan unsang HTML5 nga text-based input makita nga sama niini.

Checkbox

Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo

Pilia ang lista

usa ka butang 2 3 4 5

Multicon-pagpili

1 2 3 4 5

Pag-input sa file

Textarea

I-save ang mga pagbag-o Pagkanselar

Pananglitan nga markup

Gihatag sa ibabaw nga pananglitan nga porma nga layout, ania ang markup nga nalangkit sa unang input ug control group. Ang .control-group, .control-label, ug .controlsmga klase kay gikinahanglan para sa pag-istilo.

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Teksto sa leyenda </legend>
    <div class = "kontrol-grupo" > 
      <label class = "control-label" for = "input01" > Text input </label>  
      <div class = "kontrol" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Suporta nga tabang text </p> 
      </div>
    </div>
  </fieldset>
</porma>

Ang Bootstrap adunay mga istilo alang sa gisuportahan sa browser nga naka-focus ug disabledestado. Among tangtangon ang default nga Webkit outlineug i-apply ang usa box-shadowsa dapit niini para sa :focus.

---

Pag-validate sa porma

Naglakip usab kini sa mga istilo sa pag-validate alang sa mga sayup, pasidaan, ug kalampusan. Aron magamit, idugang ang klase sa sayup sa palibot .control-group.

<fieldset
  class = "control-group error" >
  …
</fieldset>

Gipunting nga input

Dili ma-edit nga input

Pipila ka bili dinhi

Nabalda ang input

Nabalda ang checkbox

Kini usa ka disabled nga checkbox

Input nga adunay pasidaan

Tingali adunay nahitabo nga sayup

Input nga adunay sayup

Palihog tul-ira ang sayop

Input uban sa kalampusan

Woohoo!

Pagpili uban ang kalampusan

1 2 3 4 5 Woohoo!

I-save ang mga pagbag-o Pagkanselar

Pag-andam ug pagdugang sa mga input

Ang mga grupo sa pag-input-nga adunay gidugtong o gi-prepend nga teksto-naghatag usa ka dali nga paagi aron mahatagan ang dugang nga konteksto alang sa imong mga input. Ang maayong mga pananglitan naglakip sa @ sign para sa mga username sa Twitter o $ para sa panalapi.

---

Mga checkbox ug radyo

Hangtod sa v1.4, ang Bootstrap nanginahanglan ug dugang nga marka sa palibot sa mga checkbox ug mga radyo aron ma-stack kini. Karon, kini usa ka yano nga butang sa pagsubli sa <label class="checkbox">nga nagputos sa <input type="checkbox">.

Gisuportahan usab ang mga inline nga checkbox ug radyo. Idugang lang .inlinesa bisan unsa .checkboxo .radioug nahuman ka.

---

Inline nga mga porma ug idugang/i-prepend

Aron magamit ang prepend o idugang ang mga input sa usa ka inline nga porma, siguroha nga ibutang ang .add-onug inputsa parehas nga linya, nga wala’y mga espasyo.

---

Porma sa tabang nga teksto

Aron makadugang sa tabang nga teksto alang sa imong mga porma nga mga input, ilakip ang inline nga tabang nga teksto nga adunay <span class="help-inline">o usa ka tabang nga text block nga adunay <p class="help-block">pagkahuman sa input nga elemento.

Porma sa mga gidak-on sa grid

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Gamita ang parehas nga .span*mga klase gikan sa sistema sa grid alang sa mga gidak-on sa input.

Alternatibo nga mga gidak-on

Mahimo usab nimong gamiton ang mga static nga klase nga wala mag-mapa sa grid, mopahiangay sa responsive nga mga estilo sa CSS, o mag-asoy sa lain-laing matang sa kontrol (pananglitan, inputvs. select).

Giandam nga teksto

@

Ania ang pipila ka tabang nga teksto

Gidugang nga teksto

.00

Ania ang dugang tabang text

Idugang ug i-prepend

$ .00

Idugang gamit ang buton

Lakaw!

Duha ka butones nga idugang

Pangitaa Mga kapilian

Mga inline nga checkbox

1 2 3

Mga checkbox

Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo Ang opsyon nga duha mahimo usab nga susihon ug ilakip sa mga resulta sa porma Ang opsyon nga tulo mahimo—oo, nakatag-an ka niini—masusi usab ug iapil sa mga resulta sa porma

Mubo nga sulat: Ang mga label naglibot sa tanang mga opsyon alang sa mas dagkong mga lugar sa pag-klik ug usa ka mas magamit nga porma.

Mga buton sa radyo

Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo Ang kapilian nga duha mahimong lain nga butang ug ang pagpili niini magtangtang sa kapilian nga usa

I-save ang mga pagbag-o Pagkanselar

Mga buton alang sa mga aksyon

Isip usa ka kombensiyon, ang mga buton kinahanglan lang gamiton alang sa mga aksyon samtang ang mga hyperlink kay gamiton alang sa mga butang. Pananglitan, ang "Pag-download" kinahanglan usa ka buton samtang ang "bag-o nga kalihokan" kinahanglan usa ka link.

Ang mga istilo sa buton mahimong magamit sa bisan unsang butang nga gipadapat sa .btnklase. Bisan pa, kasagaran gusto nimo nga gamiton kini sa mga elemento lamang <a>ug .<button>

Cross browser compatibility

Ang IE9 wala mag-crop sa mga gradient sa background sa mga lingin nga mga kanto, mao nga among tangtangon kini. Nalambigit, IE9 jankifies disabled buttonelemento, rendering teksto gray uban sa usa ka ngil-ad nga text-anino nga kita dili ayuhon.

Daghang gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Idugang .btn-largeang , .btn-small, o .btn-minipara sa duha ka dugang nga gidak-on.

Panguna nga aksyon Aksyon

Panguna nga aksyon Aksyon

Panguna nga aksyon Aksyon

Baldado nga estado

Para sa disabled nga mga buton, idugang ang .disabledklase sa mga link ug ang disabledattribute para sa <button>mga elemento.

Panguna nga link Link

Panguna nga butones Butang

Taas ang ulo! Gigamit namon .disabledingon usa ka klase sa utility dinhi, parehas sa kasagaran nga .activeklase, busa wala’y prefix nga gikinahanglan.

Usa ka klase, daghang tag

Gamita ang .btnklase sa usa ka <a>, <button>, o <input>elemento.

Link Butang

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" >  
  Butang
</button>
<input class = "btn" type = "button"  
         bili = "Input" >
<input class = "btn" type = "isumite"  
         bili = "Isumite" >

Isip usa ka labing maayo nga praktis, sulayi nga ipares ang elemento alang kanimo nga konteksto aron masiguro nga magkatugma ang cross-browser nga paghubad. Kung naa kay input, gamita ang <input type="submit">para sa imong buton.

• icon-bildo
• icon-musika
• icon-pagpangita
• icon-sobre
• icon-kasingkasing
• icon-bituon
• icon-star-walay sulod
• icon-user
• icon-film
• icon-ika-dako
• icon-ika
• icon-ika-lista
• icon-ok
• icon-pagtangtang
• icon-zoom-in
• icon-zoom-out
• icon-off
• icon-signal
• icon-cog
• icon-basura
• icon-balay
• icon-file
• icon-panahon
• icon-dalan
• icon-download-alt
• icon-download
• icon-upload
• icon-inbox
• icon-play-lingin
• icon-subli
• icon-refresh
• icon-list-alt
• icon-lock
• icon-flag
• icon-headphones

• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• icon-tag
• icon-libro
• icon-bookmark
• icon-print
• icon-kamera
• icon-font
• icon-bold
• icon-italic
• icon-text-gitas-on
• icon-text-lapad
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-listahan
• icon-indent-left
• icon-indent-tuo
• icon-facetime-video
• icon-larawan
• icon- lapis
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• icon-share
• pagsusi sa icon
• icon-lihok
• icon-lakang-paatras
• icon-fast-backward

• icon-paatras
• icon-play
• icon-pause
• icon-stop
• icon-sa unahan
• icon-fast-forward
• icon-lakang-sa unahan
• icon-eject
• icon-chevron-wala
• icon-chevron-tuo
• icon-plus-sign
• icon-minus-sign
• icon-remove-sign
• icon-ok-sign
• icon-question-sign
• icon-info-sign
• icon-screenshot
• icon-pagtangtang-lingin
• icon-ok-lingin
• icon-ban-lingin
• icon-arrow-wala
• icon-arrow-tuo
• icon-arrow-up
• icon-arrow-down
• icon-share-alt
• icon-resize-puno
• icon-resize-gamay
• icon-plus
• icon-minus
• icon-asterisk
• icon-exclamation-sign
• icon-regalo
• icon-dahon
• icon-sunog
• icon-mata-bukas

• icon-eye-close
• icon-warning-sign
• icon-eroplano
• icon-kalendaryo
• icon-random
• icon-komento
• icon-magnet
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-cart
• icon-folder-close
• icon-folder-open
• icon-resize-vertical
• icon-resize-horizontal
• icon-hdd
• icon-bullhorn
• icon-kampana
• icon-sertipiko
• icon-thumbs-up
• icon-thumbs-down
• icon-kamot-tuo
• icon-kamot-wala
• icon-kamot
• icon-hand-down
• icon-circle-arrow-tuo
• icon-circle-arrow-left
• icon-circle-arrow-up
• icon-circle-arrow-down
• icon-globe
• icon-wrench
• icon-mga buluhaton
• icon-filter
• icon-briefcase
• icon-fullscreen

Gitukod isip usa ka sprite

Imbis nga himoong dugang nga hangyo ang matag icon, gihugpong namo kini ngadto sa usa ka sprite—usa ka hugpong sa mga hulagway sa usa ka file nga naggamit sa CSS aron ipahimutang ang mga hulagway sa background-position. Kini ang parehas nga pamaagi nga among gigamit sa Twitter.com ug kini nagtrabaho og maayo alang kanamo.

Ang tanan nga mga klase sa mga icon adunay prefix .icon-alang sa tukma nga namespace ug scoping, sama sa among ubang mga sangkap. Makatabang kini nga malikayan ang mga panagsumpaki sa ubang mga himan.

Gihatagan kami sa Glyphicons sa paggamit sa Halflings set sa among open-source toolkit basta maghatag kami ug link ug credit dinhi sa mga docs. Palihug hunahunaa ang pagbuhat sa parehas sa imong mga proyekto.

Unsaon paggamit

Ang Bootstrap naggamit ug <i>tag para sa tanang icon, pero wala silay case class—usa lang ka shared prefix. Aron magamit, ibutang ang mosunod nga code bisan asa:

<i class = "icon-search" ></i> 

Adunay usab mga istilo nga magamit alang sa balit-ad (puti) nga mga icon, nga andam sa usa ka dugang nga klase:

<i class = "icon-search icon-white" ></i> 

Adunay 140 ka klase nga mapilian para sa imong mga icon. Pagdugang lang usa ka <i>tag nga adunay husto nga mga klase ug andam ka na. Makita nimo ang tibuok listahan sa sprites.less o dinhi mismo niini nga dokumento.

Taas ang ulo! Kung mogamit sa tupad sa mga kuwerdas sa teksto, sama sa mga buton o nav link, siguroha nga magbilin usa ka espasyo pagkahuman sa <i>tag alang sa husto nga gilay-on.

Paggamit sa mga kaso

Nindot ang mga icon, apan asa man kini gamiton? Ania ang pipila ka mga ideya:

• Ingon mga biswal alang sa imong nabigasyon sa sidebar
• Para sa lunsay nga icon-driven navigation
• Para sa mga buton nga makatabang sa pagpasabot sa kahulogan sa usa ka aksyon
• Uban ang mga link aron ipaambit ang konteksto sa destinasyon sa usa ka tiggamit

Sa tinuud, bisan asa nimo ibutang ang usa ka <i>tag, mahimo nimong ibutang ang usa ka icon.

I-refresh Checkout Pagtangtang

Komento Mga setting Dugang Impormasyon

Email adres