Dasar CSS

Ing ndhuwur scaffolding, unsur HTML dhasar ditata lan ditingkatake kanthi kelas sing bisa diperluas kanggo menehi tampilan lan rasa sing seger lan konsisten.

Judul & body copy

Skala tipografi

Kabeh kothak tipografi adhedhasar rong variabel Kurang ing file variables.less kita: @baseFontSizelan @baseLineHeight. Sing pisanan yaiku ukuran font dhasar sing digunakake ing saindenging lan sing nomer loro yaiku dhuwur garis dhasar.

Kita nggunakake variabel kasebut, lan sawetara matematika, kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane.

Tuladha teks isi

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

Timbal awak salinan

Gawea paragraf kanthi nambahake .lead.

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

h1. Heading 1

h2. Heading 2

h3. Judul 3

h4. Judul 4

h5. Judul 5
h6. Judul 6

Emphasis, alamat, lan singkatan

unsur Panggunaan Opsional
<strong> Kanggo nandheske snippet teks karo penting ora ana
<em> Kanggo nandheske potongan teks kanthi stres ora ana
<abbr> Wraps singkatan lan akronim kanggo nuduhake versi ditambahi ing hover

Kalebu titleatribut opsional kanggo teks sing ditambahi

Gunakake .initialismkelas kanggo singkatan huruf gedhe.
<address> Kanggo informasi kontak kanggo leluhur paling cedhak utawa kabeh awak karya Simpen format kanthi mungkasi kabeh baris karo<br>

Nggunakake emphasis

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.

Cathetan: Aja bebas nggunakake <b>lan <i>ing HTML5, nanging panggunaane wis rada owah. <b>tegese kanggo nyorot tembung utawa frasa tanpa menehi wigati tambahan nalika <i>biasane kanggo swara, istilah teknis, lsp.

Tuladha alamat

Ing ngisor iki ana rong conto carane <address>tag bisa digunakake:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Jeneng Lengkap
[email protected]

Tuladha singkatan

Singkatan karo titleatribut duwe wates ngisor titik cahya lan kursor bantuan ing hover. Iki menehi pangguna pratondo ekstra sing bakal ditampilake ing hover.

Tambah initialismkelas menyang singkatan kanggo nambah harmoni tipografi kanthi menehi ukuran teks sing rada cilik.

HTML minangka sing paling apik wiwit roti irisan.

Singkatan saka tembung atribut yaiku attr .

Blockquotes

unsur Panggunaan Opsional
<blockquote> Unsur tingkat blok kanggo ngutip isi saka sumber liya

Tambah citeatribut kanggo URL sumber

Gunakake .pull-leftlan .pull-rightkelas kanggo opsi floated
<small> Elemen opsional kanggo nambahake kutipan sing diadhepi pangguna, biasane penulis kanthi judhul karya Selehake <cite>watara judhul utawa jeneng sumber

Kanggo nyakup kutipan blokir, bungkus HTML<blockquote> apa wae minangka kutipan. Kanggo kuotasi langsung disaranake a .<p>

<small>Kalebu unsur opsional kanggo nyebut sumber sampeyan lan sampeyan bakal entuk em dash &mdash;sadurunge kanggo tujuan gaya.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  3. <cilik> Wong sing misuwur </cilik>
  4. </blockquote>

Tuladha blockquotes

Kutipan blokir standar ditata kaya:

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

Wong sing misuwur ing Badan kerja

Kanggo ngambang blockquote ing sisih tengen, tambahake class="pull-right":

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

Wong sing misuwur ing Badan kerja

Dhaptar

Ora ditata

<ul>

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

Tanpa gaya

<ul class="unstyled">

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

dhawuh

<ol>

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

Katrangan

<dl>

Dhaptar katrangan
Dhaptar deskripsi sampurna kanggo nemtokake istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida lan eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Deskripsi horisontal

<dl class="dl-horizontal">

Dhaptar katrangan
Dhaptar deskripsi sampurna kanggo nemtokake istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida lan eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Kepala munggah! Dhaptar deskripsi horisontal bakal ngethok istilah sing dawa banget kanggo pas karo koreksi kolom kiwa text-overflow. Ing tampilan sing luwih sempit, dheweke bakal ganti menyang tata letak tumpukan standar.

Inline

Bungkus potongan kode inline nganggo <code>.

  1. Contone , < code> bagean </ code > kudu dibungkus minangka inline .

Blok dhasar

Gunakake <pre>kanggo sawetara baris kode. Aja manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat.

<p>Conto teks ing kene...</p>
  1. <pre>
  2. <p>Conto teks ing kene...</p>
  3. </pre>

Cathetan: Pesthekake supaya kode tetep ing <pre>tag sing paling cedhak ing sisih kiwa; iku bakal nerjemahake kabeh tab.

Sampeyan bisa nambah kelas kanthi opsional .pre-scrollablesing bakal nyetel dhuwur maksimal 350px lan menehi scrollbar sumbu-y.

Google Pretify

Njupuk <pre>unsur padha lan nambah rong kelas opsional kanggo nambah Rendering.

  1. <p> Tuladha teks ing kene... </p>
  1. <pre class = "prettyprint
  2. linenum" >
  3. <p>Conto teks ing kene...</p>
  4. </pre>

Download google-code-prettify lan deleng readme babagan carane nggunakake.

Markup meja

Tag Katrangan
<table> Unsur pambungkus kanggo nampilake data ing format tabular
<thead> Unsur wadhah kanggo baris header tabel ( <tr>) kanggo label kolom tabel
<tbody> Unsur wadhah kanggo larik meja ( <tr>) ing awak meja
<tr> Unsur wadhah kanggo sakumpulan sel tabel ( <td>utawa <th>) sing katon ing baris siji
<td> Sel tabel standar
<th> Sel tabel khusus kanggo label kolom (utawa baris, gumantung saka ruang lingkup lan panggonan)
kudu digunakake ing a<thead>
<caption> Katrangan utawa ringkesan apa sing ana ing meja, utamane migunani kanggo maca layar
  1. <tabel>
  2. <sirah>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <awak>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tabel>

Pilihan meja

jeneng kelas Katrangan
Default ora ana Ora ana gaya, mung kolom lan larik
dhasar .table Mung garis horisontal antarane larik
wewatesan .table-bordered Bunder sudhut lan nambah wates njaba
Zebra-belang .table-striped Nambahake werna latar mburi abu-abu cahya menyang larik ganjil (1, 3, 5, lsp)
Dipadhetke .table-condensed Cut padding vertikal ing setengah, saka 8px kanggo 4px, ing kabeh tdlan thunsur

Tuladha tabel

1. Gaya tabel standar

Tabel kanthi otomatis gaya mung sawetara wates kanggo mesthekake readability lan njaga struktur. Kanthi 2.0, .tablekelas dibutuhake.

  1. < kelas tabel = "tabel" >
  2. </tabel>
# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry manuk @twitter

2. Tabel belang

Nggawe meja kanthi apik kanthi nambahake zebra-striping-mung nambah .table-stripedkelas.

Cathetan: Tabel belang nggunakake :nth-childpamilih CSS lan ora kasedhiya ing IE7-IE8.

  1. <table class = "table table-striped" >
  2. </tabel>
# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry manuk @twitter

3. Tabel wewatesan

Tambah wates ing sakubenge kabeh meja lan sudhut bunder kanggo tujuan estetis.

  1. <table class = "table table-bordered" >
  2. </tabel>
# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
Tandhani Otto @getbootstrap
2 Yakub Thornton @lemak
3 Larry Manuk @twitter

4. Tabel kondensasi

Nggawe tabel luwih kompak kanthi nambahake .table-condensedkelas kanggo Cut padding sel tabel ing setengah (saka 8px kanggo 4px).

  1. <table class = "table table-condensed" >
  2. </tabel>
# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry Manuk @twitter

5. Gabungke kabeh!

Bebas bae kanggo gabungke sembarang kelas meja kanggo entuk tampilan beda kanthi nggunakake sembarang kelas kasedhiya.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </tabel>
jeneng lengkap
# Jeneng pisanan Jeneng mburi Jeneng panganggo
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry Manuk @twitter

HTML lan CSS fleksibel

Sisih paling apik babagan formulir ing Bootstrap yaiku kabeh input lan kontrol sampeyan katon apik, ora preduli carane nggawe markup sampeyan. Ora HTML superfluous dibutuhake, nanging kita nyedhiyani pola kanggo sing mbutuhake.

Tata letak sing luwih rumit disedhiyakake karo kelas sing ringkes lan bisa diukur supaya gampang gaya lan ngiket acara, supaya sampeyan bisa nutupi saben langkah.

Papat tata letak kalebu

Bootstrap dilengkapi dhukungan kanggo papat jinis tata letak formulir:

  • Vertikal (standar)
  • Nggoleki
  • Inline
  • Horisontal

Jinis tata letak formulir sing beda-beda mbutuhake sawetara owah-owahan kanggo markup, nanging kontrol dhewe tetep lan tumindak padha.

negara kontrol lan liyane

Formulir Bootstrap kalebu gaya kanggo kabeh kontrol formulir dhasar kaya input, textarea, lan pilih sing dikarepake. Nanging uga dilengkapi karo sawetara komponen khusus kaya input sing ditambahake lan prepended lan dhukungan kanggo dhaptar kothak.

Negara kaya kesalahan, peringatan, lan sukses kalebu kanggo saben jinis kontrol formulir. Uga kalebu gaya kanggo kontrol dipatèni.

Papat jinis formulir

Bootstrap nyedhiyakake markup lan gaya sing prasaja kanggo papat gaya formulir web umum.

jeneng kelas Katrangan
Vertikal (standar) .form-vertical (ora dibutuhake) Label sing ditumpuk, didadekake kiwa liwat kontrol
Inline .form-inline Label kiwa lan kontrol blok inline kanggo gaya kompak
Nggoleki .form-search Input teks ekstra-bunder kanggo estetika telusuran sing khas
Horisontal .form-horizontal Ngambang kiwa, label sejajar tengen ing baris sing padha karo kontrol

Formulir conto nggunakake mung kontrol formulir, ora markup ekstra

Wangun dhasar

Standar sing cerdas lan entheng tanpa markup ekstra.

Conto teks bantuan tingkat blok ing kene.

  1. <form class = "uga" >
  2. <label> Jeneng label </label>
  3. <input type = "text" class = "span3" placeholder = "Ketik soko…" >
  4. <span class = "help-block" > Conto teks bantuan tingkat blok ing kene. </span>
  5. <label class = "kotak centang" >
  6. <input type = "checkbox" > Priksa kula
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

Formulir telusuran

Tambah .form-searchmenyang formulir lan .search-querymenyang input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Telusuri </button>
  4. </form>

Formulir inline

Tambah .form-inlinekanggo finesse alignment vertikal lan spasi saka kontrol wangun.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-cilik" placeholder = "Email" >
  3. < tipe input = "sandi" class = "input-cilik" placeholder = "Sandhi" >
  4. <label class = "kotak centang" >
  5. <input type = "kotak centang" > Elingi aku
  6. </label>
  7. <button type = "submit" class = "btn" > Mlebu </button>
  8. </form>

Wangun horisontal

Dituduhake ing sisih tengen kabeh kontrol formulir standar sing kita dukung. Punika dhaptar bullet:

  • input teks (teks, sandi, email, lsp)
  • kothak centhang
  • radio
  • pilih
  • sawetara pilih
  • input file
  • textarea

Saliyane teks freeform, sembarang input basis teks HTML5 katon kaya mangkono.

Tuladha markup

Diwenehi conto tata letak formulir ing ndhuwur, iki markup sing digandhengake karo grup input lan kontrol pisanan. Kelas .control-group, .control-label, lan .controlskabeh dibutuhake kanggo gaya.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Teks legenda </legend>
  4. <div class = "kontrol-grup" >
  5. <label class = "control-label" for = "input01" > Input teks </label>
  6. <div class = "kontrol" >
  7. < tipe input = "teks" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Teks bantuan sing ndhukung </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Formulir kontrol negara

Bootstrap nduweni gaya kanggo fokus lan disablednegara sing didhukung browser. Kita mbusak Webkit gawan outlinelan aplikasi box-shadowing panggonan kanggo :focus.


Validasi formulir

Uga kalebu gaya validasi kanggo kesalahan, bebaya, lan sukses. Kanggo nggunakake, nambah kelas kesalahan ing saubengé .control-group.

  1. <fieldset
  2. class = "kesalahan grup kontrol" >
  3. </fieldset>
Sawetara nilai kene
Ana sing salah
Mangga mbenerake kesalahan
Woohoo!
Woohoo!

Ngluwihi kontrol formulir

Prepend & nambah input

Klompok input-karo teks sing ditambahake utawa ditambahake-nyedhiyakake cara sing gampang kanggo menehi konteks luwih akeh kanggo input sampeyan. Conto apik kalebu tandha @ kanggo jeneng panganggo Twitter utawa $ kanggo keuangan.


Kothak lan radio

Nganti v1.4, Bootstrap mbutuhake markup ekstra ing sakubenge kothak centhang lan radio kanggo numpuk. Saiki, iku prasaja kanggo mbaleni <label class="checkbox">sing mbungkus <input type="checkbox">.

Kothak lan radio inline uga didhukung. Mung nambah .inlinekanggo sembarang .checkboxutawa .radiolan sampeyan wis rampung.


Formulir Inline lan nambah / prepend

Kanggo nggunakake prepend utawa nambah input ing wangun inline, manawa kanggo nyelehake .add-onlan inputing baris sing padha, tanpa spasi.


Formulir teks bantuan

Kanggo nambah teks bantuan kanggo input formulir, kalebu teks bantuan inline <span class="help-inline">utawa blok teks bantuan <p class="help-block">sawise unsur input.

Gunakake .span*kelas sing padha saka sistem kothak kanggo ukuran input.

Sampeyan uga bisa nggunakake kelas statis sing ora peta menyang kothak, adaptasi karo gaya CSS responsif, utawa akun kanggo macem-macem jinis kontrol (contone, inputvs. select).

@

Iki sawetara teks bantuan

.00
Punika teks bantuan liyane
$ .00

Cathetan: Label ngubengi kabeh opsi kanggo area klik sing luwih gedhe lan wangun sing luwih bisa digunakake.

Tombol kelas = "" Katrangan
btn Tombol werna abu-abu standar kanthi gradien
btn btn-primary Nyedhiyakake bobot visual ekstra lan ngenali tumindak utama ing sakumpulan tombol
btn btn-info Digunakake minangka alternatif kanggo gaya standar
btn btn-success Nuduhake tumindak sing sukses utawa positif
btn btn-warning Nuduhake ati-ati kudu dijupuk karo tumindak iki
btn btn-danger Nuduhake tumindak mbebayani utawa duweni potensi negatif
btn btn-inverse Tombol abu-abu peteng sulih, ora kaiket karo tumindak utawa panggunaan semantik

Tombol kanggo tumindak

Minangka konvensi, tombol mung kudu digunakake kanggo tumindak nalika hyperlink digunakake kanggo obyek. Contone, "Download" kudu dadi tombol nalika "aktivitas anyar" kudu dadi link.

Gaya tombol bisa ditrapake kanggo apa .btnwae sing ditrapake ing kelas. Nanging, biasane sampeyan pengin aplikasi iki mung <a>lan <button>unsur.

Kompatibilitas lintas browser

IE9 ora ngethok gradien latar mburi ing sudhut sing dibunderaké, mula kita nyopot. Related, IE9 jankifies buttonunsur dipatèni, Rendering teks werna abu-abu karo awon teks-bayangan sing ora bisa ndandani.

Multiple ukuran

Apik tombol luwih gedhe utawa luwih cilik? Tambah .btn-large, .btn-small, utawa .btn-minikanggo rong ukuran tambahan.


negara dipatèni

Kanggo tombol dipatèni, nambah .disabledkelas kanggo pranala lan disabledatribut kanggo <button>unsur.

pranala utami Link

Kepala munggah! Kita digunakake .disabledminangka kelas sarana ing kene, padha karo .activekelas umum, mula ora perlu prefiks.

Siji kelas, pirang-pirang tag

Gunakake .btnkelas ing <a>, <button>, utawa <input>unsur.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. Tombol
  4. </tombol>
  5. <input class = "btn" type = "tombol"
  6. nilai = "Input" >
  7. <input class = "btn" type = "submit"
  8. nilai = "Kirim" >

Minangka laku paling apik, nyoba kanggo cocog unsur kanggo konteks sampeyan kanggo mesthekake cocog cross-browser rendering. Yen sampeyan duwe input, gunakake <input type="submit">tombol kanggo sampeyan.

  • ikon-kaca
  • lambang-musik
  • lambang-search
  • lambang-amplop
  • lambang-ati
  • lambang-lintang
  • lambang-lintang-kosong
  • lambang-user
  • ikon-film
  • lambang-th-gedhe
  • lambang-th
  • lambang-th-daftar
  • lambang-ok
  • lambang-mbusak
  • lambang-zoom-in
  • lambang-zoom-out
  • lambang mati
  • lambang-sinyal
  • lambang-cog
  • lambang-sampah
  • lambang-omah
  • lambang-file
  • lambang-wektu
  • lambang-dalan
  • lambang-download-alt
  • lambang-download
  • lambang-upload
  • lambang-kotak mlebu
  • lambang-muter-bunder
  • lambang-baleni
  • lambang-refresh
  • lambang-dhaftar-alt
  • lambang-kunci
  • lambang-flag
  • lambang-headphone
  • ikon-volume-mati
  • ikon-volume-mudhun
  • ikon-volume-up
  • lambang-qrcode
  • lambang-barcode
  • lambang-tag
  • lambang-tag
  • buku lambang
  • lambang-tetenger
  • lambang-print
  • ikon-kamera
  • lambang-font
  • lambang-kandel
  • lambang-miring
  • dhuwur lambang-teks
  • lambang-teks-jembaré
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • lambang-dhaftar
  • icon-indent-kiwa
  • icon-indent-right
  • ikon-facetime-video
  • lambang-gambar
  • lambang-potlot
  • lambang-peta-marker
  • lambang-nyetel
  • lambang-warna
  • lambang-suntingan
  • lambang-nuduhake
  • mriksa lambang
  • lambang-pindhah
  • lambang-langkah-mundur
  • lambang-cepet-mundur
  • lambang-mundur
  • lambang-muter
  • lambang-ngaso
  • lambang-mandeg
  • lambang-maju
  • lambang-cepet-maju
  • lambang-langkah-maju
  • lambang-eject
  • lambang-chevron-kiwa
  • lambang-chevron-tengen
  • lambang-tambah-tandha
  • lambang-minus-tandha
  • lambang-mbusak-tandha
  • lambang-ok-tandha
  • lambang-pitakonan-tandha
  • lambang-info-tandha
  • lambang-screenshot
  • lambang-mbusak-bunder
  • lambang-ok-bunder
  • lambang-ban-bunder
  • lambang-panah-kiwa
  • lambang-panah-tengen
  • lambang-panah-munggah
  • lambang-panah-mudhun
  • icon-share-alt
  • icon-resize-full
  • lambang-ukuran-cilik
  • lambang-plus
  • lambang-minus
  • lambang-asterisk
  • lambang-panguwuh-tandha
  • lambang-hadiah
  • godhong-ikon
  • lambang-geni
  • lambang-mripat-mbukak
  • lambang-mripat-nutup
  • lambang-warning-tandha
  • lambang-pesawat
  • lambang-kalender
  • lambang-acak
  • lambang-komentar
  • lambang-magnet
  • lambang-chevron-up
  • lambang-chevron-mudhun
  • lambang-retweet
  • lambang-shopping-cart
  • lambang-folder-nutup
  • lambang-folder-mbukak
  • ikon-resize-vertikal
  • ikon-resize-horizontal
  • lambang-hdd
  • lambang-bullhorn
  • lonceng lambang
  • lambang-sertifikat
  • ikon-jempol
  • lambang-jempol-mudhun
  • lambang-tangan-tengen
  • lambang-tangan-kiwa
  • icon-hand-up
  • icon-hand-mudhun
  • lambang-bunder-panah-tengen
  • lambang-bunder-panah-kiwa
  • lambang-bunderan-panah-munggah
  • lambang-bunder-panah-mudhun
  • lambang-globe
  • lambang-kunci
  • lambang-tugas
  • saringan lambang
  • lambang-koper
  • lambang-layar wutuh

Dibangun minangka sprite

Tinimbang nggawe saben lambang minangka panyuwunan ekstra, kita wis nyawiji dadi sprite—kumpulan gambar ing siji file sing nggunakake CSS kanggo posisi gambar nganggo background-position. Iki cara sing padha digunakake ing Twitter.com lan wis bisa uga kanggo kita.

Kabeh kelas lambang diwenehi awalan .icon-kanggo namespacing lan scoping sing tepat, kaya komponen liyane. Iki bakal mbantu supaya ora konflik karo alat liyane.

Glyphicons wis menehi kita nggunakake set Halflings ing toolkit open-source kita anggere kita nyedhiyani link lan kredit kene ing docs. Mangga nimbang nglakoni sing padha ing proyek sampeyan.

Carane nggunakake

Bootstrap nggunakake <i>tag kanggo kabeh lambang, nanging ora duwe kelas cilik-mung ater-ater sing dienggo bareng. Kanggo nggunakake, lebokake kode ing ngisor iki ing ngendi wae:

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

Ana uga gaya kasedhiya kanggo lambang kuwalik (putih), digawe siap karo siji kelas ekstra:

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

Ana 140 kelas sing bisa dipilih kanggo lambang sampeyan. Mung nambah <i>tag karo kelas tengen lan sampeyan wis disetel. Sampeyan bisa nemokake dhaptar lengkap ing sprites.less utawa ing kene ing dokumen iki.

Kepala munggah! Nalika nggunakake jejere strings teks, kaya ing tombol utawa pranala nav, manawa kanggo ninggalake spasi sawise <i>tag kanggo spasi sing tepat.

Gunakake kasus

Ikon apik banget, nanging ing endi sing bakal digunakake? Ing ngisor iki sawetara gagasan:

  • Minangka visual kanggo navigasi sidebar
  • Kanggo pandhu arah murni lambang-mimpin
  • Kanggo tombol kanggo mbantu ngirim makna saka tumindak
  • Kanthi pranala kanggo nuduhake konteks ing panggonan pangguna

Ateges, ing ngendi wae sampeyan bisa nyelehake <i>tag, sampeyan bisa nyelehake lambang.

Tuladha

Gunakake ing tombol, grup tombol kanggo toolbar, pandhu arah, utawa input formulir prepended.