CSS
Setelan CSS global, unsur HTML dhasar sing ditata lan ditingkatake kanthi kelas sing bisa diperluas, lan sistem kothak canggih.
Ringkesan
Entuk lowdown babagan prasarana utama Bootstrap, kalebu pendekatan kanggo pangembangan web sing luwih apik, luwih cepet, lan kuwat.
HTML5 doctype
Bootstrap nggunakake unsur HTML lan properti CSS tartamtu sing mbutuhake doctype HTML5. Kalebu ing wiwitan kabeh proyek sampeyan.
<!DOCTYPE html>
<html lang="en">
...
</html>Mobile pisanan
Kanthi Bootstrap 2, kita nambahake gaya loropaken seluler opsional kanggo aspek kunci kerangka. Kanthi Bootstrap 3, kita wis nulis maneh proyek kasebut dadi seluler loropaken wiwit wiwitan. Tinimbang nambahake gaya seluler opsional, padha dipanggang langsung menyang inti. Nyatane, Bootstrap iku seluler pisanan . Gaya pisanan seluler bisa ditemokake ing kabeh perpustakaan tinimbang ing file sing kapisah.
Kanggo mesthekake rendering sing tepat lan zooming tutul, tambahake tag meta viewport menyang <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Sampeyan bisa mateni kemampuan zoom ing piranti seluler kanthi nambahake user-scalable=notag meta viewport. Iki mateni zoom, tegese pangguna mung bisa nggulung, lan nyebabake situs sampeyan rumangsa kaya aplikasi asli. Sakabèhé, kita ora nyaranake iki ing saben situs, supaya ati-ati!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tipografi lan pranala
Bootstrap nyetel tampilan global dhasar, tipografi, lan gaya link. Khusus, kita:
- Setel
background-color: #fff;ingbody - Gunakake
@font-family-base,@font-size-base, lan@line-height-baseatribut minangka basis tipografi kita - Setel warna link global liwat
@link-colorlan aplikasi link underlines mung ing:hover
Gaya iki bisa ditemokake ing scaffolding.less.
Normalize.css
Kanggo rendering lintas-browser sing luwih apik, kita nggunakake Normalize.css , proyek dening Nicolas Gallagher lan Jonathan Neal .
Wadhah
Bootstrap mbutuhake unsur sing ngemot kanggo mbungkus isi situs lan ngemot sistem kothak kita. Sampeyan bisa milih salah siji saka rong wadhah kanggo digunakake ing proyek sampeyan. Elinga, amarga paddinglan liya-liyane, ora ana wadah sing bisa dipasang.
Gunakake .containerkanggo wadhah jembar tetep responsif.
<div class="container">
...
</div>Gunakake .container-fluidkanggo wadhah sing ambane lengkap, kanthi jembar kabeh area tampilan sampeyan.
<div class="container-fluid">
...
</div>Sistem grid
Bootstrap kalebu responsif, mobile pisanan sistem kothak cairan sing jumbuh skala nganti 12 kolom nalika piranti utawa viewport ukuran mundhak. Iki kalebu kelas sing wis ditemtokake kanggo pilihan tata letak sing gampang, uga campuran sing kuat kanggo nggawe tata letak semantik sing luwih akeh .
Pambuka
Sistem kothak digunakake kanggo nggawe tata letak kaca liwat seri baris lan kolom sing ngemot isi sampeyan. Mangkene cara kerja sistem kothak Bootstrap:
- Baris kudu diselehake ing
.container(tetep-jembaré) utawa.container-fluid(full-jembaré) kanggo alignment lan padding sing tepat. - Gunakake baris kanggo nggawe klompok horisontal kolom.
- Isi kudu diselehake ing kolom, lan mung kolom bisa dadi anak langsung saka baris.
- Kelas kothak sing wis ditemtokake kaya
.rowlan.col-xs-4kasedhiya kanggo nggawe tata letak kothak kanthi cepet. Campuran sing kurang uga bisa digunakake kanggo tata letak semantik. - Kolom nggawe talang (gap antarane isi kolom) liwat
padding. Padding kasebut diimbangi ing baris kanggo kolom pisanan lan pungkasan liwat wates negatif ing.rows. - Margin negatif kok conto ing ngisor iki outdented. Iku supaya isi ing kolom kothak baris munggah karo isi non-grid.
- Kolom kisi digawe kanthi nemtokake jumlah rolas kolom sing kasedhiya sing pengin dikepengini. Contone, telung kolom sing padha bakal nggunakake telung
.col-xs-4. - Yen luwih saka 12 kolom diselehake ing baris siji, saben klompok kolom ekstra bakal, minangka siji unit, mbungkus menyang baris anyar.
- Kelas kothak ditrapake kanggo piranti sing ambane layar luwih gedhe utawa padha karo ukuran breakpoint, lan ngganti kelas kothak sing ditargetake ing piranti sing luwih cilik. Mula, contone, aplikasi
.col-md-*kelas apa wae menyang unsur ora mung bakal mengaruhi gaya ing piranti medium nanging uga ing piranti gedhe yen.col-lg-*kelas ora ana.
Deleng conto kanggo ngetrapake prinsip kasebut ing kode sampeyan.
Pitakonan media
Kita nggunakake pitakon media ing ngisor iki ing file Kurang kanggo nggawe breakpoints tombol ing sistem kothak kita.
/* 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) { ... }Kita sok-sok nggedhekake pitakon media kasebut kanggo nyakup max-widthwatesan CSS menyang piranti sing luwih 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 kothak
Delengen carane aspèk sistem kothak Bootstrap bisa digunakake ing pirang-pirang piranti kanthi meja sing praktis.
| Piranti ekstra cilik Telpon (<768px) | Piranti cilik Tablet (≥768px) | Desktop piranti medium (≥992px) | Piranti gedhe Desktop (≥1200px) | |
|---|---|---|---|---|
| Prilaku grid | Horisontal ing kabeh wektu | Ambruk kanggo miwiti, horisontal ndhuwur breakpoints | ||
| Jembaré wadhah | Ora ana (otomatis) | 750px | 970px | 1170px |
| Ater-ater kelas | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # kolom | 12 | |||
| Jembaré kolom | Auto | ~62px | ~81px | ~97px |
| Jembaré talang | 30px (15px ing saben sisih kolom) | |||
| Nestable | ya wis | |||
| Offsets | ya wis | |||
| Urutan kolom | ya wis | |||
Tuladha: Stacked-to-horizontal
Nggunakake sakumpulan .col-md-*kelas kothak siji, sampeyan bisa nggawe sistem kothak dhasar sing diwiwiti ditumpuk ing piranti seluler lan piranti tablet (sawetara cilik nganti cilik) sadurunge dadi horisontal ing piranti desktop (sedheng). Selehake kolom kothak ing sembarang .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Tuladha: Wadah cairan
Ganti tata letak kothak kanthi jembar tetep dadi tata letak jembar kanthi ngganti paling njaba .containermenyang .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Tuladha: Mobile lan desktop
Ora pengin kolom sampeyan mung tumpukan ing piranti sing luwih cilik? Gunakake kelas kothak piranti cilik lan medium ekstra kanthi nambahake .col-xs-* .col-md-*kolom sampeyan. Deleng conto ing ngisor iki kanggo ide sing luwih apik babagan cara kerjane.
.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>Tuladha: Mobile, tablet, desktop
Gawe conto sadurunge kanthi nggawe tata letak sing luwih dinamis lan kuat karo .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>Tuladha: Pambungkus kolom
Yen luwih saka 12 kolom diselehake ing baris siji, saben klompok kolom ekstra bakal, minangka siji unit, mbungkus menyang baris anyar.
.col-xs-9
.col-xs-4
Wiwit 9 + 4 = 13 > 12, div 4-kolom-sudhut iki bakal kebungkus menyang baris anyar minangka siji unit contiguous.
Wiwit 9 + 4 = 13 > 12, div 4-kolom-sudhut iki bakal kebungkus menyang baris anyar minangka siji unit contiguous.
.col-xs-6
Kolom sakteruse terus ing baris anyar.
Kolom sakteruse terus ing baris anyar.
<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>Reset kolom responsif
Kanthi papat undakan kothak kasedhiya, sampeyan bakal nemoni masalah ing ngendi, ing breakpoints tartamtu, kolom sampeyan ora jelas amarga siji luwih dhuwur tinimbang liyane. Kanggo ndandani iku, gunakake kombinasi a .clearfixlan kelas sarana responsif .
.col-xs-6 .col-sm-3
Owahi ukuran viewport utawa priksa ing telpon kanggo conto.
Owahi ukuran viewport utawa priksa ing telpon kanggo conto.
.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>Saliyane ngresiki kolom ing breakpoints responsif, sampeyan bisa uga kudu ngreset offset, push, utawa narik . Deleng tumindak iki ing conto kothak .
<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>Ngimbangi kolom
Pindhah kolom menyang tengen nggunakake .col-md-offset-*kelas. Kelas iki nambah wates kiwa kolom kanthi *kolom. Contone, .col-md-offset-4gerakane .col-md-4liwat papat kolom.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Sampeyan uga bisa ngganti offset saka undakan kothak ngisor karo .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>Nesting kolom
Kanggo nempatake konten sampeyan nganggo kothak gawan, tambahake kolom anyar .rowlan set .col-sm-*ing .col-sm-*kolom sing wis ana. Baris sing disusun kudu kalebu sakumpulan kolom sing nambah nganti 12 utawa kurang (ora perlu nggunakake kabeh 12 kolom sing kasedhiya).
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Urutan kolom
Ganti urutan kolom kothak sing dibangun kanthi gampang .col-md-push-*lan .col-md-pull-*kelas modifier.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-narik-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 lan variabel
Saliyane kelas kothak prebuilt kanggo tata letak cepet, Bootstrap kalebu Kurang variabel lan mixins kanggo cepet ngasilaken prasaja, tata letak semantik dhewe.
Variabel
Variabel nemtokake jumlah kolom, ambane talang, lan titik pitakon media kanggo miwiti kolom ngambang. Iki digunakake kanggo ngasilake kelas kothak sing wis ditemtokake sing didokumentasikake ing ndhuwur, uga kanggo campuran khusus sing kapacak ing ngisor iki.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Campuran
Mixin digunakake bebarengan karo variabel kothak kanggo ngasilake CSS semantik kanggo kolom kothak 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));
}
}Conto panggunaan
Sampeyan bisa ngowahi variabel menyang nilai khusus, utawa mung nggunakake mixin kanthi nilai standar. Iki conto nggunakake setelan gawan kanggo nggawe tata letak loro-kolom karo longkangan antarane.
.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
Judhul
Kabeh judhul HTML, <h1>liwat <h6>, kasedhiya. .h1liwat .h6kelas uga kasedhiya, kanggo nalika sampeyan pengin cocog gaya font saka judhul nanging isih pengin teks ditampilake inline.
h1. Judul Bootstrap |
Semibold 36px |
h2. Judul Bootstrap |
Semibold 30px |
h3. Judul Bootstrap |
Semibold 24px |
h4. Judul Bootstrap |
Semibold 18px |
h5. Judul Bootstrap |
Semibold 14px |
h6. Judul Bootstrap |
Semibold 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Gawe teks sekunder sing luwih entheng ing judhul apa wae kanthi <small>tag umum utawa .smallkelas.
h1. Judul Bootstrap Teks sekunder |
h2. Judul Bootstrap Teks sekunder |
h3. Judul Bootstrap Teks sekunder |
h4. Judul Bootstrap Teks sekunder |
h5. Judul Bootstrap Teks sekunder |
h6. Judul Bootstrap Teks sekunder |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Salinan awak
Standar global Bootstrap font-sizeyaiku 14px , kanthi line-heightukuran 1.428 . Iki ditrapake kanggo <body>lan kabeh paragraf. Kajaba iku, <p>(paragraf) nampa wates ngisor setengah dhuwur garis sing diwilang (10px minangka standar).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus and 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 lungguh amet non magna. Donec id elit non mi porta gravida lan eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Timbal awak salinan
Gawea paragraf kanthi nambahake .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Dibangun karo Kurang
Skala tipografi adhedhasar rong variabel Kurang ing variabel.kurang : @font-size-baselan @line-height-base. Sing pisanan yaiku ukuran font dhasar sing digunakake ing saindenging lan sing nomer loro yaiku dhuwur garis dhasar. Kita nggunakake variabel kasebut lan sawetara matematika sing gampang kanggo nggawe wates, bantalan, lan dhuwur garis kabeh jinis kita lan liya-liyane. Kustomisasi lan adaptasi Bootstrap.
Unsur teks inline
Teks sing ditandhani
Kanggo nyorot teks amarga relevansi ing konteks liyane, gunakake <mark>tag.
Sampeyan bisa nggunakake tandha tandha kanggosorotteks.
You can use the mark tag to <mark>highlight</mark> text.Teks sing wis dibusak
Kanggo nuduhake blok teks sing wis dibusak, gunakake <del>tag.
Baris teks iki kudu dianggep minangka teks sing wis dibusak.
<del>This line of text is meant to be treated as deleted text.</del>Teks Strikethrough
Kanggo nuduhake pamblokiran teks sing ora ana gandhengane, gunakake <s>tag.
Baris teks iki kudu dianggep ora akurat maneh.
<s>This line of text is meant to be treated as no longer accurate.</s>Teks sing disisipake
Kanggo nuduhake tambahan ing dokumen nggunakake <ins>tag.
Baris teks iki kudu dianggep minangka tambahan kanggo dokumen kasebut.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Teks sing digaris ngisor
Kanggo nggaris teks nggunakake <u>tag.
Baris teks iki bakal ditampilake minangka garis ngisor
<u>This line of text will render as underlined</u>Gunakake tag emphasis standar HTML kanthi gaya entheng.
Teks cilik
Kanggo de-emphasizing inline utawa pamblokiran teks, gunakake <small>tag kanggo nyetel teks ing 85% ukuran induk. unsur judhul nampa dhewe font-sizekanggo unsur nested <small>.
Sampeyan bisa uga nggunakake unsur inline kanthi ngganti .smallsembarang <small>.
Baris teks iki kudu dianggep minangka cetakan sing apik.
<small>This line of text is meant to be treated as fine print.</small>Kandel
Kanggo nandheske potongan teks kanthi bobot font sing luwih abot.
Cuplikan teks ing ngisor iki diwenehi teks kandel .
<strong>rendered as bold text</strong>Miring
Kanggo nandheske cuplikan teks kanthi miring.
Cuplikan teks ing ngisor iki diterjemahake minangka teks miring .
<em>rendered as italicized text</em>unsur sulih
Bebas bae kanggo nggunakake <b>lan <i>ing HTML5. <b>tegese kanggo nyorot tembung utawa frase tanpa menehi wigati tambahan nalika <i>biasane kanggo swara, istilah teknis, lsp.
Kelas Alignment
Gampang nyelarasake teks menyang komponen kanthi kelas keselarasan teks.
Teks sejajar kiwa.
Teks selaras tengah.
Teks sejajar tengen.
Teks sing dibenerake.
Ora bungkus teks.
<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
Ngowahi teks dadi komponen kanthi kelas kapitalisasi teks.
Aksara cilik.
Tulisan gedhe.
Kapitalisasi teks.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Singkatan
Implementasi gaya saka <abbr>unsur HTML kanggo singkatan lan akronim kanggo nuduhake versi ditambahi ing hover. Singkatan karo titleatribut duwe wates ngisor titik cahya lan kursor bantuan nalika hover, nyedhiyakake konteks tambahan babagan hover lan kanggo pangguna teknologi asisten.
Singkatan dhasar
Singkatan saka tembung atribut yaiku attr .
<abbr title="attribute">attr</abbr>Initialisme
Tambah .initialismmenyang singkatan kanggo ukuran font sing rada cilik.
HTML minangka sing paling apik wiwit roti irisan.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Alamat
Saiki informasi kontak kanggo leluhur paling cedhak utawa kabeh awak karya. Simpen format kanthi mungkasi kabeh baris nganggo <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Jeneng Lengkap
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Jeneng Lengkap
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Blockquotes
Kanggo ngutip blok konten saka sumber liya ing dokumen sampeyan.
Blockquote standar
Bungkus HTML<blockquote> apa wae minangka kutipan. Kanggo kuotasi terus, disaranake a .<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
Gaya lan isi owah-owahan kanggo variasi prasaja ing standar <blockquote>.
Jeneng sumber
Tambah a <footer>kanggo ngenali sumber. Bungkus jeneng karya sumber ing <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>Tampilan sulih
Tambah .blockquote-reversekanggo blockquote kanthi isi sing didadekake tengen.
<blockquote class="blockquote-reverse">
...
</blockquote>Dhaptar
Ora ditata
Dhaptar item sing urutan ora penting banget.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem lan massa
- Facilisis ing pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ing
- Faucibus porta lacus fringilla vel
- Aenean lungguh amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>dhawuh
Dhaptar item sing urutan kasebut pancen penting.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem lan massa
- Facilisis ing pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean lungguh amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Tanpa gaya
Mbusak wates gawan list-stylelan kiwa ing dhaptar item (mung anak langsung). Iki mung ditrapake kanggo item dhaptar anak langsung , tegese sampeyan uga kudu nambah kelas kanggo dhaptar sing disusun.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem lan massa
- Facilisis ing pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ing
- Faucibus porta lacus fringilla vel
- Aenean lungguh amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Inline
Selehake kabeh item dhaptar ing baris siji karo display: inline-block;lan sawetara padding cahya.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Katrangan
Dhaptar istilah kanthi katrangan sing gegandhengan.
- Dhaptar katrangan
- Dhaptar deskripsi sampurna kanggo nemtokake istilah.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida lan eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Deskripsi horisontal
Nggawe istilah lan katrangan ing <dl>baris sisih-by-side. Diwiwiti dibandhingke kaya standar <dl>s, nanging nalika navbar ngembangaken, supaya iki.
- Dhaptar katrangan
- Dhaptar deskripsi sampurna kanggo nemtokake istilah.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida lan eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Pemotongan otomatis
Dhaptar deskripsi horisontal bakal ngilangi istilah sing dawa banget kanggo pas ing kolom kiwa nganggo text-overflow. Ing tampilan sing luwih sempit, dheweke bakal ganti menyang tata letak tumpukan standar.
Kode
Inline
Bungkus potongan kode inline nganggo <code>.
Contone,
<section>kudu dibungkus minangka inline.
For example, <code><section></code> should be wrapped as inline.Input pangguna
Gunakake <kbd>kanggo nuduhake input sing biasane dilebokake liwat keyboard.
Kanggo ngalih direktori, ketik
cdbanjur jeneng direktori.
Kanggo ngowahi setelan, penet ctrl + ,
Kanggo ngowahi setelan, penet 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 dhasar
Gunakake <pre>kanggo sawetara baris kode. Aja manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat.
<p>Conto teks ing kene...</p>
<pre><p>Sample text here...</p></pre>Sampeyan bisa nambah kelas kanthi opsional .pre-scrollable, sing bakal nyetel dhuwur maksimal 350px lan menehi scrollbar sumbu-y.
Variabel
Kanggo nuduhake variabel nggunakake <var>tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Output sampel
Kanggo nuduhake pamblokiran sampel output saka program nggunakake <samp>tag.
Teks iki dimaksudaké kanggo dianggep minangka conto output saka program komputer.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Tabel
Tuladha dhasar
Kanggo gaya dhasar - bantalan cahya lan mung pembagi horisontal - tambahake kelas dasar .tablemenyang sembarang <table>. Bisa uga katon super keluwih, nanging amarga nggunakake tabel sing nyebar kanggo plugin liyane kaya tanggalan lan pemilih tanggal, kita wis milih kanggo ngisolasi gaya meja khusus.
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry | si Manuk |
<table class="table">
...
</table>Larik belang
Gunakake .table-stripedkanggo nambah zebra-striping menyang sembarang baris tabel ing <tbody>.
Kompatibilitas lintas-browser
Tabel belang ditata liwat :nth-childpamilih CSS, sing ora kasedhiya ing Internet Explorer 8.
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry | si Manuk |
<table class="table table-striped">
...
</table>Tabel wewatesan
Tambah .table-borderedkanggo wates ing kabeh pinggir meja lan sel.
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry | si Manuk |
<table class="table table-bordered">
...
</table>Ngisor baris
Tambah .table-hoverkanggo ngaktifake status hover ing baris tabel ing a <tbody>.
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry | si Manuk |
<table class="table table-hover">
...
</table>Tabel kondensasi
Tambah .table-condensedkanggo nggawe tabel luwih kompak kanthi ngethok lapisan sel dadi setengah.
| # | Jeneng pisanan | Jeneng mburi | Jeneng panganggo |
|---|---|---|---|
| 1 | Tandhani | Otto | @mdo |
| 2 | Yakub | Thornton | @lemak |
| 3 | Larry Manuk | ||
<table class="table table-condensed">
...
</table>Kelas kontekstual
Gunakake kelas kontekstual kanggo warna baris tabel utawa sel individu.
| kelas | Katrangan |
|---|---|
.active |
Nerapake warna hover menyang baris utawa sel tartamtu |
.success |
Nuduhake tumindak sing sukses utawa positif |
.info |
Nuduhake owah-owahan informatif netral utawa tumindak |
.warning |
Nuduhake bebaya sing mbutuhake perhatian |
.danger |
Nuduhake tumindak mbebayani utawa duweni potensi negatif |
| # | judhul kolom | judhul kolom | judhul kolom |
|---|---|---|---|
| 1 | Isi kolom | Isi kolom | Isi kolom |
| 2 | Isi kolom | Isi kolom | Isi kolom |
| 3 | Isi kolom | Isi kolom | Isi kolom |
| 4 | Isi kolom | Isi kolom | Isi kolom |
| 5 | Isi kolom | Isi kolom | Isi kolom |
| 6 | Isi kolom | Isi kolom | Isi kolom |
| 7 | Isi kolom | Isi kolom | Isi kolom |
| 8 | Isi kolom | Isi kolom | Isi kolom |
| 9 | Isi kolom | Isi kolom | Isi kolom |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna ing baris tabel utawa sel individu mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (teks sing katon ing baris / sel tabel sing cocog), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.
Tabel responsif
.tableGawe tabel responsif kanthi mbungkus apa .table-responsivewae supaya bisa nggulung kanthi horisontal ing piranti cilik (nganti 768px). Nalika ndeleng apa wae sing luwih gedhe tinimbang 768px, sampeyan ora bakal bisa ndeleng prabédan ing tabel kasebut.
Kliping / pemotongan vertikal
Tabel responsif nggunakake overflow-y: hidden, sing ngethok konten sing ngluwihi sisih ngisor utawa ndhuwur meja. Utamane, iki bisa ngilangi menu gulung mudhun lan widget pihak katelu liyane.
Firefox lan fieldsets
Firefox duwe sawetara gaya fieldset kikuk widthsing ngganggu tabel responsif. Iki ora bisa diganti tanpa hack khusus Firefox sing ora diwenehake ing Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Kanggo informasi luwih lengkap, waca jawaban Stack Overflow iki .
| # | Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul |
|---|---|---|---|---|---|---|
| 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 |
| # | Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul |
|---|---|---|---|---|---|---|
| 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>Formulir
Tuladha dhasar
Kontrol wangun individu kanthi otomatis nampa sawetara gaya global. Kabeh tekstual <input>, <textarea>, lan <select>unsur karo .form-controldisetel width: 100%;minangka standar. Bungkus label lan kontrol .form-groupkanggo spasi paling optimal.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Aja nyampur grup wangun karo grup input
Aja nyampur grup wangun langsung karo grup input . Nanging, pasang grup input ing grup formulir.
Formulir inline
Tambah .form-inlineing formulir sampeyan (sing ora kudu a <form>) kanggo kontrol blok kiwa lan blok inline. Iki mung ditrapake kanggo formulir ing viewport sing ambane paling sethithik 768px.
Bisa uga mbutuhake jembar khusus
Input lan pilihan wis width: 100%;ditrapake kanthi standar ing Bootstrap. Ing wangun inline, kita ngreset width: auto;supaya sawetara kontrol bisa manggon ing baris sing padha. Gumantung saka tata letak sampeyan, jembar khusus tambahan bisa uga dibutuhake.
Tansah nambah label
Pembaca layar bakal duwe masalah karo formulir sampeyan yen sampeyan ora kalebu label kanggo saben input. Kanggo formulir inline iki, sampeyan bisa ndhelikake label nggunakake .sr-onlykelas. Ana cara alternatif liyane kanggo nyedhiyakake label kanggo teknologi bantu, kayata aria-label, aria-labelledbyutawa titleatribut. Yen ora ana, pembaca layar bisa nggunakake placeholderatribut kasebut, yen ana, nanging elinga yen nggunakake placeholderminangka panggantos kanggo metode label liyane ora disaranake.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Bentuk horisontal
Gunakake kelas kothak sing wis ditemtokake Bootstrap kanggo nyelarasake label lan klompok kontrol formulir ing tata letak horisontal kanthi nambahake .form-horizontalformulir kasebut (sing ora kudu dadi <form>). Nglakoni owah-owahan supaya .form-grouptumindak minangka baris kothak, dadi ora perlu .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Kontrol sing didhukung
Conto kontrol wangun standar sing didhukung ing conto tata letak formulir.
Input
Kontrol formulir sing paling umum, kolom input basis teks. Kalebu dhukungan kanggo kabeh jinis HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, lan color.
Ketik deklarasi dibutuhake
Input mung bakal ditata kanthi lengkap yen typediumumake kanthi bener.
<input type="text" class="form-control" placeholder="Text input">Klompok input
Kanggo nambah teks utawa tombol terpadu sadurunge lan/utawa sawise adhedhasar teks <input>, priksa komponen grup input .
Textarea
Kontrol formulir sing ndhukung pirang-pirang baris teks. Ganti rowsatribut yen perlu.
<textarea class="form-control" rows="3"></textarea>Kothak lan radio
Kothak centhang kanggo milih siji utawa sawetara opsi ing dhaptar, dene radio kanggo milih siji opsi saka akeh.
kothak centhang lan radio dipatèni didhukung, nanging kanggo nyedhiyani kursor "ora diijini" ing hover saka wong tuwa <label>, sampeyan kudu nambah .disabledkelas kanggo wong tuwa .radio, .radio-inline, .checkbox, utawa .checkbox-inline.
Default (ditumpuk)
<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>Kothak lan radio inline
Gunakake .checkbox-inlineutawa .radio-inlinekelas ing seri kothak centhang utawa radio kanggo kontrol sing katon ing baris padha.
<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>Kothak lan radio tanpa teks label
Yen sampeyan ora duwe teks ing <label>, input dipanggonke kaya sing dikarepake. Saiki mung bisa digunakake ing kothak centhang lan radio non-inline. Elinga yen isih menehi sawetara wujud label kanggo teknologi bantu (contone, nggunakake 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>Milih
Elinga yen akeh menu pilihan asli - yaiku ing Safari lan Chrome - duwe sudhut bunder sing ora bisa diowahi liwat border-radiusproperti.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kanggo <select>kontrol karo multipleatribut, macem-macem opsi ditampilake minangka standar.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kontrol statis
Yen sampeyan kudu nyelehake teks kosong ing jejere label formulir ing formulir, gunakake .form-control-statickelas ing a <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Status fokus
Kita mbusak gaya gawan outlineing sawetara kontrol wangun lan aplikasi box-shadowing panggonan kanggo :focus.
:focusnegara demo
Input conto ing ndhuwur nggunakake gaya khusus ing dokumentasi kita kanggo nduduhake :focusnegara ing .form-control.
negara dipatèni
Tambah disabledatribut boolean ing input kanggo nyegah interaksi pangguna. Input sing dipateni katon luwih entheng lan nambah not-allowedkursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Fieldset dipatèni
Tambah disabledatribut menyang a <fieldset>kanggo mateni kabeh kontrol ing <fieldset>bebarengan.
Caveat babagan fungsi link saka<a>
Kanthi gawan, browser bakal nganggep kabeh kontrol wangun asli ( <input>, <select>lan <button>unsur) ing njero <fieldset disabled>minangka dipatèni, nyegah interaksi keyboard lan mouse. Nanging, yen formulir sampeyan uga kalebu <a ... class="btn btn-*">unsur, iki mung bakal diwenehi gaya pointer-events: none. Kaya sing kacathet ing bagean babagan status cacat kanggo tombol (lan khusus ing sub-bagean kanggo unsur anchor), properti CSS iki durung standar lan durung didhukung kanthi lengkap ing Opera 18 lan ngisor, utawa ing Internet Explorer 11, lan menang. 't nyegah pangguna keyboard supaya bisa fokus utawa ngaktifake tautan kasebut. Supaya aman, gunakake JavaScript khusus kanggo mateni tautan kasebut.
Kompatibilitas lintas-browser
Nalika Bootstrap bakal ngetrapake gaya kasebut ing kabeh browser, Internet Explorer 11 lan ing ngisor iki ora ndhukung disabledatribut kasebut kanthi lengkap <fieldset>. Gunakake JavaScript khusus kanggo mateni set lapangan ing browser kasebut.
<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>Negara mung diwaca
Tambah readonlyatribut boolean ing input kanggo nyegah modifikasi nilai input. Input mung diwaca katon luwih entheng (kaya input sing dipateni), nanging tetep kursor standar.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Teks bantuan
Blok teks bantuan tingkat kanggo kontrol formulir.
Nggayutake teks pitulung karo kontrol formulir
Teks pitulung kudu digandhengake kanthi jelas karo kontrol formulir sing ana gandhengane karo nggunakake aria-describedbyatribut kasebut. Iki bakal mesthekake yen teknologi pitulung - kayata pembaca layar - bakal ngumumake teks bantuan iki nalika pangguna fokus utawa mlebu kontrol.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Negara validasi
Bootstrap kalebu gaya validasi kanggo kesalahan, peringatan, lan status sukses ing kontrol formulir. Kanggo nggunakake, nambah .has-warning, .has-error, utawa .has-successmenyang unsur induk. Sembarang .control-label, .form-control, lan .help-blocking unsur kasebut bakal nampa gaya validasi.
Nyedhiyakake status validasi menyang teknologi pitulung lan pangguna buta warna
Nggunakake gaya validasi iki kanggo nunjukake kahanan kontrol formulir mung menehi indikasi visual adhedhasar warna, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar - utawa pangguna buta warna.
Priksa manawa indikasi alternatif negara uga diwenehake. Contone, sampeyan bisa nyakup pitunjuk babagan negara ing <label>teks kontrol formulir dhewe (kaya ing conto kode ing ngisor iki), kalebu Glyphicon (kanthi teks alternatif sing cocog nggunakake .sr-onlykelas - deleng conto Glyphicon ), utawa kanthi menehi pamblokiran teks bantuan tambahan . Khusus kanggo teknologi pitulung, kontrol formulir sing ora bener uga bisa diwenehi 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>Kanthi lambang opsional
Sampeyan uga bisa nambah lambang saran opsional kanthi tambahan .has-feedbacklan lambang tengen.
Ikon umpan balik mung bisa digunakake karo <input class="form-control">unsur teks.
Ikon, label, lan grup input
Posisi manual lambang umpan balik dibutuhake kanggo input tanpa label lan kanggo grup input kanthi tambahan ing sisih tengen. Sampeyan dianjurake banget kanggo nyedhiyakake label kanggo kabeh input amarga alasan aksesibilitas. Yen sampeyan pengin nyegah label supaya ora ditampilake, ndhelikake karo .sr-onlykelas. Yen sampeyan kudu nindakake tanpa label, atur topnilai lambang umpan balik. Kanggo grup input, atur rightnilai kasebut menyang nilai piksel sing cocog gumantung saka ambane addon sampeyan.
Nemtokake makna lambang kanggo teknologi bantu
Kanggo mesthekake yen teknologi assistive - kayata pembaca layar - kanthi bener ngirimake makna lambang, teks tambahan sing didhelikake kudu dilebokake ing .sr-onlykelas lan digandhengake kanthi jelas karo kontrol formulir sing ana gandhengane karo nggunakake aria-describedby. Utawa, mesthekake yen makna (contone, kasunyatan sing ana bebaya kanggo kolom entri teks tartamtu) disampekake ing sawetara wangun liyane, kayata ngganti teks saka nyata sing <label>digandhengake karo kontrol formulir.
Sanajan conto-conto ing ngisor iki wis nyebataken status validasi kontrol wangun masing-masing ing <label>teks kasebut, teknik ing ndhuwur (nganggo .sr-onlyteks lan aria-describedby) wis kalebu kanggo tujuan ilustrasi.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Ikon opsional ing wangun horisontal lan inline
<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>.sr-onlyIkon opsional kanthi label sing didhelikake
Yen sampeyan nggunakake .sr-onlykelas kanggo ndhelikake kontrol formulir <label>(tinimbang nggunakake opsi label liyane, kayata aria-labelatribut), Bootstrap bakal kanthi otomatis nyetel posisi lambang yen wis ditambahake.
(sukses)
@
(sukses)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Kontrol ukuran
Setel dhuwur nggunakake kelas kaya .input-lg, lan nyetel jembar nggunakake kelas kolom kothak kaya .col-lg-*.
Ukuran dhuwur
Nggawe kontrol wangun sing luwih dhuwur utawa luwih cendhek sing cocog karo ukuran tombol.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Ukuran klompok wangun horisontal
Cepet ukuran label lan wangun kontrol ing .form-horizontalkanthi nambah .form-group-lgutawa .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Ukuran kolom
Bungkus input ing kolom kothak, utawa unsur induk khusus, supaya gampang ngetrapake jembar sing dikarepake.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Tombol
Tag tombol
Gunakake kelas tombol ing <a>, <button>, utawa <input>unsur.
<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">Panggunaan khusus konteks
Nalika kelas tombol bisa digunakake <a>lan <button>unsur, mung <button>unsur sing didhukung ing komponen nav lan navbar kita.
Link tumindak minangka tombol
Yen <a>unsur digunakake kanggo tumindak minangka tombol - micu fungsionalitas ing kaca, tinimbang navigasi menyang dokumen utawa bagean liyane ing kaca saiki - uga kudu diwenehi role="button".
Rendering lintas-browser
Minangka laku paling apik, kita banget nyaranake nggunakake <button>unsur sabisa kanggo mesthekake cocog cross-browser rendering.
Antarane liyane, ana bug ing Firefox <30 sing ngalangi kita nyetel tombol line-heightbasis <input>, nyebabake ora cocog karo dhuwur tombol liyane ing Firefox.
Pilihan
Gunakake sembarang kelas tombol kasedhiya kanggo cepet nggawe tombol gaya.
<!-- 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>Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna tombol mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (teks tombol sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.
Ukuran
Apik tombol luwih gedhe utawa luwih cilik? Tambah .btn-lg, .btn-sm, utawa .btn-xskanggo ukuran tambahan.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Nggawe tombol tingkat pemblokiran-sing ukurane jembare wong tuwa- kanthi nambahake .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Status aktif
Tombol bakal katon dipencet (kanthi latar mburi sing luwih peteng, wates sing luwih peteng, lan bayangan inset) nalika aktif. Kanggo <button>unsur, iki ditindakake liwat :active. Kanggo <a>unsur, wis rampung karo .active. Nanging, sampeyan bisa nggunakake .activeing <button>s (lan kalebu aria-pressed="true"atribut) yen sampeyan kudu nurun status aktif programmatically.
Elemen tombol
Ora perlu kanggo nambah :activeminangka pseudo-kelas, nanging yen sampeyan kudu meksa katon padha, go ahead lan nambah .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>Unsur jangkar
Tambah .activekelas kanggo <a>tombol.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>negara dipatèni
Nggawe tombol katon ora bisa diklik kanthi ngilangi maneh nganggo opacity.
Elemen tombol
Tambah disabledatribut menyang <button>tombol.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Kompatibilitas lintas-browser
Yen sampeyan nambahake disabledatribut menyang <button>, Internet Explorer 9 lan ing ngisor iki bakal nggawe teks dadi abu-abu kanthi bayangan teks sing ora bisa didandani.
Unsur jangkar
Tambah .disabledkelas kanggo <a>tombol.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Kita digunakake .disabledminangka kelas sarana ing kene, padha karo .activekelas umum, mula ora perlu prefiks.
Kaveat fungsi link
Kelas iki digunakake pointer-events: nonekanggo nyoba kanggo mateni fungsi link saka <a>s, nanging sing properti CSS durung standar lan ora kebak didhukung ing Opera 18 lan ngisor, utawa ing Internet Explorer 11. Kajaba iku, malah ing browser sing ndhukung pointer-events: none, keyboard. pandhu arah tetep ora kena pengaruh, tegese pangguna keyboard sing katon lan pangguna teknologi bantu isih bisa ngaktifake tautan kasebut. Supaya aman, gunakake JavaScript khusus kanggo mateni tautan kasebut.
Gambar
Gambar responsif
Gambar ing Bootstrap 3 bisa digawe responsif-loropaken liwat tambahan saka .img-responsivekelas. Iki ditrapake max-width: 100%;, height: auto;lan display: block;kanggo gambar supaya timbangan apik kanggo unsur induk.
Kanggo gambar tengah sing nggunakake .img-responsivekelas, gunakake .center-blocktinimbang .text-center. Deleng bagean kelas helper kanggo rincian liyane babagan .center-blockpanggunaan.
Gambar SVG lan IE 8-10
Ing Internet Explorer 8-10, gambar SVG kanthi .img-responsiveukuran ora proporsional. Kanggo ndandani iki, tambahake width: 100% \9;yen perlu. Bootstrap ora ngetrapake iki kanthi otomatis amarga nyebabake komplikasi kanggo format gambar liyane.
<img src="..." class="img-responsive" alt="Responsive image">Wangun gambar
Tambah kelas menyang <img>unsur supaya gambar gampang gaya ing proyek apa wae.
Kompatibilitas lintas-browser
Elinga yen Internet Explorer 8 ora duwe dhukungan kanggo sudhut bunder.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Kelas pembantu
Warna kontekstual
Nerangake makna liwat werna kanthi sawetara kelas sarana emphasis. Iki bisa uga ditrapake kanggo tautan lan bakal dadi peteng nalika hover kaya gaya tautan standar kita.
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 lungguh 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>Dealing with specificity
Kadhangkala kelas emphasis ora bisa ditrapake amarga spesifik saka pamilih liyane. Umume kasus, solusi sing cukup yaiku mbungkus teks sampeyan <span>karo kelas.
Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (werna kontekstual mung digunakake kanggo nguatake makna sing wis ana ing teks/markup), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas . .
Latar mburi kontekstual
Kaya karo kelas warna teks kontekstual, gampang nyetel latar mburi unsur menyang kelas kontekstual apa wae. Komponen jangkar bakal dadi peteng nalika hover, kaya 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 lungguh 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>Dealing with specificity
Kadhangkala kelas latar mburi kontekstual ora bisa ditrapake amarga kekhususan pamilih liyane. Ing sawetara kasus, solusi sing cukup yaiku mbungkus konten unsur sampeyan <div>karo kelas.
Nuduhake makna kanggo teknologi assistive
Kaya warna kontekstual , priksa manawa makna apa wae sing diwedharake liwat warna uga diandharake ing format sing ora mung presentasi.
Tutup lambang
Gunakake lambang cedhak umum kanggo ngilangi konten kaya modal lan tandha.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Carets
Gunakake carets kanggo nuduhake fungsi gulung mudhun lan arah. Elinga yen caret gawan bakal mbalikke kanthi otomatis ing menu drop -up .
<span class="caret"></span>Cepet ngambang
Ngambang unsur ing ngiwa utawa nengen karo kelas. !importantkalebu kanggo ngindhari masalah spesifik. Kelas uga bisa digunakake minangka 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 isi tengah
Setel unsur menyang display: blocklan tengah liwat margin. Kasedhiya minangka mixin lan 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
Gampang mbusak floats kanthi nambahake .clearfix unsur induk . Nggunakake micro clearfix kaya sing dipopulerkan dening Nicolas Gallagher. Bisa uga digunakake minangka campuran.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Nuduhake lan ndhelikake isi
Meksa unsur ditampilake utawa didhelikake ( kalebu kanggo nonton layar ) karo nggunakake .showlan .hiddenkelas. Kelas kasebut digunakake !importantkanggo ngindhari konflik spesifik, kaya ngambang cepet . Padha mung kasedhiya kanggo toggling tingkat blok. Padha uga bisa digunakake minangka mixins.
.hidekasedhiya, nanging ora tansah mengaruhi nonton layar lan wis ora ana ing v3.0.1 . Gunakake .hiddenutawa .sr-onlytinimbang.
Salajengipun, .invisiblemung bisa digunakake kanggo ngalih visibilitas unsur, tegese displayora diowahi lan unsur kasebut isih bisa mengaruhi aliran dokumen kasebut.
<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();
}Konten pandhu arah layar maca lan keyboard
Singidaken unsur menyang kabeh piranti kajaba maca layar nganggo .sr-only. Gabung .sr-onlykaro .sr-only-focusablekanggo nuduhake unsur maneh nalika lagi fokus (contone dening pangguna keyboard-mung). Diperlukan kanggo ngetutake praktik paling apik aksesibilitas . Bisa uga digunakake minangka campuran.
<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();
}Panggantos gambar
Gunakake .text-hidekelas utawa mixin kanggo ngganti konten teks unsur kanthi gambar latar mburi.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Utilitas responsif
Kanggo pangembangan seluler sing luwih cepet, gunakake kelas utilitas iki kanggo nuduhake lan ndhelikake konten miturut piranti liwat pitakon media. Uga kalebu kelas sarana kanggo ngowahi isi nalika dicithak.
Coba gunakake iki kanthi winates lan aja nggawe versi sing beda-beda saka situs sing padha. Nanging, gunakake kanggo nglengkapi presentasi saben piranti.
Kelas kasedhiya
Gunakake siji utawa kombinasi saka kelas sing kasedhiya kanggo ngowahi isi ing titik breakpoint viewport.
| Piranti ekstra cilikTelpon (<768px) | Piranti cilikTablet (≥768px) | Piranti mediumDesktop (≥992px) | Piranti gedheDesktop (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Katon | didhelikake | didhelikake | didhelikake |
.visible-sm-* |
didhelikake | Katon | didhelikake | didhelikake |
.visible-md-* |
didhelikake | didhelikake | Katon | didhelikake |
.visible-lg-* |
didhelikake | didhelikake | didhelikake | Katon |
.hidden-xs |
didhelikake | Katon | Katon | Katon |
.hidden-sm |
Katon | didhelikake | Katon | Katon |
.hidden-md |
Katon | Katon | didhelikake | Katon |
.hidden-lg |
Katon | Katon | Katon | didhelikake |
Ing v3.2.0, .visible-*-*kelas kanggo saben breakpoint ana telung variasi, siji kanggo saben displaynilai properti CSS sing kapacak ing ngisor iki.
| Klompok kelas | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Dadi, kanggo layar ekstra cilik ( xs) contone, .visible-*-*kelas sing kasedhiya yaiku: .visible-xs-block, .visible-xs-inline, lan .visible-xs-inline-block.
Kelas .visible-xs, .visible-sm, .visible-md, lan .visible-lguga ana, nanging ora digunakake minangka v3.2.0 . Padha kira-kira padha karo .visible-*-block, kajaba karo kasus khusus tambahan kanggo <table>unsur-related toggling.
Kelas print
Kaya karo kelas responsif biasa, gunakake iki kanggo ngowahi isi kanggo dicithak.
| kelas | Browser | |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
didhelikake | Katon |
.hidden-print |
Katon | didhelikake |
Kelas kasebut .visible-printuga ana nanging ora digunakake wiwit v3.2.0. Iku kira-kira padha karo .visible-print-block, kajaba karo kasus khusus tambahan kanggo <table>unsur -related.
Kasus tes
Ganti ukuran browser utawa mbukak ing piranti beda kanggo nyoba kelas sarana responsif.
Katon ing...
Centhang ijo nuduhake unsur katon ing viewport sampeyan saiki.
Ekstra cilik
✔ Katon ing x-cilik
Cilik
✔ Katon ing cilik
Sedheng
✔ Katon ing medium
Gedhe
✔ Katon ing gedhe
✔ Katon ing x-cilik lan cilik
✔ Katon ing medium lan gedhe
✔ Katon ing x-cilik lan medium
✔ Katon ing cilik lan gedhe
✔ Katon ing x-cilik lan gedhe
✔ Katon ing cilik lan medium
Didhelikake ing ...
Ing kene, centhang ijo uga nuduhake unsur sing didhelikake ing viewport sampeyan saiki.
Nggunakake Kurang
CSS Bootstrap dibangun ing Kurang, preprocessor kanthi fungsi tambahan kaya variabel, campuran, lan fungsi kanggo kompilasi CSS. Sing pengin nggunakake sumber Kurang file tinimbang file CSS sing dikompilasi bisa nggunakake macem-macem variabel lan campuran sing digunakake ing saindhenging kerangka.
Variabel grid lan mixin katutup ing bagean sistem Grid .
Nglumpukake Bootstrap
Bootstrap bisa digunakake ing paling ora rong cara: karo CSS kompilasi utawa karo sumber Kurang file. Kanggo ngumpulake file Kurang, goleki bagean Miwiti babagan carane nyiyapake lingkungan pangembangan kanggo mbukak printah sing dibutuhake.
Piranti kompilasi pihak katelu bisa digunakake karo Bootstrap, nanging ora didhukung dening tim inti kita.
Variabel
Variabel digunakake ing kabeh proyek minangka cara kanggo sentralisasi lan nuduhake nilai sing umum digunakake kaya warna, spasi, utawa tumpukan font. Kanggo rincian lengkap, deleng Customizer .
werna-werna
Gampang nggunakake rong skema warna: skala abu-abu lan semantik. Werna grayscale nyedhiyakake akses cepet menyang werna ireng sing umum digunakake nalika semantik kalebu macem-macem werna sing ditugasake kanggo nilai kontekstual sing migunani.
@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;Gunakake variabel warna apa wae sing ana utawa ganti maneh menyang variabel sing luwih migunani kanggo proyek sampeyan.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Perancah
Sawetara variabel kanggo ngatur unsur-unsur kunci kerangka situs sampeyan kanthi cepet.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Pranala
Gaya pranala sampeyan kanthi gampang nganggo warna sing pas kanthi mung siji 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;
}
}Elinga yen @link-hover-colornggunakake fungsi, alat liyane apik tenan saka Kurang, kanggo otomatis nggawe werna hover tengen. Sampeyan bisa nggunakake darken, lighten, saturatelan desaturate.
Tipografi
Setel jinis huruf, ukuran teks, anjog, lan liya-liyane kanthi gampang kanthi sawetara variabel cepet. Bootstrap uga nggunakake iki kanggo nyedhiyakake campuran tipografi sing gampang.
@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;lambang
Loro variabel cepet kanggo ngatur lokasi lan jeneng file lambang sampeyan.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponen
Komponen ing Bootstrap nggunakake sawetara variabel standar kanggo nyetel nilai umum. Kene sing paling umum digunakake.
@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 minangka campuran kanggo mbantu ndhukung macem-macem browser kanthi nyakup kabeh prefiks vendor sing relevan ing CSS sing dikompilasi.
Ukuran kothak
Reset model kothak komponen karo mixin siji. Kanggo konteks, waca artikel migunani iki saka Mozilla .
Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake mixin internal nganti Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}sudhut bunder
Saiki kabeh browser modern ndhukung border-radiusproperti non-prefixed. Dadi, ora ana .border-radius()mixin, nanging Bootstrap kalebu trabasan kanggo cepet ngubengi rong sudhut ing sisih tartamtu saka obyek.
.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;
}Box (Drop) bayangan
Yen target pamirsa nggunakake browser lan piranti paling anyar lan paling anyar, mesthine mung nggunakake box-shadowproperti kasebut dhewe. Yen sampeyan butuh dhukungan kanggo piranti Android lawas (pra-v4) lan iOS (pra-iOS 5), gunakake mixin-webkit sing ora digunakake kanggo njupuk awalan sing dibutuhake .
Mixin wis ora digunakake minangka v3.1.0 , amarga Bootstrap ora resmi ndhukung platform lawas sing ora ndhukung properti standar. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake mixin internal nganti Bootstrap v4.
Pesthekake nggunakake rgba()werna ing bayangan kothak supaya bisa digabungake kanthi mulus karo latar mburi.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Transisi
Multiple mixins kanggo keluwesan. Setel kabeh informasi transisi nganggo siji, utawa nemtokake wektu tundha lan durasi sing kapisah yen perlu.
Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake campuran internal nganti 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
Puter, skala, terjemahake (pindhah), utawa skew obyek apa wae.
Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake campuran internal nganti 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 siji kanggo nggunakake kabeh properti animasi CSS3 ing siji deklarasi lan campuran liyane kanggo properti individu.
Mixin ora digunakake wiwit v3.2.0, kanthi introduksi Autoprefixer. Kanggo njaga kompatibilitas mundur, Bootstrap bakal terus nggunakake campuran internal nganti 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;
}Opacity
Setel opacity kanggo kabeh browser lan wenehake filtermundur kanggo IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Teks placeholder
Nyedhiyani konteks kanggo kontrol formulir ing saben lapangan.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Kolom
Nggawe kolom liwat CSS ing siji unsur.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Gradien
Gampang ngowahi rong warna dadi gradien latar mburi. Luwih maju lan atur arah, gunakake telung warna, utawa gunakake gradien radial. Kanthi mixin siji sampeyan entuk kabeh sintaks prefix sing dibutuhake.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Sampeyan uga bisa nemtokake amba saka rong werna standar, gradien linear:
#gradient > .directional(#333; #000; 45deg);Yen sampeyan butuh gradien gaya barber-stripe, uga gampang. Mung nemtokake siji werna lan kita bakal overlay belang putih tembus.
#gradient > .striped(#333; 45deg);Nganti ante lan nggunakake telung werna tinimbang. Setel werna pisanan, werna kapindho, werna mandheg warna kapindho (nilai persentase kaya 25%), lan werna katelu kanthi campuran iki:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Kepala munggah! Yen sampeyan kudu mbusak gradien, pesthekake mbusak sembarang IE-spesifik filtersing bisa ditambahake. Sampeyan bisa nindakake kanthi nggunakake .reset-filter()mixin bebarengan background-image: none;.
Campuran Utilitas
Mixin utilitas minangka campuran sing nggabungake sifat CSS sing ora ana hubungane kanggo nggayuh tujuan utawa tugas tartamtu.
Clearfix
Lali nambahake class="clearfix"unsur apa wae lan tambahake .clearfix()mixin yen cocog. Nggunakake micro clearfix saka Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Pusat horisontal
Cepet pusatake unsur apa wae ing induke. Mbutuhake widthutawa max-widthdisetel.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Pembantu ukuran
Nemtokake dimensi obyek kanthi luwih gampang.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Area teks sing bisa diowahi ukurane
Gampang ngatur opsi ngowahi ukuran kanggo sembarang textarea, utawa unsur liyane. Default kanggo prilaku browser normal ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Ngilangi teks
Cut teks kanthi gampang nganggo elipsis kanthi campuran siji. Mbutuhake unsur dadi blockutawa inline-blocklevel.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Gambar retina
Nemtokake rong jalur gambar lan dimensi gambar @1x, lan Bootstrap bakal menehi pitakon media @2x. Yen sampeyan duwe akeh gambar sing kudu dilayani, coba nulis CSS gambar retina kanthi manual ing query media siji.
.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);
}Nggunakake Sass
Nalika Bootstrap dibangun ing Kurang, uga duwe port Sass resmi . Kita njaga ing repositori GitHub sing kapisah lan nangani nganyari nganggo skrip konversi.
Apa sing kalebu
Wiwit port Sass duwe repo sing kapisah lan nglayani pamirsa sing rada beda, isi proyek kasebut beda banget karo proyek Bootstrap utama. Iki njamin port Sass minangka kompatibel karo akeh sistem basis Sass sabisa.
| Path | Katrangan |
|---|---|
lib/ |
Kode permata Ruby (konfigurasi Sass, integrasi Rails lan Kompas) |
tasks/ |
Skrip konverter (ngowahi hulu Kurang dadi Sass) |
test/ |
Tes kompilasi |
templates/ |
Manifes paket kompas |
vendor/assets/ |
Sass, JavaScript, lan file font |
Rakefile |
Tugas internal, kayata rake lan ngowahi |
Dolan maring repositori GitHub port Sass kanggo ndeleng file kasebut tumindak.
Instalasi
Kanggo informasi babagan carane nginstal lan nggunakake Bootstrap kanggo Sass, deleng repositori GitHub readme . Iki minangka sumber paling anyar lan kalebu informasi sing bisa digunakake karo proyek Rails, Kompas, lan Sass standar.