Bootstrap

CSS dasar

Elemen HTML dasar ditata dan ditingkatkan dengan kelas yang dapat diperluas.

Tipografi

Judul

Semua judul HTML, <h1>melalui <h6>tersedia.

h1. Pos 1

h2. Pos 2

h3. Pos 3

h4. Pos 4

h5. Pos 5
h6. Pos 6

salinan tubuh

Default global Bootstrap font-sizeadalah 14pxline-height , dengan 20px . Ini diterapkan pada <body>dan semua paragraf. Selain itu, <p>(paragraf) menerima margin bawah setengah dari tinggi garisnya (10px secara default).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida di eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

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.

<p class = "memimpin" > ... </p>

Dibangun dengan Lebih Sedikit

Skala tipografi didasarkan pada dua variabel KURANG dalam variabel.less : @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 sederhana untuk membuat margin, padding, dan tinggi garis dari semua jenis kami dan banyak lagi. Sesuaikan mereka dan Bootstrap beradaptasi.

Tekanan

Manfaatkan tag penekanan default HTML dengan gaya ringan.

<small>

Untuk menghilangkan penekanan sebaris atau blok teks, gunakan tag kecil.

Baris teks ini dimaksudkan untuk diperlakukan sebagai cetakan kecil.

<p> <small> Baris teks ini dimaksudkan untuk diperlakukan sebagai cetakan kecil. </kecil> </p>

Berani

Untuk menekankan potongan teks dengan bobot font yang lebih berat.

Potongan teks berikut ditampilkan sebagai teks tebal .

<strong> ditampilkan sebagai teks tebal </strong>

Huruf miring

Untuk menekankan potongan teks dengan huruf miring.

Potongan teks berikut dirender sebagai teks miring .

<em>dirender sebagai teks miring</em>dirender sebagai teks miring </em>

Perhatian!Jangan ragu untuk menggunakan <b>dan <i>dalam HTML5. <b>dimaksudkan untuk menyoroti kata atau frasa tanpa menyampaikan kepentingan tambahan sementara <i>sebagian besar untuk suara, istilah teknis, dll.

Kelas keselarasan

Sejajarkan kembali teks dengan mudah ke komponen dengan kelas perataan teks.

Teks rata kiri.

Teks rata tengah.

Teks rata kanan.

  1. <p class="text-left">Teks rata kiri.</p> class = "text-left" > Teks rata kiri. </p>
  2. <p class = "text-center" > Teks rata tengah. </p> 
  3. <p class = "text-right" > Teks rata kanan. </p>

Penekanan kelas

Sampaikan makna melalui warna dengan beberapa kelas utilitas penekanan.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Singkatan

Implementasi bergaya <abbr>elemen HTML untuk singkatan dan akronim untuk menampilkan versi yang diperluas saat mengarahkan kursor. Singkatan dengan titleatribut memiliki batas bawah bertitik terang dan kursor bantuan saat mengarahkan kursor, memberikan konteks tambahan saat mengarahkan kursor.

<abbr>

Untuk teks yang diperluas pada kursor panjang dari sebuah singkatan, sertakan titleatributnya.

Singkatan dari kata atribut adalah attr .

<abbr title = "atribut" > attr </abbr>

<abbr class="initialism">

Tambahkan .initialismke singkatan untuk ukuran font yang sedikit lebih kecil.

HTML adalah hal terbaik sejak irisan roti.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Alamat

Menyajikan informasi kontak untuk leluhur terdekat atau seluruh badan kerja.

<address>

Pertahankan pemformatan dengan mengakhiri semua baris dengan <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nama Lengkap
[email protected] 
  1. <alamat>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telepon" > P: </abbr> (123) 456-7890 
  6. </alamat>
  7.  
  8. <alamat>
  9.   <strong> Nama Lengkap </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </alamat>

Blockquote

Untuk mengutip blok konten dari sumber lain dalam dokumen Anda.

Kutipan blok default

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

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan. </p>
  3. </blockquote>

Opsi blokir kutipan

Perubahan gaya dan konten untuk variasi sederhana pada blockquote standar.

Menyebutkan sumber

Tambahkan <small>tag untuk mengidentifikasi sumber. Bungkus nama pekerjaan sumber di <cite>.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan. </p>
  3.   <small> Seseorang yang terkenal <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Tampilan alternatif

Gunakan .pull-rightuntuk blockquote yang melayang dan rata kanan.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber 
  1. <blockquote class = "tarik-kanan" > 
  2.   ...
  3. </blockquote>

Daftar

Tidak dipesan

Daftar item yang urutannya tidak penting secara eksplisit.

  • 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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Dipesan

Daftar item yang urutannya penting secara eksplisit.

  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
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Tanpa gaya

Hapus list-stylepadding default dan kiri pada item daftar (hanya anak-anak langsung).

  • 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
  1. <ul class = "tanpa gaya" > 
  2.   <li> ... </li>
  3. </ul>

Di barisan

Tempatkan semua item daftar pada satu baris dengan inline-blockdan beberapa bantalan ringan.

  • Lorem ipsum
  • Phaselus iaculis
  • Nulla volutpat
  1. <ul class = "sebaris" > 
  2.   <li> ... </li>
  3. </ul>

Keterangan

Daftar istilah dengan deskripsi terkait.

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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Deskripsi horisontal

Buat istilah dan deskripsi dalam <dl>barisan berdampingan.

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. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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.

Kode

Di barisan

Bungkus potongan kode sebaris dengan <code>.

Misalnya, <section>harus dibungkus sebagai inline. 
  1. Misalnya , < kode> & lt ; section & gt ;</ 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>

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

Tabel

Gaya default

Untuk penataan gaya dasar—lapisan ringan dan hanya pembagi horizontal—tambahkan kelas dasar .tableke file <table>.

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

Kelas opsional

Tambahkan salah satu kelas berikut ke kelas .tabledasar.

.table-striped

Menambahkan zebra-striping ke baris tabel mana pun dalam <tbody>melalui :nth-childpemilih CSS (tidak tersedia di IE7-8).

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

.table-bordered

Tambahkan batas dan sudut membulat ke tabel.

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

.table-hover

Aktifkan status hover pada baris tabel dalam file <tbody>.

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

.table-condensed

Membuat tabel lebih ringkas dengan memotong bantalan sel menjadi dua.

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

Kelas baris opsional

Gunakan kelas kontekstual untuk mewarnai baris tabel.

Kelas Keterangan
.success Menunjukkan tindakan yang berhasil atau positif.
.error Menunjukkan tindakan yang berbahaya atau berpotensi negatif.
.warning Menunjukkan peringatan yang mungkin perlu diperhatikan.
.info Digunakan sebagai alternatif gaya default.
# Produk Pembayaran Diambil Status
1 TB - Bulanan 01/04/2012 Disetujui
2 TB - Bulanan 02/04/2012 Ditolak
3 TB - Bulanan 03/04/2012 Tertunda
4 TB - Bulanan 04/04/2012 Hubungi untuk konfirmasi 
  1. ...
  2.   < tr kelas = "berhasil" >
  3.     <td> 1 < /td>
  4.     <td>TB - Bulanan</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Disetujui</ td >
  7.   </ tr >
  8. ...

Markup tabel yang didukung

Daftar elemen HTML tabel yang didukung dan bagaimana mereka harus digunakan.

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)
<caption> Deskripsi atau ringkasan isi tabel, terutama berguna untuk pembaca layar 
  1. <tabel>
  2.   <caption> ... </caption>
  3.   <kepala>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tubuh>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tabel>

Formulir

Gaya default

Kontrol formulir individual menerima penataan gaya, tetapi tanpa kelas dasar yang diperlukan pada <form>atau perubahan besar dalam markup. Menghasilkan label bertumpuk dan rata kiri di atas kontrol formulir.

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

Tata letak opsional

Termasuk dengan Bootstrap adalah tiga tata letak formulir opsional untuk kasus penggunaan umum.

Cari formulir

Tambahkan .form-searchke formulir dan .search-queryke <input>untuk input teks ekstra-bulat.

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

bentuk sebaris

Tambahkan .form-inlineuntuk label rata kiri dan kontrol blok sebaris untuk tata letak yang ringkas.

  1. <form class = "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

Ratakan label ke kanan dan apungkan ke kiri untuk membuatnya muncul di baris yang sama dengan kontrol. Memerlukan perubahan markup paling banyak dari formulir default:

  • Tambahkan .form-horizontalke formulir
  • Bungkus label dan kontrol dalam.control-group
  • Tambahkan .control-labelke label
  • Bungkus semua kontrol terkait .controlsuntuk penyelarasan yang tepat
  1. <form class = "bentuk-horizontal" > 
  2.   <div class = "grup kontrol" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "kontrol" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "grup kontrol" > 
  9.     <label class = "control-label" for = "inputPassword" > Sandi </label>  
  10.     <div class = "kontrol" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "grup kontrol" > 
  15.     <div class = "kontrol" > 
  16.       <label class = "kotak centang" > 
  17.         <input type = "checkbox" > Ingat saya 
  18.       </label>
  19.       < jenis tombol = "kirim" class = "btn" > Masuk </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kontrol formulir yang didukung

Contoh kontrol formulir standar yang didukung dalam contoh tata letak formulir.

Masukan

Kontrol formulir yang paling umum, bidang input berbasis teks. Termasuk dukungan untuk semua jenis HTML5: teks, kata sandi, datetime, datetime-local, tanggal, bulan, waktu, minggu, nomor, email, url, pencarian, telp, dan warna.

Membutuhkan penggunaan yang ditentukan typesetiap saat.

  1. < tipe input = "teks" placeholder = "Input teks" >

Area teks

Kontrol formulir yang mendukung banyak baris teks. Ubah rowsatribut sesuai kebutuhan.

  1. <textarea rows = "3" ></textarea>

Kotak centang dan radio

Kotak centang untuk memilih satu atau beberapa opsi dalam daftar sementara radio untuk memilih satu opsi dari banyak.

Default (bertumpuk)


  1. <label class = "kotak centang" > 
  2.   < tipe input = "kotak centang" nilai = "" >  
  3.   Opsi satu adalah ini dan itu—pastikan untuk menyertakan mengapa itu hebat
  4. </label>
  5.  
  6. <label kelas = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" dicentang >     
  8.   Opsi satu adalah ini dan itu—pastikan untuk menyertakan mengapa itu hebat
  9. </label>
  10. <label kelas = "radio" > 
  11.   < jenis input = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Opsi dua bisa menjadi sesuatu yang lain dan memilihnya akan membatalkan pilihan satu
  13. </label>

Kotak centang sebaris

Tambahkan .inlinekelas ke serangkaian kotak centang atau radio agar kontrol muncul di baris yang sama.

  1. <label class = "kotak centang sebaris" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "kotak centang sebaris" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "kotak centang sebaris" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

memilih

Gunakan opsi default atau tentukan a multiple="multiple"untuk menampilkan beberapa opsi sekaligus.


  1. <pilih>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </pilih>
  8.  
  9. <pilih beberapa = "banyak" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </pilih>

Memperluas kontrol formulir

Menambahkan di atas kontrol browser yang ada, Bootstrap menyertakan komponen formulir berguna lainnya.

Masukan yang ditambahkan dan ditambahkan

Tambahkan teks atau tombol sebelum atau sesudah input berbasis teks. Perhatikan bahwa selectelemen tidak didukung di sini.

Opsi default

Bungkus an .add-ondan an inputdengan salah satu dari dua kelas untuk menambahkan atau menambahkan teks ke input.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div class = "masukan-tambahkan" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Gabungan

Gunakan kedua kelas dan dua contoh .add-onuntuk menambahkan dan menambahkan input.

$ .00 
  1. <div class = "masukan-tambahkan masukan-tambahkan" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Tombol alih-alih teks

Alih-alih a <span>dengan teks, gunakan a .btnuntuk melampirkan tombol (atau dua) ke input.

  1. <div class = "masukan-tambahkan" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Ayo! </tombol>  
  4. </div>
  1. <div class = "masukan-tambahkan" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Cari </button>  
  4.   <button class = "btn" type = "button" > Opsi </button>  
  5. </div>

Dropdown tombol

  1. <div class = "masukan-tambahkan" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "grup btn" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Tindakan
  6.       <span class = "tanda sisipan" ></span> 
  7.     </tombol>
  8.     <ul class = "menu tarik-turun" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "grup btn" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Tindakan
  5.       <span class = "tanda sisipan" ></span> 
  6.     </tombol>
  7.     <ul class = "menu tarik-turun" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "masukan-tambahkan masukan-tambahkan" > 
  2.   <div class = "grup btn" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Tindakan
  5.       <span class = "tanda sisipan" ></span> 
  6.     </tombol>
  7.     <ul class = "menu tarik-turun" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "grup btn" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Tindakan
  15.       <span class = "tanda sisipan" ></span> 
  16.     </tombol>
  17.     <ul class = "menu tarik-turun" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Grup tarik-turun tersegmentasi

  1. <bentuk>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < tipe masukan = "teks" > 
  5.   </div>
  6.   <div class = "masukan-tambahkan" > 
  7.     < tipe masukan = "teks" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Cari formulir

  1. <form class = "pencarian formulir" > 
  2.   <div class = "masukan-tambahkan" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     < jenis tombol = "kirim" class = "btn" > Cari </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     < jenis tombol = "kirim" class = "btn" > Cari </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Kontrol ukuran

Gunakan kelas ukuran relatif seperti .input-largeatau cocokkan input Anda dengan ukuran kolom kisi menggunakan.span* kelas.

Blokir input level

Jadikan setiap <input>atau <textarea>elemen berperilaku seperti elemen level blok.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Ukuran relatif

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Perhatian!Di versi mendatang, kami akan mengubah penggunaan kelas input relatif ini agar sesuai dengan ukuran tombol kami. Misalnya, .input-largeakan meningkatkan padding dan ukuran font input.

Ukuran kisi

Gunakan .span1to .span12untuk input yang cocok dengan ukuran kolom kisi yang sama.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <pilih kelas = "span1" > 
  5.   ...
  6. </pilih>
  7. <pilih kelas = "span2" > 
  8.   ...
  9. </pilih>
  10. <pilih kelas = "span3" > 
  11.   ...
  12. </pilih>

Untuk beberapa masukan kisi per baris, gunakan .controls-rowkelas pengubah untuk spasi yang tepat . Itu mengapungkan input untuk menciutkan ruang putih, menetapkan margin yang tepat, dan membersihkan float.

  1. <div class = "kontrol" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "kontrol kontrol-baris" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Masukan yang tidak dapat diedit

Sajikan data dalam formulir yang tidak dapat diedit tanpa menggunakan markup formulir yang sebenarnya.

Beberapa nilai di sini 
  1. <span class = "input-xlarge uneditable-input" > Beberapa nilai di sini </span>

Bentuk tindakan

Mengakhiri formulir dengan sekelompok tindakan (tombol). Saat ditempatkan di dalam .form-actions, tombol akan secara otomatis menjorok agar sejajar dengan kontrol formulir.

  1. <div class = "bentuk-tindakan" > 
  2.   <button type = "kirim" class = "btn btn-primary" > Simpan perubahan </button>  
  3.   <button type = "button" class = "btn" > Batal </button>  
  4. </div>

teks bantuan

Dukungan tingkat inline dan blok untuk teks bantuan yang muncul di sekitar kontrol formulir.

Bantuan sebaris

Teks bantuan sebaris 
  1. <input type = "text" ><span class = "help-inline" > Teks bantuan sebaris </span>

Blok bantuan

Blok teks bantuan yang lebih panjang yang memecah ke baris baru dan dapat melampaui satu baris. 
  1. <input type = "text" ><span class = "help-block" > Blok teks bantuan yang lebih panjang yang memecah ke baris baru dan dapat melampaui satu baris. </span>

Status kontrol formulir

Berikan umpan balik kepada pengguna atau pengunjung dengan status umpan balik dasar pada kontrol dan label formulir.

Fokus masukan

Kami menghapus outlinegaya default pada beberapa kontrol formulir dan menerapkan a box-shadowsebagai gantinya untuk :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ini difokuskan..." >

Masukan tidak valid

Masukan gaya melalui fungsionalitas browser default dengan :invalid. Tentukan a type, tambahkan requiredatribut jika bidang tidak opsional, dan (jika berlaku) tentukan a pattern.

Ini tidak tersedia di versi Internet Explorer 7-9 karena kurangnya dukungan untuk penyeleksi semu CSS.

  1. <input class = "span3" type = "email" diperlukan >

Input yang dinonaktifkan

Tambahkan disabledatribut pada input untuk mencegah input pengguna dan memicu tampilan yang sedikit berbeda.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Input dinonaktifkan di sini..." dinonaktifkan >

Status validasi

Bootstrap menyertakan gaya validasi untuk pesan kesalahan, peringatan, info, dan sukses. Untuk menggunakannya, tambahkan kelas yang sesuai ke sekitarnya .control-group.

Mungkin ada yang salah
Tolong perbaiki kesalahannya
nama pengguna sudah digunakan
Woo hoo! 
  1. <div class = "peringatan grup kontrol" > 
  2.   <label class = "control-label" for = "inputWarning" > Masukan dengan peringatan </label>  
  3.   <div class = "kontrol" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Mungkin ada yang tidak beres </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kesalahan grup kontrol" > 
  10.   <label class = "control-label" for = "inputError" > Masukan dengan kesalahan </label>  
  11.   <div class = "kontrol" > 
  12.     < tipe input = "teks" id = "inputError" >  
  13.     <span class = "help-inline" > Harap perbaiki kesalahan </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "info grup kontrol" > 
  18.   <label class = "control-label" for = "inputInfo" > Masukan dengan info </label>  
  19.   <div class = "kontrol" > 
  20.     < tipe input = "teks" id = "inputInfo" >  
  21.     <span class = "help-inline" > Nama pengguna sudah diambil </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "keberhasilan grup kontrol" > 
  26.   <label class = "control-label" for = "inputSuccess" > Masukan berhasil </label>  
  27.   <div class = "kontrol" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Tombol

Tombol bawaan

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

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
btn btn-link Kurangi penekanan tombol dengan membuatnya terlihat seperti tautan sambil mempertahankan perilaku tombol

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.

Ukuran tombol

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Tombol besar </button>  
  3.   <button class = "btn btn-large" type = "button" > Tombol besar </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Tombol default </button>  
  7.   <button class = "btn" type = "button" > Tombol default </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Tombol kecil </button>  
  11.   <button class = "btn btn-small" type = "button" > Tombol kecil </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Tombol mini </button>  
  15.   <button class = "btn btn-mini" type = "button" > Tombol mini </button>  
  16. </p>

Buat tombol level blok—tombol yang menjangkau lebar penuh induknya— dengan menambahkan .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blok level tombol </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Blok level tombol </button>

Status dinonaktifkan

Buat tombol terlihat tidak dapat diklik dengan memudarkannya kembali 50%.

elemen jangkar

Tambahkan .disabledkelas ke <a>tombol.

Tautan utama Tautan 

  1. <a href = "#" class = "btn btn-large btn-primary nonaktif" > Tautan utama </a>  
  2. <a href = "#" class = "btn btn-large dinonaktifkan" > Tautan </a>

Perhatian!Kami menggunakan .disabledsebagai kelas utilitas di sini, mirip dengan .activekelas umum, jadi tidak diperlukan awalan. Juga, kelas ini hanya untuk estetika; Anda harus menggunakan JavaScript khusus untuk menonaktifkan tautan di sini.

Elemen tombol

Tambahkan disabledatribut ke <button>tombol.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Tombol utama </button>   
  2. <button type = "button" class = "btn btn-large" dinonaktifkan > Tombol </button>

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" > Tombol </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "kirim" value = "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.

Gambar-gambar

Tambahkan kelas ke <img>elemen untuk menata gambar dengan mudah di proyek apa pun.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-bulat" >  
  2. <img src = "..." class = "img-lingkaran" >  
  3. <img src = "..." class = "img-polaroid" >

Perhatian! .img-roundeddan .img-circletidak bekerja di IE7-8 karena kurangnya border-radiusdukungan.

Ikon oleh Glyphicons

Mesin terbang ikon

140 ikon dalam bentuk sprite, tersedia dalam warna abu-abu gelap (default) dan putih, disediakan oleh Glyphicons .

  • 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

Atribusi Glyphicon

Glyphicons Halflings biasanya tidak tersedia secara gratis, tetapi pengaturan antara Bootstrap dan pembuat Glyphicons telah memungkinkan hal ini tanpa biaya bagi Anda sebagai pengembang. Sebagai ucapan terima kasih, kami meminta Anda untuk menyertakan tautan opsional kembali ke Glyphicons bila memungkinkan.

Cara Penggunaan

Semua ikon memerlukan <i>tag dengan kelas unik, diawali dengan icon-. 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. Kami akan secara khusus menerapkan kelas ini pada status hover dan status aktif untuk tautan nav dan dropdown.

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

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

Contoh ikon

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

Tombol

Grup tombol di bilah alat tombol
  1. <div class = "btn-toolbar" > 
  2.   <div class = "grup btn" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Dropdown dalam grup tombol
Pengguna 
  1. <div class = "grup btn" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Pengguna </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "menu tarik-turun" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Hapus </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Larangan </a></li>  
  8.     <li class = "pembagi" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Jadikan admin </a></li>  
  10.   </ul>
  11. </div>
Ukuran tombol
Bintang Bintang Bintang 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Bintang </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Bintang </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Bintang </a>

Navigasi

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktif" ><a href = "#" ><i class = "icon-home icon-white" ></i> Beranda </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Perpustakaan </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikasi </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Lain -lain </a></li>  
  6. </ul>

Bidang formulir

  1. <div class = "grup kontrol" > 
  2.   <label class = "control-label" for = "inputIcon" > Alamat email </label>  
  3.   <div class = "kontrol" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-amplop" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>