CSS asas

Di atas perancah, elemen HTML asas digayakan dan dipertingkatkan dengan kelas yang boleh diperluas untuk memberikan rupa dan rasa yang segar dan konsisten.

Tajuk & salinan badan

Skala tipografi

Keseluruhan grid tipografi adalah berdasarkan dua Kurang pembolehubah dalam fail pembolehubah kami.less: @baseFontSizedan @baseLineHeight. Yang pertama ialah saiz fon asas yang digunakan sepanjang dan yang kedua ialah ketinggian garis asas.

Kami menggunakan pembolehubah tersebut, dan beberapa matematik, untuk mencipta jidar, pelapik dan ketinggian garis semua jenis kami dan banyak lagi.

Contoh teks isi kandungan

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.

Salinan badan utama

Jadikan perenggan menonjol dengan menambah .lead.

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

h1. Tajuk 1

h2. Tajuk 2

h3. Tajuk 3

h4. Tajuk 4

h5. Tajuk 5
h6. Tajuk 6

Penekanan, alamat, dan singkatan

unsur Penggunaan Pilihan
<strong> Untuk menekankan coretan teks dengan penting tiada
<em> Untuk menekankan coretan teks dengan tekanan tiada
<abbr> Membungkus singkatan dan akronim untuk menunjukkan versi dikembangkan pada tuding

Sertakan titleatribut pilihan untuk teks dikembangkan

Gunakan .initialismkelas untuk singkatan huruf besar.
<address> Untuk maklumat hubungan untuk nenek moyang terdekat atau seluruh badan kerja Kekalkan pemformatan dengan menamatkan semua baris dengan<br>

Menggunakan penekanan

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.

Nota: Jangan ragu untuk menggunakan <b>dan <i>dalam HTML5, tetapi penggunaannya telah berubah sedikit. <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.

Contoh alamat

Berikut ialah dua contoh cara <address>teg boleh digunakan:

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

Contoh singkatan

Singkatan dengan titleatribut mempunyai sempadan bawah titik terang dan kursor bantuan pada tuding. Ini memberi pengguna petunjuk tambahan bahawa sesuatu akan ditunjukkan pada tuding.

Tambahkan initialismkelas pada singkatan untuk meningkatkan keharmonian tipografi dengan memberikan saiz teks yang lebih kecil sedikit.

HTML adalah perkara terbaik sejak roti dihiris.

Singkatan perkataan atribut ialah attr .

Sekat petikan

unsur Penggunaan Pilihan
<blockquote> Elemen peringkat blok untuk memetik kandungan daripada sumber lain

Tambahkan citeatribut untuk URL sumber

Penggunaan .pull-leftdan .pull-rightkelas untuk pilihan terapung
<small> Elemen pilihan untuk menambah petikan yang dihadapi pengguna, biasanya pengarang dengan tajuk kerja Letakkan di <cite>sekeliling tajuk atau nama sumber

Untuk memasukkan petikan sekatan, bungkus <blockquote>mana-mana HTML sebagai petikan. Untuk petikan lurus kami mengesyorkan <p>.

Sertakan <small>elemen pilihan untuk memetik sumber anda dan anda akan mendapat sempang em di &mdash;hadapannya untuk tujuan penggayaan.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Seseorang yang terkenal </small>
  4. </blockquote>

Contoh petikan blok

Petikan blok lalai digayakan seperti itu:

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

Seseorang yang terkenal dalam Badan kerja

Untuk mengapungkan petikan blok anda ke kanan, tambahkan class="pull-right":

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

Seseorang yang terkenal dalam Badan kerja

Senarai

Tidak tertib

<ul>

  • Lorem ipsum dolor duduk amet
  • Consectetur adipiscing elit
  • Integer molestie lorem dan massa
  • Facilisis dalam 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 duduk amet erat nunc
  • Eget porttitor lorem

Tidak bergaya

<ul class="unstyled">

  • Lorem ipsum dolor duduk amet
  • Consectetur adipiscing elit
  • Integer molestie lorem dan massa
  • Facilisis dalam 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 duduk amet erat nunc
  • Eget porttitor lorem

Mengarahkan

<ol>

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

Penerangan

<dl>

Senarai penerangan
Senarai huraian sesuai untuk menentukan istilah.
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.

Penerangan mendatar

<dl class="dl-horizontal">

Senarai penerangan
Senarai huraian sesuai untuk menentukan istilah.
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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Angkat kepala! Senarai perihalan mendatar akan memotong istilah yang terlalu panjang untuk dimuatkan dalam pembetulan lajur kiri text-overflow. Dalam ruang pandang yang lebih sempit, ia akan bertukar kepada susun atur bertindan lalai.

Dalam barisan

Balut coretan sebaris kod dengan <code>.

  1. Sebagai contoh , bahagian <code> </ code > hendaklah dibalut sebagai sebaris .

Blok asas

Gunakan <pre>untuk berbilang baris kod. Pastikan anda melepaskan sebarang kurungan sudut dalam kod untuk pemaparan yang betul.

<p>Contoh teks di sini...</p>
  1. <pra>
  2. <p>Contoh teks di sini...</p>
  3. </pre>

Nota: Pastikan anda menyimpan kod dalam <pre>teg sedekat mungkin di sebelah kiri; ia akan memaparkan semua tab.

Anda boleh menambah .pre-scrollablekelas secara pilihan yang akan menetapkan ketinggian maksimum 350px dan menyediakan bar skrol paksi-y.

Google Prettify

Ambil <pre>elemen yang sama dan tambahkan dua kelas pilihan untuk pemaparan yang dipertingkatkan.

  1. <p> Contoh teks di sini... </p>
  1. <pra kelas = "prettyprint
  2. linenum" >
  3. <p>Contoh teks di sini...</p>
  4. </pre>

Muat turun google-code-prettify dan lihat readme untuk cara menggunakannya.

Penanda jadual

Tag Penerangan
<table> Elemen pembalut untuk memaparkan data dalam format jadual
<thead> Elemen bekas untuk baris pengepala jadual ( <tr>) untuk melabel lajur jadual
<tbody> Unsur bekas untuk baris jadual ( <tr>) dalam badan jadual
<tr> Elemen bekas untuk set sel jadual ( <td>atau <th>) yang muncul pada satu baris
<td> Sel jadual lalai
<th> Sel jadual khas untuk label lajur (atau baris, bergantung pada skop dan peletakan)
Mesti digunakan dalam a<thead>
<caption> Perihalan atau ringkasan tentang kandungan jadual, terutamanya berguna untuk pembaca skrin
  1. <jadual>
  2. <kepala>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ jadual>

Pilihan jadual

Nama Kelas Penerangan
Lalai tiada Tiada gaya, hanya lajur dan baris
asas .table Hanya garis mendatar antara baris
Bersempadan .table-bordered Membundarkan sudut dan menambah sempadan luar
Belang belang .table-striped Menambahkan warna latar belakang kelabu muda pada baris ganjil (1, 3, 5, dll)
pekat .table-condensed Memotong padding menegak separuh, daripada 8px kepada 4px, dalam semua tddan thelemen

Contoh jadual

1. Gaya jadual lalai

Jadual digayakan secara automatik dengan hanya beberapa sempadan untuk memastikan kebolehbacaan dan mengekalkan struktur. Dengan 2.0, .tablekelas diperlukan.

  1. <table class = "jadual" >
  2. </ jadual>
# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter

2. Meja berjalur

Dapatkan sedikit kemewahan dengan jadual anda dengan menambahkan jalur zebra—hanya tambah .table-stripedkelas.

Nota: Jadual berjalur menggunakan :nth-childpemilih CSS dan tidak tersedia dalam IE7-IE8.

  1. <table class = "jalur meja meja" >
  2. </ jadual>
# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @twitter

3. Meja bersempadan

Tambahkan jidar di sekeliling seluruh meja dan sudut bulat untuk tujuan estetik.

  1. <table class = "table table-bordered" >
  2. </ jadual>
# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
Tandakan Otto @getbootstrap
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter

4. Meja pekat

Jadikan jadual anda lebih padat dengan menambah .table-condensedkelas untuk memotong padding sel meja kepada separuh (daripada 8px kepada 4px).

  1. <table class = "table table-condensed" >
  2. </ jadual>
# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter

5. Gabungkan kesemuanya!

Jangan ragu untuk menggabungkan mana-mana kelas jadual untuk mencapai rupa yang berbeza dengan menggunakan mana-mana kelas yang tersedia.

  1. <table class = "table table-jalur meja-sempadan meja-memadatkan" >
  2. ...
  3. </ jadual>
Nama penuh
# Nama pertama Nama terakhir Nama pengguna
1 Tandakan Otto @mdo
2 Yakub Thornton @gemuk
3 Larry the Bird @twitter

HTML dan CSS yang fleksibel

Bahagian terbaik tentang borang dalam Bootstrap ialah semua input dan kawalan anda kelihatan hebat tidak kira bagaimana anda membinanya dalam markup anda. Tiada HTML berlebihan diperlukan, tetapi kami menyediakan corak untuk mereka yang memerlukannya.

Reka letak yang lebih rumit disertakan dengan kelas yang ringkas dan berskala untuk penggayaan yang mudah dan pengikatan acara, jadi anda dilindungi pada setiap langkah.

Empat susun atur disertakan

Bootstrap datang dengan sokongan untuk empat jenis susun atur borang:

  • Menegak (lalai)
  • Cari
  • Dalam barisan
  • Mendatar

Jenis reka letak borang yang berbeza memerlukan beberapa perubahan pada penandaan, tetapi kawalan itu sendiri kekal dan berkelakuan sama.

Keadaan kawalan dan banyak lagi

Borang Bootstrap termasuk gaya untuk semua kawalan bentuk asas seperti input, kawasan teks dan pilihan yang anda harapkan. Tetapi ia juga disertakan dengan beberapa komponen tersuai seperti input yang dilampirkan dan didahulukan serta sokongan untuk senarai kotak pilihan.

Keadaan seperti ralat, amaran dan kejayaan disertakan untuk setiap jenis kawalan borang. Turut disertakan ialah gaya untuk kawalan orang kurang upaya.

Empat jenis borang

Bootstrap menyediakan penanda dan gaya mudah untuk empat gaya borang web biasa.

Nama Kelas Penerangan
Menegak (lalai) .form-vertical (tidak dikehendaki) Label bertindan, dijajar ke kiri atas kawalan
Dalam barisan .form-inline Label dijajar kiri dan kawalan blok sebaris untuk gaya padat
Cari .form-search Input teks yang lebih bulat untuk estetika carian biasa
Mendatar .form-horizontal Terapung kiri, label dijajar kanan pada baris yang sama dengan kawalan

Contoh borang menggunakan hanya kawalan borang, tiada penanda tambahan

Bentuk asas

Lalai pintar dan ringan tanpa penanda tambahan.

Contoh teks bantuan peringkat blok di sini.

  1. <form class = "well" >
  2. <label> Nama label </label>
  3. <input type = "text" class = "span3" placeholder = "Taip sesuatu…" >
  4. <span class = "help-block" > Contoh teks bantuan peringkat blok di sini. </span>
  5. <label class = "kotak semak" >
  6. < jenis input = "kotak semak" > Semak saya keluar
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

Borang carian

Tambahkan .form-searchpada borang dan .search-querypada input.

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

Borang sebaris

Tambahkan .form-inlineuntuk menyempurnakan penjajaran menegak dan jarak kawalan borang.

  1. <form class = "well form-inline" >
  2. < jenis input = "teks" class = "input-small" pemegang tempat = "E-mel" >
  3. < jenis input = "kata laluan" kelas = "input-kecil" pemegang tempat = "Kata Laluan" >
  4. <label class = "kotak semak" >
  5. < jenis input = "kotak semak" > Ingat saya
  6. </label>
  7. <button type = "submit" class = "btn" > Log masuk </button>
  8. </form>

Bentuk mendatar

Ditunjukkan di sebelah kanan adalah semua kawalan borang lalai yang kami sokong. Berikut ialah senarai bertitik tumpu mata:

  • input teks (teks, kata laluan, e-mel, dll)
  • kotak semak
  • radio
  • pilih
  • berbilang pilih
  • input fail
  • textarea

Selain teks bentuk bebas, sebarang input berasaskan teks HTML5 kelihatan seperti itu.

Contoh markup

Memandangkan contoh reka letak borang di atas, berikut ialah penanda yang dikaitkan dengan kumpulan input dan kawalan pertama. Kelas .control-group, .control-label, dan .controlssemuanya diperlukan untuk penggayaan.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Teks lagenda </legend>
  4. <div class = "kumpulan kawalan" >
  5. <label class = "control-label" for = "input01" > Input teks </label>
  6. <div class = "kawalan" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Menyokong teks bantuan </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Keadaan kawalan bentuk

Bootstrap menampilkan gaya untuk fokus dan disabledkeadaan yang disokong pelayar. Kami mengalih keluar Webkit lalai outlinedan menggunakan a box-shadowsebagai gantinya untuk :focus.


Pengesahan borang

Ia juga termasuk gaya pengesahan untuk ralat, amaran dan kejayaan. Untuk menggunakan, tambahkan kelas ralat pada sekeliling .control-group.

  1. <fieldset
  2. class = "ralat kumpulan kawalan" >
  3. </fieldset>
Beberapa nilai di sini
Mungkin ada yang tidak kena
Sila betulkan kesilapan
Woohoo!
Woohoo!

Memperluas kawalan borang

Sediakan & tambah input

Kumpulan input—dengan teks yang dilampirkan atau diprapendi—menyediakan cara mudah untuk memberikan lebih banyak konteks untuk input anda. Contoh hebat termasuk tanda @ untuk nama pengguna Twitter atau $ untuk kewangan.


Kotak semak dan radio

Sehingga v1.4, Bootstrap memerlukan penanda tambahan di sekeliling kotak pilihan dan radio untuk menyusunnya. Sekarang, perkara mudah untuk mengulangi <label class="checkbox">yang membungkus <input type="checkbox">.

Kotak semak sebaris dan radio juga disokong. Hanya tambah .inlinepada mana-mana .checkboxatau .radiodan anda selesai.


Borang sebaris dan tambah/tambah

Untuk menggunakan prapend atau tambah input dalam bentuk sebaris, pastikan anda meletakkan .add-ondan inputpada baris yang sama, tanpa ruang.


Teks bantuan bentuk

Untuk menambah teks bantuan untuk input borang anda, sertakan teks bantuan sebaris dengan <span class="help-inline">atau blok teks bantuan dengan <p class="help-block">selepas elemen input.

Gunakan .span*kelas yang sama dari sistem grid untuk saiz input.

Anda juga boleh menggunakan kelas statik yang tidak dipetakan ke grid, menyesuaikan diri dengan gaya CSS responsif atau mengambil kira pelbagai jenis kawalan (cth, inputlwn select. ).

@

Berikut ialah beberapa teks bantuan

.00
Berikut ialah lebih banyak teks bantuan
$ .00

Nota: Label mengelilingi semua pilihan untuk kawasan klik yang lebih besar dan bentuk yang lebih boleh digunakan.

Butang kelas="" Penerangan
btn Butang kelabu standard dengan kecerunan
btn btn-primary Memberi berat visual tambahan dan mengenal pasti tindakan utama dalam satu set butang
btn btn-info Digunakan sebagai alternatif kepada gaya lalai
btn btn-success Menunjukkan tindakan yang berjaya atau positif
btn btn-warning Menunjukkan berhati-hati harus diambil dengan tindakan ini
btn btn-danger Menunjukkan tindakan berbahaya atau berpotensi negatif
btn btn-inverse Butang kelabu gelap ganti, tidak terikat pada tindakan atau penggunaan semantik

Butang untuk tindakan

Sebagai konvensyen, butang hanya boleh digunakan untuk tindakan manakala hiperpautan akan digunakan untuk objek. Contohnya, "Muat Turun" hendaklah menjadi butang manakala "aktiviti terkini" hendaklah menjadi pautan.

Gaya butang boleh digunakan pada apa-apa sahaja dengan .btnkelas digunakan. Walau bagaimanapun, biasanya anda akan mahu menggunakan ini hanya pada elemen <a>dan .<button>

Keserasian silang pelayar

IE9 tidak memangkas kecerunan latar belakang pada sudut bulat, jadi kami mengalih keluarnya. Berkaitan, IE9 menghapuskan buttonelemen yang dilumpuhkan, menjadikan teks berwarna kelabu dengan bayangan teks yang jahat yang tidak dapat kami betulkan.

Pelbagai saiz

Inginkan butang yang lebih besar atau lebih kecil? Tambah .btn-large, .btn-small, atau .btn-miniuntuk dua saiz tambahan.


Keadaan kurang upaya

Untuk butang yang dilumpuhkan, tambahkan .disabledkelas pada pautan dan disabledatribut untuk <button>elemen.

Pautan utama Pautan

Angkat kepala! Kami gunakan .disabledsebagai kelas utiliti di sini, serupa dengan .activekelas biasa, jadi tiada awalan diperlukan.

Satu kelas, berbilang tag

Gunakan .btnkelas pada <a>, <button>, atau <input>elemen.

Pautan
  1. <a class = "btn" href = "" > Pautan </a>
  2. <button class = "btn" type = "submit" >
  3. Butang
  4. </butang>
  5. < kelas input = "btn" jenis = "butang"
  6. nilai = "Input" >
  7. <input class = "btn" type = "submit"
  8. nilai = "Serah" >

Sebagai amalan terbaik, cuba padankan elemen untuk konteks anda untuk memastikan pemadanan merentas pelayar. Jika anda mempunyai input, gunakan <input type="submit">butang untuk anda.

  • kaca ikon
  • ikon-muzik
  • carian ikon
  • sampul surat ikon
  • ikon-hati
  • bintang ikon
  • ikon-bintang-kosong
  • pengguna ikon
  • filem ikon
  • ikon-ke-besar
  • ikon ke-
  • senarai-ikon
  • ikon-ok
  • ikon-buang
  • ikon-zum-masuk
  • ikon-zum-keluar
  • ikon dimatikan
  • isyarat ikon
  • ikon-cog
  • ikon-sampah
  • ikon-rumah
  • fail ikon
  • masa ikon
  • jalan ikon
  • ikon-muat turun-alt
  • muat turun ikon
  • muat naik ikon
  • ikon-peti masuk
  • ikon-main-bulatan
  • ikon-ulang
  • ikon-refresh
  • ikon-senarai-alt
  • kunci ikon
  • bendera ikon
  • fon kepala ikon
  • ikon-volume-mati
  • ikon-volume-turun
  • ikon-volume-up
  • icon-qrcode
  • ikon-kod bar
  • teg ikon
  • tag ikon
  • buku ikon
  • penanda buku ikon
  • cetak ikon
  • ikon-kamera
  • fon ikon
  • ikon-tebal
  • ikon-italic
  • ikon-teks-tinggi
  • ikon-teks-lebar
  • ikon-jajar-kiri
  • ikon-selaraskan-pusat
  • ikon-selaraskan-kanan
  • icon-align-justify
  • senarai ikon
  • ikon-inden-kiri
  • ikon-inden-kanan
  • ikon-facetime-video
  • ikon-gambar
  • ikon-pensel
  • ikon-peta-penanda
  • ikon-laraskan
  • warna ikon
  • ikon-edit
  • kongsi ikon
  • semak ikon
  • ikon-gerak
  • ikon-langkah-undur
  • ikon-cepat-undur
  • ikon ke belakang
  • permainan ikon
  • ikon-jeda
  • ikon-berhenti
  • ikon-ke hadapan
  • ikon-fast-forward
  • ikon-langkah-ke hadapan
  • ikon-eject
  • ikon-chevron-kiri
  • ikon-chevron-kanan
  • ikon-tambah-tanda
  • ikon-tolak-tanda
  • ikon-buang-tanda
  • ikon-ok-tanda
  • ikon-tanda-soalan
  • ikon-info-tanda
  • tangkapan skrin ikon
  • ikon-buang-bulatan
  • ikon-ok-bulatan
  • bulatan-larangan ikon
  • ikon-anak panah-kiri
  • ikon-anak panah-kanan
  • ikon-anak panah ke atas
  • ikon-anak panah-bawah
  • ikon-kongsi-alt
  • ikon-saiz-penuh
  • ikon-saiz-kecil
  • ikon-tambah
  • ikon-tolak
  • ikon-asterisk
  • ikon-tanda-seru
  • hadiah ikon
  • daun ikon
  • ikon-api
  • ikon-terbuka-mata
  • ikon-tutup-mata
  • ikon-tanda-amaran
  • pesawat ikon
  • ikon-kalendar
  • ikon-rawak
  • ikon-komen
  • ikon-magnet
  • ikon-chevron-up
  • ikon-chevron-down
  • ikon-tweet semula
  • ikon-keranjang-belanja
  • ikon-folder-tutup
  • ikon-folder-buka
  • ikon-saiz-menegak
  • ikon-ubah saiz-mendatar
  • ikon-hdd
  • ikon-bullhorn
  • loceng ikon
  • sijil ikon
  • ikon-ibu jari
  • ikon-ibu jari ke bawah
  • ikon-tangan-kanan
  • ikon-tangan-kiri
  • tangan-ikon
  • ikon-tangan-turun
  • ikon-bulatan-anak panah-kanan
  • ikon-bulatan-anak panah-kiri
  • ikon-bulatan-anak panah atas
  • ikon-bulatan-anak panah-bawah
  • ikon-glob
  • sepana ikon
  • ikon-tugas
  • penapis ikon
  • beg bimbit ikon
  • ikon-skrin penuh

Dibina sebagai sprite

Daripada menjadikan setiap ikon sebagai permintaan tambahan, kami telah menyusunnya menjadi sprite—sekumpulan imej dalam satu fail yang menggunakan CSS untuk meletakkan imej dengan background-position. Ini adalah kaedah yang sama yang kami gunakan di Twitter.com dan ia telah berfungsi dengan baik untuk kami.

Semua kelas ikon diawali dengan .icon-untuk ruang nama dan skop yang betul, sama seperti komponen kami yang lain. Ini akan membantu mengelakkan konflik dengan alat lain.

Glyphicons telah memberikan kami penggunaan set Halfling dalam kit alat sumber terbuka kami selagi kami menyediakan pautan dan kredit di sini dalam dokumen. Sila pertimbangkan untuk melakukan perkara yang sama dalam projek anda.

Bagaimana nak guna

Bootstrap menggunakan <i>teg untuk semua ikon, tetapi ia tidak mempunyai kelas kes—hanya awalan yang dikongsi. Untuk menggunakan, letakkan kod berikut di mana-mana sahaja:

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

Terdapat juga gaya yang tersedia untuk ikon terbalik (putih), yang disediakan dengan satu kelas tambahan:

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

Terdapat 140 kelas untuk dipilih untuk ikon anda. Cuma tambahkan <i>teg dengan kelas yang betul dan anda sudah bersedia. Anda boleh mendapatkan senarai penuh dalam sprites.less atau di sini dalam dokumen ini.

Angkat kepala! Apabila menggunakan di sebelah rentetan teks, seperti dalam butang atau pautan navigasi, pastikan anda meninggalkan ruang selepas <i>teg untuk jarak yang betul.

Kes guna

Ikon hebat, tetapi di manakah seseorang akan menggunakannya? Berikut adalah beberapa idea:

  • Sebagai visual untuk navigasi bar sisi anda
  • Untuk navigasi dipacu ikon semata-mata
  • Untuk butang untuk membantu menyampaikan maksud tindakan
  • Dengan pautan untuk berkongsi konteks pada destinasi pengguna

Pada asasnya, di mana sahaja anda boleh meletakkan <i>tag, anda boleh meletakkan ikon.

Contoh

Gunakannya dalam butang, kumpulan butang untuk bar alat, navigasi atau input borang yang diprapendi.