CSS
Awọn eto CSS agbaye, awọn eroja HTML ti o ṣe aṣa ati imudara pẹlu awọn kilasi extensible, ati eto akoj to ti ni ilọsiwaju.
Awọn eto CSS agbaye, awọn eroja HTML ti o ṣe aṣa ati imudara pẹlu awọn kilasi extensible, ati eto akoj to ti ni ilọsiwaju.
Gba kekere isalẹ lori awọn ege bọtini ti awọn amayederun Bootstrap, pẹlu ọna wa lati dara julọ, yiyara, idagbasoke wẹẹbu ti o lagbara.
Bootstrap ṣe lilo awọn eroja HTML kan ati awọn ohun-ini CSS ti o nilo lilo HTML5 doctype. Fi sii ni ibẹrẹ ti gbogbo awọn iṣẹ akanṣe rẹ.
<!DOCTYPE html>
<html lang="en">
...
</html>
Pẹlu Bootstrap 2, a ṣafikun awọn aza ore alagbeka iyan fun awọn aaye pataki ti ilana naa. Pẹlu Bootstrap 3, a ti tun kọ iṣẹ akanṣe lati jẹ ọrẹ alagbeka lati ibẹrẹ. Dipo ti fifi lori iyan mobile aza, ti won n yan ọtun sinu mojuto. Ni otitọ, Bootstrap jẹ alagbeka akọkọ . Mobile akọkọ aza le ṣee ri jakejado gbogbo ìkàwé dipo ti ni lọtọ awọn faili.
Lati rii daju imudara to dara ati fifọwọkan sun-un, ṣafikun ami ami oju-irin wiwo si faili <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
O le mu awọn agbara sisun ṣiṣẹ lori awọn ẹrọ alagbeka nipa fifi kun user-scalable=no
si tag meta wiwo. Eyi ṣe idiwọ sisun-un, afipamo pe awọn olumulo ni anfani lati yi lọ, ati awọn abajade ni rilara aaye rẹ diẹ sii bi ohun elo abinibi. Iwoye, a ko ṣeduro eyi lori gbogbo aaye, nitorina lo iṣọra!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap ṣeto ifihan ipilẹ agbaye, iwe kikọ, ati awọn ọna ọna asopọ. Ni pato, awa:
background-color: #fff;
loribody
@font-family-base
, @font-size-base
, ati @line-height-base
awọn abuda bi ipilẹ afọwọṣe wa@link-color
ati lo awọn laini ọna asopọ nikan lori:hover
Awọn aṣa wọnyi le wa laarin scaffolding.less
.
Fun imudarasi lilọ kiri lori ayelujara, a lo Normalize.css , iṣẹ akanṣe nipasẹ Nicolas Gallagher ati Jonathan Neal .
Bootstrap nilo eroja ti o ni ninu lati fi ipari si awọn akoonu aaye ati ile eto akoj wa. O le yan ọkan ninu awọn apoti meji lati lo ninu awọn iṣẹ akanṣe rẹ. Ṣe akiyesi pe, nitori padding
ati diẹ sii, ko si eiyan ko jẹ itẹlọrun.
Lo .container
fun a idahun ti o wa titi iwọn eiyan.
<div class="container">
...
</div>
Lo .container-fluid
fun eiyan iwọn ni kikun, ti o kan gbogbo iwọn ti iwoye rẹ.
<div class="container-fluid">
...
</div>
Bootstrap pẹlu idahun kan, ẹrọ agbewọle akọkọ akoj ito omi ti o ṣe iwọn deede to awọn ọwọn 12 bi ẹrọ tabi iwọn wiwo n pọ si. O pẹlu awọn kilasi ti a ti sọ tẹlẹ fun awọn aṣayan akọkọ ti o rọrun, bakanna bi awọn apopọ ti o lagbara fun ti ipilẹṣẹ awọn ipalemo atunmọ diẹ sii .
Awọn ọna ṣiṣe akoj ni a lo fun ṣiṣẹda awọn ipilẹ oju-iwe nipasẹ lẹsẹsẹ awọn ori ila ati awọn ọwọn ti o gbe akoonu rẹ sinu. Eyi ni bii eto grid Bootstrap ṣe n ṣiṣẹ:
.container
(iwọn ti o wa titi) tabi .container-fluid
(iwọn ni kikun) fun titete daradara ati fifẹ..row
ati .col-xs-4
pe o wa fun ṣiṣe awọn ipilẹ akoj ni kiakia. Awọn alapọpọ ti o kere si tun le ṣee lo fun awọn ipilẹ atunmọ diẹ sii.padding
. Padding yẹn jẹ aiṣedeede ni awọn ori ila fun iwe akọkọ ati ti o kẹhin nipasẹ ala odi lori .row
s..col-xs-4
..col-md-*
kilasi si ipin kii yoo ni ipa lori aṣa rẹ nikan lori awọn ẹrọ alabọde ṣugbọn tun lori awọn ẹrọ nla ti .col-lg-*
kilasi ko ba wa.Wo awọn apẹẹrẹ fun lilo awọn ilana wọnyi si koodu rẹ.
A lo awọn ibeere media atẹle ni awọn faili Kere wa lati ṣẹda awọn aaye fifọ bọtini ninu eto akoj wa.
/* 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) { ... }
Lẹẹkọọkan a faagun lori awọn ibeere media wọnyi lati ṣafikun kan max-width
lati fi opin si CSS si eto awọn ẹrọ ti o dín.
@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) { ... }
Wo bii awọn abala ti eto akoj Bootstrap ṣe n ṣiṣẹ kọja awọn ẹrọ lọpọlọpọ pẹlu tabili ọwọ.
Awọn ẹrọ foonu kekere afikun (<768px) | Awọn tabulẹti Awọn ẹrọ kekere (≥768px) | Awọn tabili itẹwe alabọde (≥992px) | Awọn kọǹpútà alágbèéká nla (≥1200px) | |
---|---|---|---|---|
Iwa akoj | Petele ni gbogbo igba | Ti kọlu lati bẹrẹ, petele loke awọn aaye fifọ | ||
Apoti iwọn | Ko si (laifọwọyi) | 750px | 970px | 1170px |
Ipilẹṣẹ kilasi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# ti awọn ọwọn | 12 | |||
Iwọn ọwọn | Aifọwọyi | ~ 62px | ~81px | ~97px |
Ibú gota | 30px (15px ni ẹgbẹ kọọkan ti iwe kan) | |||
Idurosinsin | Bẹẹni | |||
Awọn aiṣedeede | Bẹẹni | |||
Pipaṣẹ iwe | Bẹẹni |
Lilo eto kan ti .col-md-*
awọn kilasi akoj, o le ṣẹda eto akoj ipilẹ kan ti o bẹrẹ ni tolera lori awọn ẹrọ alagbeka ati awọn ẹrọ tabulẹti (afikun kekere si iwọn kekere) ṣaaju ki o to di petele lori tabili tabili (alabọde) awọn ẹrọ. Gbe awọn ọwọn akoj sinu eyikeyi .row
.
<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>
Yipada ifilelẹ-iwọn akoj ti o wa titi sinu ifilelẹ iwọn ni kikun nipa yiyipada ita rẹ .container
si .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Ṣe o ko fẹ ki awọn ọwọn rẹ ni akopọ ni awọn ẹrọ kekere bi? Lo afikun kekere ati alabọde awọn kilasi akoj ẹrọ nipa fifi kun .col-xs-*
.col-md-*
si awọn ọwọn rẹ. Wo apẹẹrẹ ni isalẹ fun imọran ti o dara julọ ti bii gbogbo rẹ ṣe n ṣiṣẹ.
<!-- 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>
Kọ sori apẹẹrẹ ti tẹlẹ nipa ṣiṣẹda paapaa agbara diẹ sii ati awọn ipalemo ti o lagbara pẹlu awọn .col-sm-*
kilasi tabulẹti.
<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>
Ti o ba ju awọn ọwọn 12 ti a gbe laarin ila kan, ẹgbẹ kọọkan ti awọn ọwọn afikun yoo, bi ẹyọkan, fi ipari si laini tuntun kan.
<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>
Pẹlu awọn ipele mẹrin ti awọn grids ti o wa o ni adehun lati ṣiṣẹ sinu awọn ọran nibiti, ni awọn aaye fifọ kan, awọn ọwọn rẹ ko ṣalaye ni deede bi ọkan ṣe ga ju ekeji lọ. Lati ṣatunṣe iyẹn, lo apapo kan .clearfix
ati awọn kilasi ohun elo ti o ṣe idahun .
<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>
Ni afikun si piparẹ ọwọn ni awọn aaye fifọ idahun, o le nilo lati tun awọn aiṣedeede, titari, tabi fa . Wo eyi ni iṣe ni apẹẹrẹ akoj .
<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>
Gbe awọn ọwọn si ọtun nipa lilo .col-md-offset-*
awọn kilasi. Awọn kilasi wọnyi ṣe alekun ala osi ti iwe kan nipasẹ *
awọn ọwọn. Fun apẹẹrẹ, .col-md-offset-4
gbigbe .col-md-4
lori awọn ọwọn mẹrin.
<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>
O tun le fagilee awọn aiṣedeede lati awọn ipele akoj kekere pẹlu .col-*-offset-0
awọn kilasi.
<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>
Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .row
ati ṣeto awọn .col-sm-*
ọwọn laarin iwe to wa tẹlẹ .col-sm-*
. Awọn ori ila ti o wa ni itẹ-ẹiyẹ yẹ ki o ni akojọpọ awọn ọwọn ti o fi kun si 12 tabi diẹ (ko nilo pe ki o lo gbogbo awọn ọwọn 12 ti o wa).
<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>
Ni irọrun yipada aṣẹ ti awọn ọwọn akoj ti a ṣe sinu pẹlu .col-md-push-*
ati .col-md-pull-*
awọn kilasi iyipada.
<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>
Ni afikun si awọn kilasi akoj ti a ti kọ tẹlẹ fun awọn ipalemo yara, Bootstrap pẹlu awọn oniyipada Kere ati awọn alapọpọ fun ṣiṣẹda irọrun tirẹ, awọn ipilẹ atunmọ.
Awọn oniyipada pinnu nọmba awọn ọwọn, ibú gota, ati aaye ibeere media ni eyiti yoo bẹrẹ awọn ọwọn lilefoofo. A lo iwọnyi lati ṣe ipilẹṣẹ awọn kilasi akoj ti a ti sọ tẹlẹ ti o ni akọsilẹ loke, ati fun awọn alapọpọ aṣa ti a ṣe akojọ si isalẹ.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Awọn Mixins ni a lo ni apapo pẹlu awọn oniyipada akoj lati ṣe ipilẹṣẹ CSS atunmọ fun awọn ọwọn akoj kọọkan.
// 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));
}
}
O le ṣe atunṣe awọn oniyipada si awọn iye aṣa tirẹ, tabi lo awọn alapọpọ pẹlu awọn iye aiyipada wọn. Eyi ni apẹẹrẹ ti lilo awọn eto aiyipada lati ṣẹda ifilelẹ iwe-meji pẹlu aafo laarin.
.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>
Gbogbo awọn akọle HTML, <h1>
nipasẹ <h6>
, wa. .h1
nipasẹ .h6
awọn kilasi tun wa, fun nigba ti o ba fẹ lati baramu iselona fonti ti akọle ṣugbọn tun fẹ ki ọrọ rẹ han laini.
h1. Bootstrap akori |
Semibold 36px |
h2. Bootstrap akori |
Semibold 30px |
h3. Bootstrap akori |
Semibold 24px |
h4. Bootstrap akori |
Semibold 18px |
h5. Bootstrap akori |
Semibold 14px |
h6. Bootstrap akori |
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>
Ṣẹda fẹẹrẹfẹ, ọrọ keji ni eyikeyi akọle pẹlu aami jeneriki <small>
tabi .small
kilasi naa.
h1. Bootstrap akọle ọrọ Atẹle |
h2. Bootstrap akọle ọrọ Atẹle |
h3. Bootstrap akọle ọrọ Atẹle |
h4. Bootstrap akọle ọrọ Atẹle |
h5. Bootstrap akọle ọrọ Atẹle |
h6. Bootstrap akọle ọrọ Atẹle |
<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>
Aiyipada agbaye ti Bootstrap font-size
jẹ 14px , pẹlu kan line-height
ti 1.428 . Eyi ni a lo si <body>
ati gbogbo awọn paragira. Ni afikun, <p>
(awọn paragira) gba ala isale ti idaji giga ila-iṣiro wọn (10px nipasẹ aiyipada).
Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla ti kii metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla ti kii metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet ti kii magna. Donec id elit ti kii mi porta gravida ati eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Ṣe paragira kan duro jade nipa fifi kun .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est ti kii commodo luctus.
<p class="lead">...</p>
Iwọn ikọwe da lori awọn oniyipada Kere meji ni awọn oniyipada.less : @font-size-base
ati @line-height-base
. Ni igba akọkọ ti ni awọn mimọ-iwọn font lo jakejado ati awọn keji ni awọn mimọ ila-giga. A lo awọn oniyipada wọnyẹn ati awọn iṣiro ti o rọrun lati ṣẹda awọn ala, awọn paddings, ati awọn giga laini ti gbogbo iru wa ati diẹ sii. Ṣe akanṣe wọn ati awọn aṣamubadọgba Bootstrap.
Fun fifi aami ṣiṣe ọrọ silẹ nitori ibaramu rẹ ni aaye miiran, lo <mark>
tag naa.
O le lo aami aami sisaamiọrọ.
You can use the mark tag to <mark>highlight</mark> text.
Fun afihan awọn bulọọki ọrọ ti o ti paarẹ lo <del>
tag naa.
Laini ọrọ yii jẹ itumọ lati ṣe itọju bi ọrọ paarẹ.
<del>This line of text is meant to be treated as deleted text.</del>
Fun afihan awọn bulọọki ọrọ ti ko wulo mọ lo <s>
tag naa.
Laini ọrọ yii jẹ itumọ lati ṣe itọju bi ko ṣe deede mọ.
<s>This line of text is meant to be treated as no longer accurate.</s>
Fun afihan awọn afikun si iwe-ipamọ lo <ins>
tag.
Laini ọrọ yii jẹ itumọ lati ṣe itọju bi afikun si iwe-ipamọ naa.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Lati salẹ ọrọ lo <u>
tag.
Laini ọrọ yii yoo ṣe bi a ti ṣe abẹlẹ
<u>This line of text will render as underlined</u>
Ṣe lilo awọn afi tcnu aiyipada HTML pẹlu awọn aza iwuwo fẹẹrẹ.
Fun tẹnumọ opopo tabi awọn bulọọki ọrọ, lo <small>
tag lati ṣeto ọrọ ni 85% iwọn ti obi. Awọn eroja akọle gba tiwọn font-size
fun awọn <small>
eroja itẹ-ẹiyẹ.
O le lo opopo ano pẹlu .small
ni aaye eyikeyi <small>
.
Laini ọrọ yii jẹ itumọ lati ṣe itọju bi titẹjade itanran.
<small>This line of text is meant to be treated as fine print.</small>
Fun tẹnumọ snippet ti ọrọ kan pẹlu iwuwo fonti ti o wuwo.
Apejuwe ọrọ ti o tẹle yii jẹ itumọ bi ọrọ igboya .
<strong>rendered as bold text</strong>
Fun tẹnumọ snippet ti ọrọ pẹlu awọn italics.
Abọ ọrọ ti o tẹle yii jẹ jijẹ bi ọrọ italicized .
<em>rendered as italicized text</em>
Lero ọfẹ lati lo <b>
ati <i>
ni HTML5. <b>
Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki lakoko <i>
ti o jẹ pupọ julọ fun ohun, awọn ofin imọ-ẹrọ, ati bẹbẹ lọ.
Ni irọrun ṣe atunṣe ọrọ si awọn paati pẹlu awọn kilasi titete ọrọ.
Ọrọ ti o ni ibamu si apa osi.
Ọrọ ti o ni ibamu si aarin.
Ọrọ ti o ni ibamu si ọtun.
Ọrọ idalare.
Ko si ọrọ ipari.
<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>
Yi ọrọ pada ni awọn paati pẹlu awọn kilasi titobi ọrọ.
Ọrọ isale.
Ọrọ ti o ni oke.
Ọrọ ti o tobi.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Imuse aṣa ti ẹya HTML <abbr>
fun awọn kuru ati awọn adape lati ṣafihan ẹya ti o gbooro lori rababa. Awọn kuru pẹlu abuda kan title
ni aala isale ti o ni ina ati kọsọ iranlọwọ lori rababa, pese aaye afikun lori rababa ati si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.
An abbreviation ti ọrọ ikalara ni attr .
<abbr title="attribute">attr</abbr>
Ṣafikun .initialism
si abbreviation fun iwọn fonti kekere diẹ.
HTML jẹ ohun ti o dara julọ niwon akara ti a ge wẹwẹ.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Pese alaye olubasọrọ fun baba ti o sunmọ tabi gbogbo ara iṣẹ. Ṣetọju ọna kika nipa ipari gbogbo awọn ila pẹlu <br>
.
<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>
Fun sisọ awọn bulọọki akoonu lati orisun miiran laarin iwe rẹ.
Fi ipari si <blockquote>
eyikeyi HTML bi agbasọ. Fun awọn agbasọ ọrọ taara, a ṣeduro <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Ara ati akoonu yipada fun awọn iyatọ ti o rọrun lori boṣewa kan <blockquote>
.
Fi kan <footer>
fun idamo awọn orisun. Fi orukọ iṣẹ orisun sinu <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odidi posuere erat a 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>
Ṣafikun .blockquote-reverse
fun blockquote kan pẹlu akoonu ti o somọ ọtun.
<blockquote class="blockquote-reverse">
...
</blockquote>
Atokọ awọn ohun kan ninu eyiti aṣẹ ko ṣe pataki.
<ul>
<li>...</li>
</ul>
Atokọ awọn ohun kan ninu eyiti aṣẹ naa ṣe pataki.
<ol>
<li>...</li>
</ol>
Yọ aiyipada list-style
ati ala osi lori awọn ohun akojọ (awọn ọmọde lẹsẹkẹsẹ nikan). Eleyi nikan kan si awọn ọmọ lẹsẹkẹsẹ akojọ awọn ohun , afipamo pe o yoo nilo lati fi awọn kilasi fun eyikeyi itẹ-ẹiyẹ awọn akojọ bi daradara.
<ul class="list-unstyled">
<li>...</li>
</ul>
Fi gbogbo awọn ohun akojọ sori laini kan pẹlu display: inline-block;
ati diẹ ninu padding ina.
<ul class="list-inline">
<li>...</li>
</ul>
Atokọ awọn ofin pẹlu awọn apejuwe ti o somọ wọn.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Ṣe awọn ofin ati awọn apejuwe ni <dl>
ila ni ẹgbẹ-ẹgbẹ. Bẹrẹ ni pipa tolera bi aiyipada <dl>
s, ṣugbọn nigbati navbar gbooro, bẹ ṣe awọn wọnyi.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Awọn atokọ apejuwe petele yoo ge awọn ọrọ ti o gun ju lati baamu ni iwe osi pẹlu text-overflow
. Ni awọn ibudo wiwo ti o dín, wọn yoo yipada si ipilẹ tolera aiyipada.
Pa awọn snippets inline ti koodu pẹlu <code>
.
<section>
yẹ ki o wa ni ti a we bi inline.
For example, <code><section></code> should be wrapped as inline.
Lo <kbd>
lati tọka titẹ sii ti o jẹ igbagbogbo titẹ nipasẹ keyboard.
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>
Lo <pre>
fun ọpọ ila ti koodu. Rii daju pe o sa fun eyikeyi awọn biraketi igun ninu koodu fun ṣiṣe deede.
<p>Apeere ọrọ nibi...</p>
<pre><p>Sample text here...</p></pre>
O le ṣe afikun .pre-scrollable
kilaasi ni yiyan, eyiti yoo ṣeto giga-giga ti 350px ati pese ọpa lilọ-y-axis kan.
Fun afihan awọn oniyipada lo <var>
tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Fun afihan awọn bulọọki awọn abajade ayẹwo lati inu eto kan lo <samp>
tag.
Ọrọ yii jẹ itumọ lati ṣe itọju bi abajade ayẹwo lati inu eto kọnputa kan.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Fun iselona ipilẹ — fifẹ ina ati awọn ipin petele nikan — ṣafikun kilasi ipilẹ .table
si eyikeyi <table>
. O le dabi ohun ti o pọju, ṣugbọn fun lilo awọn tabili ni ibigbogbo fun awọn afikun miiran bi awọn kalẹnda ati awọn oluyan ọjọ, a ti yọ kuro lati ya sọtọ awọn aza tabili aṣa wa.
# | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
---|---|---|---|
1 | Samisi | Otto | @mdo |
2 | Jakobu | Thornton | @sanra |
3 | Larry | Eye |
<table class="table">
...
</table>
Lo .table-striped
lati ṣafikun abila-fikun si ori ila tabili eyikeyi laarin <tbody>
.
Awọn tabili ti o ya ni aṣa nipasẹ :nth-child
yiyan CSS, eyiti ko si ni Internet Explorer 8.
# | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
---|---|---|---|
1 | Samisi | Otto | @mdo |
2 | Jakobu | Thornton | @sanra |
3 | Larry | Eye |
<table class="table table-striped">
...
</table>
Fi kun .table-bordered
fun awọn aala lori gbogbo awọn ẹgbẹ ti tabili ati awọn sẹẹli.
# | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
---|---|---|---|
1 | Samisi | Otto | @mdo |
2 | Jakobu | Thornton | @sanra |
3 | Larry | Eye |
<table class="table table-bordered">
...
</table>
Fikun -un .table-hover
lati mu ipo fifin ṣiṣẹ lori awọn ori ila tabili laarin faili kan <tbody>
.
# | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
---|---|---|---|
1 | Samisi | Otto | @mdo |
2 | Jakobu | Thornton | @sanra |
3 | Larry | Eye |
<table class="table table-hover">
...
</table>
Fikun -un .table-condensed
lati ṣe awọn tabili ni iwapọ diẹ sii nipa gige fifẹ sẹẹli ni idaji.
# | Orukọ akọkọ | Oruko idile | Orukọ olumulo |
---|---|---|---|
1 | Samisi | Otto | @mdo |
2 | Jakobu | Thornton | @sanra |
3 | Larry Eye |
<table class="table table-condensed">
...
</table>
Lo awọn kilasi ọrọ-ọrọ lati ṣe awọ awọn ori ila tabili tabi awọn sẹẹli kọọkan.
Kilasi | Apejuwe |
---|---|
.active |
Waye awọ rababa si ọna kan tabi sẹẹli kan |
.success |
Tọkasi aṣeyọri tabi iṣe rere |
.info |
Ṣe afihan iyipada alaye didoju tabi iṣe |
.warning |
Tọkasi ikilọ ti o le nilo akiyesi |
.danger |
Tọkasi iṣẹ ti o lewu tabi agbara odi |
# | Akọle ọwọn | Akọle ọwọn | Akọle ọwọn |
---|---|---|---|
1 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
2 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
3 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
4 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
5 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
6 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
7 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
8 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
9 | Akoonu iwe | Akoonu iwe | Akoonu iwe |
<!-- 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>
Lilo awọ lati ṣafikun itumo si laini tabili tabi sẹẹli kọọkan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (ọrọ ti o han ninu laini tabili ti o yẹ), tabi ti o wa nipasẹ awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-only
kilasi naa.
Ṣẹda awọn tabili idahun nipa yiyi eyikeyi .table
sinu .table-responsive
lati jẹ ki wọn yi lọ ni ita lori awọn ẹrọ kekere (labẹ 768px). Nigbati o ba nwo lori ohunkohun ti o tobi ju 768px fife, iwọ kii yoo ri iyatọ eyikeyi ninu awọn tabili wọnyi.
Awọn tabili idahun ṣe lilo overflow-y: hidden
, eyi ti awọn agekuru kuro ni eyikeyi akoonu ti o lọ kọja isalẹ tabi awọn egbegbe oke ti tabili. Ni pataki, eyi le ge awọn akojọ aṣayan silẹ ati awọn ẹrọ ailorukọ ẹnikẹta miiran.
Firefox ni diẹ ninu eto iselona aaye airọrun ti o kan eyiti width
o dabaru pẹlu tabili idahun. Eyi ko le fagile laisi gige-pato Firefox kan ti a ko pese ni Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
Fun alaye diẹ sii, ka idahun Stack Overflow yii .
# | Tabili akori | Tabili akori | Tabili akori | Tabili akori | Tabili akori | Tabili akori |
---|---|---|---|---|---|---|
1 | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell |
2 | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell |
3 | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell |
# | Tabili akori | Tabili akori | Tabili akori | Tabili akori | Tabili akori | Tabili akori |
---|---|---|---|---|---|---|
1 | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell |
2 | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell |
3 | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell | Tabili cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Awọn iṣakoso fọọmu kọọkan gba laifọwọyi diẹ ninu iselona agbaye. Gbogbo ọrọ ọrọ <input>
, <textarea>
, ati <select>
awọn eroja pẹlu .form-control
ti ṣeto si width: 100%;
nipasẹ aiyipada. Fi ipari si awọn aami ati awọn idari .form-group
fun aye to dara julọ.
<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>
Maṣe dapọ awọn ẹgbẹ fọọmu taara pẹlu awọn ẹgbẹ titẹ sii . Dipo, itẹ-ẹiyẹ ẹgbẹ titẹ sii inu ẹgbẹ fọọmu naa.
Ṣafikun -un .form-inline
si fọọmu rẹ (eyiti ko ni lati jẹ a <form>
) fun titọ-apa osi ati awọn idari-idina laini. Eyi kan nikan si awọn fọọmu laarin awọn oju wiwo ti o kere ju 768px fife.
Awọn igbewọle ati yiyan ti width: 100%;
lo nipasẹ aiyipada ni Bootstrap. Laarin awọn fọọmu inline, a tunto iyẹn si width: auto;
ki awọn idari pupọ le gbe lori laini kanna. Da lori ifilelẹ rẹ, afikun awọn iwọn aṣa le nilo.
Awọn oluka iboju yoo ni wahala pẹlu awọn fọọmu rẹ ti o ko ba pẹlu aami kan fun gbogbo igbewọle. Fun awọn fọọmu inline, o le tọju awọn akole ni lilo .sr-only
kilasi naa. Awọn ọna omiiran siwaju wa ti ipese aami fun awọn imọ-ẹrọ iranlọwọ, gẹgẹbi awọn aria-label
, aria-labelledby
tabi title
eefa. Ti ko ba si ọkan ninu iwọnyi ti o wa, awọn oluka iboju le lo abuda naa placeholder
, ti o ba wa, ṣugbọn ṣe akiyesi lilo placeholder
bi aropo fun awọn ọna isamisi miiran ko ni imọran.
<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>
Lo awọn kilasi akoj ti a ti sọ tẹlẹ ti Bootstrap lati ṣe afiwe awọn aami ati awọn ẹgbẹ ti awọn iṣakoso fọọmu ni ipilẹ petele kan nipa fifi kun .form-horizontal
si fọọmu naa (eyiti ko ni lati jẹ a <form>
). Ṣiṣe bẹ yipada .form-group
s lati huwa bi awọn ori ila akoj, nitorinaa ko nilo fun .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>
Awọn apẹẹrẹ ti awọn iṣakoso fọọmu boṣewa ni atilẹyin ni ipilẹ fọọmu apẹẹrẹ.
Iṣakoso fọọmu ti o wọpọ julọ, awọn aaye igbewọle orisun-ọrọ. Pẹlu atilẹyin fun gbogbo awọn iru HTML5: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, ati color
.
Awọn igbewọle yoo jẹ aṣa ni kikun nikan ti wọn ba type
jẹ ikede daradara.
<input type="text" class="form-control" placeholder="Text input">
Lati ṣafikun ọrọ iṣọpọ tabi awọn bọtini ṣaaju ati/tabi lẹhin orisun-ọrọ eyikeyi <input>
, ṣayẹwo paati ẹgbẹ titẹ sii .
Iṣakoso fọọmu eyiti o ṣe atilẹyin awọn laini pupọ ti ọrọ. Yi rows
eroja pada bi o ṣe pataki.
<textarea class="form-control" rows="3"></textarea>
Awọn apoti ayẹwo jẹ fun yiyan ọkan tabi pupọ awọn aṣayan ninu atokọ kan, lakoko ti awọn redio wa fun yiyan aṣayan kan lati ọpọlọpọ.
Awọn apoti ayẹwo alaabo ati awọn redio ni atilẹyin, ṣugbọn lati pese kọsọ “ko gba laaye” lori gbigbe obi <label>
, iwọ yoo nilo lati ṣafikun .disabled
kilasi naa si obi .radio
, .radio-inline
, .checkbox
, tabi .checkbox-inline
.
<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>
Lo .checkbox-inline
tabi .radio-inline
awọn kilasi lori lẹsẹsẹ awọn apoti ayẹwo tabi awọn redio fun awọn idari ti o han loju laini kanna.
<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>
Ti o ko ba ni ọrọ laarin <label>
, titẹ sii wa ni ipo bi o ṣe reti. Lọwọlọwọ ṣiṣẹ nikan lori awọn apoti ayẹwo ti kii ṣe inline ati awọn redio. Ranti lati tun pese iru aami kan fun awọn imọ-ẹrọ iranlọwọ (fun apẹẹrẹ, lilo 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>
Ṣe akiyesi pe ọpọlọpọ awọn akojọ aṣayan abinibi-eyun ni Safari ati Chrome-ni awọn igun yika ti ko le ṣe atunṣe nipasẹ border-radius
awọn ohun-ini.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Fun <select>
awọn idari pẹlu multiple
abuda, awọn aṣayan pupọ yoo han nipasẹ aiyipada.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Nigba ti o ba nilo lati gbe ọrọ itele ti o tẹle si aami fọọmu laarin fọọmu kan, lo .form-control-static
kilasi naa lori faili <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>
A yọ awọn outline
aṣa aiyipada kuro lori diẹ ninu awọn iṣakoso fọọmu ati lo kan box-shadow
ni aaye rẹ fun :focus
.
:focus
ipinleIṣagbewọle apẹẹrẹ ti o wa loke nlo awọn aṣa aṣa ninu iwe wa lati ṣe afihan :focus
ipinlẹ lori faili .form-control
.
Ṣafikun disabled
abuda Boolean lori titẹ sii lati ṣe idiwọ awọn ibaraẹnisọrọ olumulo. Awọn igbewọle alaabo han fẹẹrẹfẹ ati fi not-allowed
kọsọ kan kun.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Fi awọn disabled
abuda to a <fieldset>
lati mu gbogbo awọn idari laarin awọn <fieldset>
ni ẹẹkan.
<a>
Nipa aiyipada, awọn aṣawakiri yoo tọju gbogbo awọn iṣakoso fọọmu abinibi ( <input>
, <select>
ati <button>
awọn eroja) inu <fieldset disabled>
bi alaabo, idilọwọ mejeeji awọn ibaraẹnisọrọ keyboard ati Asin lori wọn. Sibẹsibẹ, ti fọọmu rẹ tun pẹlu <a ... class="btn btn-*">
awọn eroja, iwọnyi yoo fun ni ara ti pointer-events: none
. Gẹgẹbi a ti ṣe akiyesi ni apakan nipa ipo alaabo fun awọn bọtini (ati ni pataki ni apakan apakan fun awọn eroja oran), ohun-ini CSS yii ko tii diwọn ati pe ko ni atilẹyin ni kikun ni Opera 18 ati ni isalẹ, tabi ni Internet Explorer 11, o si bori. 't ṣe idiwọ awọn olumulo keyboard lati ni anfani si idojukọ tabi mu awọn ọna asopọ wọnyi ṣiṣẹ. Nitorinaa lati wa ni ailewu, lo JavaScript aṣa lati mu iru awọn ọna asopọ ṣiṣẹ.
Lakoko ti Bootstrap yoo lo awọn aṣa wọnyi ni gbogbo awọn aṣawakiri, Internet Explorer 11 ati ni isalẹ ko ṣe atilẹyin disabled
ẹya ni kikun lori faili <fieldset>
. Lo JavaScript ti aṣa lati mu eto aaye kuro ninu awọn aṣawakiri wọnyi.
<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>
Ṣafikun readonly
abuda Boolean lori titẹ sii lati yago fun iyipada iye titẹ sii. Awọn igbewọle kika-nikan han fẹẹrẹfẹ (gẹgẹbi awọn igbewọle alaabo), ṣugbọn mu kọsọ boṣewa duro.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Dina ipele iranlọwọ ọrọ fun fọọmu idari.
Ọrọ iranlọwọ yẹ ki o ni nkan ṣe ni gbangba pẹlu iṣakoso fọọmu ti o nii ṣe pẹlu lilo abuda naa aria-describedby
. Eyi yoo rii daju pe awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju - yoo kede ọrọ iranlọwọ yii nigbati olumulo ba dojukọ tabi wọ inu iṣakoso naa.
<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>
Bootstrap pẹlu awọn ara afọwọsi fun aṣiṣe, ikilọ, ati awọn ipinlẹ aṣeyọri lori awọn iṣakoso fọọmu. Lati lo, ṣafikun .has-warning
, .has-error
, tabi .has-success
si nkan obi. Eyikeyi .control-label
, .form-control
, ati .help-block
laarin nkan naa yoo gba awọn aza afọwọsi.
Lilo awọn aza afọwọsi wọnyi lati ṣe afihan ipo iṣakoso fọọmu nikan n pese wiwo, itọkasi orisun-awọ, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju - tabi si awọn olumulo afọju.
Rii daju pe itọkasi ipo miiran ti tun pese. Fun apẹẹrẹ, o le ni itọka kan nipa ipinlẹ ninu ọrọ iṣakoso fọọmu <label>
funrararẹ (gẹgẹbi ọran ninu apẹẹrẹ koodu atẹle), pẹlu Glyphicon kan (pẹlu ọrọ yiyan ti o yẹ nipa lilo .sr-only
kilasi - wo awọn apẹẹrẹ Glyphicon ), tabi nipa ipese ohun afikun iranlọwọ ọrọ Àkọsílẹ. Ni pataki fun awọn imọ-ẹrọ iranlọwọ, awọn iṣakoso fọọmu ti ko tọ le tun jẹ ipin ẹya aria-invalid="true"
kan.
<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>
O tun le ṣafikun awọn aami esi iyan pẹlu afikun ti .has-feedback
ati aami ọtun.
Awọn aami esi nikan ṣiṣẹ pẹlu <input class="form-control">
awọn eroja ọrọ.
Ipo afọwọṣe ti awọn aami esi ni a nilo fun awọn igbewọle laisi aami ati fun awọn ẹgbẹ titẹ sii pẹlu afikun ni apa ọtun. O gba ọ niyanju gidigidi lati pese awọn aami fun gbogbo awọn igbewọle fun awọn idi iraye si. Ti o ba fẹ ṣe idiwọ awọn akole lati han, tọju wọn pẹlu .sr-only
kilasi naa. Ti o ba gbọdọ ṣe laisi awọn akole, ṣatunṣe top
iye ti aami esi. Fun awọn ẹgbẹ titẹ sii, ṣatunṣe right
iye si iye piksẹli ti o yẹ da lori iwọn ti addoni rẹ.
Lati rii daju pe awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju - ṣe afihan itumọ ti aami kan ni deede, afikun ọrọ ti o farapamọ yẹ ki o wa pẹlu .sr-only
kilasi naa ki o si ni nkan ṣe pẹlu iṣakoso fọọmu ti o nii ṣe pẹlu lilo aria-describedby
. Ni omiiran, rii daju pe itumọ naa (fun apẹẹrẹ, otitọ pe ikilọ kan wa fun aaye titẹsi ọrọ kan) ni a gbejade ni ọna miiran, gẹgẹbi yiyipada ọrọ gangan ti <label>
o ni nkan ṣe pẹlu iṣakoso fọọmu naa.
Botilẹjẹpe awọn apẹẹrẹ wọnyi ti mẹnuba ipo afọwọsi ti awọn idari fọọmu oniwun wọn ninu <label>
ọrọ funrararẹ, ilana ti o wa loke (lilo .sr-only
ọrọ ati aria-describedby
) ti wa pẹlu awọn idi apejuwe.
<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>
<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-only
aami ti o farapamọTi o ba lo .sr-only
kilasi naa lati tọju iṣakoso fọọmu kan <label>
(dipo ki o lo awọn aṣayan isamisi miiran, gẹgẹbi aria-label
abuda), Bootstrap yoo ṣatunṣe ipo aami laifọwọyi ni kete ti o ti ṣafikun.
<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>
Ṣeto awọn giga ni lilo awọn kilasi bii .input-lg
, ati ṣeto awọn iwọn ni lilo awọn kilasi iwe akoj bi .col-lg-*
.
Ṣẹda awọn iṣakoso fọọmu ti o ga tabi kukuru ti o baamu awọn iwọn bọtini.
<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>
Awọn aami iwọn ni kiakia ati awọn idari fọọmu laarin .form-horizontal
nipa fifi kun .form-group-lg
tabi .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>
Fi ipari si awọn igbewọle sinu awọn ọwọn akoj, tabi eyikeyi ẹya obi aṣa, lati fi irọrun fi ipa mu awọn iwọn ti o fẹ.
<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>
Lo awọn kilasi bọtini lori <a>
, <button>
, tabi <input>
eroja.
<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">
Lakoko ti awọn kilasi bọtini le ṣee lo lori <a>
ati <button>
awọn eroja, awọn <button>
eroja nikan ni atilẹyin laarin awọn paati nav ati navbar wa.
Ti <a>
a ba lo awọn eroja lati ṣiṣẹ bi awọn bọtini – nfa iṣẹ ṣiṣe inu oju-iwe, dipo lilọ kiri si iwe miiran tabi apakan laarin oju-iwe lọwọlọwọ – wọn yẹ ki o tun fun ni role="button"
.
Gẹgẹbi iṣe ti o dara julọ, a ṣeduro gaan ni lilo <button>
eroja nigbakugba ti o ṣee ṣe lati rii daju pe o baamu ṣiṣe aṣawakiri aṣawakiri.
Lara awọn ohun miiran, kokoro kan wa ni Firefox <30 ti o ṣe idiwọ fun wa lati ṣeto line-height
ti awọn <input>
bọtini orisun, nfa ki wọn ko baramu ni deede giga awọn bọtini miiran lori Firefox.
Lo eyikeyi awọn kilasi bọtini ti o wa lati ṣẹda bọtini ara ni kiakia.
<!-- 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>
Lilo awọ lati ṣafikun itumọ si bọtini kan nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka nipasẹ awọ jẹ boya o han gbangba lati akoonu funrararẹ (ọrọ ti o han ti bọtini), tabi ti o wa nipasẹ awọn ọna omiiran, gẹgẹbi ọrọ afikun ti o farapamọ pẹlu .sr-only
kilasi naa.
Fancy tobi tabi kere bọtini? Ṣafikun .btn-lg
, .btn-sm
, tabi .btn-xs
fun awọn iwọn afikun.
<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>
Ṣẹda awọn bọtini ipele idina — awọn ti o ni iwọn kikun ti obi — nipa fifi .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>
Awọn bọtini yoo han ni titẹ (pẹlu abẹlẹ dudu, aala dudu, ati ojiji inset) nigbati o nṣiṣẹ. Fun <button>
awọn eroja, eyi ni a ṣe nipasẹ :active
. Fun <a>
awọn eroja, o ti ṣe pẹlu .active
. Sibẹsibẹ, o le lo .active
lori <button>
s (ati pẹlu awọnaria-pressed="true"
) ti o ba nilo lati tun ṣe ipinlẹ ti nṣiṣe lọwọ ni eto.
Ko si iwulo lati ṣafikun :active
bi o ṣe jẹ kilaasi pseudo, ṣugbọn ti o ba nilo lati fi ipa mu irisi kanna, lọ siwaju ki o ṣafikun .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>
Fi .active
kilasi kun si <a>
awọn bọtini.
<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>
Jẹ ki awọn bọtini dabi aini tẹ nipa sisọ wọn pada pẹlu opacity
.
Fi disabled
ami si <button>
awọn bọtini.
<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>
Ti o ba ṣafikun disabled
abuda naa si <button>
, Internet Explorer 9 ati ni isalẹ yoo sọ ọrọ grẹy pẹlu ojiji ọrọ ẹgbin ti a ko le ṣatunṣe.
Fi .disabled
kilasi kun si <a>
awọn bọtini.
<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>
A lo .disabled
bi kilasi IwUlO nibi, iru si .active
kilasi ti o wọpọ, nitorinaa ko nilo asọtẹlẹ kan.
Kilasi yii nlo pointer-events: none
lati gbiyanju lati mu iṣẹ ọna asopọ ti <a>
s ṣiṣẹ, ṣugbọn ohun-ini CSS ko tii ṣe iwọn ati pe ko ni atilẹyin ni kikun ni Opera 18 ati ni isalẹ, tabi ni Internet Explorer 11. Ni afikun, paapaa ninu awọn aṣawakiri ti o ṣe atilẹyin pointer-events: none
, keyboard lilọ kiri ko ni ipa, afipamo pe awọn olumulo keyboard ti o rii ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ yoo tun ni anfani lati mu awọn ọna asopọ wọnyi ṣiṣẹ. Nitorinaa lati wa ni ailewu, lo JavaScript aṣa lati mu iru awọn ọna asopọ ṣiṣẹ.
Awọn aworan ni Bootstrap 3 le ṣe idahun-ore nipasẹ afikun ti .img-responsive
kilasi naa. Eyi kan max-width: 100%;
, height: auto;
ati display: block;
si aworan ki o le ṣe iwọn daradara si eroja obi.
Si aarin awọn aworan ti o lo .img-responsive
kilasi, lo .center-block
dipo .text-center
. Wo apakan awọn kilasi oluranlọwọ fun awọn alaye diẹ sii nipa .center-block
lilo.
Ni Internet Explorer 8-10, awọn aworan SVG pẹlu .img-responsive
jẹ iwọn aibikita. Lati ṣatunṣe eyi, ṣafikun width: 100% \9;
ni ibiti o nilo. Bootstrap ko lo eyi laifọwọyi bi o ṣe fa awọn ilolu si awọn ọna kika aworan miiran.
<img src="..." class="img-responsive" alt="Responsive image">
Ṣafikun awọn kilasi si ipin <img>
kan si awọn aworan ara ni irọrun ni eyikeyi iṣẹ akanṣe.
Ranti pe Internet Explorer 8 ko ni atilẹyin fun awọn igun yika.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Ṣe afihan itumọ nipasẹ awọ pẹlu iwonba ti awọn kilasi IwUlO tcnu. Iwọnyi le tun lo si awọn ọna asopọ ati pe yoo ṣokunkun lori rababa gẹgẹ bi awọn ọna asopọ aiyipada wa.
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 ti kii magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla ti kii 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>
Nigba miiran awọn kilasi tcnu ko ṣee lo nitori iyasọtọ ti yiyan miiran. Ni ọpọlọpọ awọn ọran, iṣẹ-ṣiṣe ti o to ni lati fi ipari si ọrọ rẹ ni a <span>
pẹlu kilasi naa.
Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka nipasẹ awọ jẹ boya o han gbangba lati inu akoonu funrararẹ (awọn awọ ọrọ-ọrọ nikan ni a lo lati teramo itumo ti o wa tẹlẹ ninu ọrọ/isamisi), tabi ti o wa nipasẹ awọn ọna omiiran, gẹgẹbi ọrọ afikun ti o farapamọ pẹlu .sr-only
kilasi naa. .
Iru si awọn kilasi awọ ọrọ ọrọ-ọrọ, ni irọrun ṣeto abẹlẹ ti ohun kan si eyikeyi kilasi asọye. Awọn paati oran yoo ṣokunkun lori rababa, gẹgẹ bi awọn kilasi ọrọ.
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 ti kii magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla ti kii 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>
Nigba miiran awọn kilasi isale ọrọ-ọrọ ko le ṣe lo nitori iyasọtọ ti yiyan miiran. Ni awọn igba miiran, iṣẹ-ṣiṣe ti o to ni lati fi ipari si akoonu eroja rẹ ni a <div>
pẹlu kilasi naa.
Gẹgẹbi awọn awọ ọrọ -ọrọ , rii daju pe eyikeyi itumọ ti o gbe nipasẹ awọ tun gbejade ni ọna kika ti kii ṣe igbejade nikan.
Lo aami isunmọ jeneriki fun yiyọ akoonu bi awọn awoṣe ati awọn titaniji.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Lo awọn itọju lati tọka iṣẹ ṣiṣe silẹ ati itọsọna. Ṣe akiyesi pe itọju aifọwọyi yoo yi pada laifọwọyi ni awọn akojọ aṣayan silẹ .
<span class="caret"></span>
Leefofo ohun ano si osi tabi ọtun pẹlu kan kilasi. !important
wa ninu lati yago fun awọn ọran pataki. Awọn kilasi tun le ṣee lo bi mixins.
<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();
}
Ṣeto nkan kan si display: block
ati aarin nipasẹ margin
. Wa bi mixin ati kilasi.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
Ni irọrun ko float
s nipa fifi kun .clearfix
si nkan obi . Nlo micro clearfix bi gbajugbaja nipasẹ Nicolas Gallagher. Tun le ṣee lo bi apopọ.
<!-- 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();
}
Fi ipa mu ohun kan lati han tabi pamọ ( pẹlu fun awọn oluka iboju ) pẹlu lilo .show
ati .hidden
awọn kilasi. Awọn kilasi wọnyi lo !important
lati yago fun awọn ija pato, gẹgẹ bi awọn lilefoofo iyara . Wọn wa nikan fun toggling ipele Àkọsílẹ. Wọn tun le ṣee lo bi awọn apopọ.
.hide
wa, ṣugbọn kii ṣe nigbagbogbo ni ipa lori awọn oluka iboju ati pe o ti parẹ bi ti v3.0.1. Lo .hidden
tabi .sr-only
dipo.
Pẹlupẹlu, .invisible
le ṣee lo lati yi hihan nkan kan nikan, afipamo display
pe ko ṣe atunṣe ati pe eroja tun le ni ipa lori sisan ti iwe naa.
<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();
}
Tọju ohun elo kan si gbogbo awọn ẹrọ ayafi awọn oluka iboju pẹlu .sr-only
. Darapọ .sr-only
pẹlu .sr-only-focusable
lati fi eroja han lẹẹkansi nigbati o ba dojukọ (fun apẹẹrẹ nipasẹ olumulo keyboard-nikan). Pataki fun atẹle iraye si awọn iṣe ti o dara julọ . Tun le ṣee lo bi mixins.
<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();
}
Lo .text-hide
kilasi naa tabi dapọ lati ṣe iranlọwọ lati rọpo akoonu ọrọ eroja kan pẹlu aworan abẹlẹ.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
Fun idagbasoke ore-alagbeka yiyara, lo awọn kilasi iwulo wọnyi fun iṣafihan ati fifipamo akoonu nipasẹ ẹrọ nipasẹ ibeere media. Bakannaa pẹlu awọn kilasi ohun elo fun yiyi akoonu nigba titẹ.
Gbiyanju lati lo iwọnyi lori ipilẹ to lopin ati yago fun ṣiṣẹda awọn ẹya ti o yatọ patapata ti aaye kanna. Dipo, lo wọn lati ṣe iranlowo igbejade ẹrọ kọọkan.
Lo ẹyọkan tabi apapo awọn kilasi ti o wa fun yiyi akoonu kọja awọn aaye fifọ wiwo.
Awọn ẹrọ foonu kekere afikun (<768px) | Awọn tabulẹti Awọn ẹrọ kekere (≥768px) | Awọn tabili itẹwe alabọde (≥992px) | Awọn kọǹpútà alágbèéká nla (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
han | Farasin | Farasin | Farasin |
.visible-sm-* |
Farasin | han | Farasin | Farasin |
.visible-md-* |
Farasin | Farasin | han | Farasin |
.visible-lg-* |
Farasin | Farasin | Farasin | han |
.hidden-xs |
Farasin | han | han | han |
.hidden-sm |
han | Farasin | han | han |
.hidden-md |
han | han | Farasin | han |
.hidden-lg |
han | han | han | Farasin |
Bi ti v3.2.0, awọn .visible-*-*
kilasi fun aaye fifọ kọọkan wa ni awọn iyatọ mẹta, ọkan fun display
iye ohun-ini CSS kọọkan ti a ṣe akojọ si isalẹ.
Ẹgbẹ ti awọn kilasi | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Nitorinaa, fun afikun awọn xs
iboju kekere () fun apẹẹrẹ, awọn .visible-*-*
kilasi ti o wa ni: .visible-xs-block
, .visible-xs-inline
, ati .visible-xs-inline-block
.
Awọn kilasi .visible-xs
, .visible-sm
, .visible-md
, ati pe o .visible-lg
tun wa, ṣugbọn wọn ti parẹ bi ti v3.2.0 . Wọn fẹrẹ to deede si .visible-*-block
, ayafi pẹlu afikun awọn ọran pataki fun <table>
awọn eroja ti o ni ibatan si yiyi.
Iru si awọn kilasi idahun deede, lo awọn wọnyi fun yilọ akoonu fun titẹ.
Awọn kilasi | Aṣàwákiri | Titẹ sita |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Farasin | han |
.hidden-print |
han | Farasin |
Kilasi .visible-print
naa tun wa ṣugbọn o ti parẹ bi ti v3.2.0. O fẹrẹ to deede si .visible-print-block
, ayafi pẹlu afikun awọn ọran pataki fun <table>
awọn eroja ti o jọmọ.
Ṣe atunwo ẹrọ aṣawakiri rẹ tabi fifuye lori awọn ẹrọ oriṣiriṣi lati ṣe idanwo awọn kilasi ohun elo idahun.
Awọn ami ayẹwo alawọ ewe tọka si nkan ti o han ni wiwo iwo lọwọlọwọ rẹ.
Nibi, awọn ami ayẹwo alawọ ewe tun tọka si nkan ti o farapamọ ni ibi iwowo lọwọlọwọ rẹ.
Bootstrap's CSS jẹ itumọ ti Kere, aṣaaju kan pẹlu iṣẹ ṣiṣe afikun bii awọn oniyipada, awọn alapọpọ, ati awọn iṣẹ fun ṣiṣe akojọpọ CSS. Awọn ti n wa lati lo orisun Awọn faili Kere dipo awọn faili CSS ti a ṣe akojọpọ le lo ọpọlọpọ awọn oniyipada ati awọn alapọpọ ti a lo jakejado ilana naa.
Awọn oniyipada akoj ati awọn apopọ wa ni bo laarin apakan eto Grid .
Bootstrap le ṣee lo ni o kere ju awọn ọna meji: pẹlu CSS ti a ṣajọ tabi pẹlu orisun Awọn faili Kere. Lati ṣajọ awọn faili Kere, kan si apakan Bibẹrẹ fun bi o ṣe le ṣeto agbegbe idagbasoke rẹ lati ṣiṣe awọn aṣẹ pataki.
Awọn irinṣẹ akojọpọ ẹnikẹta le ṣiṣẹ pẹlu Bootstrap, ṣugbọn wọn ko ṣe atilẹyin nipasẹ ẹgbẹ pataki wa.
Awọn oniyipada ni a lo jakejado gbogbo iṣẹ akanṣe bi ọna lati ṣe agbedemeji ati pin awọn iye ti a lo nigbagbogbo gẹgẹbi awọn awọ, aye, tabi awọn akopọ fonti. Fun pipe didenukole, jọwọ wo Oluṣeto .
Ni irọrun lo awọn ero awọ meji: grẹyscale ati atunmọ. Awọn awọ Grayscale pese iraye yara si awọn ojiji dudu ti a lo nigbagbogbo lakoko ti itumọ pẹlu ọpọlọpọ awọn awọ ti a sọtọ si awọn iye ọrọ-ọrọ ti o nilari.
@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;
Lo eyikeyi ninu awọn oniyipada awọ bi wọn ṣe jẹ tabi tun fi wọn ranṣẹ si awọn oniyipada ti o nilari fun iṣẹ akanṣe rẹ.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Iwonba awọn oniyipada fun isọdi awọn eroja pataki ti egungun aaye rẹ ni iyara.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Ni irọrun ṣe ara awọn ọna asopọ rẹ pẹlu awọ to tọ pẹlu iye kan ṣoṣo.
// 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;
}
}
Ṣe akiyesi pe ohun elo naa @link-hover-color
nlo iṣẹ kan, ohun elo oniyi miiran lati Kere, lati ṣẹda awọ araba ọtun laifọwọyi. O le lo darken
, lighten
, saturate
, ati desaturate
.
Ni irọrun ṣeto iru oju-iwe rẹ, iwọn ọrọ, aṣaaju, ati diẹ sii pẹlu awọn oniyipada iyara diẹ. Bootstrap ṣe lilo awọn wọnyi daradara lati pese awọn alapọpọ afọwọṣe irọrun.
@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;
Awọn oniyipada iyara meji fun isọdi ipo ati orukọ faili ti awọn aami rẹ.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Awọn paati jakejado Bootstrap ṣe lilo diẹ ninu awọn oniyipada aiyipada fun ṣeto awọn iye to wọpọ. Eyi ni awọn ti a lo julọ julọ.
@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;
Awọn apopọ ataja jẹ awọn alapọpọ lati ṣe atilẹyin atilẹyin awọn aṣawakiri lọpọlọpọ nipasẹ pẹlu pẹlu gbogbo awọn ami-iṣaaju ataja ti o yẹ ninu CSS rẹ ti o ṣajọ.
Tun awoṣe apoti awọn paati rẹ ṣe pẹlu adapọ ẹyọkan. Fun ọrọ-ọrọ, wo nkan ti o ṣe iranlọwọ lati Mozilla .
Mixin ti wa ni idinku bi ti v3.2.0, pẹlu ifihan ti Autoprefixer. Lati tọju ibaramu sẹhin, Bootstrap yoo tẹsiwaju lati lo mixin inu inu titi Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Loni gbogbo awọn aṣawakiri ode oni ṣe atilẹyin ohun- border-radius
ini ti kii ṣe iṣaaju. Bii iru bẹẹ, ko si .border-radius()
mixin, ṣugbọn Bootstrap pẹlu awọn ọna abuja fun iyara yika awọn igun meji ni ẹgbẹ kan pato ti ohun kan.
.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;
}
Ti awọn olugbo ibi-afẹde rẹ ba nlo awọn aṣawakiri tuntun ati nla julọ ati awọn ẹrọ, rii daju pe o kan lo ohun- box-shadow
ini naa funrararẹ. Ti o ba nilo atilẹyin fun agbalagba Android (ṣaaju-v4) ati awọn ẹrọ iOS (ṣaaju-iOS 5), lo mixin ti a ti-webkit
parẹ lati mu ìpele ti o nilo .
Mixin ti wa ni idinku bi ti v3.1.0, niwon Bootstrap ko ṣe atilẹyin ni ifowosi awọn iru ẹrọ ti igba atijọ ti ko ṣe atilẹyin ohun-ini boṣewa. Lati tọju ibaramu sẹhin, Bootstrap yoo tẹsiwaju lati lo mixin inu inu titi Bootstrap v4.
Rii daju lati lo rgba()
awọn awọ ni awọn ojiji apoti rẹ ki wọn dapọ bi lainidi bi o ti ṣee ṣe pẹlu awọn abẹlẹ.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Multiple mixins fun ni irọrun. Ṣeto gbogbo alaye iyipada pẹlu ọkan, tabi pato idaduro lọtọ ati iye akoko bi o ṣe nilo.
Awọn mixins ti wa ni idinku bi ti v3.2.0, pẹlu ifihan ti Autoprefixer. Lati tọju ibaramu sẹhin, Bootstrap yoo tẹsiwaju lati lo awọn apopọ inu inu titi 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;
}
Yiyi, iwọn, tumọ (gbe), tabi skew eyikeyi nkan.
Awọn mixins ti wa ni idinku bi ti v3.2.0, pẹlu ifihan ti Autoprefixer. Lati tọju ibaramu sẹhin, Bootstrap yoo tẹsiwaju lati lo awọn apopọ inu inu titi 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;
}
Adapọ ẹyọkan fun lilo gbogbo awọn ohun-ini ere idaraya CSS3 ni ikede kan ati awọn apopọ miiran fun awọn ohun-ini kọọkan.
Awọn mixins ti wa ni idinku bi ti v3.2.0, pẹlu ifihan ti Autoprefixer. Lati tọju ibaramu sẹhin, Bootstrap yoo tẹsiwaju lati lo awọn apopọ inu inu titi 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;
}
Ṣeto opacity fun gbogbo awọn aṣawakiri ati pese filter
ipadabọ fun IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Pese ipo fun awọn iṣakoso fọọmu laarin aaye kọọkan.
.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
}
Ṣe ina awọn ọwọn nipasẹ CSS laarin eroja kan.
.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;
}
Ni irọrun tan eyikeyi awọn awọ meji sinu isale lẹhin. Gba ilọsiwaju diẹ sii ki o ṣeto itọsọna kan, lo awọn awọ mẹta, tabi lo gradient radial kan. Pẹlu aladapọ ẹyọkan o gba gbogbo awọn sintaxes iṣaaju ti iwọ yoo nilo.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
O tun le pato igun kan ti awọ-meji boṣewa, gradient laini:
#gradient > .directional(#333; #000; 45deg);
Ti o ba nilo gradient ara-pa-pa, iyẹn rọrun, paapaa. Kan pato awọ kan ati pe a yoo bò adikala funfun translucent kan.
#gradient > .striped(#333; 45deg);
Soke ṣaaju ki o lo awọn awọ mẹta dipo. Ṣeto awọ akọkọ, awọ keji, idaduro awọ awọ keji (iye ogorun bi 25%), ati awọ kẹta pẹlu awọn apopọ wọnyi:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Efeti sile! Ti o ba nilo lati yọkuro gradient nigbagbogbo, rii daju lati yọ eyikeyi IE-pato ti filter
o le ti ṣafikun. O le ṣe bẹ nipa lilo .reset-filter()
mixin lẹgbẹẹ background-image: none;
.
Awọn apopọ IwUlO jẹ awọn alapọpọ ti o darapọ bibẹẹkọ awọn ohun-ini CSS ti ko ni ibatan lati ṣaṣeyọri ibi-afẹde kan tabi iṣẹ-ṣiṣe kan.
Gbagbe fifi kun class="clearfix"
si eyikeyi eroja ati dipo ṣafikun .clearfix()
mixin nibiti o yẹ. Nlo micro clearfix lati Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Ni kiakia aarin eyikeyi eroja laarin awọn obi rẹ. Nbeere width
tabi max-width
lati ṣeto.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Pato awọn iwọn ti ohun kan ni irọrun diẹ sii.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Ni irọrun tunto awọn aṣayan iwọn fun eyikeyi textarea, tabi eyikeyi eroja miiran. Aiyipada si iwa aṣawakiri deede ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Ni irọrun ge ọrọ ge pẹlu ellipsis pẹlu apopọ ẹyọkan. Nbeere eroja lati jẹ block
tabi inline-block
ipele.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Pato awọn ọna aworan meji ati awọn iwọn aworan @ 1x, ati Bootstrap yoo pese ibeere media @2x kan. Ti o ba ni awọn aworan pupọ lati sin, ronu kikọ CSS aworan retina rẹ pẹlu ọwọ ni ibeere media kan.
.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);
}
Lakoko ti Bootstrap ti kọ lori Kere, o tun ni ibudo Sass osise kan . A ṣetọju rẹ ni ibi ipamọ GitHub lọtọ ati mu awọn imudojuiwọn pẹlu iwe afọwọkọ iyipada kan.
Niwọn igba ti ibudo Sass naa ni repo lọtọ ati ṣe iranṣẹ awọn olugbo ti o yatọ diẹ diẹ, awọn akoonu inu iṣẹ naa yatọ pupọ si iṣẹ akanṣe Bootstrap akọkọ. Eyi ṣe idaniloju pe ibudo Sass jẹ ibaramu pẹlu ọpọlọpọ awọn eto orisun Sass bi o ti ṣee.
Ona | Apejuwe |
---|---|
lib/ |
koodu Ruby tiodaralopolopo (iṣeto Sass, Awọn oju-irin ati awọn akojọpọ Kompasi) |
tasks/ |
Awọn iwe afọwọkọ iyipada (yiyi si oke Kere si Sass) |
test/ |
Awọn idanwo akopọ |
templates/ |
Kompasi package farahan |
vendor/assets/ |
Sass, JavaScript, ati awọn faili fonti |
Rakefile |
Awọn iṣẹ-ṣiṣe inu, gẹgẹbi ra ati iyipada |
Ṣabẹwo ibi ipamọ GitHub ibudo Sass lati wo awọn faili wọnyi ni iṣe.
Fun alaye lori bi o ṣe le fi sori ẹrọ ati lo Bootstrap fun Sass, kan si iwe kika ibi ipamọ GitHub . O jẹ orisun imudojuiwọn julọ ati pẹlu alaye fun lilo pẹlu Rails, Kompasi, ati awọn iṣẹ akanṣe Sass boṣewa.