CSS dasar

Di atas perancah, elemen HTML dasar ditata dan ditingkatkan dengan kelas yang dapat diperluas untuk memberikan tampilan dan nuansa yang segar dan konsisten.

Judul & body copy

Skala tipografi

Seluruh kisi tipografi didasarkan pada dua variabel Less dalam file variable.less kami: @baseFontSizedan @baseLineHeight. Yang pertama adalah ukuran font dasar yang digunakan di seluruh dan yang kedua adalah tinggi garis dasar.

Kami menggunakan variabel tersebut, dan beberapa matematika, untuk membuat margin, padding, dan tinggi garis dari semua jenis kami dan banyak lagi.

Contoh teks isi

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 isi utama

Buat paragraf menonjol dengan menambahkan .lead.

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

h1. Pos 1

h2. Pos 2

h3. Pos 3

h4. Pos 4

h5. Pos 5
h6. Pos 6

Penekanan, alamat, dan singkatan

Elemen Penggunaan Opsional
<strong> Untuk menekankan potongan teks dengan penting Tidak ada
<em> Untuk menekankan potongan teks dengan tekanan Tidak ada
<abbr> Membungkus singkatan dan akronim untuk menampilkan versi yang diperluas di hover

Sertakan titleatribut opsional untuk teks yang diperluas

Gunakan .initialismkelas untuk singkatan huruf besar.
<address> Untuk informasi kontak untuk leluhur terdekat atau seluruh badan karya Pertahankan pemformatan dengan mengakhiri 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, seorang pharetra augue.

Catatan: Jangan ragu untuk menggunakan <b>dan <i>dalam HTML5, tetapi penggunaannya telah sedikit berubah. <b>dimaksudkan untuk menyoroti kata atau frasa tanpa menyampaikan kepentingan tambahan sementara <i>sebagian besar untuk suara, istilah teknis, dll.

Contoh alamat

Berikut adalah dua contoh bagaimana <address>tag dapat digunakan:

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

Contoh singkatan

Singkatan dengan titleatribut memiliki batas bawah bertitik terang dan kursor bantuan saat mengarahkan kursor. Ini memberi pengguna indikasi tambahan bahwa sesuatu akan ditampilkan saat mengarahkan kursor.

Tambahkan initialismkelas ke singkatan untuk meningkatkan keselarasan tipografi dengan memberinya ukuran teks yang sedikit lebih kecil.

HTML adalah hal terbaik sejak irisan roti.

Singkatan dari kata atribut adalah attr .

Blockquote

Elemen Penggunaan Opsional
<blockquote> Elemen tingkat blok untuk mengutip konten dari sumber lain

Tambahkan citeatribut untuk URL sumber

Gunakan .pull-leftdan .pull-rightkelas untuk opsi mengambang
<small> Elemen opsional untuk menambahkan kutipan yang menghadap pengguna, biasanya seorang penulis dengan judul karya Tempatkan di <cite>sekitar judul atau nama sumber

Untuk menyertakan blockquote, bungkus HTML<blockquote> apa pun sebagai kutipan. Untuk kutipan langsung, kami merekomendasikan a .<p>

Sertakan elemen opsional <small>untuk mengutip sumber Anda dan Anda akan mendapatkan tanda hubung em &mdash;sebelum itu untuk tujuan penataan.

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

Contoh kutipan blok

Blockquotes default ditata seperti itu:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bilangan bulat posuere erat a ante venenatis.

Seseorang yang terkenal di Body of work

Untuk melayangkan blockquote Anda ke kanan, tambahkan class="pull-right":

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bilangan bulat posuere erat a ante venenatis.

Seseorang yang terkenal di Body of work

Daftar

Tidak dipesan

<ul>

  • Lorem ipsum dolor sit amet
  • Conectetur adipiscing elit
  • Integer molestie lorem di massa
  • Facilisis di pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Bisul purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Dapatkan porttitor lorem

Tanpa gaya

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Conectetur adipiscing elit
  • Integer molestie lorem di massa
  • Facilisis di pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Bisul purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Dapatkan porttitor lorem

Dipesan

<ol>

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

Keterangan

<dl>

Daftar deskripsi
Daftar deskripsi sangat cocok untuk mendefinisikan istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida di eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Deskripsi horisontal

<dl class="dl-horizontal">

Daftar deskripsi
Daftar deskripsi sangat cocok untuk mendefinisikan istilah.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida di 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.

Perhatian! Daftar deskripsi horizontal akan memotong istilah yang terlalu panjang untuk ditampung dalam perbaikan kolom kiri text-overflow. Di area pandang yang lebih sempit, mereka akan berubah ke tata letak tumpuk default.

Di barisan

Bungkus potongan kode sebaris dengan <code>.

  1. Misalnya , < code> section </ code > harus dibungkus sebagai inline .

Blok dasar

Gunakan <pre>untuk beberapa baris kode. Pastikan untuk menghindari tanda kurung sudut dalam kode untuk rendering yang tepat.

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

Catatan: Pastikan untuk menyimpan kode dalam <pre>tag sedekat mungkin ke kiri; itu akan membuat semua tab.

Anda dapat secara opsional menambahkan .pre-scrollablekelas yang akan menetapkan ketinggian maksimum 350 piksel dan menyediakan bilah gulir sumbu y.

Google Percantik

Ambil <pre>elemen yang sama dan tambahkan dua kelas opsional untuk rendering yang ditingkatkan.

  1. <p> Contoh teks di sini... </p>
  1. <pre class = "prettyprint
  2. baris" >
  3. <p>Contoh teks di sini...</p>
  4. </pre>

Unduh google-code-prettify dan lihat readme untuk cara menggunakan.

Markup tabel

Menandai Keterangan
<table> Elemen pembungkus untuk menampilkan data dalam format tabel
<thead> Elemen penampung untuk baris header tabel ( <tr>) untuk melabeli kolom tabel
<tbody> Elemen penampung untuk baris tabel ( <tr>) di badan tabel
<tr> Elemen penampung untuk sekumpulan sel tabel ( <td>atau <th>) yang muncul pada satu baris
<td> Sel tabel default
<th> Sel tabel khusus untuk label kolom (atau baris, tergantung pada cakupan dan penempatan)
Harus digunakan dalam a<thead>
<caption> Deskripsi atau ringkasan isi tabel, terutama berguna untuk pembaca layar
  1. <tabel>
  2. <kepala>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tubuh>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tabel>

Opsi meja

Nama Kelas Keterangan
Bawaan Tidak ada Tidak ada gaya, hanya kolom dan baris
Dasar .table Hanya garis horizontal antar baris
berbatasan .table-bordered Membulatkan sudut dan menambahkan batas luar
Zebra-garis .table-striped Menambahkan warna latar belakang abu-abu muda ke baris ganjil (1, 3, 5, dll)
Kental .table-condensed Memotong bantalan vertikal menjadi dua, dari 8px hingga 4px, di dalam semua tddan thelemen

Contoh tabel

1. Gaya tabel default

Tabel secara otomatis ditata dengan hanya beberapa batas untuk memastikan keterbacaan dan mempertahankan struktur. Dengan 2.0, .tablekelas diperlukan.

  1. < kelas tabel = "tabel" >
  2. </tabel>
# Nama depan Nama keluarga Nama belakang
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia

2. Meja bergaris

Dapatkan sedikit kemewahan dengan tabel Anda dengan menambahkan zebra-striping—cukup tambahkan .table-stripedkelasnya.

Catatan: Tabel bergaris menggunakan :nth-childpemilih CSS dan tidak tersedia di IE7-IE8.

  1. <table class = "table table-striped" >
  2. </tabel>
# Nama depan Nama keluarga Nama belakang
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia

3. Tabel berbatas

Tambahkan batas di sekitar seluruh meja dan sudut membulat untuk tujuan estetika.

  1. <table class = "table table-bordered" >
  2. </tabel>
# Nama depan Nama keluarga Nama belakang
1 Tanda Otto @mdo
Tanda Otto @getbootstrap
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia

4. Meja kental

Jadikan tabel Anda lebih ringkas dengan menambahkan .table-condensedkelas untuk memotong padding sel tabel menjadi dua (dari 8px ke 4px).

  1. <table class = "table table-condensed" >
  2. </tabel>
# Nama depan Nama keluarga Nama belakang
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia

5. Gabungkan semuanya!

Jangan ragu untuk menggabungkan salah satu kelas tabel untuk mendapatkan tampilan yang berbeda dengan memanfaatkan salah satu kelas yang tersedia.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </tabel>
Nama lengkap
# Nama depan Nama keluarga Nama belakang
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia

HTML dan CSS yang fleksibel

Bagian terbaik tentang formulir di Bootstrap adalah bahwa semua input dan kontrol Anda tampak hebat tidak peduli bagaimana Anda membuatnya di markup Anda. Tidak diperlukan HTML yang berlebihan, tetapi kami menyediakan pola bagi mereka yang membutuhkannya.

Tata letak yang lebih rumit hadir dengan kelas ringkas dan skalabel untuk penataan gaya dan pengikatan acara yang mudah, sehingga Anda tercakup di setiap langkah.

Empat tata letak disertakan

Bootstrap hadir dengan dukungan untuk empat jenis tata letak formulir:

  • Vertikal (bawaan)
  • Mencari
  • Di barisan
  • Horisontal

Tipe tata letak formulir yang berbeda memerlukan beberapa perubahan pada markup, tetapi kontrol itu sendiri tetap dan berperilaku sama.

Kontrol status dan lainnya

Formulir bootstrap menyertakan gaya untuk semua kontrol formulir dasar seperti input, textarea, dan pilih yang Anda harapkan. Tetapi itu juga dilengkapi dengan sejumlah komponen khusus seperti input yang ditambahkan dan ditambahkan dan dukungan untuk daftar kotak centang.

Status seperti kesalahan, peringatan, dan keberhasilan disertakan untuk setiap jenis kontrol formulir. Juga termasuk gaya untuk kontrol yang dinonaktifkan.

Empat jenis formulir

Bootstrap menyediakan markup dan gaya sederhana untuk empat gaya formulir web umum.

Nama Kelas Keterangan
Vertikal (bawaan) .form-vertical (tidak dibutuhkan) Label bertumpuk dan rata kiri di atas kontrol
Di barisan .form-inline Label rata kiri dan kontrol inline-block untuk gaya ringkas
Mencari .form-search Masukan teks ekstra bulat untuk estetika pencarian yang khas
Horisontal .form-horizontal Apung kiri, label rata kanan pada baris yang sama dengan kontrol

Contoh formulir menggunakan kontrol formulir saja, tanpa markup tambahan

Bentuk dasar

Default cerdas dan ringan tanpa markup tambahan.

Contoh teks bantuan tingkat blok di sini.

  1. <form class = "baik" >
  2. <label> Nama label </label>
  3. <input type = "text" class = "span3" placeholder = "Ketik sesuatu..." >
  4. <span class = "help-block" > Contoh teks bantuan tingkat blok di sini. </span>
  5. <label class = "kotak centang" >
  6. < tipe input = "kotak centang" > Periksa saya
  7. </label>
  8. <button type = "kirim" class = "btn" > Kirim </button>
  9. </form>

Cari formulir

Tambahkan .form-searchke formulir dan .search-queryke input.

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

bentuk sebaris

Tambahkan .form-inlineuntuk menyempurnakan perataan vertikal dan jarak kontrol formulir.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "kotak centang" >
  5. <input type = "checkbox" > Ingat saya
  6. </label>
  7. < jenis tombol = "kirim" class = "btn" > Masuk </button>
  8. </form>

Bentuk horisontal

Ditampilkan di sebelah kanan adalah semua kontrol formulir default yang kami dukung. Berikut daftar bulletnya:

  • input teks (teks, kata sandi, email, dll)
  • kotak centang
  • radio
  • Pilih
  • pilihan ganda
  • masukan file
  • area teks

Selain teks bentuk bebas, input berbasis teks HTML5 apa pun muncul seperti itu.

Contoh markup

Mengingat contoh tata letak formulir di atas, inilah markup yang terkait dengan grup input dan kontrol pertama. Kelas .control-group, .control-label, dan .controlssemua diperlukan untuk penataan.

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

Status kontrol formulir

disabledBootstrap menampilkan gaya untuk fokus dan status yang didukung browser . Kami menghapus Webkit default outlinedan menerapkan a box-shadowsebagai gantinya untuk :focus.


Validasi formulir

Ini juga mencakup gaya validasi untuk kesalahan, peringatan, dan keberhasilan. Untuk menggunakannya, tambahkan kelas kesalahan ke file .control-group.

  1. <set lapangan
  2. class = "kesalahan grup kontrol" >
  3. </fieldset>
Beberapa nilai di sini
Mungkin ada yang salah
Tolong perbaiki kesalahannya
Woo hoo!
Woo hoo!

Memperluas kontrol formulir

Tambahkan & tambahkan input

Grup input—dengan teks yang ditambahkan atau ditambahkan sebelumnya—menyediakan cara mudah untuk memberikan lebih banyak konteks untuk input Anda. Contoh yang bagus termasuk tanda @ untuk nama pengguna Twitter atau $ untuk keuangan.


Kotak centang dan radio

Hingga v1.4, Bootstrap membutuhkan markup tambahan di sekitar kotak centang dan radio untuk menumpuknya. Sekarang, ini masalah sederhana untuk mengulangi <label class="checkbox">yang membungkus file <input type="checkbox">.

Kotak centang dan radio sebaris juga didukung. Cukup tambahkan .inlineke salah satu .checkboxatau .radiodan selesai.


Formulir sebaris dan tambahkan/tambahkan

Untuk menggunakan input awalan atau penambahan dalam formulir sebaris, pastikan untuk menempatkan .add-ondan inputpada baris yang sama, tanpa spasi.


Formulir bantuan teks

Untuk menambahkan teks bantuan untuk input formulir Anda, sertakan teks bantuan sebaris dengan <span class="help-inline">atau blok teks bantuan dengan <p class="help-block">setelah elemen input.

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

Anda juga dapat menggunakan kelas statis yang tidak memetakan ke kisi, beradaptasi dengan gaya CSS responsif, atau memperhitungkan berbagai jenis kontrol (mis., inputvs. select).

@

Berikut beberapa teks bantuan

.00
Berikut teks bantuan lainnya
$ .00

Catatan: Label mengelilingi semua opsi untuk area klik yang jauh lebih besar dan formulir yang lebih bermanfaat.

Tombol kelas="" Keterangan
btn Tombol abu-abu standar dengan gradien
btn btn-primary Memberikan bobot visual ekstra dan mengidentifikasi tindakan utama dalam serangkaian tombol
btn btn-info Digunakan sebagai alternatif gaya default
btn btn-success Menunjukkan tindakan yang berhasil atau positif
btn btn-warning Menunjukkan kehati-hatian harus diambil dengan tindakan ini
btn btn-danger Menunjukkan tindakan berbahaya atau berpotensi negatif
btn btn-inverse Tombol abu-abu gelap alternatif, tidak terikat dengan tindakan atau penggunaan semantik

Tombol untuk tindakan

Sebagai konvensi, tombol hanya boleh digunakan untuk tindakan sementara hyperlink digunakan untuk objek. Misalnya, "Unduh" harus berupa tombol sedangkan "aktivitas terbaru" harus berupa tautan.

Gaya tombol dapat diterapkan ke apa saja dengan .btnkelas yang diterapkan. Namun, biasanya Anda ingin menerapkan ini hanya pada elemen <a>dan .<button>

Kompatibilitas lintas browser

IE9 tidak memotong gradien latar belakang di sudut membulat, jadi kami menghapusnya. Terkait, IE9 mencabut buttonelemen yang dinonaktifkan, membuat teks menjadi abu-abu dengan bayangan teks buruk yang tidak dapat kami perbaiki.

Beberapa ukuran

Ingin tombol yang lebih besar atau lebih kecil? Tambahkan .btn-large, .btn-small, atau .btn-miniuntuk dua ukuran tambahan.


Status dinonaktifkan

Untuk tombol yang dinonaktifkan, tambahkan .disabledkelas ke tautan dan disabledatribut untuk <button>elemen.

Tautan utama Tautan

Perhatian! Kami menggunakan .disabledsebagai kelas utilitas di sini, mirip dengan .activekelas umum, jadi tidak diperlukan awalan.

Satu kelas, banyak tag

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

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

Sebagai praktik terbaik, coba cocokkan elemen untuk konteks Anda guna memastikan rendering lintas-browser yang cocok. Jika Anda memiliki input, gunakan an <input type="submit">untuk tombol Anda.

  • ikon-kaca
  • ikon-musik
  • pencarian ikon
  • ikon-amplop
  • ikon-hati
  • ikon-bintang
  • ikon-bintang-kosong
  • ikon-pengguna
  • ikon-film
  • ikon-ke-besar
  • ikon-th
  • daftar ikon
  • ikon-oke
  • ikon-hapus
  • ikon-perbesar
  • ikon-zoom-out
  • ikon-mati
  • ikon-sinyal
  • ikon-gigi
  • ikon-sampah
  • ikon-rumah
  • file-ikon
  • ikon-waktu
  • ikon-jalan
  • ikon-unduh-alt
  • unduh ikon
  • unggah ikon
  • ikon-kotak masuk
  • ikon-putar-lingkaran
  • ikon-ulangi
  • ikon-refresh
  • ikon-daftar-alt
  • ikon-kunci
  • ikon-bendera
  • ikon-headphone
  • ikon-volume-mati
  • ikon-volume-turun
  • ikon-volume-naik
  • ikon-qrcode
  • ikon-barcode
  • ikon-tag
  • ikon-tag
  • ikon-buku
  • ikon-bookmark
  • ikon-cetak
  • ikon-kamera
  • ikon-font
  • ikon-tebal
  • ikon-miring
  • ikon-teks-tinggi
  • ikon-teks-lebar
  • ikon-rata-kiri
  • ikon-align-center
  • ikon-rata-kanan
  • icon-align-justify
  • daftar ikon
  • ikon-indent-kiri
  • ikon-indent-kanan
  • ikon-facetime-video
  • ikon-gambar
  • ikon-pensil
  • ikon-peta-penanda
  • ikon-sesuaikan
  • ikon-warna
  • ikon-edit
  • ikon-berbagi
  • ikon-periksa
  • ikon-bergerak
  • ikon-langkah-mundur
  • ikon-cepat-mundur
  • ikon-mundur
  • ikon-bermain
  • ikon-jeda
  • ikon-berhenti
  • ikon-maju
  • ikon-maju-cepat
  • ikon-langkah-maju
  • ikon-keluarkan
  • ikon-chevron-kiri
  • ikon-chevron-kanan
  • ikon-plus-tanda
  • ikon-minus-tanda
  • ikon-hapus-tanda
  • ikon-ok-tanda
  • ikon-pertanyaan-tanda
  • ikon-info-tanda
  • ikon-tangkapan layar
  • ikon-hapus-lingkaran
  • ikon-ok-lingkaran
  • ikon-larangan-lingkaran
  • ikon-panah-kiri
  • ikon-panah-kanan
  • ikon-panah-atas
  • ikon-panah-bawah
  • ikon-bagikan-alt
  • ikon-ubah ukuran-penuh
  • ikon-ubah ukuran-kecil
  • ikon-plus
  • ikon-minus
  • ikon-tanda bintang
  • ikon-seru-tanda
  • ikon-hadiah
  • ikon-daun
  • ikon-api
  • ikon-mata-terbuka
  • ikon-mata-tutup
  • ikon-peringatan-tanda
  • ikon-pesawat
  • ikon-kalender
  • ikon-acak
  • ikon-komentar
  • ikon-magnet
  • ikon-chevron-up
  • ikon-chevron-down
  • ikon-retweet
  • ikon-keranjang belanja
  • ikon-folder-tutup
  • ikon-folder-buka
  • ikon-ubah ukuran-vertikal
  • ikon-ubah ukuran-horizontal
  • icon-hdd
  • ikon-bullhorn
  • ikon-bel
  • ikon-sertifikat
  • ikon-jempol
  • ikon-jempol-bawah
  • ikon-tangan-kanan
  • ikon-tangan-kiri
  • ikon-tangan-atas
  • ikon-tangan-bawah
  • ikon-lingkaran-panah-kanan
  • ikon-lingkaran-panah-kiri
  • ikon-lingkaran-panah-atas
  • ikon-lingkaran-panah-bawah
  • ikon-dunia
  • ikon-kunci pas
  • ikon-tugas
  • ikon-filter
  • ikon-kantong
  • ikon-layar penuh

Dibangun sebagai sprite

Alih-alih membuat setiap ikon permintaan tambahan, kami telah mengkompilasinya menjadi sprite—kumpulan gambar dalam satu file yang menggunakan CSS untuk memposisikan gambar dengan background-position. Ini adalah metode yang sama yang kami gunakan di Twitter.com dan telah bekerja dengan baik untuk kami.

Semua kelas ikon diawali dengan .icon-untuk penspasian dan pelingkupan nama yang tepat, sama seperti komponen kami yang lain. Ini akan membantu menghindari konflik dengan alat lain.

Glyphicons telah memberi kami penggunaan set Halflings di perangkat sumber terbuka kami selama kami menyediakan tautan dan kredit di sini di dokumen. Harap pertimbangkan untuk melakukan hal yang sama dalam proyek Anda.

Cara Penggunaan

Bootstrap menggunakan <i>tag untuk semua ikon, tetapi mereka tidak memiliki kelas kasus—hanya awalan bersama. Untuk menggunakannya, letakkan kode berikut di mana saja:

  1. <i class = "pencarian ikon" ></i>

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

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

Ada 140 kelas yang dapat dipilih untuk ikon Anda. Cukup tambahkan <i>tag dengan kelas yang tepat dan Anda sudah siap. Anda dapat menemukan daftar lengkapnya di sprites.less atau di sini di dokumen ini.

Perhatian! Saat menggunakan string teks di samping, seperti pada tombol atau tautan navigasi, pastikan untuk meninggalkan spasi setelah <i>tag untuk spasi yang tepat.

Gunakan kasus

Ikon memang bagus, tetapi di mana orang akan menggunakannya? Berikut adalah beberapa ide:

  • Sebagai visual untuk navigasi bilah sisi Anda
  • Untuk navigasi murni yang digerakkan oleh ikon
  • Untuk tombol untuk membantu menyampaikan arti dari suatu tindakan
  • Dengan tautan untuk berbagi konteks di tujuan pengguna

Pada dasarnya, di mana pun Anda dapat meletakkan <i>tag, Anda dapat meletakkan ikon.

Contoh

Gunakan mereka di tombol, grup tombol untuk bilah alat, navigasi, atau input formulir yang ditambahkan sebelumnya.