Typographic scale

Ang buong typographic grid ay batay sa dalawang Less variables sa aming variables.less file: @baseFontSizeat @baseLineHeight. Ang una ay ang base font-size na ginamit sa kabuuan at ang pangalawa ay ang base line-height.

Ginagamit namin ang mga variable na iyon, at ilang matematika, upang gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa.

Halimbawa ng body text

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

Gamit ang diin

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.

Tandaan: Huwag mag-atubiling gamitin <b>at <i>sa HTML5, ngunit medyo nagbago ang kanilang paggamit. <b>ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan habang <i>kadalasan ay para sa boses, teknikal na termino, atbp.

Mga halimbawang address

Narito ang dalawang halimbawa kung paano magagamit ang <address>tag:

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

Buong Pangalan
[email protected]

Halimbawa ng mga pagdadaglat

Ang mga abbreviation na may titleattribute ay may light dotted bottom border at help cursor sa hover. Nagbibigay ito sa mga user ng karagdagang indikasyon na may ipapakita sa hover.

Idagdag ang initialismklase sa isang abbreviation upang mapataas ang typographic harmony sa pamamagitan ng pagbibigay dito ng mas maliit na laki ng text.

Ang HTML ay ang pinakamagandang bagay mula noong hiniwang tinapay.

Ang pagdadaglat ng salitang attribute ay attr .

Upang magsama ng blockquote, balutin ang <blockquote>anumang HTML bilang quote. Para sa mga tuwid na panipi, inirerekomenda namin ang isang <p>.

Magsama ng opsyonal <small>na elemento upang banggitin ang iyong pinagmulan at makakakuha ka ng em dash —bago ito para sa mga layunin ng pag-istilo.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Isang taong sikat </small>
</blockquote>

Ang mga default na blockquotes ay naka-istilo nang ganito:

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

Isang taong sikat sa Body of work

Upang palutangin ang iyong blockquote sa kanan, idagdag ang class="pull-right":

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

Isang taong sikat sa Body of work

Hindi nakaayos

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at masa
• Facilisis sa 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 umupo amet erat nunc
• Eget porttitor lorem

Walang istilo

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at masa
• Facilisis sa 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 umupo amet erat nunc
• Eget porttitor lorem

Inutusan

<ol>

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

Paglalarawan

<dl>

Mga listahan ng paglalarawan

Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Pahalang na paglalarawan

<dl class="dl-horizontal">

Mga listahan ng paglalarawan

Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Nasa linya

I-wrap ang mga inline na snippet ng code gamit ang <code>.

Halimbawa , ang <code> section </ code > ay dapat na nakabalot bilang inline .  

Pangunahing bloke

Gamitin <pre>para sa maraming linya ng code. Tiyaking takasan ang anumang mga anggulong bracket sa code para sa wastong pag-render.

<p>Sample text dito...</p>

<pre>
  <p>Sample ng text dito...</p>
</pre>

Tandaan: Tiyaking panatilihin ang code sa loob <pre>ng mga tag na malapit sa kaliwa hangga't maaari; ire-render nito ang lahat ng tab.

Maaari mong opsyonal na idagdag ang .pre-scrollableklase na magtatakda ng max-height na 350px at magbibigay ng y-axis scrollbar.

Google Prettify

Kunin ang parehong <pre>elemento at magdagdag ng dalawang opsyonal na klase para sa pinahusay na pag-render.

<p> Sample text dito... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Sample ng text dito...</p>
</pre>

I-download ang google-code-prettify at tingnan ang readme kung paano gamitin.

Tag	Paglalarawan
<table>	Wrapping element para sa pagpapakita ng data sa isang tabular na format
<thead>	Elemento ng container para sa mga hilera ng header ng talahanayan ( <tr>) upang lagyan ng label ang mga column ng talahanayan
<tbody>	Elemento ng lalagyan para sa mga hilera ng talahanayan ( <tr>) sa katawan ng talahanayan
<tr>	Container element para sa isang set ng mga cell ng talahanayan ( <td>o <th>) na lumalabas sa isang row
<td>	Default na cell ng talahanayan
<th>	Espesyal na cell ng talahanayan para sa mga label ng column (o row, depende sa saklaw at pagkakalagay) Dapat gamitin sa loob ng a<thead>
<caption>	Paglalarawan o buod ng kung ano ang hawak ng talahanayan, lalo na kapaki-pakinabang para sa mga screen reader

<talahanayan>
  <ulo>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Ang mga talahanayan ay awtomatikong naka-istilo na may ilang mga hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Sa 2.0, .tablekinakailangan ang klase.

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

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .table-stripedklase.

Tandaan: Ginagamit ng mga striped table ang :nth-childCSS selector at hindi available sa IE7-IE8.

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

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry	ang ibon	@twitter

Magdagdag ng mga hangganan sa paligid ng buong talahanayan at mga bilugan na sulok para sa aesthetic na layunin.

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

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
	marka	Otto	@getbootstrap
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

Gawing mas compact ang iyong mga talahanayan sa pamamagitan ng pagdaragdag ng .table-condensedklase upang gupitin sa kalahati ang table cell padding (mula 8px hanggang 4px).

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

#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

Huwag mag-atubiling pagsamahin ang alinman sa mga klase ng talahanayan upang makamit ang iba't ibang hitsura sa pamamagitan ng paggamit ng alinman sa mga magagamit na klase.

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

	Buong pangalan
#	Pangalan	Huling pangalan	Username
1	marka	Otto	@mdo
2	Jacob	Thornton	@mataba
3	Larry the Bird		@twitter

Flexible na HTML at CSS

Ang pinakamagandang bahagi tungkol sa mga form sa Bootstrap ay ang lahat ng iyong mga input at kontrol ay mukhang mahusay kahit paano mo itayo ang mga ito sa iyong markup. Walang kinakailangang labis na HTML, ngunit nagbibigay kami ng mga pattern para sa mga nangangailangan nito.

May mga mas kumplikadong layout na may maikli at nasusukat na mga klase para sa madaling pag-istilo at pag-binding ng kaganapan, kaya saklaw ka sa bawat hakbang.

Kasama ang apat na layout

Ang Bootstrap ay may suporta para sa apat na uri ng mga layout ng form:

• Patayo (default)
• Maghanap
• Nasa linya
• Pahalang

Ang iba't ibang uri ng mga layout ng form ay nangangailangan ng ilang pagbabago sa markup, ngunit ang mga kontrol mismo ay nananatili at pareho ang kilos.

Mga estado ng kontrol at higit pa

Kasama sa mga form ng Bootstrap ang mga istilo para sa lahat ng mga kontrol ng base form tulad ng input, textarea, at piliin na iyong inaasahan. Ngunit may kasama rin itong ilang custom na bahagi tulad ng mga nakadugtong at naka-prepend na input at suporta para sa mga listahan ng mga checkbox.

Ang mga estado tulad ng error, babala, at tagumpay ay kasama para sa bawat uri ng kontrol sa form. Kasama rin ang mga istilo para sa mga hindi pinaganang kontrol.

Pangunahing anyo

Sa v2.0, mayroon kaming mas magaan at mas matalinong mga default para sa mga istilo ng form. Walang dagdag na markup, mga kontrol lang sa form.

Pangalan ng label Kaugnay na text ng tulong!

Halimbawa ng block-level na help text dito.

Tingnan mo ako Ipasa

<form class = "well" > 
  <label> Pangalan ng label </label>
  <input type = "text" class = "span3" placeholder = "Type something..." >   
  <span class = "help-inline" > Kaugnay na text ng tulong! </span> 
  <label class = "checkbox" > 
    <input type = "checkbox" > Tingnan ako 
  </label>
  <button type = "submit" class = "btn" > Submit </button>  
</form>

Form ng paghahanap

Sinasalamin ang mga default na istilo ng WebKit, idagdag lang .form-searchpara sa mga karagdagang bilog na field sa paghahanap.

Maghanap

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

Inline na form

Ang mga input ay block level para magsimula. Para sa .form-inlineat .form-horizontal, gumagamit kami ng inline-block.

Tandaan mo ako Mag-sign in

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Tandaan ako 
  </label>
  <button type = "submit" class = "btn" > Mag-sign in </button>  
</form>

Kinokontrol ang mga suporta ng Bootstrap

Pag-input ng teksto

Bilang karagdagan sa freeform na teksto, ang anumang HTML5 na text-based na input ay lalabas nang ganito.

Checkbox

Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay

Pumili ng listahan

isang bagay 2 3 4 5

Multicon-select

1 2 3 4 5

Pag-input ng file

Textarea

I-save ang mga pagbabago Kanselahin

Halimbawang markup

Dahil sa halimbawang layout ng form sa itaas, narito ang markup na nauugnay sa unang input at control group. Ang .control-group, .control-label, at .controlsmga klase ay kailangan lahat para sa pag-istilo.

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Legend text </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Text input </label>  
      <div class = "mga kontrol" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Supporting help text </p> 
      </div>
    </div>
  </fieldset>
</form>

Ano ang kasama

Ipinapakita sa kaliwa ang lahat ng mga default na kontrol ng form na sinusuportahan namin. Narito ang naka-bullet na listahan:

• mga input ng teksto (teksto, password, email, atbp)
• checkbox
• radyo
• pumili
• maramihang pili
• input ng file
• textarea

---

Mga bagong default na may v2.0

Hanggang sa v1.4, ginamit ng mga default na istilo ng anyo ng Bootstrap ang pahalang na layout. Sa Bootstrap 2, inalis namin ang hadlang na iyon upang magkaroon ng mas matalino, mas nasusukat na mga default para sa anumang anyo.

Mga estado ng kontrol ng form

Nakatuon na input

Hindi na-edit na input

Ilang halaga dito

Hindi pinagana ang input

Naka-disable ang checkbox

Ito ay isang naka-disable na checkbox

Input na may babala

Maaaring may nangyaring mali

Input na may error

Pakitama ang error

Input na may tagumpay

Woohoo!

Pumili nang may tagumpay

1 2 3 4 5 Woohoo!

I-save ang mga pagbabago Kanselahin

Muling idisenyo ang mga estado ng browser

Nagtatampok ang Bootstrap ng mga istilo para sa nakatutok at disabledestado na sinusuportahan ng browser. Inalis namin ang default na Webkit outlineat inilapat ang isang box-shadowbilang kapalit nito para sa :focus.

---

Pagpapatunay ng form

Kasama rin dito ang mga istilo ng pagpapatunay para sa mga error, babala, at tagumpay. Upang magamit, idagdag ang klase ng error sa nakapaligid na .control-group.

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

Pagpapalawak ng mga kontrol sa form

Bumuo ng mga laki ng grid

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

Gamitin ang parehong mga .span*klase mula sa grid system para sa mga laki ng input.

Mga kahaliling laki

Maaari ka ring gumamit ng mga static na klase na hindi nagmamapa sa grid, umaangkop sa mga tumutugon na istilo ng CSS, o nagsasaalang-alang sa iba't ibang uri ng mga kontrol (hal., inputvs. select).

Naka-prepend na text

@

Narito ang ilang text ng tulong

Nakadugtong na teksto

.00

Narito ang higit pang text ng tulong

Ikabit at ihanda

$ .00

Idagdag gamit ang pindutan

Go!

Mga inline na checkbox

1 2 3

Mga checkbox

Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form Ang pagpipiliang tatlo ay maaari—oo, nahulaan mo na—masuri din at isama sa mga resulta ng form

Tandaan: Ang mga label ay pumapalibot sa lahat ng mga opsyon para sa mas malalaking lugar ng pag-click at isang mas magagamit na form.

Mga radio button

Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay Ang opsyon na dalawang lata ay ibang bagay at ang pagpili dito ay aalisin sa pagkakapili ang opsyon isa

I-save ang mga pagbabago Kanselahin

Maghanda at magdagdag ng mga input

Ang mga pangkat ng input—na may nakadugtong o naka-prepend na text—ay nagbibigay ng madaling paraan upang magbigay ng higit pang konteksto para sa iyong mga input. Kasama sa magagandang halimbawa ang @ sign para sa mga username sa Twitter o $ para sa pananalapi.

---

Mga checkbox at radyo

Hanggang sa v1.4, kailangan ng Bootstrap ng dagdag na markup sa paligid ng mga checkbox at radyo upang i-stack ang mga ito. Ngayon, ito ay isang simpleng bagay ng pag-uulit ng <label class="checkbox">na bumabalot sa <input type="checkbox">.

Sinusuportahan din ang mga inline na checkbox at radyo. Idagdag lang .inlinesa alinman .checkboxo .radioat tapos ka na.

---

Mga inline na form at idugtong/i-prepend

Upang gumamit ng prepend o magdagdag ng mga input sa isang inline na form, tiyaking ilagay ang .add-onat inputsa parehong linya, nang walang mga puwang.

---

Bumuo ng text ng tulong

Upang magdagdag ng text ng tulong para sa iyong mga input ng form, isama ang inline na text ng tulong na may <span class="help-inline">o isang block ng text ng tulong na may <p class="help-block">pagkatapos ng elemento ng input.

Mga pindutan para sa mga aksyon

Bilang isang kumbensyon, ang mga pindutan ay dapat lamang gamitin para sa mga aksyon habang ang mga hyperlink ay gagamitin para sa mga bagay. Halimbawa, ang "I-download" ay dapat na isang pindutan habang ang "kamakailang aktibidad" ay dapat na isang link.

Maaaring ilapat ang mga istilo ng button sa anumang bagay na may .btninilapat na klase. Gayunpaman, karaniwang gusto mong ilapat ang mga ito sa mga <a>elemento <button>lamang.

Cross browser compatibility

Hindi tina-crop ng IE9 ang mga gradient ng background sa mga bilugan na sulok, kaya inaalis namin ito. Kaugnay, ine-jankifie ng IE9 ang mga hindi pinaganang buttonelemento, na nagre-render ng text na kulay abo na may masamang text-shadow na hindi namin maaayos.

Maramihang laki

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag ng .btn-large, .btn-small, o .btn-minipara sa dalawang karagdagang laki.

Pangunahing aksyon Aksyon

Pangunahing aksyon Aksyon

Pangunahing aksyon Aksyon

Estadong may kapansanan

Para sa mga naka-disable na button, idagdag ang .disabledklase sa mga link at ang disabledattribute para sa mga <button>elemento.

Pangunahing link Link

Pangunahing pindutan Pindutan

Heads up! Ginagamit namin .disabledbilang isang utility class dito, katulad ng karaniwang .activeklase, kaya walang prefix ang kinakailangan.

Isang klase, maraming tag

Gamitin ang .btnklase sa isang <a>, <button>, o <input>elemento.

Link Pindutan

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" >  
  Pindutan
</button>
<input class = "btn" type = "button"  
         value = "Input" >
<input class = "btn" type = "submit"  
         value = "Isumite" >

Bilang pinakamahusay na kasanayan, subukang itugma ang elemento para sa iyong konteksto upang matiyak na tumutugma ang cross-browser na pag-render. Kung mayroon kang input, gumamit <input type="submit">ng para sa iyong button.

• icon-salamin
• icon-musika
• icon-search
• icon-envelope
• icon-puso
• icon-star
• icon-star-walang laman
• icon-user
• icon-pelikula
• icon-ika-malaki
• icon-th
• icon-th-list
• icon-ok
• icon-alis
• icon-zoom-in
• icon-zoom-out
• icon-off
• icon-signal
• icon-cog
• icon-basura
• icon-bahay
• icon-file
• icon-time
• icon-daan
• icon-download-alt
• icon-download
• icon-upload
• icon-inbox
• icon-play-circle
• icon-ulitin

• icon-refresh
• icon-list-alt
• icon-lock
• icon-flag
• icon-headphone
• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• mga icon-tag
• icon-book
• icon-bookmark
• icon-print
• icon-camera
• icon-font
• icon-bold
• icon-italic
• icon-text-taas
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-list
• icon-indent-left
• icon-indent-kanan
• icon-facetime-video
• icon-larawan

• icon-lapis
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• icon-share
• icon-check
• icon-move
• icon-step-backward
• icon-fast-backward
• icon-paatras
• icon-play
• icon-pause
• icon-stop
• icon-forward
• icon-fast-forward
• icon-step-forward
• icon-eject
• icon-chevron-kaliwa
• icon-chevron-kanan
• icon-plus-sign
• icon-minus-sign
• icon-alis-sign
• icon-ok-sign
• icon-question-sign
• icon-info-sign
• icon-screenshot
• icon-alis-bilog
• icon-ok-bilog
• icon-ban-circle

• icon-arrow-kaliwa
• icon-arrow-kanan
• icon-arrow-up
• icon-arrow-pababa
• icon-share-alt
• icon-resize-full
• icon-resize-maliit
• icon-plus
• icon-minus
• icon-asterisk
• icon-exclamation-sign
• icon-regalo
• icon-leaf
• icon-apoy
• icon-eye-open
• icon-eye-close
• icon-babala-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-bukas
• icon-resize-vertical
• icon-resize-horizontal

Itinayo bilang isang sprite

Sa halip na gawing dagdag na kahilingan ang bawat icon, pinagsama-sama namin ang mga ito sa isang sprite—isang grupo ng mga larawan sa isang file na gumagamit ng CSS upang iposisyon ang mga larawan gamit ang background-position. Ito ang parehong paraan na ginagamit namin sa Twitter.com at ito ay gumana nang maayos para sa amin.

Ang lahat ng mga klase ng icon ay may prefix na .icon-para sa wastong namespace at scoping, katulad ng aming iba pang mga bahagi. Makakatulong ito na maiwasan ang mga salungatan sa iba pang mga tool.

Binigyan kami ng Glyphicons ng paggamit ng Halflings set sa aming open-source toolkit hangga't nagbibigay kami ng link at credit dito sa docs. Mangyaring isaalang-alang ang paggawa ng pareho sa iyong mga proyekto.

Paano gamitin

Gumagamit ang Bootstrap ng <i>tag para sa lahat ng icon, ngunit wala silang case class—isang nakabahaging prefix lang. Upang magamit, ilagay ang sumusunod na code sa halos kahit saan:

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

Mayroon ding mga istilong magagamit para sa mga inverted (white) na icon, na ginawang handa sa isang dagdag na klase:

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

Mayroong 120 klase na mapagpipilian para sa iyong mga icon. Magdagdag lang <i>ng tag na may mga tamang klase at nakatakda ka na. Mahahanap mo ang buong listahan sa sprites.less o dito mismo sa dokumentong ito.

Heads up! Kapag gumagamit ng katabi ng mga string ng text, tulad ng sa mga button o nav link, siguraduhing mag-iwan ng puwang pagkatapos ng <i>tag para sa wastong espasyo.

Mga kaso ng paggamit

Mahusay ang mga icon, ngunit saan gagamitin ang mga ito? Narito ang ilang ideya:

• Bilang mga visual para sa iyong sidebar navigation
• Para sa isang nabigasyon na puro icon-driven
• Para sa mga pindutan upang makatulong na ihatid ang kahulugan ng isang aksyon
• Na may mga link upang ibahagi ang konteksto sa patutunguhan ng isang user

Mahalaga, kahit saan maaari kang maglagay ng <i>tag, maaari kang maglagay ng icon.

Refresh Tignan mo Tanggalin

Magkomento Mga setting Karagdagang impormasyon

Email address