Di atas perancah, elemen HTML dasar ditata dan ditingkatkan dengan kelas yang dapat diperluas untuk memberikan tampilan dan nuansa yang segar dan konsisten.
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.
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.
Buat paragraf menonjol dengan menambahkan .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| 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 .initialismkelas untuk singkatan huruf besar. |
<address> |
Untuk informasi kontak untuk leluhur terdekat atau seluruh badan karya | Pertahankan pemformatan dengan mengakhiri semua baris dengan<br> |
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.
Berikut adalah dua contoh bagaimana <address>tag dapat digunakan:
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 .
| Elemen | Penggunaan | Opsional |
|---|---|---|
<blockquote> |
Elemen tingkat blok untuk mengutip konten dari sumber lain | Tambahkan .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 —sebelum itu untuk tujuan penataan.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bilangan bulat posuere erat a ante venenatis. </p>
- <small> Seseorang yang terkenal </small>
- </blockquote>
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Bungkus potongan kode sebaris dengan <code>.
- Misalnya , < code> section </ code > harus dibungkus sebagai inline .
Gunakan <pre>untuk beberapa baris kode. Pastikan untuk menghindari tanda kurung sudut dalam kode untuk rendering yang tepat.
<p>Contoh teks di sini...</p>
- <pra>
- <p>Contoh teks di sini...</p>
- </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.
Ambil <pre>elemen yang sama dan tambahkan dua kelas opsional untuk rendering yang ditingkatkan.
- <p> Contoh teks di sini... </p>
- <pre class = "prettyprint
- baris" >
- <p>Contoh teks di sini...</p>
- </pre>
Unduh google-code-prettify dan lihat readme untuk cara menggunakan.
| 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 |
- <tabel>
- <kepala>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tubuh>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabel>
| 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 |
Tabel secara otomatis ditata dengan hanya beberapa batas untuk memastikan keterbacaan dan mempertahankan struktur. Dengan 2.0, .tablekelas diperlukan.
- < kelas tabel = "tabel" >
- …
- </tabel>
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung | @Indonesia |
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.
- <table class = "table table-striped" >
- …
- </tabel>
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung | @Indonesia |
Tambahkan batas di sekitar seluruh meja dan sudut membulat untuk tujuan estetika.
- <table class = "table table-bordered" >
- …
- </tabel>
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| Tanda | Otto | @getbootstrap | |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry si Burung | @Indonesia | |
Jadikan tabel Anda lebih ringkas dengan menambahkan .table-condensedkelas untuk memotong padding sel tabel menjadi dua (dari 8px ke 4px).
- <table class = "table table-condensed" >
- …
- </tabel>
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry si Burung | @Indonesia | |
Jangan ragu untuk menggabungkan salah satu kelas tabel untuk mendapatkan tampilan yang berbeda dengan memanfaatkan salah satu kelas yang tersedia.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </tabel>
| Nama lengkap | |||
|---|---|---|---|
| # | Nama depan | Nama keluarga | Nama belakang |
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry si Burung | @Indonesia | |
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.
Bootstrap hadir dengan dukungan untuk empat jenis tata letak formulir:
Tipe tata letak formulir yang berbeda memerlukan beberapa perubahan pada markup, tetapi kontrol itu sendiri tetap dan berperilaku sama.
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.
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 |
Default cerdas dan ringan tanpa markup tambahan.
- <form class = "baik" >
- <label> Nama label </label>
- <input type = "text" class = "span3" placeholder = "Ketik sesuatu..." >
- <span class = "help-block" > Contoh teks bantuan tingkat blok di sini. </span>
- <label class = "kotak centang" >
- < tipe input = "kotak centang" > Periksa saya
- </label>
- <button type = "kirim" class = "btn" > Kirim </button>
- </form>
Tambahkan .form-searchke formulir dan .search-queryke input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- < jenis tombol = "kirim" class = "btn" > Cari </button>
- </form>
Tambahkan .form-inlineuntuk menyempurnakan perataan vertikal dan jarak kontrol formulir.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "kotak centang" >
- <input type = "checkbox" > Ingat saya
- </label>
- < jenis tombol = "kirim" class = "btn" > Masuk </button>
- </form>
Ditampilkan di sebelah kanan adalah semua kontrol formulir default yang kami dukung. Berikut daftar bulletnya:
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.
- <form class = "bentuk-horizontal" >
- <set bidang>
- <legend> Teks legenda </legend>
- <div class = "grup kontrol" >
- <label class = "control-label" for = "input01" > Input teks </label>
- <div class = "kontrol" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Mendukung teks bantuan </p>
- </div>
- </div>
- </fieldset>
- </form>
disabledBootstrap menampilkan gaya untuk fokus dan status yang didukung browser . Kami menghapus Webkit default outlinedan menerapkan a box-shadowsebagai gantinya untuk :focus.
Ini juga mencakup gaya validasi untuk kesalahan, peringatan, dan keberhasilan. Untuk menggunakannya, tambahkan kelas kesalahan ke file .control-group.
- <set lapangan
- class = "kesalahan grup kontrol" >
- …
- </fieldset>
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.
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.
Untuk menggunakan input awalan atau penambahan dalam formulir sebaris, pastikan untuk menempatkan .add-ondan inputpada baris yang sama, tanpa spasi.
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.
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.
Bootstrap menggunakan <i>tag untuk semua ikon, tetapi mereka tidak memiliki kelas kasus—hanya awalan bersama. Untuk menggunakannya, letakkan kode berikut di mana saja:
- <i class = "pencarian ikon" ></i>
Ada juga gaya yang tersedia untuk ikon terbalik (putih), disiapkan dengan satu kelas tambahan:
- <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.
Ikon memang bagus, tetapi di mana orang akan menggunakannya? Berikut adalah beberapa ide:
Pada dasarnya, di mana pun Anda dapat meletakkan <i>tag, Anda dapat meletakkan ikon.
Gunakan mereka di tombol, grup tombol untuk bilah alat, navigasi, atau input formulir yang ditambahkan sebelumnya.