CSS
Fikirana CSS maneran-tany, singa HTML fototra novolavolaina sy nohatsaraina tamin'ny kilasy azo itarina, ary rafitra rindrankajy mandroso.
Fikirana CSS maneran-tany, singa HTML fototra novolavolaina sy nohatsaraina tamin'ny kilasy azo itarina, ary rafitra rindrankajy mandroso.
Alao ny ambany indrindra amin'ireo singa fototra amin'ny fotodrafitrasa Bootstrap, ao anatin'izany ny fomba fiasantsika amin'ny fampivoarana tranonkala tsara kokoa, haingana kokoa, matanjaka kokoa.
Bootstrap dia mampiasa singa HTML sy fananana CSS sasany izay mitaky ny fampiasana ny HTML5 doctype. Ampidiro any am-piandohan'ny tetikasanao rehetra izany.
<!DOCTYPE html>
<html lang="en">
...
</html>
Miaraka amin'ny Bootstrap 2, dia nampiana fomba fiantsoana finday azo isafidianana ho an'ny lafiny fototra amin'ny rafitra. Miaraka amin'ny Bootstrap 3, naverina nanoratra ny tetikasa izahay mba ho sariaka amin'ny finday hatrany am-piandohana. Raha tokony hampidirina amin'ny fomba finday azo atao, dia arotsaka ao anaty fotony izy ireo. Raha ny marina, Bootstrap no finday voalohany . Ny endrika voalohany amin'ny finday dia hita manerana ny tranomboky manontolo fa tsy amin'ny rakitra misaraka.
Mba hiantohana ny famandrihana araka ny tokony ho izy sy ny zooming mikasika, ampio ny meta tag viewport amin'ny <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Azonao atao ny manafoana ny fahaiza-manao zoom amin'ny fitaovana finday amin'ny alalan'ny fanampiana user-scalable=no
ny meta tag viewport. Izany dia manakana ny zooming, midika izany fa ny mpampiasa dia tsy afaka mivezivezy fotsiny, ary mahatonga ny tranokalanao ho toy ny fampiharana teratany. Amin'ny ankapobeny, tsy manoro izany amin'ny tranokala rehetra izahay, koa mitandrema!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Ny Bootstrap dia mametraka ny seho eran-tany fototra, ny typography ary ny fomba rohy. Manokana, izahay:
background-color: #fff;
amin'nybody
@font-family-base
, @font-size-base
, ary @line-height-base
ny toetra ho fototry ny typografika@link-color
ary ampiharo amin'ny tsipika mitsipitsipika rohy ihany:hover
Ireo fomba ireo dia azo jerena ao anaty scaffolding.less
.
Ho an'ny famandrihana amin'ny navigateur tsaratsara kokoa dia mampiasa Normalize.css , tetikasa nataon'i Nicolas Gallagher sy Jonathan Neal izahay .
Ny Bootstrap dia mila singa misy mba hamehezana ny votoatin'ny tranokala sy hipetrahanay ny rafitra grid. Azonao atao ny misafidy iray amin'ireo kaontenera roa hampiasaina amin'ny tetikasanao. Mariho fa, noho ny padding
sy ny maro hafa, dia tsy misy fitoeran-javatra azo nestable.
Ampiasaina .container
ho an'ny fitoeran-javatra misy sakany raikitra.
<div class="container">
...
</div>
Ampiasao .container-fluid
amin'ny fitoeran-javatra mivelatra feno, mandrakotra ny sakan'ny seranan-tsambonao manontolo.
<div class="container-fluid">
...
</div>
Ny Bootstrap dia misy rafi-pamokarana ranon-tsolika voalohany mandray andraikitra, izay mizana araka ny tokony ho izy hatramin'ny tsanganana 12 rehefa mitombo ny haben'ny fitaovana na ny seranan-tsambo. Tafiditra ao anatin'izany ireo kilasy efa voafaritra mialoha ho an'ny safidy fandrindrana mora, ary koa fifangaroan-kery matanjaka amin'ny famoronana lamina semantika kokoa .
Ny rafitra Grid dia ampiasaina amin'ny famoronana fandrafetana pejy amin'ny alàlan'ny andian-tsipika sy tsanganana izay mametraka ny atiny. Ity ny fomba fiasan'ny rafitra grid Bootstrap:
.container
(fixed-width) na .container-fluid
(full-width) ho an'ny fampifanarahana tsara sy ny padding..row
dia .col-xs-4
azo atao amin'ny fanaovana lamina haingana. Ny mixins kely kokoa dia azo ampiasaina amin'ny famolavolana semantika bebe kokoa.padding
. Io padding io dia apetraka amin'ny andalana ho an'ny tsanganana voalohany sy farany amin'ny alàlan'ny sisiny ratsy eo amin'ny .row
s..col-xs-4
..col-md-*
kilasy iray amin'ny singa iray dia tsy hisy fiantraikany amin'ny famolavolana azy amin'ny fitaovana antonony ihany fa amin'ny fitaovana lehibe koa raha tsy misy .col-lg-*
kilasy.Jereo ireo ohatra amin'ny fampiharana ireo fitsipika ireo amin'ny codeo.
Mampiasa ireto fanontaniana fampitam-baovao manaraka ireto izahay ao amin'ny Less files mba hamoronana ireo teboka fiatoana lehibe ao amin'ny rafitra grid.
/* 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) { ... }
Manitatra tsindraindray ireo fanontanian'ny media ireo izahay mba hampidirana ny max-width
hamerana ny CSS amin'ny fitaovana tery kokoa.
@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) { ... }
Jereo ny fomba fiasan'ny rafitra grid Bootstrap amin'ny fitaovana maro miaraka amin'ny latabatra azo ampiasaina.
Fitaovana kely fanampiny Phone (<768px) | Fitaovana kely Tablets (≥768px) | Desktop fitaovana antonony (≥992px) | Fitaovana lehibe Desktop (≥1200px) | |
---|---|---|---|---|
Fihetsika Grid | Marindrano amin'ny fotoana rehetra | Nirodana hanomboka, mitsivalana eo ambonin'ny teboka tapaka | ||
Sakan'ny kaontenera | Tsy misy (auto) | 750px | 970px | 1170px |
Prefix kilasy | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# tsanganana | 12 | |||
Sakan'ny tsanganana | fiara | ~62px | ~81px | ~97px |
Sakan'ny tatatra | 30px (15px amin'ny lafiny tsirairay amin'ny tsanganana) | |||
Nestable | ENY | |||
maivana | ENY | |||
Filaharana tsanganana | ENY |
Amin'ny fampiasana kilasin-tsarimihetsika tokana .col-md-*
, azonao atao ny mamorona rafitra rindrankajy fototra izay manomboka mivondrona amin'ny fitaovana finday sy ny takelaka (ilay kely fanampiny ka hatramin'ny kely) alohan'ny hahatongavanao mitsivalana eo amin'ny fitaovana desktop (medium). Asio tsanganana grid amin'ny .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>
Avadika ho fisehon'ny sakan'ny rehetra amin'ny alalan'ny fanovana ny ivelany ivelany .container
ho .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Tsy tianao ve ny hametraka ny tsangananao amin'ny fitaovana kely kokoa? Ampiasao ny kilasin'ny fitaovana kely sy salantsalany fanampiny amin'ny fanampiana .col-xs-*
.col-md-*
ny tsangananao. Jereo ny ohatra etsy ambany raha te hahalala tsara kokoa ny fomba fiasan'izy rehetra.
<!-- 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>
Amboary amin'ny ohatra teo aloha amin'ny alàlan'ny famoronana drafitra mavitrika sy mahery kokoa miaraka amin'ny .col-sm-*
kilasy tablette.
<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>
Raha tsanganana mihoatra ny 12 no apetraka ao anatin'ny andalana iray, ny vondrona tsirairay misy tsanganana fanampiny dia, amin'ny maha singa iray, dia mifono tsipika vaovao.
<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>
Miaraka amin'ireo andalana efatra misy ny grids dia tsy maintsy miatrika olana ianao izay, amin'ny toerana tapaka sasany, ny tsangananao dia tsy mazava tsara satria ny iray dia lava kokoa noho ny iray. Mba hamahana an'izany dia ampiasao ny fitambaran'ny a .clearfix
sy ny kilasin'ny utility responsive .
<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>
Ho fanampin'ny famafazana tsanganana amin'ny toerana fiatoana mamaly, mety mila averinao indray ny offset, fanosehana, na fisintonana . Jereo ity hetsika ity ao amin'ny ohatra grid .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
Alefaso miankavanana ny tsanganana amin'ny fampiasana .col-md-offset-*
kilasy. Ireo kilasy ireo dia mampitombo ny sisiny havia amin'ny tsanganana amin'ny *
tsanganana. Ohatra, .col-md-offset-4
mihetsika .col-md-4
mihoatra ny tsanganana efatra.
<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>
Azonao atao koa ny manafoana ny offset avy amin'ny ambaratonga ambany ambany miaraka amin'ny .col-*-offset-0
kilasy.
<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>
Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .row
sy andiana .col-sm-*
tsanganana iray ao anatin'ny .col-sm-*
tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy 12 na latsaka (tsy voatery hampiasa ny tsanganana 12 rehetra misy ianao).
<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>
Ovay mora foana ny filaharan'ireo tsanganana an-tsarimihetsika misy antsika miaraka amin'ny .col-md-push-*
kilasy .col-md-pull-*
modifier.
<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>
Ho fanampin'ny kilasin'ny grids efa vita mialoha ho an'ny fandrindrana haingana, ny Bootstrap dia misy fari-pahalalana kely kokoa sy fifangaroana ho an'ny famoronana haingana ny drafitrao tsotra sy semantika.
Ny miovaova dia mamaritra ny isan'ny tsanganana, ny sakan'ny tatatra ary ny toerana fangataham-baovao hanombohana tsanganana mitsingevana. Ampiasainay ireo mba hamoronana ireo kilasy efa voafaritra mialoha voarakitra etsy ambony, ary koa ho an'ireo mixins mahazatra voatanisa etsy ambany.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Ny mixins dia ampiasaina miaraka amin'ny fari-piainan'ny grid mba hamoronana CSS semantika ho an'ny tsanganana tsirairay.
// 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));
}
}
Azonao atao ny manova ny fari-piainana amin'ny soatoavinao manokana, na mampiasa fotsiny ny mixins miaraka amin'ny sanda mahazatra azy. Ity misy ohatra iray amin'ny fampiasana ny firafitry ny default mba hamoronana lamina misy tsanganana roa misy elanelana eo anelanelany.
.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>
Ny lohateny HTML rehetra, <h1>
amin'ny alàlan'ny <h6>
, dia misy. .h1
amin'ny alalan'ny .h6
kilasy dia misy ihany koa, satria rehefa te hampifanaraka ny endri-tsoratra amin'ny lohateny iray ianao nefa mbola tianao haseho an-tsipika ny lahatsoratrao.
h1. Lohatenin'ny bootstrap |
Semibold 36px |
h2. Lohatenin'ny bootstrap |
Semibold 30px |
h3. Lohatenin'ny bootstrap |
Semibold 24px |
h4. Lohatenin'ny bootstrap |
Semibold 18px |
h5. Lohatenin'ny bootstrap |
Semibold 14px |
h6. Lohatenin'ny bootstrap |
Semibold 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Mamorona lahatsoratra maivana kokoa sy faharoa amin'ny lohateny rehetra misy <small>
marika na .small
kilasy.
h1. Lohateny Bootstrap Lahatsoratra faharoa |
h2. Lohateny Bootstrap Lahatsoratra faharoa |
h3. Lohateny Bootstrap Lahatsoratra faharoa |
h4. Lohateny Bootstrap Lahatsoratra faharoa |
h5. Lohateny Bootstrap Lahatsoratra faharoa |
h6. Lohateny Bootstrap Lahatsoratra faharoa |
<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>
Ny default manerantany an'ny Bootstrap font-size
dia 14px , miaraka line-height
amin'ny 1.428 . Izany dia mihatra amin'ny <body>
and paragrafy rehetra. Ho fanampin'izany, <p>
(fehintsoratra) dia mahazo sisiny ambany amin'ny antsasaky ny haavon'ny tsipika voatanisa (10px amin'ny alàlan'ny default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Tsy misy id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Manaova fehintsoratra miavaka amin'ny fanampiana .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Ny mari-pamantarana typografika dia mifototra amin'ny fari-pitsipika roa Less amin'ny variables.less : @font-size-base
ary @line-height-base
. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra. Mampiasa ireo fari-pahalalana sy matematika tsotra ireo izahay mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazan-tsika rehetra sy ny maro hafa. Amboary izy ireo ary mampifanaraka ny Bootstrap.
Mba hanasongadinana andian-dahatsoratra noho ny maha-zava-dehibe azy amin'ny toe-javatra hafa, ampiasao ny <mark>
tag.
Azonao atao ny mampiasa ny marika marika tonisongadinalahatsoratra.
You can use the mark tag to <mark>highlight</mark> text.
Mba hanondroana andian-tsoratra voafafa dia ampiasao ny <del>
tag.
Ity andalana lahatsoratra ity dia natao ho raisina ho lahatsoratra voafafa.
<del>This line of text is meant to be treated as deleted text.</del>
Raha manondro andian-dahatsoratra tsy misy dikany intsony dia ampiasao ny <s>
marika.
Ity andalana lahatsoratra ity dia natao ho raisina ho tsy marina intsony.
<s>This line of text is meant to be treated as no longer accurate.</s>
Mba hanondroana fanampiny amin'ny antontan-taratasy dia ampiasao ny <ins>
tag.
Ity andalana lahatsoratra ity dia natao ho raisina ho fanampin'ny antontan-taratasy.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Mba hanitsiana lahatsoratra dia ampiasao ny <u>
tag.
Ity andalana amin'ny lahatsoratra ity dia hadika toy ny misy tsipihina
<u>This line of text will render as underlined</u>
Ampiasao ny mari-pamantarana manan-danja amin'ny HTML miaraka amin'ny fomba maivana.
Mba hanamafisana ny tsipika an-tsoratra na andian-tsoratra, ampiasao ny <small>
marika mba hametrahana lahatsoratra amin'ny 85% ny haben'ny ray aman-dreny. Ny singa lohateniny dia mahazo ny azy manokana font-size
ho an'ny singa misy akany <small>
.
Azonao atao koa ny mampiasa singa inline miaraka .small
amin'ny solon'ny <small>
.
Ity andalana lahatsoratra ity dia natao ho raisina ho printy tsara.
<small>This line of text is meant to be treated as fine print.</small>
Mba hanamafisana sombin-tsoratra misy lanja mavesatra kokoa.
Nadika ho lahatsoratra mibaribary ity sombin-tsoratra manaraka ity .
<strong>rendered as bold text</strong>
Mba hanamafisana sombin-tsoratra misy sora-mandry.
Ity sombin-tsoratra manaraka ity dia nadika ho lahatsoratra miorim-paka .
<em>rendered as italicized text</em>
Aza misalasala mampiasa <b>
sy <i>
amin'ny HTML5. <b>
dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny fa <i>
indrindra amin'ny feo, teny teknika, sns.
Ampifanaraho mora amin'ny singa miaraka amin'ny kilasy fampifanarahana lahatsoratra.
Lahatsoratra milahatra ankavia.
Lahatsoratra mirindra afovoany.
Lahatsoratra mirindra tsara.
Lahatsoratra voamarina.
Tsy misy lahatsoratra fonosina.
<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>
Ovay ny lahatsoratra amin'ny singa miaraka amin'ny kilasy fanaovana sora-baventy.
Lahatsoratra kely.
Lahatsoratra lehibe.
Lahatsoratra misy renisoratra.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Fampiharana ny <abbr>
singa HTML ho an'ny fanafohezana sy fanafohezana mba hampisehoana ny dikan-teny miitatra amin'ny hover. Ny fanafohezana miaraka amin'ny title
toetra dia manana sisiny ambany misy teboka maivana ary cursor fanampiana eo amin'ny fantson-drano, manome teny manodidina fanampiny momba ny hover sy ho an'ireo mpampiasa ny teknolojia manampy.
Ny fanafohezana ny teny hoe attribute dia attr .
<abbr title="attribute">attr</abbr>
Ampio .initialism
amin'ny fanafohezana ny haben'ny endritsoratra kely kokoa.
HTML no zavatra tsara indrindra hatramin'ny mofo voatetika.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Asehoy ny mombamomba ny fifandraisana ho an'ny razana akaiky indrindra na ny vondron'asa manontolo. Tehirizo ny format amin'ny famaranana ny andalana rehetra amin'ny <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>
Raha mitanisa votoaty avy amin'ny loharano hafa ao anatin'ny antontan-taratasinao.
Fenoy <blockquote>
ny HTML rehetra ho toy ny teny nindramina. Ho an'ny teny fohy dia manoro hevitra izahay <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Fiovana fomba sy atiny ho an'ny fiovaovana tsotra amin'ny fenitra <blockquote>
.
Ampio a <footer>
ho famantarana ny loharano. Fonosy amin'ny <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>
Ampio .blockquote-reverse
ho blockquote misy atiny mirindra tsara.
<blockquote class="blockquote-reverse">
...
</blockquote>
Lisitry ny singa izay tsy misy dikany mazava ny filaharana.
<ul>
<li>...</li>
</ul>
Lisitry ny zavatra misy ny filaharana manan-danja mazava .
<ol>
<li>...</li>
</ol>
Esory ny list-style
sisin-tany sy ny sisiny havia amin'ny lisitra (ankizy avy hatrany ihany). Ity dia mihatra amin'ny lisitry ny lisitry ny ankizy eo no ho eo ihany , midika izany fa mila manampy ny kilasy ho an'ny lisitra misy akany ihany koa ianao.
<ul class="list-unstyled">
<li>...</li>
</ul>
Apetraho eo amin'ny tsipika tokana miaraka display: inline-block;
amin'ny padding maivana ny singa rehetra.
<ul class="list-inline">
<li>...</li>
</ul>
Lisitry ny teny miaraka amin'ny famaritana azy.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Manaova teny sy famaritana amin'ny <dl>
filaharana mifanila. Manomboka amin'ny stacked toy ny default <dl>
s, fa rehefa mivelatra ny navbar, dia ataovy izany.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Ny lisitr'ireo famaritana marindrano dia hanapaka ny teny lava loatra ka tsy ho tafiditra ao amin'ny tsanganana havia miaraka amin'ny text-overflow
. Amin'ny toerana fijerena tery kokoa dia hiova ho amin'ny fisehon'ny stacked default izy ireo.
Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>
.
<section>
tokony hofonosina toy ny inline.
For example, <code><section></code> should be wrapped as inline.
Ampiasao ny <kbd>
manondro ny fampidirana izay matetika ampidirina amin'ny alalan'ny fitendry.
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>
Ampiasao <pre>
amin'ny andalana maromaro maromaro. Aza hadino ny mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy.
<p>Santionany lahatsoratra eto...</p>
<pre><p>Sample text here...</p></pre>
Azonao atao ihany koa ny manampy ny .pre-scrollable
kilasy, izay hametraka ny haavon'ny 350px ambony indrindra ary hanome scrollbar y-axis.
Ho an'ny fanondro ny fari-piainana dia ampiasao ny <var>
tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Mba hanondroana blocs santionany vokatra avy amin'ny programa dia ampiasao ny <samp>
tag.
Ity lahatsoratra ity dia natao ho raisina ho santionany vokatra avy amin'ny programa informatika.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Ho an'ny styling fototra — padding maivana ary mpizara marindrano fotsiny — ampio ny kilasy fototra .table
amin'ny <table>
. Mety ho toa tafahoatra loatra izany, saingy noho ny fampiasana tabilao miely patrana ho an'ny plugins hafa toy ny kalandrie sy ny fakana daty, dia nisafidy ny hanasaraka ny fomba latabatra mahazatra izahay.
# | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
---|---|---|---|
1 | marika | Otto | @mdo |
2 | Jakoba | Thornton | @matavy |
3 | Larry | ny Vorona |
<table class="table">
...
</table>
Ampiasao .table-striped
mba hanampiana zebra-striping amin'ny andalana latabatra ao anatin'ny <tbody>
.
Ny latabatra miolakolaka dia asiana endrika amin'ny alalan'ny :nth-child
CSS selector, izay tsy hita ao amin'ny Internet Explorer 8.
# | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
---|---|---|---|
1 | marika | Otto | @mdo |
2 | Jakoba | Thornton | @matavy |
3 | Larry | ny Vorona |
<table class="table table-striped">
...
</table>
Ampio .table-bordered
ny sisin-tany amin'ny lafiny rehetra amin'ny latabatra sy ny sela.
# | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
---|---|---|---|
1 | marika | Otto | @mdo |
2 | Jakoba | Thornton | @matavy |
3 | Larry | ny Vorona |
<table class="table table-bordered">
...
</table>
Ampio .table-hover
mba ahafahan'ny toetry ny hover amin'ny andalana latabatra ao anatin'ny <tbody>
.
# | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
---|---|---|---|
1 | marika | Otto | @mdo |
2 | Jakoba | Thornton | @matavy |
3 | Larry | ny Vorona |
<table class="table table-hover">
...
</table>
Ampio .table-condensed
mba hahatonga ny latabatra ho mirindra kokoa amin'ny alalan'ny fanapahana ny padding sela ho antsasany.
# | Fanampin'anarana | Anarana | Anaran'ny mpampiasa |
---|---|---|---|
1 | marika | Otto | @mdo |
2 | Jakoba | Thornton | @matavy |
3 | Larry the Bird |
<table class="table table-condensed">
...
</table>
Mampiasà kilasy contextual handokoana ny andalana latabatra na ny sela tsirairay.
KILASY | Description |
---|---|
.active |
Mampihatra ny loko hover amin'ny andalana na sela manokana |
.success |
Manondro hetsika mahomby na tsara |
.info |
Manondro fiovana na hetsika tsy miandany amin'ny fampahafantarana |
.warning |
Manondro fampitandremana mety mila fitandremana |
.danger |
Manondro hetsika mampidi-doza na mety ho ratsy |
# | Lohatenin'ny tsanganana | Lohatenin'ny tsanganana | Lohatenin'ny tsanganana |
---|---|---|---|
1 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
2 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
3 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
4 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
5 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
6 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
7 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
8 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
9 | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana | Ny votoatin'ny tsanganana |
<!-- 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>
Ny fampiasana loko hanampiana dikany amin'ny laharan-databatra na ny sela tsirairay dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary avy amin'ny atiny (ny soratra hita ao amin'ny andalana/sehatra latabatra mifandraika), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-only
kilasy.
Mamorona tabilao mandray andraikitra amin'ny famenoana izay rehetra.table
mba .table-responsive
hahatonga azy ireo hivezivezy mitsivalana amin'ny fitaovana kely (latsaky ny 768px). Rehefa mijery zavatra lehibe kokoa noho ny 768px ny sakany dia tsy hahita fahasamihafana amin'ireo tabilao ireo ianao.
Mampiasa overflow-y: hidden
, izay manaisotra ny atiny rehetra mihoatra ny sisiny ambany na ambony amin'ny latabatra ny latabatra mandray andraikitra. Amin'ny ankapobeny, ity dia afaka manapaka ny menio midina sy ny widgets an'ny antoko fahatelo.
Firefox dia manana styling fieldset hafahafa width
izay manelingelina ny latabatra mandray andraikitra. Tsy azo ovaina izany raha tsy misy hack manokana amin'ny Firefox izay tsy omenay ao amin'ny Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
Raha mila fanazavana fanampiny dia vakio ity valiny Stack Overflow ity .
# | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra |
---|---|---|---|---|---|---|
1 | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
2 | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
3 | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
# | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra | Lohatenin'ny latabatra |
---|---|---|---|---|---|---|
1 | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
2 | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
3 | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra | Efitra latabatra |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Ny fanaraha-maso ny endrika tsirairay dia mahazo styling manerantany. Ny soratra <input>
, <textarea>
, ary ny <select>
singa rehetra misy .form-control
dia apetraka width: 100%;
amin'ny default. Fenoy ny etikety sy ny fanaraha-maso .form-group
mba hahazoana elanelana tsara indrindra.
<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>
Aza afangaro mivantana amin'ny vondrona fampidirana . Alefaso kosa ny vondrona fampidirana ao anatin'ny vondrona endrika.
Ampio .form-inline
amin'ny endrikao (izay tsy voatery ho a <form>
) ho an'ny fanaraha-maso mirindra ankavia sy an-tsipika. Ity dia mihatra amin'ny endrika ao anatin'ny efitrano fijerena izay 768px farafahakeliny ny sakany.
width: 100%;
Nampiharina tamin'ny alàlan'ny default ao amin'ny Bootstrap ny fampidirana sy ny safidy. Ao anatin'ny endrika inline dia averinay izany mba width: auto;
ahafahan'ny fanaraha-maso maro mipetraka amin'ny andalana iray ihany. Miankina amin'ny fandrafetanao, mety mila sakany manokana fanampiny.
Ny mpamaky efijery dia hanana olana amin'ny endrikao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo endrika an-tsoratra ireo dia azonao atao ny manafina ireo etikety amin'ny fampiasana ny .sr-only
kilasy. Misy fomba hafa hafa amin'ny fanomezana marika ho an'ny teknolojia manampy, toy ny aria-label
, aria-labelledby
na title
toetra. Raha tsy misy ny iray amin'ireo, dia mety hampiasa ilay placeholder
toetra ny mpamaky efijery, raha misy, saingy mariho fa tsy soso-kevitra ny fampiasana placeholder
ho solon'ny fomba fametahana marika hafa.
<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>
Ampiasao ny kilasin'ny grid efa voafaritra mialoha an'i Bootstrap mba hampifanaraka ireo etikety sy vondrona fanaraha-maso amin'ny endrika mitsivalana amin'ny alàlan'ny fanampiana .form-horizontal
ny endrika (izay tsy voatery ho <form>
). Ny fanaovana izany dia manova .form-group
ny fitondran-tena ho toy ny andalana grid, ka tsy mila .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>
Ohatra amin'ny fanaraha-mason'ny endrika manara-penitra tohanana amin'ny fandrafetana endrika ohatra.
Fanaraha-maso endrika mahazatra indrindra, sehatra fampidirana mifototra amin'ny lahatsoratra. Ahitana fanohanana ny karazana HTML5 rehetra: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, ary color
.
Ny fampidirana dia ho voalamina tanteraka raha toa ka ambara araka ny type
tokony ho izy.
<input type="text" class="form-control" placeholder="Text input">
Raha te hampiditra lahatsoratra na bokotra mitambatra mialoha sy/na aorian'izay mifototra amin'ny lahatsoratra <input>
, jereo ny singa vondrona fampidirana .
Fanaraha-maso endrika izay manohana andalana lahatsoratra maro. Ovay rows
ny toetra raha ilaina.
<textarea class="form-control" rows="3"></textarea>
Ny boaty dia natao hisafidianana safidy iray na maromaro ao anaty lisitra, raha ny radio kosa dia natao hisafidianana safidy iray amin'ny maro.
Tohanana ny boaty fisavana sy ny radio kilemaina, fa raha te-hanome cursor "tsy azo ekena" eo amin'ny fantson'ny ray aman-dreny <label>
, dia mila ampidirinao amin'ny .disabled
ray aman-dreny ny kilasy .radio
, .radio-inline
, .checkbox
, na .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>
Ampiasao ny kilasy .checkbox-inline
na .radio-inline
amin'ny andian-tsarimihetsika na radio ho an'ny fanaraha-maso izay miseho amin'ny andalana mitovy.
<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>
Raha tsy manana lahatsoratra ao anatin'ny <label>
, dia apetraka araka ny nantenainao ny fidirana. Amin'izao fotoana izao dia tsy miasa afa-tsy amin'ny boaty fisaka tsy an-tserasera sy radio. Tsarovy fa mbola manome endrika marika ho an'ny teknolojia manampy (ohatra, ny fampiasana 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>
Mariho fa maro ny menio voafantina teratany - izany hoe ao amin'ny Safari sy Chrome - manana zoro boribory izay tsy azo ovaina amin'ny alàlan'ny border-radius
fananana.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Ho an'ny <select>
fanaraha-maso miaraka amin'ny multiple
toetra, safidy maro no aseho amin'ny alàlan'ny default.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Rehefa mila mametraka lahatsoratra tsotra eo akaikin'ny etikety amin'ny endrika ianao dia ampiasao ny .form-control-static
kilasy amin'ny <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>
Esorinay ny outline
fomba fanao mahazatra amin'ny fifehezana endrika sasany ary ampiharo box-shadow
amin'ny toerany ny :focus
.
:focus
fanjakanaNy fampidirana ohatra etsy ambony dia mampiasa fomba fanao ao amin'ny antontan-taratasintsika mba hanehoana ny :focus
fanjakana amin'ny .form-control
.
Ampio ny disabled
toetra boolean amin'ny fampidirana iray mba hisorohana ny fifandraisan'ny mpampiasa. Ny fampidirana kilemaina dia miseho maivana kokoa ary manampy not-allowed
cursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Ampio ny disabled
toetra amin'ny a <fieldset>
hanalana ny fanaraha-maso rehetra ao anatin'ny <fieldset>
indray mandeha.
<a>
Amin'ny alàlan'ny default, ny mpitety tranonkala dia hitondra ny fanaraha-maso ny endriky ny teratany rehetra ( <input>
, <select>
sy ny <button>
singa) ao anatin'ny ho <fieldset disabled>
toy ny kilemaina, manakana ny fifandraisan'ny klavier sy ny totozy eo aminy. Na izany aza, raha misy <a ... class="btn btn-*">
singa ihany koa ny endrikao, dia homena style of pointer-events: none
. Araka ny nomarihina tao amin'ny fizarana momba ny toetry ny kilema ho an'ny bokotra (ary indrindra indrindra ao amin'ny fizarana ho an'ny singa vatofantsika), ity fananana CSS ity dia tsy mbola manara-penitra ary tsy tohana tanteraka ao amin'ny Opera 18 sy ambany, na ao amin'ny Internet Explorer 11, ary nandresy. 't manakana ny mpampiasa klavier tsy ho afaka hifantoka na hampavitrika ireo rohy ireo. Noho izany, mba ho azo antoka, mampiasa JavaScript manokana hanaisotra ny rohy toy izany.
Raha hampihatra ireo fomba ireo amin'ny navigateur rehetra i Bootstrap, ny Internet Explorer 11 sy ambany dia tsy manohana tanteraka ny disabled
toetra amin'ny <fieldset>
. Mampiasà JavaScript manokana hanesorana ny saha ao amin'ireo mpitety tranonkala ireo.
<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>
Ampio ny readonly
toetra boolean amin'ny fampidirana iray mba hisorohana ny fanovana ny sandan'ny fampidirana. Ny fampidirana vakiana fotsiny dia toa maivana kokoa (tahaka ny fampidirana kilemaina), saingy tazony ny cursor mahazatra.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Sakanana lahatsoratra fanampiana ambaratonga ho an'ny fifehezana endrika.
Ny lahatsoratra fanampiana dia tokony ampifandraisina mazava amin'ny fifehezana endrika mifandraika amin'ny fampiasana ilay aria-describedby
toetra. Izany dia hiantoka fa ny teknolojia manampy - toy ny mpamaky efijery - dia hanambara ity lahatsoratra fanampiana ity rehefa mifantoka na miditra amin'ny fanaraha-maso ny mpampiasa.
<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>
Ny Bootstrap dia misy fomba fanamarinana ho an'ny fahadisoana, fampitandremana ary fahombiazana amin'ny fifehezana endrika. Mampiasa, manampy .has-warning
, .has-error
, na .has-success
amin'ny singa parent. Izay rehetra .control-label
, .form-control
, ary .help-block
ao anatin'io singa io dia hahazo ny fomba fanamarinana.
Ny fampiasana ireo fomba fanamarinana ireo mba hilazana ny toetry ny fanaraha-maso ny endrika dia manome famantarana miloko miloko ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery - na amin'ireo mpampiasa jamba miloko.
Ataovy azo antoka fa misy famantarana hafa momba ny fanjakana koa omena. Ohatra, azonao atao ny mampiditra soso-kevitra momba ny fanjakana ao amin'ny lahatsoratry ny fanaraha-maso ny endrika <label>
(tahaka ny amin'ity ohatra kaody manaraka ity), ampidiro ny Glyphicon (miaraka amin'ny lahatsoratra hafa mifanentana amin'ny fampiasana ny .sr-only
kilasy - jereo ny ohatra Glyphicon ), na amin'ny fanomezana fanampim -panampiana text block. Ho an'ny teknolojia fanampiana manokana, ny fanaraha-maso endrika tsy mety dia azo omena aria-invalid="true"
toetra ihany koa.
<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>
Azonao atao ihany koa ny manampy kisary fanehoan-kevitra azo atao miaraka amin'ny fanampin'ny .has-feedback
sy ny kisary havanana.
Ny kisary fanehoan-kevitra dia miasa amin'ny <input class="form-control">
singa soratra ihany.
Ilaina ny fametrahana kisary fanehoan-kevitra amin'ny tanana ho an'ny fampidirana tsy misy marika sy ho an'ny vondrona fampidirana misy fanampim-panampiana eo ankavanana. Amporisihina mafy ianao hanome etikety ho an'ny fidirana rehetra noho ny antony hidirana. Raha te hisoroka ny etikety tsy hiseho ianao dia afeno miaraka amin'ny .sr-only
kilasy. Raha tsy maintsy manao tsy misy etikety ianao dia amboary ny top
sandan'ny kisary fanehoan-kevitra. Ho an'ny vondrona fampidirana, ampifanaraho amin'ny right
sandan'ny piksel mifanaraka amin'ny sakan'ny addon ny sandany.
Mba hahazoana antoka fa ny teknolojia manampy - toy ny mpamaky efijery - dia mampita tsara ny dikan'ny kisary iray, dia tokony hampidirina amin'ny .sr-only
kilasy ny lahatsoratra miafina fanampiny ary ampifandraisina mazava amin'ny fifehezana endrika mifandraika amin'ny fampiasana azy aria-describedby
. Raha tsy izany, ataovy azo antoka fa ny dikany (ohatra, ny fisian'ny fampitandremana ho an'ny saha fampidirana lahatsoratra manokana) dia ampitaina amin'ny endrika hafa, toy ny fanovana ny lahatsoratry ny tena <label>
mifandray amin'ny fanaraha-maso ny endrika.
Na dia efa milaza aza ireto ohatra manaraka ireto ny toetry ny fanamarinana ny fanaraha-maso ny endriny tsirairay ao amin'ny <label>
lahatsoratra, ny teknika etsy ambony (mampiasa .sr-only
lahatsoratra sy aria-describedby
) dia nampidirina ho an'ny tanjona fanoharana.
<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
Kisary azo atao misy marika miafinaRaha mampiasa ny .sr-only
kilasy ianao mba hanafenana ny fanaraha-maso ny endrika <label>
(fa tsy mampiasa safidy fametahana marika hafa, toy ny aria-label
toetra), dia hanitsy ho azy ny toeran'ny kisary i Bootstrap rehefa ampiana izany.
<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>
Mametraha haavo amin'ny fampiasana kilasy toy ny .input-lg
, ary mametraha sakany amin'ny alàlan'ny kilasy tsanganana grid toy ny .col-lg-*
.
Mamorona fifehezana endrika avo kokoa na fohy kokoa mifanaraka amin'ny haben'ny bokotra.
<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>
Haingana hamehezana etikety sy fehezina ao anatiny .form-horizontal
amin'ny fanampiana.form-group-lg
na .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>
Ampidiro ao anaty tsanganana grid, na singa ray aman-dreny mahazatra, mba hampiharana mora ny sakany irina.
<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>
Ampiasao ny kilasy bokotra amin'ny singa <a>
, <button>
, na <input>
.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Raha azo ampiasaina amin'ny <a>
sy <button>
singa ny kilasin'ny bokotra, ny <button>
singa ihany no tohanana ao anatin'ny singa nav sy navbar.
Raha <a>
ampiasaina toy ny bokotra ireo singa - miteraka fampiasa ao anaty pejy, fa tsy mandeha mankany amin'ny antontan-taratasy na fizarana hafa ao anatin'ny pejy ankehitriny - dia tokony homena role="button"
.
Amin'ny maha fomba fanao tsara indrindra, dia manoro hevitra mafy izahay hampiasa ilay <button>
singa isaky ny azo atao mba hiantohana ny famadihana mifanandrify amin'ny navigateur.
Anisan'ny zavatra hafa, misy bug ao amin'ny Firefox <30 izay manakana antsika tsy hametraka ny line-height
bokotra <input>
mifototra, ka mahatonga azy ireo tsy hifanaraka tsara amin'ny haavon'ny bokotra hafa ao amin'ny Firefox.
Ampiasao ny kilasin'ny bokotra misy mba hamoronana bokotra voalamina haingana.
<!-- 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>
Ny fampiasana loko hanampiana ny dikany amin'ny bokotra iray dia manome famantarana hita maso fotsiny, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana aseho amin'ny loko dia miharihary avy amin'ny atiny (ny soratra hita amin'ny bokotra), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-only
kilasy.
Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-lg
, .btn-sm
, na .btn-xs
habe fanampiny.
<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>
Mamorona bokotra haavon'ny sakana — ireo izay mivelatra amin'ny sakan'ny ray aman-dreny iray — amin'ny alalan'ny fanampiana .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>
Ny bokotra dia hiseho voatsindry (miaraka amin'ny fiaviana maizina, sisintany maizina, ary aloka miditra) rehefa mavitrika. Ho an'ny <button>
singa dia atao amin'ny alàlan'ny :active
. Ho an'ny <a>
singa dia vita amin'ny .active
. Na izany aza, azonao ampiasaina .active
amin'ny <button>
s (ary ampidiro ny aria-pressed="true"
toetra) raha mila mamerina ny fanjakana mavitrika amin'ny programa ianao.
Tsy ilaina ny manampy :active
fa pseudo-class izany, fa raha mila manery ny endrika mitovy ianao dia tohizo ary ampio .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>
Ampio ny .active
kilasy amin'ny <a>
bokotra.
<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>
Ataovy toy ny tsy azo kitihina ny bokotra amin'ny alàlan'ny fanafoanana azy ireo miaraka amin'ny opacity
.
Ampio ny disabled
toetra amin'ny <button>
bokotra.
<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>
Raha ampidirinao amin'ny disabled
, ny <button>
Internet Explorer 9 sy ny ambany dia hamoaka lahatsoratra miloko volomparasy miaraka amin'ny alokaloka ratsy izay tsy azontsika amboarina.
Ampio ny .disabled
kilasy amin'ny <a>
bokotra.
<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>
Ampiasainay .disabled
ho toy ny kilasin'ny fitaovana eto, mitovy amin'ny .active
kilasy mahazatra, ka tsy ilaina ny prefix.
Ity kilasy ity dia mampiasa pointer-events: none
hanandrana manafoana ny fampandehanana rohy an'ny <a>
s, saingy io fananana CSS io dia tsy mbola manara-penitra ary tsy tohanana tanteraka ao amin'ny Opera 18 sy ambany, na ao amin'ny Internet Explorer 11. Ankoatra izany, na dia ao amin'ny navigateur izay manohana pointer-events: none
ny klavier aza. Tsy misy fiantraikany ny fitetezana, midika izany fa mbola afaka manetsika ireo rohy ireo ny mpampiasa klavier sy ny mpampiasa ny teknolojia mpanampy. Noho izany, mba ho azo antoka, mampiasa JavaScript manokana hanaisotra ny rohy toy izany.
Ny sary ao amin'ny Bootstrap 3 dia azo atao mora raisina amin'ny alàlan'ny fanampiana ny .img-responsive
kilasy. Izany dia mihatra max-width: 100%;
, height: auto;
ary display: block;
amin'ny sary ka mizana tsara amin'ny singa ray.
Mba hampifantoka ny sary mampiasa ny .img-responsive
kilasy, ampiasao .center-block
fa tsy .text-center
. Jereo ny fizarana kilasin'ny mpanampy raha mila fanazavana fanampiny momba ny .center-block
fampiasana.
.img-responsive
Ao amin'ny Internet Explorer 8-10, tsy mifandanja ny haben'ny sary SVG misy. Mba hamahana izany dia ampio width: 100% \9;
izay ilaina. Bootstrap dia tsy mampihatra izany ho azy satria miteraka fahasarotana amin'ny endrika sary hafa.
<img src="..." class="img-responsive" alt="Responsive image">
Manampia kilasy amin'ny <img>
singa iray mba hamoronana sary mora amin'ny tetikasa rehetra.
Ataovy ao an-tsaina fa ny Internet Explorer 8 dia tsy manana fanohanana ny zoro boribory.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Ampidiro ny dikany amin'ny alàlan'ny loko miaraka amin'ny kilasy fampiasa amin'ny fanamafisana vitsivitsy. Mety hampiharina amin'ny rohy ihany koa ireo ary hihamaizina amin'ny hover toy ny fomban'ny rohy mahazatra.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Indraindray ny kilasy fanamafisana dia tsy azo ampiharina noho ny maha-manokana ny mpifidy hafa. Amin'ny ankabeazan'ny toe-javatra, ny vahaolana ampy dia ny famonosana ny lahatsoratrao <span>
amin'ny kilasy.
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana asehon'ny loko dia na miharihary avy amin'ny atiny (ny loko manodidina dia ampiasaina hanamafisana ny dikany efa misy ao amin'ny lahatsoratra/marika), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-only
kilasy .
Mitovitovy amin'ny kilasy lokon'ny lahatsoratra amin'ny teny contextual, apetraho mora amin'ny kilasy contextual ny lafin'ny singa iray. Ny singa vatofantsika dia ho maizina amin'ny hover, toy ny kilasy lahatsoratra.
Id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
Indraindray dia tsy azo ampiharina ny kilasy background contextual noho ny maha manokana an'ny mpifidy hafa. Amin'ny toe-javatra sasany, ny vahaolana ampy dia ny fametahana ny votoatin'ny singanao <div>
amin'ny kilasy.
Toy ny amin'ny loko contextual , ataovy izay hahazoana antoka fa ny dikany rehetra ampitaina amin'ny loko dia ampitaina amin'ny endrika tsy fanehoana fotsiny.
Ampiasao ny kisary akaiky ankapobeny hanesorana votoaty toy ny modals sy fanairana.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Mampiasà carets hanondro ny fiasa sy ny fitarihana midina. Mariho fa ny caret default dia hivadika ho azy amin'ny menus dropup .
<span class="caret"></span>
Asio singa iray miankavia na miankavanana miaraka amin'ny kilasy. !important
dia tafiditra ao mba hisorohana ny olana manokana. Ny kilasy koa dia azo ampiasaina ho 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();
}
Mametraha singa iray mankany display: block
ary afovoany amin'ny alàlan'ny margin
. Misy amin'ny mixin sy class.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
Hazavao mora float
s amin'ny fanampiana .clearfix
ny singa parent . Mampiasa ny micro clearfix araka ny nalazan'i Nicolas Gallagher. Azo ampiasaina ho mixin ihany koa.
<!-- 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();
}
Manery singa iray haseho na afenina ( anisan'izany ny mpamaky efijery ) amin'ny fampiasana .show
sy .hidden
kilasy. Ireo kilasy ireo dia ampiasaina !important
mba hialana amin'ny fifandirana manokana, toy ny quick floats . Tsy misy afa-tsy amin'ny fanodinkodinana ny haavon'ny sakana izy ireo. Izy ireo koa dia azo ampiasaina ho mixins.
.hide
azo alaina, saingy tsy misy fiantraikany amin'ny mpamaky efijery foana izany ary tsy ampiasaina amin'ny v3.0.1 . Ampiasao .hidden
na .sr-only
ho solon'izay.
Fanampin'izay, .invisible
azo ampiasaina hanodina ny fahitana singa iray ihany, midika display
izany fa tsy ovaina ary mety hisy fiantraikany amin'ny fandehan'ny antontan-taratasy ihany ilay singa.
<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();
}
Afeno singa iray amin'ny fitaovana rehetra afa-tsy ny mpamaky efijery misy .sr-only
. Atambatra .sr-only
mba .sr-only-focusable
hampisehoana indray ilay singa rehefa mifantoka (ohatra amin'ny mpampiasa klavier ihany). Ilaina amin'ny fanarahana ireo fomba fanao tsara indrindra amin'ny fidirana . Azo ampiasaina ho mixins ihany koa.
<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();
}
Ampiasao ny .text-hide
kilasy na mixin hanampy amin'ny fanoloana ny votoatin'ny lahatsoratra amin'ny sary ambadika.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
Ho an'ny fampandrosoana haingana kokoa ho an'ny finday, ampiasao ireto kilasy fampiasa ireto mba hampisehoana sy hanafenana votoaty amin'ny alàlan'ny fitaovana amin'ny alàlan'ny fangatahana media. Tafiditra ao anatin'izany ihany koa ny kilasy fampiasa amin'ny fanovana votoaty rehefa vita pirinty.
Andramo ny mampiasa ireo amin'ny fototra voafetra ary aza mamorona dikan-teny hafa tanteraka amin'ny tranokala iray ihany. Ampiasao kosa izy ireo mba hamenoana ny famelabelaran'ny fitaovana tsirairay.
Mampiasà kilasy tokana na fitambaran'ireo kilasy misy mba hamadihana votoaty manerana ny toerana fiatoana amin'ny seranana.
Fitaovana kely fanampinyTelefaonina (<768px) | Fitaovana kelyTablets (≥768px) | Fitaovana antononyDesktop (≥992px) | Fitaovana lehibeDesktop (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
hita maso | Zavatra tsy | Zavatra tsy | Zavatra tsy |
.visible-sm-* |
Zavatra tsy | hita maso | Zavatra tsy | Zavatra tsy |
.visible-md-* |
Zavatra tsy | Zavatra tsy | hita maso | Zavatra tsy |
.visible-lg-* |
Zavatra tsy | Zavatra tsy | Zavatra tsy | hita maso |
.hidden-xs |
Zavatra tsy | hita maso | hita maso | hita maso |
.hidden-sm |
hita maso | Zavatra tsy | hita maso | hita maso |
.hidden-md |
hita maso | hita maso | Zavatra tsy | hita maso |
.hidden-lg |
hita maso | hita maso | hita maso | Zavatra tsy |
Amin'ny v3.2.0, misy karazany telo ny kilasy ho an'ny teboka tsirairay, iray ho an'ny sandan'ny fananana .visible-*-*
CSS tsirairay voatanisa etsy ambany.display
Vondrona kilasy | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Noho izany, ho an'ny efijery kely ( xs
) ohatra, ny .visible-*-*
kilasy misy dia: .visible-xs-block
, .visible-xs-inline
, ary .visible-xs-inline-block
.
Misy ihany koa ireo kilasy .visible-xs
, .visible-sm
, .visible-md
, ary .visible-lg
tsy ampiasaina intsony amin'ny v3.2.0 . Izy ireo dia mitovy amin'ny .visible-*-block
, afa-tsy amin'ny tranga manokana fanampiny ho an'ny <table>
singa mifandraika amin'ny famadihana.
Mitovy amin'ireo kilasy mamaly matetika, ampiasao ireto mba hanodina votoaty ho pirinty.
fianarana | mpitety | pirinty |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Zavatra tsy | hita maso |
.hidden-print |
hita maso | Zavatra tsy |
Misy ihany koa ny kilasy .visible-print
saingy tsy ampiasaina intsony amin'ny v3.2.0 . Izy io dia mitovy amin'ny .visible-print-block
, afa-tsy amin'ny tranga manokana fanampiny ho an'ny <table>
singa mifandraika amin'izany.
Hanova ny haben'ny navigateur na enta-mavesatra amin'ny fitaovana samihafa mba hitsapana ireo kilasy fampiasa mandray andraikitra.
Ny mari-pamantarana maitso dia manondro fa hita ao amin'ny seranan-tsambonao ankehitriny ilay singa.
Eto, ny mari-pamantarana maitso dia manondro ihany koa fa miafina ao amin'ny seranan-tsambonao ankehitriny ilay singa.
Ny CSS Bootstrap dia naorina amin'ny Less, preprocessor manana fiasa fanampiny toy ny variables, mixins, ary fiasa amin'ny fanangonana CSS. Ireo izay mikasa ny hampiasa ny loharano Ny rakitra kely kokoa fa tsy ny rakitra CSS natambatray dia afaka mampiasa ireo fari-pahalalana sy mixins maro ampiasaintsika manerana ny rafitra.
Ny varimbazaha sy ny mixins dia voarakotra ao amin'ny fizarana rafitra Grid .
Ny Bootstrap dia azo ampiasaina amin'ny fomba roa farafahakeliny: miaraka amin'ny CSS natambatra na miaraka amin'ny loharano Less files. Mba hanangonana ny rakitra Kely, jereo ny fizarana fanombohana momba ny fomba fametrahana ny tontolo fampandrosoana anao mba hampandehanana ny baiko ilaina.
Mety miasa miaraka amin'ny Bootstrap ny fitaovana fanangonana antoko fahatelo, saingy tsy tohanan'ny ekipa fototra.
Ampiasaina mandritra ny tetikasa manontolo ny fiovaovana ho toy ny fomba iray hampivondronana sy hizarana ny soatoavina fampiasa matetika toy ny loko, ny elanelana, na ny antonta endri-tsoratra. Raha te hahita fahatapahana tanteraka dia jereo ny Customizer .
Ampiasao mora ny loko roa: grayscale sy semantic. Ny loko grayscale dia manome fidirana haingana amin'ny aloky ny mainty fampiasa matetika raha ny semantika kosa dia misy loko isan-karazany voatendry ho an'ny soatoavina misy dikany.
@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;
Ampiasao ny iray amin'ireo fari-pahaizan'ny loko ireo amin'ny maha-izy azy na avereno amin'ny fari-piainana manan-danja kokoa ho an'ny tetikasanao.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Variana vitsivitsy ho an'ny fanamboarana haingana ireo singa fototra amin'ny taolan'ny tranokalanao.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Ataovy mora ny rohinao amin'ny loko mety miaraka amin'ny sanda tokana.
// 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;
}
}
Mariho fa @link-hover-color
mampiasa asa iray, fitaovana mahafinaritra hafa avy amin'ny Less, mba hamoronana ho azy ny loko hover. Azonao atao ny mampiasa darken
, lighten
, saturate
, ary desaturate
.
Apetraho mora ny endri-tsoratra, ny haben'ny lahatsoratra, ny fitarihana, ary ny maro hafa miaraka amin'ny fari-pitsipika haingana vitsivitsy. Mampiasa ireo ihany koa ny Bootstrap mba hanomezana fampifangaroana typografika mora.
@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;
Variana haingana roa ho an'ny fanamboarana ny toerana sy ny anaran'ny kisaryo.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Ny singa ao amin'ny Bootstrap dia mampiasa ny fari-pahaizan'ny sasany amin'ny fametrahana soatoavina iraisana. Ireto ny tena fampiasa matetika.
@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;
Ny mixins mpivarotra dia mixins hanampy amin'ny fanohanana navigateur maro amin'ny fampidirana ireo prefix mpivarotra mifandraika amin'ny CSS natambatrao.
Avereno amin'ny mixin tokana ny modely boaty misy anao. Ho an'ny teny manodidina, jereo ity lahatsoratra mahasoa avy amin'ny Mozilla ity .
Ny mixin dia tsy ampiasaina amin'ny v3.2.0, miaraka amin'ny fampidirana Autoprefixer. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixin ao anatiny mandra-pahatongan'ny Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Ankehitriny, ny navigateur maoderina rehetra dia manohana ny border-radius
fananana tsy misy tombo-kase. Noho izany, tsy misy .border-radius()
mixin, fa ny Bootstrap dia ahitana ny hitsin-dàlana ho an'ny fihodinana haingana ny zoro roa amin'ny lafiny iray amin'ny zavatra iray.
.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;
}
Raha mampiasa navigateur sy fitaovana farany sy lehibe indrindra ny mpihaino anao, dia ataovy izay hampiasa box-shadow
azy irery. Raha mila fanohanana ho an'ny fitaovana Android taloha (pre-v4) sy iOS (pre-iOS 5) ianao, ampiasao ny mixin efa lany andro mba haka ny -webkit
prefix ilaina.
Ny mixin dia tsy ampiasaina amin'ny v3.1.0, satria ny Bootstrap dia tsy manohana amin'ny fomba ofisialy ireo sehatra efa lany andro izay tsy manohana ny fananana mahazatra. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixin ao anatiny mandra-pahatongan'ny Bootstrap v4.
Aza hadino ny mampiasa rgba()
loko ao amin'ny aloky ny boaty mba hampifangaro azy ireo araka izay azo atao amin'ny fiaviana.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Mixins maro ho an'ny flexibility. Apetraho amin'ny iray ny fampahafantarana tetezamita rehetra, na mametraha fahatarana sy faharetana misaraka raha ilaina.
Ny mixins dia tsy ampiasaina amin'ny v3.2.0, miaraka amin'ny fampidirana Autoprefixer. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixins ao anatiny mandra-pahatongan'ny 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;
}
Ahodina, mizana, mandika (mihetsika), na mitongilana izay zavatra rehetra.
Ny mixins dia tsy ampiasaina amin'ny v3.2.0, miaraka amin'ny fampidirana Autoprefixer. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixins ao anatiny mandra-pahatongan'ny 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;
}
Mixin tokana ho an'ny fampiasana ny toetran'ny animation CSS3 rehetra amin'ny fanambarana iray ary mixins hafa ho an'ny fananana tsirairay.
Ny mixins dia tsy ampiasaina amin'ny v3.2.0, miaraka amin'ny fampidirana Autoprefixer. Mba hitazomana ny fifanarahana mihemotra, ny Bootstrap dia hanohy hampiasa ny mixins ao anatiny mandra-pahatongan'ny 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;
}
Apetraho ny opacity ho an'ny navigateur rehetra ary omeo filter
fiatoana ho an'ny IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Omeo contexte ho an'ny fanaraha-maso ny endrika ao anatin'ny sehatra tsirairay.
.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
}
Mamorona tsanganana amin'ny alàlan'ny CSS ao anatin'ny singa tokana.
.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;
}
Avadika mora ny loko roa ho gradient ambadika. Mandrosoa kokoa ary mametraha tari-dalana, mampiasa loko telo, na mampiasa gradient radial. Miaraka amin'ny mixin tokana dia azonao ny syntax voafantina rehetra ilainao.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Azonao atao ihany koa ny mamaritra ny zoro amin'ny gradient tsipika miloko mahazatra:
#gradient > .directional(#333; #000; 45deg);
Raha mila gradient style barber-stripe ianao dia mora ihany koa. Ampidiro fotsiny ny loko tokana dia hametahana tsipika fotsy mangarahara isika.
#gradient > .striped(#333; 45deg);
Amboary ny ante ary ampiasao loko telo. Apetraho ny loko voalohany, ny loko faharoa, ny fiatoana ny loko faharoa (ny sanda isan-jato toy ny 25%), ary ny loko fahatelo miaraka amin'ireto mixins ireto:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Fampitandremana! Raha toa ka mila manaisotra gradient ianao dia ataovy izay hanesorana izay IE manokana filter
mety nampidirinao. Azonao atao izany amin'ny fampiasana ny .reset-filter()
mixin miaraka background-image: none;
.
Utility mixins dia mixins izay manambatra ny toetra CSS tsy misy ifandraisany mba hahatratrarana tanjona na asa manokana.
Adino ny manampy class="clearfix"
singa rehetra ary ampio ny .clearfix()
mixin raha mety. Mampiasa ny micro clearfix avy amin'i Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Aforeto haingana ny singa rehetra ao anatin'ny ray aman-dreniny. Mitaky width
na max-width
hapetraka.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Farito mora kokoa ny refin'ny zavatra iray.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Ampifandraiso mora ny safidy fanovana habe ho an'ny textarea, na singa hafa. Default amin'ny fihetsika mahazatra amin'ny navigateur ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Tapaho mora foana ny lahatsoratra miaraka amin'ny ellipsis miaraka amin'ny mixin tokana. Mitaky singa block
na inline-block
ambaratonga.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Mametraha lalana roa sary sy ny refin'ny sary @1x, ary ny Bootstrap dia hanome fanontaniana media @2x. Raha manana sary maro hatolotra ianao dia eritrereto ny manoratra amin'ny tananao ny sarin'ny retina CSS amin'ny fangatahana media tokana.
.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);
}
Raha miorina amin'ny Less ny Bootstrap dia manana seranan-tsambo Sass ofisialy ihany koa izy . Mitazona azy ao amin'ny tahiry GitHub mitokana izahay ary mitantana ny fanavaozana miaraka amin'ny script fiovam-po.
Satria ny seranan-tsambo Sass dia manana repo misaraka ary manompo mpihaino hafa kely, ny votoatin'ny tetikasa dia tsy mitovy amin'ny tetikasa Bootstrap lehibe. Izany dia miantoka fa ny seranan-tsambo Sass dia mifanaraka amin'ny rafitra mifototra amin'ny Sass araka izay azo atao.
LALANA | Description |
---|---|
lib/ |
Kaody vatosoa Ruby (fampidirana Sass, Rails ary Compass) |
tasks/ |
Scripts mpanova (mivadika ho Sass) |
test/ |
Fitsapana fanangonana |
templates/ |
Fampisehoana fonosana kompas |
vendor/assets/ |
Sass, JavaScript, ary rakitra endri-tsoratra |
Rakefile |
Asa anatiny, toy ny rake sy convert |
Tsidiho ny fitahirizana GitHub ao amin'ny seranan-tsambo Sass raha te hahita ireo rakitra ireo miasa.
Raha mila fanazavana momba ny fomba fametrahana sy fampiasana Bootstrap ho an'ny Sass, jereo ny GitHub repository readme . Io no loharano farany indrindra ary misy fampahalalana azo ampiasaina amin'ny tetikasa Rails, Compass ary Sass mahazatra.