CSS
Pengaturan CSS global, elemen HTML dasar yang ditata dan ditingkatkan dengan kelas yang dapat diperluas, dan sistem kisi tingkat lanjut.
Ringkasan
Dapatkan informasi penting tentang infrastruktur Bootstrap, termasuk pendekatan kami untuk pengembangan web yang lebih baik, lebih cepat, dan lebih kuat.
Doctype HTML5
Bootstrap memanfaatkan elemen HTML dan properti CSS tertentu yang memerlukan penggunaan doctype HTML5. Sertakan di awal semua proyek Anda.
<!DOCTYPE html>
<html lang="en">
...
</html>Seluler dulu
Dengan Bootstrap 2, kami menambahkan gaya ramah seluler opsional untuk aspek utama kerangka kerja. Dengan Bootstrap 3, kami telah menulis ulang proyek menjadi ramah seluler sejak awal. Alih-alih menambahkan gaya seluler opsional, mereka dimasukkan langsung ke intinya. Faktanya, Bootstrap adalah yang pertama untuk seluler . Gaya pertama seluler dapat ditemukan di seluruh pustaka alih-alih di file terpisah.
Untuk memastikan rendering yang tepat dan zoom sentuh, tambahkan tag meta area pandang ke file <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Anda dapat menonaktifkan kemampuan zoom pada perangkat seluler dengan menambahkan user-scalable=notag meta viewport. Ini menonaktifkan zoom, artinya pengguna hanya dapat menggulir, dan membuat situs Anda terasa lebih seperti aplikasi asli. Secara keseluruhan, kami tidak merekomendasikan ini di setiap situs, jadi berhati-hatilah!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tipografi dan tautan
Bootstrap mengatur tampilan global dasar, tipografi, dan gaya tautan. Secara khusus, kami:
- Tetapkan
background-color: #fff;padabody - Gunakan
@font-family-base,@font-size-base, dan@line-height-baseatribut sebagai basis tipografi kami - Atur warna tautan global melalui
@link-colordan terapkan garis bawah tautan hanya di:hover
Gaya ini dapat ditemukan di dalam scaffolding.less.
Normalisasi.css
Untuk rendering lintas-browser yang lebih baik, kami menggunakan Normalize.css , sebuah proyek oleh Nicolas Gallagher dan Jonathan Neal .
Wadah
Bootstrap membutuhkan elemen yang mengandung untuk membungkus konten situs dan menampung sistem grid kita. Anda dapat memilih salah satu dari dua wadah untuk digunakan dalam proyek Anda. Perhatikan bahwa, karena paddingdan banyak lagi, tidak ada wadah yang dapat disarang.
Gunakan .containeruntuk wadah lebar tetap yang responsif.
<div class="container">
...
</div>Gunakan .container-fluiduntuk wadah lebar penuh, yang mencakup seluruh lebar viewport Anda.
<div class="container-fluid">
...
</div>Sistem jaringan
Bootstrap menyertakan sistem grid fluid pertama yang responsif dan mobile yang secara tepat menskalakan hingga 12 kolom seiring dengan peningkatan ukuran perangkat atau viewport. Ini mencakup kelas yang telah ditentukan sebelumnya untuk opsi tata letak yang mudah, serta mixin yang kuat untuk menghasilkan lebih banyak tata letak semantik .
pengantar
Sistem kisi digunakan untuk membuat tata letak halaman melalui serangkaian baris dan kolom yang menampung konten Anda. Berikut cara kerja sistem grid Bootstrap:
- Baris harus ditempatkan dalam
.container(lebar tetap) atau.container-fluid(lebar penuh) untuk perataan dan bantalan yang tepat. - Gunakan baris untuk membuat grup kolom horizontal.
- Konten harus ditempatkan di dalam kolom, dan hanya kolom yang boleh menjadi turunan langsung dari baris.
- Kelas kisi yang telah ditentukan seperti
.rowdan.col-xs-4tersedia untuk membuat tata letak kisi dengan cepat. Lebih sedikit mixin juga dapat digunakan untuk tata letak yang lebih semantik. - Kolom membuat talang (celah antara konten kolom) melalui
padding. Padding itu diimbangi dalam baris untuk kolom pertama dan terakhir melalui margin negatif pada.rows. - Margin negatif adalah mengapa contoh-contoh di bawah ini outdented. Ini agar konten dalam kolom kisi sejajar dengan konten non-kisi.
- Kolom kisi dibuat dengan menentukan jumlah dua belas kolom yang tersedia yang ingin Anda rentangkan. Misalnya, tiga kolom yang sama akan menggunakan tiga
.col-xs-4. - Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru.
- Kelas kisi berlaku untuk perangkat dengan lebar layar lebih besar atau sama dengan ukuran titik henti sementara, dan menimpa kelas kisi yang ditargetkan pada perangkat yang lebih kecil. Oleh karena itu, misalnya menerapkan
.col-md-*kelas apa pun ke elemen tidak hanya akan memengaruhi gayanya pada perangkat sedang tetapi juga pada perangkat besar jika.col-lg-*kelas tidak ada.
Lihat contoh penerapan prinsip-prinsip ini pada kode Anda.
Pertanyaan media
Kami menggunakan kueri media berikut dalam file Less kami untuk membuat breakpoint utama dalam sistem grid kami.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Kami terkadang memperluas kueri media ini untuk menyertakan a max-widthuntuk membatasi CSS ke kumpulan perangkat yang lebih sempit.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Opsi kisi
Lihat bagaimana aspek sistem grid Bootstrap bekerja di beberapa perangkat dengan tabel praktis.
| Perangkat ekstra kecil Telepon (<768px) | Perangkat kecil Tablet (≥768px) | Desktop perangkat sedang (≥992px) | Desktop perangkat besar (≥1200px) | |
|---|---|---|---|---|
| Perilaku kisi-kisi | Horisontal setiap saat | Diciutkan untuk memulai, horizontal di atas breakpoints | ||
| Lebar wadah | Tidak ada (otomatis) | 750px | 970px | 1170px |
| Awalan kelas | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # kolom | 12 | |||
| Lebar kolom | Mobil | ~62px | ~81px | ~97px |
| lebar selokan | 30px (15px di setiap sisi kolom) | |||
| Bersarang | Ya | |||
| Offset | Ya | |||
| Pemesanan kolom | Ya | |||
Contoh: Ditumpuk-ke-horizontal
Dengan menggunakan satu set .col-md-*kelas grid, Anda dapat membuat sistem grid dasar yang mulai ditumpuk di perangkat seluler dan perangkat tablet (rentang ekstra kecil hingga kecil) sebelum menjadi horizontal di perangkat desktop (menengah). Tempatkan kolom kisi di sembarang .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Contoh: Wadah cairan
Ubah tata letak kisi lebar tetap menjadi tata letak lebar penuh dengan mengubah terluar Anda .containermenjadi .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Contoh: Seluler dan desktop
Tidak ingin kolom Anda menumpuk di perangkat yang lebih kecil? Gunakan kelas kisi perangkat ekstra kecil dan menengah dengan menambahkan .col-xs-* .col-md-*ke kolom Anda. Lihat contoh di bawah untuk ide yang lebih baik tentang cara kerjanya.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Contoh: Ponsel, tablet, desktop
Bangun dari contoh sebelumnya dengan membuat tata letak yang lebih dinamis dan kuat dengan .col-sm-*kelas tablet.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Contoh: Pembungkus kolom
Jika lebih dari 12 kolom ditempatkan dalam satu baris, setiap kelompok kolom tambahan akan, sebagai satu unit, membungkus ke baris baru.
.col-xs-9
.col-xs-4
Sejak 9 + 4 = 13 > 12, div dengan lebar 4 kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.
Sejak 9 + 4 = 13 > 12, div dengan lebar 4 kolom ini dibungkus ke baris baru sebagai satu unit yang berdekatan.
.col-xs-6
Kolom berikutnya berlanjut di sepanjang baris baru.
Kolom berikutnya berlanjut di sepanjang baris baru.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Penyetelan ulang kolom responsif
Dengan empat tingkat kisi yang tersedia, Anda pasti akan mengalami masalah di mana, pada titik putus tertentu, kolom Anda tidak jelas dengan benar karena yang satu lebih tinggi dari yang lain. Untuk memperbaikinya, gunakan kombinasi a .clearfixdan kelas utilitas responsif kami .
.col-xs-6 .col-sm-3
Ubah ukuran area pandang Anda atau lihat di ponsel Anda sebagai contoh.
Ubah ukuran area pandang Anda atau lihat di ponsel Anda sebagai contoh.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Selain pembersihan kolom pada breakpoint responsif, Anda mungkin perlu mengatur ulang offset, push, atau pull . Lihat ini beraksi dalam contoh grid .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Mengimbangi kolom
Pindahkan kolom ke kanan menggunakan .col-md-offset-*kelas. Kelas-kelas ini meningkatkan margin kiri kolom demi *kolom. Misalnya, .col-md-offset-4bergerak .col-md-4di atas empat kolom.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Anda juga dapat mengganti offset dari tingkat grid yang lebih rendah dengan .col-*-offset-0kelas.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Kolom bersarang
Untuk menyarangkan konten Anda dengan kisi default, tambahkan kolom baru .rowdan kumpulan .col-sm-*kolom di dalam kolom yang sudah ada .col-sm-*. Baris bersarang harus menyertakan kumpulan kolom yang berjumlah hingga 12 atau kurang (Anda tidak perlu menggunakan semua 12 kolom yang tersedia).
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Pemesanan kolom
Ubah urutan kolom kisi bawaan kami dengan mudah dengan .col-md-push-*dan .col-md-pull-*kelas pengubah.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Lebih sedikit mixin dan variabel
Selain kelas grid prebuilt untuk tata letak cepat, Bootstrap menyertakan Lebih sedikit variabel dan mixin untuk menghasilkan tata letak semantik sederhana Anda sendiri dengan cepat.
Variabel
Variabel menentukan jumlah kolom, lebar talang, dan titik kueri media untuk memulai kolom mengambang. Kami menggunakan ini untuk menghasilkan kelas kisi yang telah ditentukan sebelumnya yang didokumentasikan di atas, serta untuk mixin khusus yang tercantum di bawah ini.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;campuran
Mixin digunakan bersama dengan variabel grid untuk menghasilkan CSS semantik untuk kolom grid individu.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Contoh penggunaan
Anda dapat memodifikasi variabel ke nilai kustom Anda sendiri, atau cukup gunakan mixin dengan nilai defaultnya. Berikut adalah contoh penggunaan pengaturan default untuk membuat tata letak dua kolom dengan celah di antaranya.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Tipografi
Judul
Semua judul HTML, <h1>sampai <h6>, tersedia. .h1melalui .h6kelas juga tersedia, ketika Anda ingin mencocokkan gaya font dari sebuah judul tetapi tetap ingin teks Anda ditampilkan sebaris.
h1. Judul bootstrap |
Semibold 36px |
h2. Judul bootstrap |
Semibold 30px |
h3. Judul bootstrap |
Semibold 24px |
h4. Judul bootstrap |
Semibold 18px |
h5. Judul bootstrap |
Semibold 14px |
h6. Judul bootstrap |
Semibold 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Buat teks sekunder yang lebih ringan dalam judul apa pun dengan <small>tag umum atau .smallkelas.
h1. Judul bootstrap Teks sekunder |
h2. Judul bootstrap Teks sekunder |
h3. Judul bootstrap Teks sekunder |
h4. Judul bootstrap Teks sekunder |
h5. Judul bootstrap Teks sekunder |
h6. Judul bootstrap Teks sekunder |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>salinan tubuh
Default global Bootstrap font-sizeadalah 14pxline-height , dengan 1.428 . Ini diterapkan pada <body>dan semua paragraf. Selain itu, <p>(paragraf) menerima margin bawah dari setengah tinggi garis yang dihitung (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="lead">...</p>Dibangun dengan Lebih Sedikit
Skala tipografi didasarkan pada dua variabel Less dalam variabel.less : @font-size-basedan @line-height-base. 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.
Elemen teks sebaris
Teks yang ditandai
Untuk menyorot serangkaian teks karena relevansinya dalam konteks lain, gunakan <mark>tag.
Anda dapat menggunakan tag tanda untukmenyorotteks.
You can use the mark tag to <mark>highlight</mark> text.Teks yang dihapus
Untuk menunjukkan blok teks yang telah dihapus gunakan <del>tag.
Baris teks ini dimaksudkan untuk diperlakukan sebagai teks yang dihapus.
<del>This line of text is meant to be treated as deleted text.</del>Teks yang dicoret
Untuk menunjukkan blok teks yang tidak lagi relevan gunakan <s>tag.
Baris teks ini dimaksudkan untuk diperlakukan sebagai tidak lagi akurat.
<s>This line of text is meant to be treated as no longer accurate.</s>Teks yang disisipkan
Untuk menunjukkan penambahan pada dokumen, gunakan <ins>tag.
Baris teks ini dimaksudkan untuk diperlakukan sebagai tambahan pada dokumen.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Teks yang digarisbawahi
Untuk menggarisbawahi teks gunakan <u>tag.
Baris teks ini akan dirender sebagai digarisbawahi
<u>This line of text will render as underlined</u>Manfaatkan tag penekanan default HTML dengan gaya ringan.
teks kecil
Untuk menghilangkan penekanan sebaris atau blok teks, gunakan <small>tag untuk menyetel teks pada 85% ukuran induknya. Elemen heading menerima miliknya sendiri untuk elemen font-sizebersarang .<small>
Sebagai alternatif, Anda dapat menggunakan elemen sebaris dengan .smallmenggantikan any <small>.
Baris teks ini dimaksudkan untuk diperlakukan sebagai cetakan kecil.
<small>This line of text is meant to be treated as fine print.</small>Berani
Untuk menekankan potongan teks dengan bobot font yang lebih berat.
Potongan teks berikut ditampilkan sebagai teks tebal .
<strong>rendered as bold text</strong>Huruf miring
Untuk menekankan potongan teks dengan huruf miring.
Potongan teks berikut dirender sebagai teks miring .
<em>rendered as italicized text</em>elemen alternatif
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.
Teks yang dibenarkan.
Tidak ada teks bungkus.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Kelas transformasi
Transformasi teks dalam komponen dengan kelas kapitalisasi teks.
Teks dengan huruf kecil.
Teks dengan huruf besar.
Teks dengan huruf kapital.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</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 dan kepada pengguna teknologi bantu.
Singkatan dasar
Singkatan dari kata atribut adalah attr .
<abbr title="attribute">attr</abbr>Inisialisasi
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. Pertahankan pemformatan dengan mengakhiri semua baris dengan <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nama Lengkap
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nama Lengkap
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>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 .<p>
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Opsi blokir kutipan
Perubahan gaya dan konten untuk variasi sederhana pada standar <blockquote>.
Menyebutkan sumber
Tambahkan a <footer>untuk mengidentifikasi sumber. Bungkus nama pekerjaan sumber di <cite>.
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Tampilan alternatif
Tambahkan .blockquote-reverseuntuk blockquote dengan konten rata kanan.
<blockquote class="blockquote-reverse">
...
</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
<ul>
<li>...</li>
</ul>Dipesan
Daftar item yang urutannya 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
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Dapatkan porttitor lorem
<ol>
<li>...</li>
</ol>Tanpa gaya
Hapus list-stylemargin default dan kiri pada item daftar (hanya anak-anak langsung). Ini hanya berlaku untuk item daftar anak langsung , artinya Anda juga perlu menambahkan kelas untuk daftar bersarang.
- 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
<ul class="list-unstyled">
<li>...</li>
</ul>Di barisan
Tempatkan semua item daftar pada satu baris dengan display: inline-block;dan beberapa bantalan ringan.
- Lorem ipsum
- Phaselus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</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.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Deskripsi horisontal
Buat istilah dan deskripsi dalam <dl>barisan berdampingan. Mulai ditumpuk seperti default <dl>s, tetapi ketika navbar mengembang, lakukan ini.
- 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.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Pemotongan otomatis
Daftar deskripsi horizontal akan memotong istilah yang terlalu panjang untuk muat di kolom kiri dengan 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.
For example, <code><section></code> should be wrapped as inline.Masukan pengguna
Menggunakan<kbd> untuk menunjukkan input yang biasanya dimasukkan melalui keyboard.
Untuk berpindah direktori, ketik
cddiikuti dengan nama direktori.
Untuk mengedit pengaturan, tekan ctrl + ,
Untuk mengedit pengaturan, tekan ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>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>
<pre><p>Sample text here...</p></pre>Anda dapat secara opsional menambahkan .pre-scrollablekelas, yang akan menetapkan tinggi maksimum 350 piksel dan menyediakan bilah gulir sumbu y.
Variabel
Untuk menunjukkan variabel gunakan <var>tag.
y = mx + b _
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Contoh keluaran
Untuk menunjukkan blok sampel keluaran dari suatu program, gunakan <samp>tag.
Teks ini dimaksudkan untuk diperlakukan sebagai contoh keluaran dari program komputer.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Tabel
Contoh dasar
Untuk penataan gaya dasar—lapisan ringan dan hanya pembagi horizontal—tambahkan kelas dasar .tableke file <table>. Ini mungkin tampak sangat berlebihan, tetapi mengingat meluasnya penggunaan tabel untuk plugin lain seperti kalender dan pemilih tanggal, kami telah memilih untuk mengisolasi gaya tabel kustom kami.
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung | @Indonesia |
<table class="table">
...
</table>Baris bergaris
Gunakan .table-stripeduntuk menambahkan zebra-striping ke baris tabel mana pun dalam file <tbody>.
Kompatibilitas lintas-browser
Tabel bergaris ditata melalui :nth-childpemilih CSS, yang tidak tersedia di Internet Explorer 8.
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung | @Indonesia |
<table class="table table-striped">
...
</table>Meja berbatas
Tambahkan .table-bordereduntuk batas di semua sisi tabel dan sel.
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung | @Indonesia |
<table class="table table-bordered">
...
</table>Arahkan kursor ke baris
Tambahkan .table-hoveruntuk mengaktifkan status hover pada baris tabel dalam file <tbody>.
| # | Nama depan | Nama keluarga | Nama belakang |
|---|---|---|---|
| 1 | Tanda | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung | @Indonesia |
<table class="table table-hover">
...
</table>Meja kental
Tambahkan .table-condenseduntuk 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 | |
<table class="table table-condensed">
...
</table>Kelas kontekstual
Gunakan kelas kontekstual untuk mewarnai baris tabel atau sel individual.
| Kelas | Keterangan |
|---|---|
.active |
Menerapkan warna hover ke baris atau sel tertentu |
.success |
Menunjukkan tindakan yang berhasil atau positif |
.info |
Menunjukkan perubahan atau tindakan informatif yang netral |
.warning |
Menunjukkan peringatan yang mungkin perlu diperhatikan |
.danger |
Menunjukkan tindakan berbahaya atau berpotensi negatif |
| # | Judul kolom | Judul kolom | Judul kolom |
|---|---|---|---|
| 1 | Konten kolom | Konten kolom | Konten kolom |
| 2 | Konten kolom | Konten kolom | Konten kolom |
| 3 | Konten kolom | Konten kolom | Konten kolom |
| 4 | Konten kolom | Konten kolom | Konten kolom |
| 5 | Konten kolom | Konten kolom | Konten kolom |
| 6 | Konten kolom | Konten kolom | Konten kolom |
| 7 | Konten kolom | Konten kolom | Konten kolom |
| 8 | Konten kolom | Konten kolom | Konten kolom |
| 9 | Konten kolom | Konten kolom | Konten kolom |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambahkan makna pada baris tabel atau sel individual hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna terlihat jelas dari konten itu sendiri (teks yang terlihat di baris/sel tabel yang relevan), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas.
Tabel responsif
Buat tabel responsif dengan membungkus apa saja .tableuntuk .table-responsivemembuatnya menggulir secara horizontal pada perangkat kecil (di bawah 768px). Saat melihat sesuatu yang lebih besar dari lebar 768px, Anda tidak akan melihat perbedaan dalam tabel ini.
Kliping/pemotongan vertikal
Tabel responsif memanfaatkan overflow-y: hidden, yang memotong konten apa pun yang melampaui tepi bawah atau atas tabel. Secara khusus, ini dapat memotong menu dropdown dan widget pihak ketiga lainnya.
Firefox dan fieldset
Firefox memiliki beberapa gaya fieldset canggung widthyang mengganggu tabel responsif. Ini tidak dapat ditimpa tanpa peretasan khusus Firefox yang tidak kami sediakan di Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Untuk informasi lebih lanjut, baca jawaban Stack Overflow ini .
| # | Judul tabel | Judul tabel | Judul tabel | Judul tabel | Judul tabel | Judul tabel |
|---|---|---|---|---|---|---|
| 1 | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel |
| 2 | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel |
| 3 | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel |
| # | Judul tabel | Judul tabel | Judul tabel | Judul tabel | Judul tabel | Judul tabel |
|---|---|---|---|---|---|---|
| 1 | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel |
| 2 | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel |
| 3 | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel | Sel tabel |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Formulir
Contoh dasar
Kontrol formulir individual secara otomatis menerima beberapa gaya global. Semua tekstual <input>, <textarea>, dan <select>elemen dengan .form-controldisetel ke width: 100%;default. Bungkus label dan kontrol .form-groupuntuk jarak optimal.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Jangan campur grup formulir dengan grup input
Jangan mencampur grup formulir secara langsung dengan grup input . Sebagai gantinya, susun grup input di dalam grup formulir.
bentuk sebaris
Tambahkan .form-inlineke formulir Anda (yang tidak harus a <form>) untuk kontrol rata kiri dan blok sebaris. Ini hanya berlaku untuk formulir dalam area pandang yang lebarnya setidaknya 768 piksel.
Mungkin memerlukan lebar khusus
Input dan pemilihan telah width: 100%;diterapkan secara default di Bootstrap. Dalam formulir sebaris, kami mengatur ulang width: auto;agar beberapa kontrol dapat berada di baris yang sama. Tergantung pada tata letak Anda, lebar khusus tambahan mungkin diperlukan.
Selalu tambahkan label
Pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap masukan. Untuk formulir sebaris ini, Anda dapat menyembunyikan label menggunakan .sr-onlykelas. Ada metode alternatif lebih lanjut untuk memberikan label untuk teknologi bantu, seperti aria-label, aria-labelledbyatau titleatribut. Jika tidak ada yang ada, pembaca layar dapat menggunakan placeholderatribut tersebut, jika ada, tetapi perhatikan bahwa penggunaan placeholdersebagai pengganti metode pelabelan lain tidak disarankan.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Bentuk horisontal
Gunakan kelas kisi yang telah ditentukan Bootstrap untuk menyelaraskan label dan grup kontrol formulir dalam tata letak horizontal dengan menambahkan .form-horizontalke formulir (yang tidak harus a <form>). Melakukannya akan mengubah .form-groups untuk berperilaku sebagai baris kisi, jadi tidak perlu .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Kontrol 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: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, dan color.
Deklarasi jenis diperlukan
Input hanya akan ditata sepenuhnya jika typedideklarasikan dengan benar.
<input type="text" class="form-control" placeholder="Text input">Grup masukan
Untuk menambahkan teks atau tombol terintegrasi sebelum dan/atau setelah berbasis teks apa pun <input>, periksa komponen grup input .
Area teks
Kontrol formulir yang mendukung banyak baris teks. Ubah rowsatribut sesuai kebutuhan.
<textarea class="form-control" rows="3"></textarea>Kotak centang dan radio
Kotak centang adalah untuk memilih satu atau beberapa opsi dalam daftar, sedangkan radio untuk memilih satu opsi dari banyak opsi.
Kotak centang dan radio yang dinonaktifkan didukung, tetapi untuk memberikan kursor "tidak diizinkan" saat mengarahkan kursor ke parent <label>, Anda harus menambahkan .disabledkelas ke parent .radio, .radio-inline, .checkbox, atau .checkbox-inline.
Default (bertumpuk)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Kotak centang dan radio sebaris
Gunakan kelas .checkbox-inlineatau .radio-inlinepada serangkaian kotak centang atau radio untuk kontrol yang muncul pada baris yang sama.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Kotak centang dan radio tanpa teks label
Jika Anda tidak memiliki teks di dalam <label>, input diposisikan seperti yang Anda harapkan. Saat ini hanya berfungsi pada kotak centang dan radio non-inline. Ingatlah untuk tetap memberikan beberapa bentuk label untuk teknologi bantu (misalnya, menggunakan aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>memilih
Perhatikan bahwa banyak menu pilihan asli—yaitu di Safari dan Chrome—memiliki sudut membulat yang tidak dapat dimodifikasi melalui border-radiusproperti.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Untuk <select>kontrol dengan multipleatribut, beberapa opsi ditampilkan secara default.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kontrol statis
Saat Anda perlu menempatkan teks biasa di sebelah label formulir di dalam formulir, gunakan .form-control-statickelas pada file <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Status fokus
Kami menghapus outlinegaya default pada beberapa kontrol formulir dan menerapkan a box-shadowsebagai gantinya untuk :focus.
:focusStatus demo
Contoh input di atas menggunakan gaya kustom dalam dokumentasi kami untuk mendemonstrasikan :focusstatus pada file .form-control.
Status dinonaktifkan
Tambahkan disabledatribut boolean pada input untuk mencegah interaksi pengguna. Input yang dinonaktifkan tampak lebih ringan dan menambahkan not-allowedkursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Kumpulan bidang yang dinonaktifkan
Tambahkan disabledatribut ke a <fieldset>untuk menonaktifkan semua kontrol di dalam <fieldset>sekaligus.
Peringatan tentang fungsi tautan dari<a>
Secara default, browser akan memperlakukan semua kontrol bentuk asli ( <input>, <select>dan <button>elemen) di dalam a <fieldset disabled>sebagai dinonaktifkan, mencegah interaksi keyboard dan mouse pada keduanya. Namun, jika formulir Anda juga menyertakan <a ... class="btn btn-*">elemen, elemen ini hanya akan diberi gaya pointer-events: none. Seperti disebutkan di bagian tentang status dinonaktifkan untuk tombol (dan khususnya di sub-bagian untuk elemen jangkar), properti CSS ini belum distandarisasi dan tidak sepenuhnya didukung di Opera 18 dan di bawahnya, atau di Internet Explorer 11, dan dimenangkan 't mencegah pengguna keyboard untuk dapat fokus atau mengaktifkan link ini. Jadi untuk amannya, gunakan JavaScript khusus untuk menonaktifkan tautan tersebut.
Kompatibilitas lintas-browser
Sementara Bootstrap akan menerapkan gaya ini di semua browser, Internet Explorer 11 dan di bawahnya tidak sepenuhnya mendukung disabledatribut pada file <fieldset>. Gunakan JavaScript khusus untuk menonaktifkan fieldset di browser ini.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Status hanya baca
Tambahkan readonlyatribut boolean pada input untuk mencegah modifikasi nilai input. Input read-only tampak lebih ringan (seperti input yang dinonaktifkan), tetapi tetap menggunakan kursor standar.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>teks bantuan
Blokir teks bantuan tingkat untuk kontrol formulir.
Mengaitkan teks bantuan dengan kontrol formulir
Teks bantuan harus secara eksplisit dikaitkan dengan kontrol formulir yang terkait dengan penggunaan aria-describedbyatribut. Ini akan memastikan bahwa teknologi bantu – seperti pembaca layar – akan mengumumkan teks bantuan ini saat pengguna memfokuskan atau memasuki kontrol.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Status validasi
Bootstrap menyertakan gaya validasi untuk status kesalahan, peringatan, dan keberhasilan pada kontrol formulir. Untuk menggunakan, menambahkan .has-warning, .has-error, atau .has-successke elemen induk. Setiap .control-label, .form-control, dan .help-blockdi dalam elemen itu akan menerima gaya validasi.
Menyampaikan status validasi ke teknologi bantu dan pengguna buta warna
Menggunakan gaya validasi ini untuk menunjukkan status kontrol formulir hanya memberikan indikasi visual berbasis warna, yang tidak akan disampaikan kepada pengguna teknologi bantu - seperti pembaca layar - atau pengguna buta warna.
Pastikan bahwa indikasi alternatif negara juga disediakan. Misalnya, Anda dapat menyertakan petunjuk tentang status dalam <label>teks kontrol formulir itu sendiri (seperti dalam contoh kode berikut), menyertakan Glyphicon (dengan teks alternatif yang sesuai menggunakan .sr-onlykelas - lihat contoh Glyphicon ), atau dengan memberikan blok teks bantuan tambahan . Khusus untuk teknologi bantu, kontrol formulir yang tidak valid juga dapat diberi aria-invalid="true"atribut.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>Dengan ikon opsional
Anda juga dapat menambahkan ikon umpan balik opsional dengan penambahan .has-feedbackdan ikon kanan.
Ikon umpan balik hanya berfungsi dengan <input class="form-control">elemen tekstual.
Ikon, label, dan grup masukan
Penempatan manual ikon umpan balik diperlukan untuk input tanpa label dan untuk grup input dengan add-on di sebelah kanan. Anda sangat dianjurkan untuk memberikan label untuk semua masukan untuk alasan aksesibilitas. Jika Anda ingin mencegah label ditampilkan, sembunyikan dengan .sr-onlykelas. Jika Anda harus melakukannya tanpa label, sesuaikan topnilai ikon umpan balik. Untuk grup input, sesuaikan rightnilainya ke nilai piksel yang sesuai tergantung pada lebar addon Anda.
Menyampaikan arti ikon ke teknologi bantu
Untuk memastikan bahwa teknologi bantu – seperti pembaca layar – menyampaikan arti ikon dengan benar, teks tersembunyi tambahan harus disertakan dengan .sr-onlykelas dan secara eksplisit dikaitkan dengan kontrol formulir yang terkait dengan penggunaan aria-describedby. Atau, pastikan bahwa artinya (misalnya, fakta bahwa ada peringatan untuk bidang entri teks tertentu) disampaikan dalam beberapa bentuk lain, seperti mengubah teks yang sebenarnya <label>terkait dengan kontrol formulir.
Meskipun contoh berikut telah menyebutkan status validasi dari kontrol formulir masing-masing dalam <label>teks itu sendiri, teknik di atas (menggunakan .sr-onlyteks dan aria-describedby) telah disertakan untuk tujuan ilustrasi.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Ikon opsional dalam bentuk horizontal dan sebaris
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Ikon opsional dengan .sr-onlylabel tersembunyi
Jika Anda menggunakan .sr-onlykelas untuk menyembunyikan kontrol formulir <label>(daripada menggunakan opsi pelabelan lain, seperti aria-labelatribut), Bootstrap akan secara otomatis menyesuaikan posisi ikon setelah ditambahkan.
(kesuksesan)
@
(kesuksesan)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Kontrol ukuran
Atur ketinggian menggunakan kelas seperti .input-lg, dan atur lebar menggunakan kelas kolom kotak seperti .col-lg-*.
Ukuran tinggi:
Buat kontrol formulir yang lebih tinggi atau lebih pendek yang cocok dengan ukuran tombol.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Ukuran grup bentuk horizontal
Ukuran label dan kontrol formulir dengan cepat .form-horizontaldengan menambahkan .form-group-lgatau .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Ukuran kolom
Bungkus input dalam kolom kisi, atau elemen induk khusus apa pun, untuk menerapkan lebar yang diinginkan dengan mudah.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Tombol
Tag tombol
Gunakan kelas tombol pada elemen <a>, <button>, atau <input>.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Penggunaan khusus konteks
Sementara kelas tombol dapat digunakan pada <a>dan <button>elemen, hanya <button>elemen yang didukung dalam komponen nav dan navbar kami.
Tautan bertindak sebagai tombol
Jika <a>elemen digunakan untuk bertindak sebagai tombol – memicu fungsionalitas dalam halaman, daripada menavigasi ke dokumen atau bagian lain dalam halaman saat ini – elemen tersebut juga harus diberi role="button".
Rendering lintas-browser
Sebagai praktik terbaik, kami sangat menyarankan untuk menggunakan <button>elemen jika memungkinkan untuk memastikan rendering lintas-browser yang cocok.
Antara lain, ada bug di Firefox <30 yang mencegah kita mengatur tombol line-heightberbasis <input>, menyebabkannya tidak sama persis dengan ketinggian tombol lain di Firefox.
Pilihan
Gunakan salah satu kelas tombol yang tersedia untuk membuat tombol bergaya dengan cepat.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambahkan makna pada tombol hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna terlihat jelas dari konten itu sendiri (teks tombol yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas.
Ukuran
Ingin tombol yang lebih besar atau lebih kecil? Tambahkan .btn-lg, .btn-sm, atau .btn-xsuntuk ukuran tambahan.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Buat tombol level blok—tombol yang menjangkau lebar penuh induknya— dengan menambahkan .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Status aktif
Tombol akan tampak ditekan (dengan latar belakang yang lebih gelap, batas yang lebih gelap, dan bayangan sisipan) saat aktif. Untuk <button>elemen, ini dilakukan melalui :active. Untuk <a>elemen, itu dilakukan dengan .active. Namun, Anda dapat menggunakan .activeon <button>s (dan menyertakan aria-pressed="true"atribut) jika Anda perlu mereplikasi status aktif secara terprogram.
Elemen tombol
Tidak perlu menambahkan :activekarena ini adalah kelas semu, tetapi jika Anda perlu memaksakan tampilan yang sama, lanjutkan dan tambahkan .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>elemen jangkar
Tambahkan .activekelas ke <a>tombol.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Status dinonaktifkan
Buat tombol terlihat tidak dapat diklik dengan memudarkannya kembali dengan opacity.
Elemen tombol
Tambahkan disabledatribut ke <button>tombol.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Kompatibilitas lintas-browser
Jika Anda menambahkan disabledatribut ke <button>, Internet Explorer 9 dan di bawahnya akan membuat teks menjadi abu-abu dengan bayangan teks buruk yang tidak dapat kami perbaiki.
elemen jangkar
Tambahkan .disabledkelas ke <a>tombol.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Kami menggunakan .disabledsebagai kelas utilitas di sini, mirip dengan .activekelas umum, jadi tidak diperlukan awalan.
Peringatan fungsionalitas tautan
Kelas ini digunakan pointer-events: noneuntuk mencoba menonaktifkan fungsionalitas tautan <a>s, tetapi properti CSS itu belum distandarisasi dan tidak sepenuhnya didukung di Opera 18 dan di bawahnya, atau di Internet Explorer 11. Selain itu, bahkan di browser yang mendukung pointer-events: none, keyboard navigasi tetap tidak terpengaruh, artinya pengguna keyboard yang dapat melihat dan pengguna teknologi bantu masih dapat mengaktifkan tautan ini. Jadi untuk amannya, gunakan JavaScript khusus untuk menonaktifkan tautan tersebut.
Gambar-gambar
Gambar responsif
Gambar di Bootstrap 3 dapat dibuat responsif-ramah melalui penambahan .img-responsivekelas. Ini berlaku max-width: 100%;, height: auto;dan display: block;pada gambar sehingga skalanya bagus untuk elemen induk.
Untuk memusatkan gambar yang menggunakan .img-responsivekelas, gunakan .center-blockalih-alih .text-center. Lihat bagian kelas pembantu untuk detail lebih lanjut tentang .center-blockpenggunaan.
Gambar SVG dan IE 8-10
Di Internet Explorer 8-10, gambar SVG dengan .img-responsiveukuran yang tidak proporsional. Untuk memperbaikinya, tambahkan width: 100% \9;jika perlu. Bootstrap tidak menerapkan ini secara otomatis karena menyebabkan komplikasi ke format gambar lain.
<img src="..." class="img-responsive" alt="Responsive image">Bentuk gambar
Tambahkan kelas ke <img>elemen untuk menata gambar dengan mudah di proyek apa pun.
Kompatibilitas lintas-browser
Perlu diingat bahwa Internet Explorer 8 tidak memiliki dukungan untuk sudut membulat.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Kelas pembantu
Warna kontekstual
Sampaikan makna melalui warna dengan beberapa kelas utilitas penekanan. Ini juga dapat diterapkan ke tautan dan akan menjadi gelap saat mengarahkan kursor seperti gaya tautan default kami.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Berurusan dengan kekhususan
Terkadang kelas penekanan tidak dapat diterapkan karena kekhususan pemilih lain. Dalam kebanyakan kasus, solusi yang cukup adalah dengan membungkus teks Anda <span>dengan kelas.
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (warna kontekstual hanya digunakan untuk memperkuat makna yang sudah ada dalam teks/markup), atau dimasukkan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas .
Latar belakang kontekstual
Mirip dengan kelas warna teks kontekstual, atur latar belakang elemen dengan mudah ke kelas kontekstual apa pun. Komponen jangkar akan menjadi gelap saat diarahkan, seperti kelas teks.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Berurusan dengan kekhususan
Terkadang kelas latar belakang kontekstual tidak dapat diterapkan karena kekhususan pemilih lain. Dalam beberapa kasus, solusi yang cukup adalah dengan membungkus konten elemen Anda <div>dengan kelas.
Menyampaikan makna pada teknologi bantu
Seperti halnya warna kontekstual , pastikan bahwa setiap makna yang disampaikan melalui warna juga disampaikan dalam format yang tidak murni presentasi.
Tutup ikon
Gunakan ikon tutup umum untuk menutup konten seperti modal dan peringatan.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>tanda sisipan
Gunakan tanda sisipan untuk menunjukkan fungsi dan arah tarik-turun. Perhatikan bahwa tanda sisipan default akan mundur secara otomatis di menu dropup .
<span class="caret"></span>Pelampung cepat
Float elemen ke kiri atau kanan dengan kelas. !importantdisertakan untuk menghindari masalah kekhususan. Kelas juga dapat digunakan sebagai mixin.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Blok konten pusat
Setel elemen ke display: blockdan pusatkan melalui margin. Tersedia sebagai mixin dan kelas.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Hapus perbaikan
Hapus floats dengan mudah dengan menambahkan .clearfix elemen induk . Memanfaatkan micro clearfix seperti yang dipopulerkan oleh Nicolas Gallagher. Bisa juga digunakan sebagai campuran.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Menampilkan dan menyembunyikan konten
Memaksa elemen untuk ditampilkan atau disembunyikan ( termasuk untuk pembaca layar ) dengan penggunaan .showdan .hiddenkelas. Kelas-kelas ini digunakan !importantuntuk menghindari konflik kekhususan, seperti quick floats . Mereka hanya tersedia untuk toggling level blok. Mereka juga dapat digunakan sebagai mixin.
.hidetersedia, tetapi tidak selalu memengaruhi pembaca layar dan tidak digunakan lagi sejak v3.0.1. Gunakan .hiddenatau .sr-onlysebaliknya.
Selanjutnya, .invisibledapat digunakan untuk beralih hanya visibilitas suatu elemen, artinya displaytidak dimodifikasi dan elemen tersebut masih dapat mempengaruhi aliran dokumen.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}Pembaca layar dan konten navigasi keyboard
Sembunyikan elemen ke semua perangkat kecuali pembaca layar dengan .sr-only. Gabungkan .sr-onlydengan .sr-only-focusableuntuk menampilkan elemen lagi saat difokuskan (mis. oleh pengguna khusus keyboard). Diperlukan untuk mengikuti praktik terbaik aksesibilitas . Bisa juga digunakan sebagai mixin.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Penggantian gambar
Manfaatkan .text-hidekelas atau mixin untuk membantu mengganti konten teks elemen dengan gambar latar belakang.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Utilitas responsif
Untuk pengembangan ramah seluler yang lebih cepat, gunakan kelas utilitas ini untuk menampilkan dan menyembunyikan konten menurut perangkat melalui kueri media. Juga termasuk kelas utilitas untuk mengubah konten saat dicetak.
Cobalah untuk menggunakan ini secara terbatas dan hindari membuat versi yang sama sekali berbeda dari situs yang sama. Sebagai gantinya, gunakan untuk melengkapi presentasi setiap perangkat.
Kelas yang tersedia
Gunakan satu atau kombinasi kelas yang tersedia untuk mengalihkan konten di seluruh titik henti area pandang.
| Perangkat ekstra kecilPonsel (<768px) | Perangkat kecilTablet (≥768px) | Perangkat sedangDesktop (≥992px) | Perangkat besarDesktop (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Terlihat | Tersembunyi | Tersembunyi | Tersembunyi |
.visible-sm-* |
Tersembunyi | Terlihat | Tersembunyi | Tersembunyi |
.visible-md-* |
Tersembunyi | Tersembunyi | Terlihat | Tersembunyi |
.visible-lg-* |
Tersembunyi | Tersembunyi | Tersembunyi | Terlihat |
.hidden-xs |
Tersembunyi | Terlihat | Terlihat | Terlihat |
.hidden-sm |
Terlihat | Tersembunyi | Terlihat | Terlihat |
.hidden-md |
Terlihat | Terlihat | Tersembunyi | Terlihat |
.hidden-lg |
Terlihat | Terlihat | Terlihat | Tersembunyi |
Mulai v3.2.0, .visible-*-*kelas untuk setiap breakpoint hadir dalam tiga variasi, satu untuk setiap displaynilai properti CSS yang tercantum di bawah.
| Kelompok kelas | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Jadi, untuk layar ekstra kecil ( xs) misalnya, .visible-*-*kelas yang tersedia adalah: .visible-xs-block, .visible-xs-inline, dan .visible-xs-inline-block.
Kelas .visible-xs, .visible-sm, .visible-md, dan .visible-lgjuga ada, tetapi tidak digunakan lagi pada v3.2.0 . Mereka kira-kira setara dengan .visible-*-block, kecuali dengan kasus khusus tambahan untuk <table>elemen terkait toggling.
Kelas cetak
Mirip dengan kelas responsif biasa, gunakan ini untuk mengubah konten untuk dicetak.
| Kelas | Peramban | Mencetak |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Tersembunyi | Terlihat |
.hidden-print |
Terlihat | Tersembunyi |
Kelas .visible-printjuga ada tetapi tidak digunakan lagi pada v3.2.0. Ini kira-kira setara dengan .visible-print-block, kecuali dengan kasus khusus tambahan untuk <table>elemen terkait.
Kasus uji
Ubah ukuran browser Anda atau muat di perangkat yang berbeda untuk menguji kelas utilitas responsif.
Terlihat di...
Tanda centang hijau menunjukkan elemen terlihat di viewport Anda saat ini.
Ekstra kecil
✔ Visible on x-small
Kecil
✔ Visible on small
Sedang
✔ Visible on medium
Large
Terlihat pada ukuran besar
✔ Visible on x-small and small
Terlihat pada medium dan besar
✔ Visible on x-small and medium
Terlihat pada kecil dan besar
Terlihat di x-kecil dan besar
✔ Visible on small and medium
Tersembunyi di...
Di sini, tanda centang hijau juga menunjukkan bahwa elemen tersebut disembunyikan di area pandang Anda saat ini.
Menggunakan Lebih Sedikit
CSS Bootstrap dibangun di atas Less, sebuah praprosesor dengan fungsionalitas tambahan seperti variabel, mixin, dan fungsi untuk mengkompilasi CSS. Mereka yang ingin menggunakan sumber Lebih sedikit file daripada file CSS terkompilasi kami dapat menggunakan banyak variabel dan mixin yang kami gunakan di seluruh kerangka kerja.
Variabel grid dan mixin tercakup dalam bagian sistem Grid .
Mengkompilasi Bootstrap
Bootstrap dapat digunakan setidaknya dalam dua cara: dengan CSS yang dikompilasi atau dengan file sumber Lebih sedikit. Untuk mengompilasi file Lebih sedikit, lihat bagian Memulai untuk mengetahui cara menyiapkan lingkungan pengembangan Anda untuk menjalankan perintah yang diperlukan.
Alat kompilasi pihak ketiga dapat bekerja dengan Bootstrap, tetapi tidak didukung oleh tim inti kami.
Variabel
Variabel digunakan di seluruh proyek sebagai cara untuk memusatkan dan berbagi nilai yang umum digunakan seperti warna, spasi, atau tumpukan font. Untuk rincian lengkap, silakan lihat Customizer .
warna
Gunakan dua skema warna dengan mudah: skala abu-abu dan semantik. Warna skala abu-abu memberikan akses cepat ke nuansa hitam yang umum digunakan, sementara semantik mencakup berbagai warna yang ditetapkan untuk nilai kontekstual yang bermakna.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Gunakan salah satu dari variabel warna ini sebagaimana adanya atau tetapkan kembali ke variabel yang lebih bermakna untuk proyek Anda.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Perancah
Beberapa variabel untuk menyesuaikan elemen kunci kerangka situs Anda dengan cepat.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Tautan
Gaya tautan Anda dengan mudah dengan warna yang tepat hanya dengan satu nilai.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Perhatikan bahwa @link-hover-colormenggunakan fungsi, alat luar biasa lainnya dari Less, untuk secara otomatis membuat warna hover yang tepat. Anda dapat menggunakan darken, lighten, saturate, dan desaturate.
Tipografi
Atur jenis huruf, ukuran teks, awalan, dan lainnya dengan mudah dengan beberapa variabel cepat. Bootstrap memanfaatkan ini juga untuk menyediakan mixin tipografi yang mudah.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Ikon
Dua variabel cepat untuk menyesuaikan lokasi dan nama file ikon Anda.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponen
Komponen di seluruh Bootstrap menggunakan beberapa variabel default untuk menetapkan nilai umum. Berikut adalah yang paling umum digunakan.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Campuran vendor
Mixin vendor adalah mixin untuk membantu mendukung banyak browser dengan menyertakan semua awalan vendor yang relevan dalam CSS yang Anda kompilasi.
Ukuran kotak
Setel ulang model kotak komponen Anda dengan satu mixin. Untuk konteksnya, lihat artikel bermanfaat ini dari Mozilla .
Mixin tidak digunakan lagi pada v3.2.0, dengan diperkenalkannya Autoprefixer. Untuk menjaga kompatibilitas mundur, Bootstrap akan terus menggunakan mixin secara internal hingga Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Sudut membulat
Saat ini semua browser modern mendukung properti tanpa awalan border-radius. Dengan demikian, tidak ada .border-radius()mixin, tetapi Bootstrap menyertakan pintasan untuk membulatkan dua sudut dengan cepat di sisi objek tertentu.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Kotak (Jatuhkan) bayangan
Jika audiens target Anda menggunakan browser dan perangkat terbaru dan terbaik, pastikan untuk menggunakan box-shadowproperti itu sendiri. Jika Anda memerlukan dukungan untuk perangkat Android (pra-v4) dan iOS yang lebih lama (pra-iOS 5), gunakan mixin yang tidak digunakan lagi untuk mengambil -webkitawalan yang diperlukan.
Mixin tidak digunakan lagi pada v3.1.0, karena Bootstrap tidak secara resmi mendukung platform usang yang tidak mendukung properti standar. Untuk menjaga kompatibilitas mundur, Bootstrap akan terus menggunakan mixin secara internal hingga Bootstrap v4.
Pastikan untuk menggunakan rgba()warna dalam bayangan kotak Anda sehingga mereka berbaur semulus mungkin dengan latar belakang.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Transisi
Beberapa mixin untuk fleksibilitas. Atur semua informasi transisi dengan satu, atau tentukan penundaan dan durasi terpisah sesuai kebutuhan.
Mixin tidak digunakan lagi pada v3.2.0, dengan diperkenalkannya Autoprefixer. Untuk mempertahankan kompatibilitas mundur, Bootstrap akan terus menggunakan mixin secara internal hingga Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Transformasi
Putar, skala, terjemahkan (pindahkan), atau miringkan objek apa pun.
Mixin tidak digunakan lagi pada v3.2.0, dengan diperkenalkannya Autoprefixer. Untuk mempertahankan kompatibilitas mundur, Bootstrap akan terus menggunakan mixin secara internal hingga Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animasi
Mixin tunggal untuk menggunakan semua properti animasi CSS3 dalam satu deklarasi dan mixin lainnya untuk properti individual.
Mixin tidak digunakan lagi pada v3.2.0, dengan diperkenalkannya Autoprefixer. Untuk mempertahankan kompatibilitas mundur, Bootstrap akan terus menggunakan mixin secara internal hingga Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Kegelapan
Atur opacity untuk semua browser dan berikan filterfallback untuk IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Teks tempat penampung
Berikan konteks untuk kontrol formulir dalam setiap bidang.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}kolom
Hasilkan kolom melalui CSS dalam satu elemen.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Gradien
Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);You can also specify the angle of a standard two-color, linear gradient:
#gradient > .directional(#333; #000; 45deg);If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.
#gradient > .striped(#333; 45deg);Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
Clearfix
Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Horizontal centering
Quickly center any element within its parent. Requires width or max-width to be set.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Sizing helpers
Specify the dimensions of an object more easily.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Resizable textareas
Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Truncating text
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina images
Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Using Sass
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
What's included
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
| Path | Description |
|---|---|
lib/ |
Ruby gem code (Sass configuration, Rails and Compass integrations) |
tasks/ |
Converter scripts (turning upstream Less to Sass) |
test/ |
Compilation tests |
templates/ |
Manifes paket kompas |
vendor/assets/ |
Sass, JavaScript, dan file font |
Rakefile |
Tugas internal, seperti menyapu dan mengonversi |
Kunjungi repositori GitHub port Sass untuk melihat file-file ini beraksi.
Instalasi
Untuk informasi tentang cara menginstal dan menggunakan Bootstrap untuk Sass, lihat readme repositori GitHub . Ini adalah sumber paling mutakhir dan mencakup informasi untuk digunakan dengan proyek Rails, Compass, dan Sass standar.