CSS
Awọn eto CSS agbaye, awọn eroja HTML ipilẹ ti a ṣe aṣa ati imudara pẹlu awọn kilasi extensible, ati eto akoj to ti ni ilọsiwaju.
Akopọ
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.
HTML5 doctype
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>Mobile akọkọ
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=nosi 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">Typography ati awọn ọna asopọ
Bootstrap ṣeto ifihan ipilẹ agbaye, iwe kikọ, ati awọn ọna ọna asopọ. Ni pato, awa:
- Ṣeto
background-color: #fff;loribody - Lo awọn
@font-family-base,@font-size-base, ati@line-height-baseawọn abuda bi ipilẹ afọwọṣe wa - Ṣeto awọ ọna asopọ agbaye nipasẹ
@link-colorati lo awọn laini ọna asopọ nikan lori:hover
Awọn aṣa wọnyi le wa laarin scaffolding.less.
Normalize.css
Fun imudarasi lilọ kiri lori ayelujara, a lo Normalize.css , iṣẹ akanṣe nipasẹ Nicolas Gallagher ati Jonathan Neal .
Awọn apoti
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 paddingati diẹ sii, ko si eiyan ko jẹ itẹlọrun.
Lo .containerfun a idahun ti o wa titi iwọn eiyan.
<div class="container">
...
</div>Lo .container-fluidfun eiyan iwọn ni kikun, ti o kan gbogbo iwọn ti iwoye rẹ.
<div class="container-fluid">
...
</div>Eto akoj
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 .
Ifaara
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ṣẹ:
- Awọn ori ila gbọdọ wa ni gbe laarin
.container(iwọn ti o wa titi) tabi.container-fluid(iwọn ni kikun) fun titete daradara ati fifẹ. - Lo awọn ori ila lati ṣẹda awọn ẹgbẹ petele ti awọn ọwọn.
- Akoonu yẹ ki o gbe laarin awọn ọwọn, ati awọn ọwọn nikan le jẹ ọmọ awọn ori ila lẹsẹkẹsẹ.
- Awọn kilasi akoj asọye bi
.rowati.col-xs-4pe 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. - Awọn ọwọn ṣẹda awọn gutters (awọn ela laarin akoonu ọwọn) nipasẹ
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.rows. - Ala odi ni idi ti awọn apẹẹrẹ ni isalẹ ti jade. O jẹ ki akoonu laarin awọn ọwọn akoj ti wa ni ila soke pẹlu akoonu ti kii ṣe akoj.
- A ṣẹda awọn ọwọn akoj nipa sisọ nọmba awọn ọwọn mejila ti o wa ti o fẹ lati tan. Fun apẹẹrẹ, awọn ọwọn dogba mẹta yoo lo mẹta
.col-xs-4. - 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.
- Awọn kilasi akoj lo si awọn ẹrọ pẹlu awọn iwọn iboju ti o tobi ju tabi dogba si awọn iwọn ibi fifọ, ati yiyo awọn kilasi akoj ti a fojusi ni awọn ẹrọ kekere. Nitorinaa, fun apẹẹrẹ lilo eyikeyi
.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ẹ.
Media ibeere
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-widthlati 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) { ... }Awọn aṣayan akoj
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 | |||
Apeere: Tolera-si-petele
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.
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-1
.kol-md-8
.kol-md-4
.kol-md-4
.kol-md-4
.kol-md-4
.kol-md-6
.kol-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>Apeere: Epo omi
Yipada ifilelẹ-iwọn akoj ti o wa titi sinu ifilelẹ iwọn ni kikun nipa yiyipada ita rẹ .containersi .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Apeere: Alagbeka ati tabili tabili
Ṣ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ṣẹ.
.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
.kol-xs-6
.kol-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>Apeere: Alagbeka, tabulẹti, tabili tabili
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.
.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>Apeere: Pipa iwe
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.
.kol-xs-9
.col-xs-4
Lati 9 + 4 = 13> 12, div-jakejado 4-column yii yoo wa ni tii si laini titun kan bi ẹyọkan ti o tẹriba.
Lati 9 + 4 = 13> 12, div-jakejado 4-column yii yoo wa ni tii si laini titun kan bi ẹyọkan ti o tẹriba.
.col-xs-6
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.
Awọn ọwọn ti o tẹle tẹsiwaju pẹlu laini tuntun.
<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>Awọn atunto ọwọn idahun
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 .clearfixati awọn kilasi ohun elo ti o ṣe idahun .
.col-xs-6 .col-sm-3
Tun iwọn
wiwo rẹ ṣe tabi ṣayẹwo lori foonu rẹ fun apẹẹrẹ.
wiwo rẹ ṣe tabi ṣayẹwo lori foonu rẹ fun apẹẹrẹ.
.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>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>Yọ awọn gutters kuro
Yọ awọn gutters kuro ni ọna kan ati pe o jẹ awọn ọwọn pẹlu .row-no-gutterskilasi naa.
.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
.kol-xs-6
.kol-xs-6
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Awọn ọwọn aiṣedeede
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-4gbigbe .col-md-4lori awọn ọwọn mẹrin.
.kol-md-4
.col-md-4 .col-md-aiṣedeede-4
.col-md-3 .col-md-aiṣedeede-3
.col-md-3 .col-md-aiṣedeede-3
.col-md-6 .col-md-aiṣedeede-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>O tun le fagilee awọn aiṣedeede lati awọn ipele akoj kekere pẹlu .col-*-offset-0awọ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>Awọn ọwọn itẹle
Lati ṣe itẹ-ẹiyẹ akoonu rẹ pẹlu akoj aiyipada, ṣafikun tuntun .rowati ṣ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).
Ipele 1: .col-sm-9
Ipele 2: .col-xs-8 .col-sm-6
Ipele 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>Pipaṣẹ iwe
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.
.col-md-9 .col-md-titari-3
.col-md-3 .col-md-fa-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>Kere mixins ati oniyipada
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
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;Mixins
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));
}
}Lilo apẹẹrẹ
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>Iwe kikọ
Awọn akọle
Gbogbo awọn akọle HTML, <h1>nipasẹ <h6>, wa. .h1nipasẹ .h6awọ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 .smallkilasi 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>Ẹda ara
Aiyipada agbaye ti Bootstrap font-sizejẹ 14px , pẹlu kan line-heightti 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>Daakọ ara asiwaju
Ṣ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>Ti a ṣe pẹlu Kere
Iwọn ikọwe da lori awọn oniyipada Kere meji ni awọn oniyipada.less : @font-size-baseati @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.
Awọn eroja ọrọ inu
Ọrọ ti samisi
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.Ọrọ ti paarẹ
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>Strikethrough ọrọ
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>Ọrọ ti a fi sii
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>Ọrọ ti o ni ila
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ẹ.
Ọrọ kekere
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-sizefun awọn <small>eroja itẹ-ẹiyẹ.
O le lo opopo ano pẹlu .smallni 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>Igboya
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>Italics
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>Awọn eroja miiran
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ọ.
Awọn kilasi titete
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>Awọn kilasi iyipada
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>Awọn kukuru
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 titleni 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ọ.
Ipilẹ abbreviation
An abbreviation ti ọrọ ikalara ni attr .
<abbr title="attribute">attr</abbr>Ibẹrẹ ibẹrẹ
Ṣafikun .initialismsi 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>Awọn adirẹsi
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>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Orukọ kikun
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Orukọ kikun
[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
Fun sisọ awọn bulọọki akoonu lati orisun miiran laarin iwe rẹ.
Idinaduro aiyipada
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>Awọn aṣayan Blockquote
Ara ati akoonu yipada fun awọn iyatọ ti o rọrun lori boṣewa kan <blockquote>.
Lorukọ orisun kan
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>Awọn ifihan miiran
Ṣafikun .blockquote-reversefun blockquote kan pẹlu akoonu ti o somọ ọtun.
<blockquote class="blockquote-reverse">
...
</blockquote>Awọn akojọ
Ti ko paṣẹ
Atokọ awọn ohun kan ninu eyiti aṣẹ ko ṣe pataki.
- Lorem ipsum dolor joko amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis ni pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ni
- Faucibus porta lacus fringilla vel
- Aenean joko amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Ti paṣẹ
Atokọ awọn ohun kan ninu eyiti aṣẹ naa ṣe pataki.
- Lorem ipsum dolor joko amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis ni pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean joko amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Ti ko ni aṣa
Yọ aiyipada list-styleati 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.
- Lorem ipsum dolor joko amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis ni pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ni
- Faucibus porta lacus fringilla vel
- Aenean joko amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Ni tito
Fi gbogbo awọn ohun akojọ sori laini kan pẹlu display: inline-block;ati diẹ ninu padding ina.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Apejuwe
Atokọ awọn ofin pẹlu awọn apejuwe ti o somọ wọn.
- Awọn akojọ apejuwe
- Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit ti kii mi porta gravida ati eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Apejuwe petele
Ṣ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.
- Awọn akojọ apejuwe
- Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit ti kii mi porta gravida ati 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>Aifọwọyi-agbelebu
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.
Koodu
Ni tito
Pa awọn snippets inline ti koodu pẹlu <code>.
Fun apẹẹrẹ,
<section>yẹ ki o wa ni ti a we bi inline.
For example, <code><section></code> should be wrapped as inline.Iṣagbewọle olumulo
Lo <kbd>lati tọka titẹ sii ti o jẹ igbagbogbo titẹ nipasẹ keyboard.
Lati yipada awọn ilana, tẹ
cdorukọ ti itọsọna naa tẹle.
Lati ṣatunkọ eto, tẹ ctrl + ,
Lati ṣatunkọ eto, tẹ 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>Àkọsílẹ ipilẹ
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 fi awọn aṣayan kun.pre-scrollable kilaasi ni yiyan, eyiti yoo ṣeto giga-giga ti 350px ati pese ọpa lilọ-y-axis kan.
Awọn oniyipada
Fun afihan awọn oniyipada lo <var>tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Apeere igbejade
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>Awọn tabili
Apẹẹrẹ ipilẹ
Fun iselona ipilẹ — fifẹ ina ati awọn ipin petele nikan — ṣafikun kilasi ipilẹ .tablesi 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>Awọn ori ila ti o ya
Lo .table-stripedlati ṣafikun abila-fikun si ori ila tabili eyikeyi laarin <tbody>.
Agbelebu-kiri ibamu
Awọn tabili ti o ya ni aṣa nipasẹ :nth-childyiyan 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>Tabili aala
Fi kun .table-borderedfun 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>Rababa awọn ori ila
Fikun -un .table-hoverlati 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>Ti di tabili
Fikun -un .table-condensedlati ṣ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>Awọn kilasi asọye
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>Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
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-onlykilasi naa.
Awọn tabili idahun
Ṣẹda awọn tabili idahun nipa yiyi eyikeyi .tablesinu .table-responsivelati 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.
Inaro clipping/truncation
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 ati awọn aaye aaye
Firefox ni diẹ ninu eto iselona aaye airọrun ti o kan eyiti widtho 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 fọọmu
Apẹẹrẹ ipilẹ
Awọn iṣakoso fọọmu kọọkan gba laifọwọyi diẹ ninu iselona agbaye. Gbogbo ọrọ ọrọ <input>, <textarea>, ati <select>eroja pẹlu .form-controlwa ni ṣeto si width: 100%;nipasẹ aiyipada. Fi ipari si awọn aami ati awọn idari .form-groupfun 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 pẹlu awọn ẹgbẹ titẹ sii
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.
Fọọmu inline
Ṣafikun -un .form-inlinesi 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.
Le beere aṣa awọn iwọn
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.
Fi awọn akole kun nigbagbogbo
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-onlykilasi 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-labelledbytabi titleeefa. 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 placeholderbi 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>Fọọmu petele
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-horizontalsi fọọmu naa (eyiti ko ni lati jẹ a <form>). Ṣiṣe bẹ yipada .form-groups 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 idari atilẹyin
Awọn apẹẹrẹ ti awọn iṣakoso fọọmu boṣewa ni atilẹyin ni ipilẹ fọọmu apẹẹrẹ.
Awọn igbewọle
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.
Iru ikede beere
Awọn igbewọle yoo jẹ aṣa ni kikun nikan ti wọn ba typejẹ ikede daradara.
<input type="text" class="form-control" placeholder="Text input">Awọn ẹgbẹ igbewọle
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 .
Agbegbe ọrọ
Iṣakoso fọọmu eyiti o ṣe atilẹyin awọn laini pupọ ti ọrọ. Yi rowseroja pada bi o ṣe pataki.
<textarea class="form-control" rows="3"></textarea>Awọn apoti ayẹwo ati awọn redio
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 .disabledkilasi naa si obi .radio, .radio-inline, .checkbox, tabi .checkbox-inline.
Aiyipada (tolera)
<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>Awọn apoti ayẹwo laini ati awọn redio
Lo .checkbox-inlinetabi .radio-inlineawọ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>Awọn apoti ayẹwo ati awọn redio laisi ọrọ aami
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>Awọn yiyan
Ṣ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-radiusawọ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 multipleabuda, 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>Aimi Iṣakoso
Nigba ti o ba nilo lati gbe ọrọ itele ti o tẹle si aami fọọmu laarin fọọmu kan, lo .form-control-statickilasi 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>Ipo idojukọ
A yọ awọn outlineaṣa aiyipada kuro lori diẹ ninu awọn iṣakoso fọọmu ati lo kan box-shadowni aaye rẹ fun :focus.
Ririnkiri:focus ipinle
Iṣagbewọle apẹẹrẹ ti o wa loke nlo awọn aṣa aṣa ninu iwe wa lati ṣe afihan :focusipinlẹ lori faili .form-control.
Ipo alaabo
Ṣafikun disabledabuda 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-allowedkọsọ kan kun.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Awọn ipilẹ aaye alaabo
Fi awọn disabledabuda to a <fieldset>lati mu gbogbo awọn idari laarin awọn <fieldset>ni ẹẹkan.
Caveat nipa iṣẹ ọna asopọ ti<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ṣẹ.
Agbelebu-kiri ibamu
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>Readonly ipinle
Ṣafikun readonlyabuda 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>Ọrọ iranlọwọ
Dina ipele iranlọwọ ọrọ fun fọọmu idari.
Associating ọrọ iranlọwọ pẹlu awọn idari fọọmu
Ọ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 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>Awọn ipinlẹ afọwọsi
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-successsi nkan obi. Eyikeyi .control-label, .form-control, ati .help-blocklaarin nkan naa yoo gba awọn aza afọwọsi.
Gbigbe ipo afọwọsi si awọn imọ-ẹrọ iranlọwọ ati awọn olumulo afọju
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-onlykilasi - 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>Pẹlu awọn aami iyan
O tun le ṣafikun awọn aami esi iyan pẹlu afikun ti .has-feedbackati aami ọtun.
Awọn aami esi nikan ṣiṣẹ pẹlu <input class="form-control">awọn eroja ọrọ.
Awọn aami, awọn aami, ati awọn ẹgbẹ titẹ sii
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-onlykilasi naa. Ti o ba gbọdọ ṣe laisi awọn akole, ṣatunṣe topiye ti aami esi. Fun awọn ẹgbẹ titẹ sii, ṣatunṣe rightiye si iye pixel ti o yẹ da lori iwọn ti addoni rẹ.
Gbigbe itumọ aami naa si awọn imọ-ẹrọ iranlọwọ
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-onlykilasi 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, bii yiyipada ọrọ gangan<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>Awọn aami iyan ni petele ati awọn fọọmu laini
<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>Awọn aami iyan pẹlu awọn .sr-onlyaami ti o farapamọ
Ti o ba lo .sr-onlykilasi naa lati tọju iṣakoso fọọmu kan <label>(dipo ki o lo awọn aṣayan isamisi miiran, gẹgẹbi aria-labelabuda), Bootstrap yoo ṣatunṣe ipo aami laifọwọyi ni kete ti o ti ṣafikun.
(aseyori)
@
(aseyori)
<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>Iwọn iṣakoso
Ṣ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-*.
Iwọn giga
Ṣẹ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 iwọn ẹgbẹ fọọmu petele
Awọn aami iwọn ni kiakia ati awọn idari fọọmu laarin .form-horizontalnipa fifi kun .form-group-lgtabi .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>Iwọn ti ọwọn
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>Awọn bọtini
Awọn aami bọtini
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">Lilo ọrọ-ọrọ kan pato
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.
Awọn ọna asopọ ṣiṣẹ bi awọn bọtini
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".
Cross-kiri Rendering
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-heightti awọn <input>bọtini orisun, nfa ki wọn ko baramu ni deede giga awọn bọtini miiran lori Firefox.
Awọn aṣayan
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>Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
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-onlykilasi naa.
Awọn iwọn
Fancy tobi tabi kere bọtini? Ṣafikun .btn-lg, .btn-sm, tabi .btn-xsfun 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>Ipo ti nṣiṣe lọwọ
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 .activelori <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.
Bọtini eroja
Ko si iwulo lati ṣafikun :activebi 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>Anchor ano
Fi .activekilasi 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>Ipo alaabo
Jẹ ki awọn bọtini dabi aini tẹ nipa sisọ wọn pada pẹlu opacity.
Bọtini eroja
Fi disabledami 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>Agbelebu-kiri ibamu
Ti o ba ṣafikun disabledabuda 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.
Anchor ano
Fi .disabledkilasi 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 .disabledbi kilasi IwUlO nibi, iru si .activekilasi ti o wọpọ, nitorinaa ko nilo asọtẹlẹ kan.
Asopọ iṣẹ caveat
Kilasi yii nlo pointer-events: nonelati 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
Awọn aworan idahun
Awọn aworan ni Bootstrap 3 le ṣe idahun-ore nipasẹ afikun ti .img-responsivekilasi 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-responsivekilasi, lo.center-block dipo .text-center. Wo apakan awọn kilasi oluranlọwọ fun awọn alaye diẹ sii nipa .center-blocklilo.
Awọn aworan SVG ati IE 8-10
Ni Internet Explorer 8-10, awọn aworan SVG pẹlu .img-responsivejẹ 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">Awọn apẹrẹ aworan
Fi awọn kilasi kun<img> kan si awọn aworan ara ni irọrun ni eyikeyi iṣẹ akanṣe.
Agbelebu-kiri ibamu
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">Awọn kilasi oluranlọwọ
Awọn awọ ọrọ-ọrọ
Ṣ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>Awọn olugbagbọ pẹlu ni pato
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.
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
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-onlykilasi naa. .
Awọn ipilẹ ọrọ-ọrọ
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>Awọn olugbagbọ pẹlu ni pato
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.
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
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.
Pa aami
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>Awọn abojuto
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>Yiyara leefofo
Leefofo ohun ano si osi tabi ọtun pẹlu kan kilasi. !importantwa 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();
}Awọn bulọọki akoonu aarin
Ṣeto nkan kan si display: blockati 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();
}Clearfix
Ni irọrun ko floats 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();
}Nfihan ati fifipamọ akoonu
Fi ipa mu ohun kan lati han tabi pamọ ( pẹlu fun awọn oluka iboju ) pẹlu lilo .showati .hiddenawọn kilasi. Awọn kilasi wọnyi lo !importantlati 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ọ.
.hidewa, ṣugbọn kii ṣe nigbagbogbo ni ipa lori awọn oluka iboju ati pe o ti parẹ bi ti v3.0.1. Lo .hiddentabi .sr-onlydipo.
Pẹlupẹlu, .invisiblele ṣee lo lati yi hihan nkan kan nikan, afipamo displaype 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();
}Oluka iboju ati akoonu lilọ kiri keyboard
Tọju ohun elo kan si gbogbo awọn ẹrọ ayafi awọn oluka iboju pẹlu .sr-only. Darapọ .sr-onlypẹlu .sr-only-focusablelati 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();
}Rirọpo aworan
Lo .text-hidekilasi 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();
}Awọn ohun elo idahun
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.
Awọn kilasi ti o wa
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 displayiye 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 xsiboju 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-lgtun wa, ṣugbọn wọn ti parẹ bi ti v3.2.0 . Wọn to deede si .visible-*-block, ayafi pẹlu afikun awọn ọran pataki fun yiyi<table> awọn eroja ti o ni ibatan si yiyi.
Awọn kilasi atẹjade
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-printnaa 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ọ.
Awọn ọran idanwo
Ṣe atunwo ẹrọ aṣawakiri rẹ tabi fifuye lori awọn ẹrọ oriṣiriṣi lati ṣe idanwo awọn kilasi ohun elo idahun.
O han loju...
Awọn ami ayẹwo alawọ ewe tọka si nkan ti o han ni wiwo iwo lọwọlọwọ rẹ.
Afikun kekere
✔ Han lori x-kekere
Kekere
✔ Han lori kekere
Alabọde
✔ Han lori alabọde
Tobi
✔ Han lori nla
✔ Han lori x-kekere ati kekere
✔ Han lori alabọde ati nla
✔ Han lori x-kekere ati alabọde
✔ Han lori kekere ati nla
✔ Han lori x-kekere ati nla
✔ Han lori kekere ati alabọde
Ìpamọ́ ló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ẹ.
Lilo Kere
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ọ ti wa ni bo laarin apakan eto Grid .
Iṣakojọpọ Bootstrap
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
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 .
Awọn awọ
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;
}Scafolding
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;Awọn ọna asopọ
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-colornlo iṣẹ kan, ohun elo oniyi miiran lati Kere, lati ṣẹda awọ araba ọtun laifọwọyi. O le lo darken, lighten, saturate, ati desaturate.
Iwe kikọ
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 aami
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 eroja
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;alajapo ataja
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ọ.
Apoti-iwọn
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;
}Awọn igun yika
Loni gbogbo awọn aṣawakiri ode oni ṣe atilẹyin ohun- border-radiusini 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;
}Apoti (Ju) ojiji
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-shadowini 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;
}Awọn iyipada
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;
}Awọn iyipada
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;
}Awọn ohun idanilaraya
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;
}Òótọ́
Ṣeto opacity fun gbogbo awọn aṣawakiri ati pese filteripadabọ fun IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Ọrọ ibi ipamọ
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
}Awọn ọwọn
Ṣ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;
}Gidiẹdi
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 filtero le ti ṣafikun. O le ṣe bẹ nipa lilo .reset-filter()mixin lẹgbẹẹbackground-image: none; .
IwUlO mixins
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.
Clearfix
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();
}Petele aarin
Ni kiakia aarin eyikeyi eroja laarin awọn obi rẹ. Nbeere widthtabi max-widthlati ṣeto.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Awọn oluranlọwọ iwọn
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); }Resizable textareas
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;
}Truncating ọrọ
Ni irọrun ge ọrọ ge pẹlu ellipsis pẹlu apopọ ẹyọkan. Nbeere eroja lati jẹ blocktabi inline-blockipele.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Awọn aworan Retina
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);
}Lilo Sass
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.
Ohun ti o wa ninu
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ọ oluyipada (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.
Fifi sori ẹrọ
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 ti o ni imudojuiwọn julọ ati pẹlu alaye fun lilo pẹlu Rails, Kompasi, ati awọn iṣẹ akanṣe Sass boṣewa.