CSS
Tetapan CSS global, elemen HTML asas yang digayakan dan dipertingkatkan dengan kelas yang boleh diperluaskan, dan sistem grid lanjutan.
Gambaran keseluruhan
Dapatkan maklumat rendah mengenai bahagian utama infrastruktur Bootstrap, termasuk pendekatan kami untuk pembangunan web yang lebih baik, lebih pantas dan kukuh.
doctype HTML5
Bootstrap menggunakan elemen HTML dan sifat CSS tertentu yang memerlukan penggunaan doctype HTML5. Sertakan ia pada permulaan semua projek anda.
<!doctype html>
<html lang="en">
...
</html>Mudah alih dahulu
Dengan Bootstrap 2, kami menambah gaya mesra mudah alih pilihan untuk aspek utama rangka kerja. Dengan Bootstrap 3, kami telah menulis semula projek untuk menjadi mesra mudah alih dari awal. Daripada menambah gaya mudah alih pilihan, gaya itu dipanggang terus ke dalam inti. Malah, Bootstrap adalah mudah alih dahulu . Gaya pertama mudah alih boleh didapati di seluruh pustaka dan bukannya dalam fail berasingan.
Untuk memastikan pemaparan yang betul dan zum sentuh, tambahkan teg meta port pandang pada <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Anda boleh melumpuhkan keupayaan zum pada peranti mudah alih dengan menambah user-scalable=nopada teg meta port pandang. Ini melumpuhkan zum, bermakna pengguna hanya boleh menatal dan menyebabkan tapak anda berasa lebih seperti aplikasi asli. Secara keseluruhan, kami tidak mengesyorkan ini pada setiap tapak, jadi berhati-hatilah!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tipografi dan pautan
Bootstrap menetapkan paparan global asas, tipografi dan gaya pautan. Secara khusus, kami:
- Tetapkan
background-color: #fff;padabody - Gunakan
@font-family-base,@font-size-base, dan@line-height-baseatribut sebagai asas tipografi kami - Tetapkan warna pautan global melalui
@link-colordan gunakan garis bawah pautan hanya pada:hover
Gaya ini boleh didapati dalam scaffolding.less.
Normalize.css
Untuk pemaparan silang penyemak imbas yang dipertingkatkan, kami menggunakan Normalize.css , projek oleh Nicolas Gallagher dan Jonathan Neal .
Bekas
Bootstrap memerlukan elemen yang mengandungi untuk membungkus kandungan tapak dan menempatkan sistem grid kami. Anda boleh memilih satu daripada dua bekas untuk digunakan dalam projek anda. Ambil perhatian bahawa, disebabkan oleh paddingdan banyak lagi, kedua-dua bekas tidak boleh bersarang.
Gunakan .containeruntuk bekas lebar tetap responsif.
<div class="container">
...
</div>Gunakan .container-fluiduntuk bekas lebar penuh, merangkumi keseluruhan lebar port pandangan anda.
<div class="container-fluid">
...
</div>Sistem grid
Bootstrap termasuk sistem grid cecair pertama mudah alih yang responsif yang menskalakan sehingga 12 lajur dengan sewajarnya apabila saiz peranti atau port pandangan meningkat. Ia termasuk kelas yang dipratentukan untuk pilihan susun atur yang mudah, serta campuran yang berkuasa untuk menjana lebih banyak susun atur semantik .
pengenalan
Sistem grid digunakan untuk membuat reka letak halaman melalui satu siri baris dan lajur yang menempatkan kandungan anda. Begini cara sistem grid Bootstrap berfungsi:
- Baris mesti diletakkan dalam
.container(lebar tetap) atau.container-fluid(lebar penuh) untuk penjajaran dan pelapik yang betul. - Gunakan baris untuk membuat kumpulan lajur mendatar.
- Kandungan hendaklah diletakkan di dalam lajur dan hanya lajur yang boleh menjadi anak baris langsung.
- Kelas grid pratakrif seperti
.rowdan.col-xs-4tersedia untuk membuat reka letak grid dengan cepat. Kurang campuran juga boleh digunakan untuk lebih banyak susun atur semantik. - Lajur mencipta longkang (jurang antara kandungan lajur) melalui
padding. Pelapik itu diimbangi dalam baris untuk lajur pertama dan terakhir melalui jidar negatif pada.rows. - Margin negatif ialah sebab contoh di bawah ketinggalan. Ini supaya kandungan dalam lajur grid dibarisi dengan kandungan bukan grid.
- Lajur grid dicipta dengan menyatakan bilangan dua belas lajur tersedia yang anda ingin rentangkan. Sebagai contoh, tiga lajur yang sama akan menggunakan tiga
.col-xs-4. - Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut pada baris baharu.
- Kelas grid digunakan pada peranti dengan lebar skrin lebih besar daripada atau sama dengan saiz titik putus dan mengatasi kelas grid yang disasarkan pada peranti yang lebih kecil. Oleh itu, contohnya menggunakan mana-mana
.col-md-*kelas pada elemen bukan sahaja akan menjejaskan penggayaannya pada peranti sederhana tetapi juga pada peranti besar jika.col-lg-*kelas tidak hadir.
Lihat kepada contoh untuk menggunakan prinsip ini pada kod anda.
Pertanyaan media
Kami menggunakan pertanyaan media berikut dalam fail Kurang kami untuk mencipta titik putus 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 kadang-kadang mengembangkan pertanyaan media ini untuk menyertakan max-widthuntuk mengehadkan CSS kepada set peranti 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) { ... }Pilihan grid
Lihat cara aspek sistem grid Bootstrap berfungsi merentas berbilang peranti dengan jadual yang berguna.
| Peranti lebih kecil Telefon (<768px) | Peranti kecil Tablet (≥768px) | Desktop peranti sederhana (≥992px) | Peranti besar Desktop (≥1200px) | |
|---|---|---|---|---|
| Tingkah laku grid | Mendatar pada setiap masa | Runtuh untuk bermula, mendatar di atas titik putus | ||
| Lebar bekas | Tiada (auto) | 750px | 970px | 1170px |
| Awalan kelas | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # lajur | 12 | |||
| Lebar lajur | Auto | ~62px | ~81px | ~97px |
| Lebar longkang | 30px (15px pada setiap sisi lajur) | |||
| Nestable | ya | |||
| Offset | ya | |||
| Susunan lajur | ya | |||
Contoh: Bertindan ke mendatar
Menggunakan satu set .col-md-*kelas grid tunggal, anda boleh mencipta sistem grid asas yang bermula disusun pada peranti mudah alih dan peranti tablet (julat tambahan kecil hingga kecil) sebelum menjadi mendatar pada peranti desktop (sederhana). Letakkan lajur grid dalam mana-mana .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: Bekas cecair
Tukar mana-mana susun atur grid lebar tetap kepada susun atur lebar penuh dengan menukar paling luar anda .containerkepada .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Contoh: Mudah alih dan desktop
Tidak mahu lajur anda hanya disusun dalam peranti yang lebih kecil? Gunakan kelas grid peranti kecil dan sederhana tambahan dengan menambahkan .col-xs-* .col-md-*pada lajur anda. Lihat contoh di bawah untuk mendapatkan idea yang lebih baik tentang cara semuanya berfungsi.
.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: Mudah alih, tablet, desktop
Bina berdasarkan contoh sebelumnya dengan mencipta reka letak yang lebih dinamik dan berkuasa 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: Pembalut lajur
Jika lebih daripada 12 lajur diletakkan dalam satu baris, setiap kumpulan lajur tambahan akan, sebagai satu unit, membalut pada baris baharu.
.col-xs-9
.col-xs-4
Sejak 9 + 4 = 13 > 12, div lebar 4 lajur ini akan dibalut pada baris baharu sebagai satu unit bersebelahan.
Sejak 9 + 4 = 13 > 12, div lebar 4 lajur ini akan dibalut pada baris baharu sebagai satu unit bersebelahan.
.col-xs-6
Lajur berikutnya diteruskan di sepanjang baris baharu.
Lajur berikutnya diteruskan di sepanjang baris baharu.
<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>Tetapan semula lajur responsif
Dengan empat peringkat grid yang tersedia, anda pasti akan menghadapi masalah di mana, pada titik putus tertentu, lajur anda tidak jelas dengan betul kerana satu lebih tinggi daripada yang lain. Untuk membetulkannya, gunakan gabungan a .clearfixdan kelas utiliti responsif kami .
.col-xs-6 .col-sm-3
Saiz semula port pandangan anda atau lihat pada telefon anda untuk contoh.
Saiz semula port pandangan anda atau lihat pada telefon anda untuk 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 mengosongkan lajur pada titik putus responsif, anda mungkin perlu menetapkan semula offset, tolak atau tarik . Lihat ini dalam tindakan 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>Keluarkan longkang
Keluarkan longkang dari barisan dan lajur dengan .row-no-gutterskelas.
.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
<div class="row row-no-gutters">
<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>
<div class="row row-no-gutters">
<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>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Mengimbangi lajur
Alihkan lajur ke kanan menggunakan .col-md-offset-*kelas. Kelas ini meningkatkan margin kiri lajur dengan *lajur. Sebagai contoh, .col-md-offset-4bergerak .col-md-4ke atas empat lajur.
.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 boleh mengatasi offset daripada peringkat 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>Lajur bersarang
Untuk menyarangkan kandungan anda dengan grid lalai, tambahkan lajur baharu .rowdan set .col-sm-*lajur dalam .col-sm-*lajur sedia ada. Baris bersarang hendaklah mengandungi satu set lajur yang menambah sehingga 12 atau kurang (tidak diperlukan anda menggunakan kesemua 12 lajur yang tersedia).
Tahap 1: .col-sm-9
Tahap 2: .col-xs-8 .col-sm-6
Tahap 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>Susunan lajur
Tukar susunan lajur grid terbina dalam kami dengan mudah .col-md-push-*dan .col-md-pull-*kelas pengubah suai.
.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>Kurang campuran dan pembolehubah
Selain kelas grid prabina untuk susun atur pantas, Bootstrap menyertakan Kurang pembolehubah dan campuran untuk menjana reka letak semantik mudah anda sendiri dengan pantas.
Pembolehubah
Pembolehubah menentukan bilangan lajur, lebar longkang dan titik pertanyaan media untuk memulakan lajur terapung. Kami menggunakan ini untuk menjana kelas grid pratakrif yang didokumenkan di atas, serta untuk campuran tersuai yang disenaraikan di bawah.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Campuran
Campuran digunakan bersama-sama dengan pembolehubah grid untuk menjana CSS semantik untuk lajur 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 boleh mengubah suai pembolehubah kepada nilai tersuai anda sendiri, atau hanya gunakan campuran dengan nilai lalainya. Berikut ialah contoh menggunakan tetapan lalai untuk membuat reka letak dua lajur dengan jurang antara.
.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
Tajuk
Semua tajuk HTML, <h1>melalui <h6>, tersedia. .h1melalui .h6kelas juga tersedia, kerana apabila anda ingin memadankan penggayaan fon tajuk tetapi masih mahu teks anda dipaparkan sebaris.
h1. Tajuk Bootstrap |
Semibold 36px |
h2. Tajuk Bootstrap |
Semibold 30px |
h3. Tajuk Bootstrap |
Semibold 24px |
h4. Tajuk Bootstrap |
Semibold 18px |
h5. Tajuk Bootstrap |
Semibold 14px |
h6. Tajuk 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>Cipta teks sekunder yang lebih ringan dalam mana-mana tajuk dengan <small>teg generik atau .smallkelas.
h1. Tajuk Bootstrap Teks sekunder |
h2. Tajuk Bootstrap Teks sekunder |
h3. Tajuk Bootstrap Teks sekunder |
h4. Tajuk Bootstrap Teks sekunder |
h5. Tajuk Bootstrap Teks sekunder |
h6. Tajuk 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 badan
Lalai global Bootstrap font-sizeialah 14px , line-heightdengan 1.428 . Ini digunakan pada <body>dan semua perenggan. Di samping itu, <p>(perenggan) menerima jidar bawah separuh ketinggian garis yang dikira (10px secara lalai).
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 and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Salinan badan utama
Jadikan perenggan menonjol dengan menambah .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ini bukan commodo luctus.
<p class="lead">...</p>Dibina dengan Kurang
Skala tipografi adalah berdasarkan dua Kurang pembolehubah dalam pembolehubah.kurang : @font-size-basedan @line-height-base. Yang pertama ialah saiz fon asas yang digunakan sepanjang dan yang kedua ialah ketinggian garis asas. Kami menggunakan pembolehubah tersebut dan beberapa matematik mudah untuk mencipta jidar, pelapik dan ketinggian garis semua jenis kami dan banyak lagi. Sesuaikan mereka dan Bootstrap menyesuaikan diri.
Elemen teks sebaris
Teks bertanda
Untuk menyerlahkan larian teks kerana perkaitannya dalam konteks lain, gunakan <mark>teg.
Anda boleh menggunakan tanda tanda untuksorotanteks.
You can use the mark tag to <mark>highlight</mark> text.Teks dipadamkan
Untuk menunjukkan blok teks yang telah dipadam gunakan <del>tag.
Baris teks ini dimaksudkan untuk dianggap sebagai teks yang dipadamkan.
<del>This line of text is meant to be treated as deleted text.</del>Teks coretan
Untuk menunjukkan blok teks yang tidak lagi berkaitan gunakan <s>teg.
Baris teks ini dimaksudkan untuk dianggap tidak lagi tepat.
<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>teg.
Baris teks ini dimaksudkan untuk dianggap sebagai tambahan kepada dokumen.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Teks bergaris bawah
Untuk menggariskan teks gunakan <u>teg.
Baris teks ini akan dipaparkan seperti yang digariskan
<u>This line of text will render as underlined</u>Gunakan teg penekanan lalai HTML dengan gaya ringan.
Teks kecil
Untuk tidak menekankan sebaris atau blok teks, gunakan <small>teg untuk menetapkan teks pada 85% saiz induk. Elemen tajuk menerima elemennya sendiri font-sizeuntuk elemen bersarang <small>.
Anda boleh menggunakan elemen sebaris dengan .smallmenggantikan mana-mana <small>.
Baris teks ini dimaksudkan untuk dianggap sebagai cetakan halus.
<small>This line of text is meant to be treated as fine print.</small>berani
Untuk menekankan coretan teks dengan berat fon yang lebih berat.
Coretan teks berikut dipaparkan sebagai teks tebal .
<strong>rendered as bold text</strong>Italic
Untuk menekankan coretan teks dengan huruf condong.
Coretan teks berikut dipaparkan sebagai teks condong .
<em>rendered as italicized text</em>Unsur ganti
Jangan ragu untuk menggunakan <b>dan <i>dalam HTML5. <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.
Kelas penjajaran
Selaraskan semula teks dengan mudah kepada komponen dengan kelas penjajaran teks.
Teks dijajar ke kiri.
Teks sejajar tengah.
Teks dijajar kanan.
Teks yang dibenarkan.
Tiada 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
Ubah teks dalam komponen dengan kelas huruf besar teks.
Teks berhuruf kecil.
Teks huruf besar.
Teks berhuruf besar.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Singkatan
Pelaksanaan bergaya <abbr>elemen HTML untuk singkatan dan akronim untuk menunjukkan versi dikembangkan pada tuding. Singkatan dengan titleatribut mempunyai sempadan bawah titik terang dan kursor bantuan pada tuding, memberikan konteks tambahan pada tuding dan kepada pengguna teknologi bantuan.
Singkatan asas
Singkatan perkataan atribut ialah attr .
<abbr title="attribute">attr</abbr>Inisialisme
Tambahkan .initialismpada singkatan untuk saiz fon yang lebih kecil sedikit.
HTML adalah perkara terbaik sejak roti dihiris.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Alamat
Bentangkan maklumat hubungan untuk nenek moyang terdekat atau seluruh badan kerja. Kekalkan pemformatan dengan menamatkan semua baris dengan <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nama Penuh
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nama Penuh
[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>Sekat petikan
Untuk memetik blok kandungan daripada sumber lain dalam dokumen anda.
Petikan blok lalai
Bungkus <blockquote>mana-mana HTML sebagai petikan. Untuk petikan lurus, kami mengesyorkan <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Pilihan blockquote
Perubahan gaya dan kandungan untuk variasi mudah pada standard <blockquote>.
Menamakan sumber
Tambahkan a <footer>untuk mengenal pasti sumber. Balut nama kerja sumber dalam <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
<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>Paparan ganti
Tambahkan .blockquote-reverseuntuk petikan blok dengan kandungan dijajarkan ke kanan.
<blockquote class="blockquote-reverse">
...
</blockquote>Senarai
Tidak tertib
Senarai item yang susunannya tidak penting secara eksplisit.
- Lorem ipsum dolor duduk amet
- Consectetur adipiscing elit
- Integer molestie lorem dan massa
- Facilisis dalam pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean duduk amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Mengarahkan
Senarai item yang susunannya penting secara eksplisit.
- Lorem ipsum dolor duduk amet
- Consectetur adipiscing elit
- Integer molestie lorem dan massa
- Facilisis dalam pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean duduk amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Tidak bergaya
Alih keluar lalai list-styledan margin kiri pada item senarai (kanak-kanak segera sahaja). Ini hanya terpakai pada item senarai kanak-kanak segera , bermakna anda perlu menambah kelas untuk sebarang senarai bersarang juga.
- Lorem ipsum dolor duduk amet
- Consectetur adipiscing elit
- Integer molestie lorem dan massa
- Facilisis dalam pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean duduk amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Dalam barisan
Letakkan semua item senarai pada satu baris dengan display: inline-block;dan beberapa padding ringan.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Penerangan
Senarai istilah dengan perihalan berkaitannya.
- Senarai penerangan
- Senarai huraian sesuai untuk menentukan istilah.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida and eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Penerangan mendatar
Buat istilah dan huraian dalam <dl>barisan sebelah-menyebelah. Bermula bertindan seperti lalai <dl>s, tetapi apabila navbar mengembang, lakukan ini.
- Senarai penerangan
- Senarai huraian sesuai untuk menentukan istilah.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida and eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Pemangkasan automatik
Senarai perihalan mendatar akan memotong istilah yang terlalu panjang untuk dimuatkan dalam lajur kiri dengan text-overflow. Dalam ruang pandang yang lebih sempit, ia akan bertukar kepada susun atur bertindan lalai.
Kod
Dalam barisan
Balut coretan sebaris kod dengan <code>.
Sebagai contoh,
<section>hendaklah dibalut sebagai sebaris.
For example, <code><section></code> should be wrapped as inline.Input pengguna
Gunakan <kbd>untuk menunjukkan input yang biasanya dimasukkan melalui papan kekunci.
Untuk menukar direktori, taip
cddiikuti dengan nama direktori.
Untuk mengedit tetapan, tekan ctrl + ,
Untuk mengedit tetapan, 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 asas
Gunakan <pre>untuk berbilang baris kod. Pastikan anda melepaskan sebarang kurungan sudut dalam kod untuk pemaparan yang betul.
<p>Contoh teks di sini...</p>
<pre><p>Sample text here...</p></pre>Anda boleh menambah .pre-scrollablekelas secara pilihan, yang akan menetapkan ketinggian maksimum 350px dan menyediakan bar skrol paksi-y.
Pembolehubah
Untuk menunjukkan pembolehubah gunakan <var>teg.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Keluaran sampel
Untuk menunjukkan keluaran sampel blok daripada program gunakan <samp>tag.
Teks ini dimaksudkan untuk dianggap sebagai output sampel daripada program komputer.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Meja
Contoh asas
Untuk penggayaan asas—lapik ringan dan hanya pembahagi mendatar—tambahkan kelas asas .tablepada mana-mana <table>. Ia mungkin kelihatan sangat berlebihan, tetapi memandangkan penggunaan jadual yang meluas untuk pemalam lain seperti kalendar dan pemilih tarikh, kami telah memilih untuk mengasingkan gaya jadual tersuai kami.
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung |
<table class="table">
...
</table>Barisan berjalur
Gunakan .table-stripeduntuk menambah jalur zebra pada mana-mana baris jadual dalam <tbody>.
Keserasian merentas pelayar
Jadual berjalur digayakan melalui :nth-childpemilih CSS, yang tidak tersedia dalam Internet Explorer 8.
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung |
<table class="table table-striped">
...
</table>Meja bersempadan
Tambahkan .table-bordereduntuk sempadan pada semua sisi jadual dan sel.
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung |
<table class="table table-bordered">
...
</table>Tuding baris
Tambahkan .table-hoveruntuk mendayakan keadaan tuding pada baris jadual dalam <tbody>.
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry | burung |
<table class="table table-hover">
...
</table>Meja pekat
Tambah .table-condenseduntuk menjadikan jadual lebih padat dengan memotong padding sel separuh.
| # | Nama pertama | Nama terakhir | Nama pengguna |
|---|---|---|---|
| 1 | Tandakan | Otto | @mdo |
| 2 | Yakub | Thornton | @gemuk |
| 3 | Larry the Bird | ||
<table class="table table-condensed">
...
</table>Kelas kontekstual
Gunakan kelas kontekstual untuk mewarnai baris jadual atau sel individu.
| Kelas | Penerangan |
|---|---|
.active |
Menggunakan warna tuding pada baris atau sel tertentu |
.success |
Menunjukkan tindakan yang berjaya atau positif |
.info |
Menunjukkan perubahan atau tindakan bermaklumat neutral |
.warning |
Menunjukkan amaran yang mungkin memerlukan perhatian |
.danger |
Menunjukkan tindakan berbahaya atau berpotensi negatif |
| # | Tajuk lajur | Tajuk lajur | Tajuk lajur |
|---|---|---|---|
| 1 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 2 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 3 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 4 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 5 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 6 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 7 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 8 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
| 9 | Kandungan lajur | Kandungan lajur | Kandungan lajur |
<!-- 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 kepada teknologi bantuan
Menggunakan warna untuk menambah makna pada baris jadual atau sel individu hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (teks yang boleh dilihat dalam baris/sel jadual yang berkaitan), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-onlykelas.
Jadual responsif
Cipta jadual responsif dengan membungkus sebarang ke .tabledalam .table-responsiveuntuk menjadikannya menatal secara mendatar pada peranti kecil (di bawah 768px). Apabila melihat pada apa-apa yang lebih besar daripada 768px lebar, anda tidak akan melihat sebarang perbezaan dalam jadual ini.
Keratan menegak/pemangkasan
Jadual responsif menggunakan overflow-y: hidden, yang memotong mana-mana kandungan yang melampaui tepi bawah atau atas jadual. Khususnya, ini boleh memotong menu lungsur turun dan widget pihak ketiga yang lain.
Firefox dan set medan
Firefox mempunyai beberapa penggayaan set medan janggal yang melibatkan widthyang mengganggu jadual responsif. Ini tidak boleh ditindih tanpa penggodaman khusus Firefox yang kami tidak sediakan dalam Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Untuk maklumat lanjut, baca jawapan Stack Overflow ini .
| # | Tajuk jadual | Tajuk jadual | Tajuk jadual | Tajuk jadual | Tajuk jadual | Tajuk jadual |
|---|---|---|---|---|---|---|
| 1 | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja |
| 2 | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja |
| 3 | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja |
| # | Tajuk jadual | Tajuk jadual | Tajuk jadual | Tajuk jadual | Tajuk jadual | Tajuk jadual |
|---|---|---|---|---|---|---|
| 1 | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja |
| 2 | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja |
| 3 | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja | Sel meja |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Borang
Contoh asas
Kawalan borang individu secara automatik menerima beberapa penggayaan global. Semua tekstual <input>, <textarea>, dan <select>elemen dengan .form-controlditetapkan kepada width: 100%;secara lalai. Balut label dan kawalan ke dalam .form-groupuntuk jarak optimum.
<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 campurkan kumpulan borang dengan kumpulan input
Jangan campurkan kumpulan bentuk secara langsung dengan kumpulan input . Sebaliknya, sarang kumpulan input di dalam kumpulan borang.
Borang sebaris
Tambahkan .form-inlinepada borang anda (yang tidak semestinya a <form>) untuk kawalan sejajar kiri dan blok sebaris. Ini hanya terpakai pada borang dalam viewport yang mempunyai lebar sekurang-kurangnya 768px.
Mungkin memerlukan lebar tersuai
Input dan pilihan telah width: 100%;digunakan secara lalai dalam Bootstrap. Dalam borang sebaris, kami menetapkan semula width: auto;supaya berbilang kawalan boleh berada pada baris yang sama. Bergantung pada reka letak anda, lebar tersuai tambahan mungkin diperlukan.
Sentiasa tambahkan label
Pembaca skrin akan menghadapi masalah dengan borang anda jika anda tidak memasukkan label untuk setiap input. Untuk borang sebaris ini, anda boleh menyembunyikan label menggunakan .sr-onlykelas. Terdapat kaedah alternatif selanjutnya untuk menyediakan label untuk teknologi bantuan, seperti aria-label, aria-labelledbyatau titleatribut. Jika tiada satu pun daripada ini hadir, pembaca skrin boleh menggunakan placeholderatribut tersebut, jika ada, tetapi ambil perhatian bahawa penggunaan placeholdersebagai pengganti kaedah pelabelan lain tidak digalakkan.
<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 mendatar
Gunakan kelas grid pratakrif Bootstrap untuk menjajarkan label dan kumpulan kawalan borang dalam susun atur mendatar dengan menambah .form-horizontalpada borang (yang tidak semestinya <form>). Melakukannya mengubah .form-groups untuk berkelakuan sebagai baris grid, 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>Kawalan yang disokong
Contoh kawalan borang standard yang disokong dalam reka letak borang contoh.
Input
Kawalan borang yang paling biasa, medan input berasaskan teks. Termasuk sokongan untuk semua jenis HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, teldan color.
Jenis pengisytiharan diperlukan
Input hanya akan digayakan sepenuhnya jika typeia diisytiharkan dengan betul.
<input type="text" class="form-control" placeholder="Text input">Kumpulan input
Untuk menambah teks atau butang bersepadu sebelum dan/atau selepas sebarang berasaskan teks <input>, lihat komponen kumpulan input .
Textarea
Kawalan bentuk yang menyokong berbilang baris teks. Tukar rowsatribut jika perlu.
<textarea class="form-control" rows="3"></textarea>Kotak semak dan radio
Kotak semak adalah untuk memilih satu atau beberapa pilihan dalam senarai, manakala radio adalah untuk memilih satu pilihan daripada banyak.
Kotak semak dan radio yang dilumpuhkan disokong, tetapi untuk menyediakan kursor "tidak dibenarkan" pada tuding induk <label>, anda perlu menambahkan .disabledkelas kepada induk .radio, .radio-inline, .checkbox, atau .checkbox-inline.
Lalai (bertindan)
<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 semak sebaris dan radio
Gunakan kelas .checkbox-inlineatau .radio-inlinepada satu siri kotak pilihan atau radio untuk kawalan 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 semak dan radio tanpa teks label
Sekiranya anda tidak mempunyai teks dalam <label>, input diletakkan seperti yang anda jangkakan. Pada masa ini hanya berfungsi pada kotak semak dan radio bukan sebaris. Ingat untuk tetap menyediakan beberapa bentuk label untuk teknologi bantuan (contohnya, 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
Ambil perhatian bahawa banyak menu pilihan asli—iaitu dalam Safari dan Chrome—mempunyai sudut bulat yang tidak boleh diubah suai melalui border-radiussifat.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Untuk <select>kawalan dengan multipleatribut, berbilang pilihan ditunjukkan secara lalai.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kawalan statik
Apabila anda perlu meletakkan teks biasa di sebelah label borang dalam borang, gunakan .form-control-statickelas pada <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>Keadaan fokus
Kami mengalih keluar gaya lalai outlinepada beberapa kawalan borang dan menggunakan a box-shadowsebagai gantinya untuk :focus.
:focusKeadaan demo
Input contoh di atas menggunakan gaya tersuai dalam dokumentasi kami untuk menunjukkan :focuskeadaan pada .form-control.
Keadaan kurang upaya
Tambahkan disabledatribut boolean pada input untuk menghalang interaksi pengguna. Input yang dilumpuhkan kelihatan lebih ringan dan menambah not-allowedkursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Set medan dilumpuhkan
Tambahkan disabledatribut pada a <fieldset>untuk melumpuhkan semua kawalan dalam <fieldset>sekali gus.
Kaveat tentang fungsi pautan bagi<a>
Secara lalai, penyemak imbas akan menganggap semua kawalan bentuk asli ( <input>, <select>dan <button>elemen) di dalam a <fieldset disabled>sebagai dilumpuhkan, menghalang interaksi papan kekunci dan tetikus padanya. Walau bagaimanapun, jika borang anda juga termasuk <a ... class="btn btn-*">elemen, ini hanya akan diberikan gaya pointer-events: none. Seperti yang dinyatakan dalam bahagian tentang keadaan dilumpuhkan untuk butang (dan khususnya dalam sub-bahagian untuk elemen utama), sifat CSS ini belum lagi diseragamkan dan tidak disokong sepenuhnya dalam Opera 18 dan ke bawah, atau dalam Internet Explorer 11, dan memenangi 't menghalang pengguna papan kekunci daripada dapat memfokus atau mengaktifkan pautan ini. Jadi untuk selamat, gunakan JavaScript tersuai untuk melumpuhkan pautan tersebut.
Keserasian merentas pelayar
Walaupun Bootstrap akan menggunakan gaya ini dalam semua penyemak imbas, Internet Explorer 11 dan ke bawah tidak menyokong sepenuhnya disabledatribut pada <fieldset>. Gunakan JavaScript tersuai untuk melumpuhkan set medan dalam penyemak imbas 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>Nyatakan baca sahaja
Tambahkan readonlyatribut boolean pada input untuk mengelakkan pengubahsuaian nilai input. Input baca sahaja kelihatan lebih ringan (sama seperti input yang dilumpuhkan), tetapi mengekalkan kursor standard.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Teks bantuan
Teks bantuan peringkat blok untuk kawalan borang.
Mengaitkan teks bantuan dengan kawalan borang
Teks bantuan harus dikaitkan secara eksplisit dengan kawalan borang yang berkaitan dengan penggunaan aria-describedbyatribut. Ini akan memastikan bahawa teknologi bantuan - seperti pembaca skrin - akan mengumumkan teks bantuan ini apabila pengguna memfokus atau memasuki kawalan.
<label 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>Negeri pengesahan
Bootstrap termasuk gaya pengesahan untuk ralat, amaran dan keadaan kejayaan pada kawalan borang. Untuk menggunakan, menambah .has-warning, .has-error, atau .has-successpada elemen induk. Mana -mana .control-label, .form-control, dan .help-blockdalam elemen itu akan menerima gaya pengesahan.
Menyampaikan keadaan pengesahan kepada teknologi bantuan dan pengguna buta warna
Menggunakan gaya pengesahan ini untuk menandakan keadaan kawalan borang hanya menyediakan petunjuk visual berasaskan warna, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin - atau kepada pengguna rabun warna.
Pastikan petunjuk alternatif negeri juga disediakan. Sebagai contoh, anda boleh memasukkan pembayang tentang keadaan dalam teks kawalan borang itu <label>sendiri (seperti yang berlaku dalam contoh kod berikut), sertakan Glyphicon (dengan teks alternatif yang sesuai menggunakan .sr-onlykelas - lihat contoh Glyphicon ), atau dengan menyediakan blok teks bantuan tambahan . Khusus untuk teknologi bantuan, kawalan borang yang tidak sah juga boleh diberikan 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 pilihan
Anda juga boleh menambah ikon maklum balas pilihan dengan penambahan .has-feedbackdan ikon yang betul.
Ikon maklum balas hanya berfungsi dengan <input class="form-control">unsur teks.
Ikon, label dan kumpulan input
Kedudukan manual ikon maklum balas diperlukan untuk input tanpa label dan untuk kumpulan input dengan alat tambah di sebelah kanan. Anda amat digalakkan untuk memberikan label untuk semua input atas sebab kebolehaksesan. Jika anda ingin menghalang label daripada dipaparkan, sembunyikannya dengan .sr-onlykelas. Jika anda mesti melakukannya tanpa label, laraskan topnilai ikon maklum balas. Untuk kumpulan input, laraskan rightnilai kepada nilai piksel yang sesuai bergantung pada lebar addon anda.
Menyampaikan maksud ikon kepada teknologi bantuan
Untuk memastikan bahawa teknologi bantuan - seperti pembaca skrin - menyampaikan maksud ikon dengan betul, teks tersembunyi tambahan harus disertakan dengan .sr-onlykelas dan secara eksplisit dikaitkan dengan kawalan borang yang berkaitan dengan penggunaan aria-describedby. Sebagai alternatif, pastikan makna (contohnya, fakta bahawa terdapat amaran untuk medan kemasukan teks tertentu) disampaikan dalam beberapa bentuk lain, seperti menukar teks sebenar yang <label>dikaitkan dengan kawalan borang.
Walaupun contoh berikut telah menyebut keadaan pengesahan kawalan bentuk 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 pilihan dalam bentuk mendatar 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 pilihan dengan .sr-onlylabel tersembunyi
Jika anda menggunakan .sr-onlykelas untuk menyembunyikan kawalan borang <label>(daripada menggunakan pilihan pelabelan lain, seperti aria-labelatribut), Bootstrap akan melaraskan kedudukan ikon secara automatik setelah ia ditambahkan.
(berjaya)
@
(berjaya)
<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>Kawalan saiz
Tetapkan ketinggian menggunakan kelas seperti .input-lg, dan tetapkan lebar menggunakan kelas lajur grid seperti .col-lg-*.
Saiz ketinggian
Buat kawalan bentuk yang lebih tinggi atau lebih pendek yang sepadan dengan saiz butang.
<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>Saiz kumpulan bentuk mendatar
Saiz label dan kawalan bentuk dengan cepat dalam .form-horizontaldengan menambah .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>Saiz lajur
Balut input dalam lajur grid, atau mana-mana elemen induk tersuai, untuk menguatkuasakan lebar yang dikehendaki 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>Butang
Tag butang
Gunakan kelas butang pada <a>, <button>, atau <input>elemen.
<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
Walaupun kelas butang boleh digunakan pada <a>dan <button>elemen, hanya <button>elemen yang disokong dalam komponen nav dan navbar kami.
Pautan bertindak sebagai butang
Jika <a>elemen digunakan untuk bertindak sebagai butang – mencetuskan kefungsian dalam halaman, dan bukannya menavigasi ke dokumen atau bahagian lain dalam halaman semasa – ia juga harus diberikan role="button".
Penyampaian silang pelayar
Sebagai amalan terbaik, kami amat mengesyorkan menggunakan <button>elemen apabila mungkin untuk memastikan pemadanan merentas pelayar.
Antara lain, terdapat pepijat dalam Firefox <30 yang menghalang kami daripada menetapkan line-heightbutang <input>berasaskan, menyebabkan ia tidak sepadan dengan ketinggian butang lain pada Firefox.
Pilihan
Gunakan mana-mana kelas butang yang tersedia untuk membuat butang gaya 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 kepada teknologi bantuan
Menggunakan warna untuk menambah makna pada butang hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (teks butang yang boleh dilihat) atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-onlykelas.
Saiz
Inginkan butang yang lebih besar atau lebih kecil? Tambah .btn-lg, .btn-sm, atau .btn-xsuntuk saiz 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 butang tahap blok—yang menjangkau lebar penuh ibu bapa— 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>Keadaan aktif
Butang akan kelihatan ditekan (dengan latar belakang yang lebih gelap, jidar yang lebih gelap dan bayang sisipan) apabila aktif. Untuk <button>elemen, ini dilakukan melalui :active. Untuk <a>elemen, ia dilakukan dengan .active. Walau bagaimanapun, anda boleh menggunakan .activepada <button>s (dan sertakan aria-pressed="true"atribut) sekiranya anda perlu meniru keadaan aktif secara pemrograman.
Elemen butang
Tidak perlu menambah :activekerana ia adalah kelas pseudo, tetapi jika anda perlu memaksa penampilan yang sama, teruskan dan tambah .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 sauh
Tambahkan .activekelas pada <a>butang.
<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>Keadaan kurang upaya
Jadikan butang kelihatan tidak boleh diklik dengan memudarkannya kembali dengan opacity.
Elemen butang
Tambahkan disabledatribut pada <button>butang.
<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>Keserasian merentas pelayar
Jika anda menambah disabledatribut pada <button>, Internet Explorer 9 dan ke bawah akan menjadikan teks berwarna kelabu dengan bayangan teks yang jahat yang tidak dapat kami betulkan.
Elemen sauh
Tambahkan .disabledkelas pada <a>butang.
<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 gunakan .disabledsebagai kelas utiliti di sini, serupa dengan .activekelas biasa, jadi tiada awalan diperlukan.
Kaveat fungsi pautan
Kelas ini menggunakan pointer-events: noneuntuk cuba melumpuhkan fungsi pautan <a>s, tetapi sifat CSS itu belum lagi diseragamkan dan tidak disokong sepenuhnya dalam Opera 18 dan ke bawah, atau dalam Internet Explorer 11. Selain itu, walaupun dalam penyemak imbas yang menyokong pointer-events: none, papan kekunci navigasi kekal tidak terjejas, bermakna pengguna papan kekunci yang kelihatan dan pengguna teknologi bantuan masih boleh mengaktifkan pautan ini. Jadi untuk selamat, gunakan JavaScript tersuai untuk melumpuhkan pautan tersebut.
Imej
Imej responsif
Imej dalam Bootstrap 3 boleh dibuat mesra responsif melalui penambahan .img-responsivekelas. Ini terpakai max-width: 100%;, height: auto;dan display: block;pada imej supaya ia berskala dengan baik kepada elemen induk.
Untuk memusatkan imej yang menggunakan .img-responsivekelas, gunakan .center-blockbukannya .text-center. Lihat bahagian kelas pembantu untuk mendapatkan butiran lanjut tentang .center-blockpenggunaan.
Imej SVG dan IE 8-10
Dalam Internet Explorer 8-10, imej SVG dengan .img-responsivebersaiz tidak seimbang. Untuk membetulkannya, tambah width: 100% \9;jika perlu. Bootstrap tidak menggunakan ini secara automatik kerana ia menyebabkan komplikasi kepada format imej lain.
<img src="..." class="img-responsive" alt="Responsive image">Bentuk imej
Tambahkan kelas pada <img>elemen untuk menggayakan imej dengan mudah dalam mana-mana projek.
Keserasian merentas pelayar
Perlu diingat bahawa Internet Explorer 8 tidak mempunyai sokongan untuk sudut bulat.
<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 segelintir kelas utiliti penekanan. Ini juga boleh digunakan pada pautan dan akan menjadi gelap semasa tuding seperti gaya pautan lalai 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
Kadangkala kelas penekanan tidak boleh digunakan kerana kekhususan pemilih lain. Dalam kebanyakan kes, penyelesaian yang mencukupi ialah membungkus teks anda <span>dengan kelas.
Menyampaikan makna kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (warna kontekstual hanya digunakan untuk mengukuhkan makna yang sudah ada dalam teks/penanda), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-onlykelas .
Latar belakang kontekstual
Sama seperti kelas warna teks kontekstual, tetapkan latar belakang elemen kepada mana-mana kelas kontekstual dengan mudah. Komponen anchor akan menjadi gelap pada tuding, sama 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
Kadangkala kelas latar belakang kontekstual tidak boleh digunakan kerana kekhususan pemilih lain. Dalam sesetengah kes, penyelesaian yang mencukupi ialah membungkus kandungan elemen anda dalam a <div>dengan kelas.
Menyampaikan makna kepada teknologi bantuan
Seperti warna kontekstual , pastikan apa-apa makna yang disampaikan melalui warna juga disampaikan dalam format yang bukan persembahan semata-mata.
Tutup ikon
Gunakan ikon tutup generik untuk mengetepikan kandungan seperti modal dan makluman.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Karet
Gunakan karet untuk menunjukkan fungsi dan arah lungsur. Ambil perhatian bahawa karet lalai akan terbalik secara automatik dalam menu lungsur .
<span class="caret"></span>Cepat terapung
Terapungkan elemen ke kiri atau kanan dengan kelas. !importantdisertakan untuk mengelakkan isu kekhususan. Kelas juga boleh digunakan sebagai campuran.
<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 kandungan tengah
Tetapkan elemen ke display: blockdan tengah melalui margin. Tersedia sebagai campuran 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();
}Clearfix
Kosongkan floats dengan mudah dengan menambahkan .clearfix elemen induk . Menggunakan pembaikan jelas mikro seperti yang dipopularkan oleh Nicolas Gallagher. Boleh juga digunakan sebagai mixin.
<!-- 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();
}Menunjukkan dan menyembunyikan kandungan
Paksa elemen untuk ditunjukkan atau disembunyikan ( termasuk untuk pembaca skrin ) dengan penggunaan .showdan .hiddenkelas. Kelas ini digunakan !importantuntuk mengelakkan konflik kekhususan, sama seperti quick floats . Ia hanya tersedia untuk togol tahap blok. Mereka juga boleh digunakan sebagai campuran.
.hidetersedia, tetapi ia tidak selalu menjejaskan pembaca skrin dan ditamatkan pada v3.0.1. Gunakan .hiddenatau .sr-onlysebaliknya.
Tambahan pula, .invisibleboleh digunakan untuk menogol hanya keterlihatan elemen, bermakna ia displaytidak diubah suai dan elemen itu masih boleh menjejaskan 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 skrin dan kandungan navigasi papan kekunci
Sembunyikan elemen kepada semua peranti kecuali pembaca skrin dengan .sr-only. Gabungkan .sr-onlydengan .sr-only-focusableuntuk menunjukkan elemen sekali lagi apabila ia difokuskan (cth oleh pengguna papan kekunci sahaja). Diperlukan untuk mengikuti amalan terbaik kebolehaksesan . Boleh 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 imej
Gunakan .text-hidekelas atau mixin untuk membantu menggantikan kandungan teks elemen dengan imej latar belakang.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Utiliti responsif
Untuk pembangunan mesra mudah alih yang lebih pantas, gunakan kelas utiliti ini untuk menunjukkan dan menyembunyikan kandungan mengikut peranti melalui pertanyaan media. Turut disertakan ialah kelas utiliti untuk menogol kandungan apabila dicetak.
Cuba gunakan ini secara terhad dan elakkan membuat versi yang sama sekali berbeza untuk tapak yang sama. Sebaliknya, gunakannya untuk melengkapkan pembentangan setiap peranti.
Kelas yang ada
Gunakan satu atau gabungan kelas yang tersedia untuk menogol kandungan merentas titik putus ruang pandang.
| Peranti kecil tambahanTelefon (<768px) | Peranti kecilTablet (≥768px) | Peranti sederhanaDesktop (≥992px) | Peranti besarDesktop (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Kelihatan | Tersembunyi | Tersembunyi | Tersembunyi |
.visible-sm-* |
Tersembunyi | Kelihatan | Tersembunyi | Tersembunyi |
.visible-md-* |
Tersembunyi | Tersembunyi | Kelihatan | Tersembunyi |
.visible-lg-* |
Tersembunyi | Tersembunyi | Tersembunyi | Kelihatan |
.hidden-xs |
Tersembunyi | Kelihatan | Kelihatan | Kelihatan |
.hidden-sm |
Kelihatan | Tersembunyi | Kelihatan | Kelihatan |
.hidden-md |
Kelihatan | Kelihatan | Tersembunyi | Kelihatan |
.hidden-lg |
Kelihatan | Kelihatan | Kelihatan | Tersembunyi |
Mulai v3.2.0, .visible-*-*kelas untuk setiap titik putus datang dalam tiga variasi, satu untuk setiap displaynilai sifat CSS yang disenaraikan di bawah.
| Kumpulan kelas | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Jadi, untuk xsskrin yang lebih kecil ( ) contohnya, .visible-*-*kelas yang tersedia ialah: .visible-xs-block, .visible-xs-inline, dan .visible-xs-inline-block.
Kelas .visible-xs, .visible-sm, .visible-md, dan .visible-lgjuga wujud, tetapi ditamatkan pada v3.2.0 . Ia lebih kurang sama dengan .visible-*-block, kecuali dengan kes khas tambahan untuk menogol <table>elemen berkaitan.
Cetak kelas
Sama seperti kelas responsif biasa, gunakan ini untuk menogol kandungan untuk cetakan.
| Kelas | pelayar | Cetak |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Tersembunyi | Kelihatan |
.hidden-print |
Kelihatan | Tersembunyi |
Kelas itu .visible-printjuga wujud tetapi ditamatkan pada v3.2.0. Ia lebih kurang bersamaan dengan .visible-print-block, kecuali dengan kes khas tambahan untuk <table>elemen berkaitan.
Kes ujian
Ubah saiz pelayar anda atau muatkan pada peranti yang berbeza untuk menguji kelas utiliti responsif.
Kelihatan pada...
Tanda semak hijau menunjukkan elemen kelihatan dalam port pandangan semasa anda.
Lebih kecil
✔ Boleh dilihat pada x-small
Kecil
✔ Kelihatan pada yang kecil
Sederhana
✔ Kelihatan pada medium
besar
✔ Kelihatan pada besar
✔ Kelihatan pada x-kecil dan kecil
✔ Kelihatan pada sederhana dan besar
✔ Kelihatan pada x-kecil dan sederhana
✔ Kelihatan pada kecil dan besar
✔ Kelihatan pada x-kecil dan besar
✔ Kelihatan pada kecil dan sederhana
Tersembunyi pada...
Di sini, tanda semak hijau juga menunjukkan elemen tersembunyi dalam port pandangan semasa anda.
Menggunakan Kurang
CSS Bootstrap dibina pada Less, prapemproses dengan fungsi tambahan seperti pembolehubah, campuran dan fungsi untuk menyusun CSS. Mereka yang ingin menggunakan sumber Kurang fail dan bukannya fail CSS kami yang disusun boleh menggunakan pelbagai pembolehubah dan campuran yang kami gunakan sepanjang rangka kerja.
Pembolehubah grid dan campuran diliputi dalam bahagian sistem Grid .
Menyusun Bootstrap
Bootstrap boleh digunakan dalam sekurang-kurangnya dua cara: dengan CSS yang disusun atau dengan sumber Kurang fail. Untuk menyusun fail Kurang, rujuk bahagian Bermula untuk cara menyediakan persekitaran pembangunan anda untuk menjalankan arahan yang diperlukan.
Alat penyusunan pihak ketiga mungkin berfungsi dengan Bootstrap, tetapi ia tidak disokong oleh pasukan teras kami.
Pembolehubah
Pembolehubah digunakan sepanjang keseluruhan projek sebagai cara untuk memusatkan dan berkongsi nilai yang biasa digunakan seperti warna, jarak atau susunan fon. Untuk butiran lengkap, sila lihat Penyesuai .
Warna
Gunakan dua skema warna dengan mudah: skala kelabu dan semantik. Warna skala kelabu menyediakan akses pantas kepada warna hitam yang biasa digunakan manakala semantik termasuk pelbagai warna yang diberikan kepada 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 mana-mana pembolehubah warna ini sebagaimana adanya atau tetapkan semula pembolehubah tersebut kepada pembolehubah yang lebih bermakna untuk projek 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
Sebilangan kecil pembolehubah untuk menyesuaikan elemen utama rangka tapak anda dengan pantas.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Pautan
Gayakan pautan anda dengan mudah dengan warna yang betul dengan hanya 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;
}
}Ambil perhatian bahawa @link-hover-colormenggunakan fungsi, satu lagi alat hebat daripada Less, untuk mencipta warna tuding yang betul secara automatik. Anda boleh menggunakan darken, lighten, saturatedan desaturate.
Tipografi
Tetapkan muka taip anda, saiz teks, terkemuka dan banyak lagi dengan beberapa pembolehubah pantas. Bootstrap menggunakan ini juga untuk menyediakan campuran 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 pembolehubah pantas untuk menyesuaikan lokasi dan nama fail ikon anda.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponen
Komponen di seluruh Bootstrap menggunakan beberapa pembolehubah lalai untuk menetapkan nilai biasa. Berikut adalah yang paling biasa 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
Campuran vendor ialah campuran untuk membantu menyokong berbilang penyemak imbas dengan memasukkan semua awalan vendor yang berkaitan dalam CSS terkumpul anda.
Bersaiz kotak
Tetapkan semula model kotak komponen anda dengan satu campuran. Untuk konteks, lihat artikel berguna daripada Mozilla ini .
Mixin ditamatkan pada v3.2.0, dengan pengenalan Autoprefixer. Untuk mengekalkan keserasian ke belakang, Bootstrap akan terus menggunakan mixin secara dalaman sehingga Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Bucu bulat
Hari ini semua penyemak imbas moden menyokong sifat bukan awalan border-radius. Oleh itu, tiada .border-radius()mixin, tetapi Bootstrap menyertakan pintasan untuk membulatkan dua penjuru dengan cepat pada bahagian tertentu objek.
.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;
}Bayang kotak (Jatuhkan).
Jika khalayak sasaran anda menggunakan penyemak imbas dan peranti yang terbaharu dan terbaik, pastikan anda hanya menggunakan box-shadowharta itu sendiri. Jika anda memerlukan sokongan untuk peranti Android (pra-v4) dan iOS yang lebih lama (pra-iOS 5), gunakan mixin yang ditamatkan untuk mengambil yang diperlukan-webkit awalan yang diperlukan.
Mixin ditamatkan pada v3.1.0, kerana Bootstrap tidak menyokong platform lapuk yang tidak menyokong sifat standard secara rasmi. Untuk mengekalkan keserasian ke belakang, Bootstrap akan terus menggunakan mixin secara dalaman sehingga Bootstrap v4.
Pastikan anda menggunakan rgba()warna dalam bayang-bayang kotak anda supaya ia sebati 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;
}Peralihan
Campuran berbilang untuk fleksibiliti. Tetapkan semua maklumat peralihan dengan satu, atau tentukan kelewatan dan tempoh yang berasingan seperti yang diperlukan.
Campuran ditamatkan pada v3.2.0, dengan pengenalan Autoprefixer. Untuk mengekalkan keserasian ke belakang, Bootstrap akan terus menggunakan campuran secara dalaman sehingga 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, terjemah (gerakkan), atau condongkan sebarang objek.
Campuran ditamatkan pada v3.2.0, dengan pengenalan Autoprefixer. Untuk mengekalkan keserasian ke belakang, Bootstrap akan terus menggunakan campuran secara dalaman sehingga 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
Campuran tunggal untuk menggunakan semua sifat animasi CSS3 dalam satu perisytiharan dan campuran lain untuk sifat individu.
Campuran ditamatkan pada v3.2.0, dengan pengenalan Autoprefixer. Untuk mengekalkan keserasian ke belakang, Bootstrap akan terus menggunakan campuran secara dalaman sehingga 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;
}Kelegapan
Tetapkan kelegapan untuk semua penyemak imbas dan berikan filtersandaran untuk IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Teks pemegang tempat
Sediakan konteks untuk kawalan borang dalam setiap medan.
.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
}Lajur
Hasilkan lajur 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;
}Kecerunan
Tukar mana-mana dua warna menjadi kecerunan latar belakang dengan mudah. Dapatkan lebih maju dan tetapkan arah, gunakan tiga warna atau gunakan kecerunan jejarian. Dengan satu campuran anda mendapat semua sintaks awalan yang anda perlukan.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Anda juga boleh menentukan sudut kecerunan linear dua warna standard:
#gradient > .directional(#333; #000; 45deg);Jika anda memerlukan kecerunan gaya jalur gunting rambut, itu juga mudah. Hanya tentukan satu warna dan kami akan menindih jalur putih lut sinar.
#gradient > .striped(#333; 45deg);Naikkan ante dan gunakan tiga warna. Tetapkan warna pertama, warna kedua, warna hentian warna kedua (nilai peratusan seperti 25%) dan warna ketiga dengan campuran ini:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Angkat kepala! Sekiranya anda perlu mengalih keluar kecerunan, pastikan anda mengalih keluar mana-mana IE khusus yang filtermungkin telah anda tambahkan. Anda boleh melakukannya dengan menggunakan .reset-filter()mixin bersama background-image: none;.
Campuran utiliti
Campuran utiliti ialah campuran yang menggabungkan sifat CSS yang tidak berkaitan untuk mencapai matlamat atau tugas tertentu.
Clearfix
Lupakan menambah class="clearfix"mana-mana elemen dan sebaliknya tambahkan .clearfix()campuran di mana sesuai. Menggunakan pembaikan jelas mikro daripada Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Pemusatan mendatar
Pusatkan mana-mana elemen dengan cepat dalam induknya. Memerlukan widthatau max-widthuntuk ditetapkan.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Pembantu saiz
Tentukan dimensi sesuatu objek dengan lebih mudah.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Kawasan teks boleh ubah saiz
Konfigurasikan pilihan ubah saiz dengan mudah untuk mana-mana kawasan teks, atau mana-mana elemen lain. Lalai kepada tingkah laku penyemak imbas biasa ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Memotong teks
Pangkas teks dengan mudah dengan elipsis dengan satu campuran. Memerlukan elemen untuk menjadi blockatau inline-blocktahap.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Imej retina
Tentukan dua laluan imej dan dimensi imej @1x, dan Bootstrap akan memberikan pertanyaan media @2x. Jika anda mempunyai banyak imej untuk disiarkan, pertimbangkan untuk menulis CSS imej retina anda secara manual dalam satu pertanyaan media.
.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);
}Menggunakan Sass
Walaupun Bootstrap dibina pada Less, ia juga mempunyai port Sass rasmi . Kami mengekalkannya dalam repositori GitHub yang berasingan dan mengendalikan kemas kini dengan skrip penukaran.
Apa yang disertakan
Memandangkan port Sass mempunyai repo yang berasingan dan menyediakan khalayak yang sedikit berbeza, kandungan projek sangat berbeza daripada projek Bootstrap utama. Ini memastikan port Sass serasi dengan seberapa banyak sistem berasaskan Sass yang mungkin.
| Laluan | Penerangan |
|---|---|
lib/ |
Kod permata Ruby (konfigurasi Sass, integrasi Rel dan Kompas) |
tasks/ |
Skrip penukar (menukar hulu Kurang kepada Sass) |
test/ |
Ujian kompilasi |
templates/ |
Manifes pakej kompas |
vendor/assets/ |
Sass, JavaScript dan fail fon |
Rakefile |
Tugas dalaman, seperti meraih dan menukar |
Lawati repositori GitHub port Sass untuk melihat fail ini dalam tindakan.
Pemasangan
Untuk mendapatkan maklumat tentang cara memasang dan menggunakan Bootstrap untuk Sass, rujuk repositori GitHub readme . Ia adalah sumber yang paling terkini dan termasuk maklumat untuk digunakan dengan projek Rails, Compass dan Sass standard.