CSS
Anviwònman CSS mondyal, eleman HTML fondamantal stil ak amelyore ak klas extensible, ak yon sistèm griy avanse.
Anviwònman CSS mondyal, eleman HTML fondamantal stil ak amelyore ak klas extensible, ak yon sistèm griy avanse.
Jwenn detay sou pati enpòtan yo nan enfrastrikti Bootstrap la, ki gen ladan apwòch nou an nan pi bon, pi vit, pi fò devlopman entènèt.
Bootstrap sèvi ak sèten eleman HTML ak pwopriyete CSS ki mande pou sèvi ak HTML5 doctype. Mete li nan kòmansman tout pwojè ou yo.
<!DOCTYPE html>
<html lang="en">
...
</html>
Avèk Bootstrap 2, nou te ajoute estil opsyonèl zanmitay mobil pou aspè kle nan fondasyon an. Avèk Bootstrap 3, nou te reekri pwojè a pou ka zanmi mobil depi nan kòmansman an. Olye pou yo ajoute sou estil mobil opsyonèl, yo ap kwit nan nwayo a. An reyalite, Bootstrap se mobil an premye . Ka premye estil mobil yo ka jwenn nan tout bibliyotèk la olye pou yo nan dosye separe.
Pou asire bon rann ak manyen rale, ajoute tag meta viewport la nan <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Ou ka enfim kapasite zoom sou aparèy mobil lè w ajoute user-scalable=no
nan tag meta viewport la. Sa a enfim zooming, sa vle di itilizatè yo sèlman kapab woulo liv, ak rezilta nan sit ou a santi yon ti jan plis tankou yon aplikasyon natif natal. An jeneral, nou pa rekòmande sa a sou chak sit, kidonk pran prekosyon!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap etabli ekspozisyon mondyal debaz, tipografi, ak estil lyen. Espesyalman, nou:
background-color: #fff;
sou labody
@font-family-base
, @font-size-base
, ak @line-height-base
atribi yo kòm baz tipografik nou an@link-color
epi aplike souliye lyen sèlman sou:hover
Ou ka jwenn estil sa yo nan scaffolding.less
.
Pou amelyore rann kwa-navigatè, nou itilize Normalize.css , yon pwojè Nicolas Gallagher ak Jonathan Neal .
Bootstrap mande pou yon eleman ki genyen pou vlope sa ki nan sit la ak loje sistèm kadriyaj nou an. Ou ka chwazi youn nan de resipyan pou w itilize nan pwojè w yo. Remake byen ke, akòz padding
ak plis ankò, ni veso a pa nistabl.
Itilize .container
pou yon veso ki reponn ak lajè fiks.
<div class="container">
...
</div>
Itilize .container-fluid
pou yon veso plen lajè, ki kouvri tout lajè fenèt ou a.
<div class="container-fluid">
...
</div>
Bootstrap gen ladann yon sistèm kadriyaj premye likid ki reponn ak mobil ki echèl kòmsadwa jiska 12 kolòn pandan gwosè aparèy la oswa Viewport ogmante. Li gen ladann klas predefini pou opsyon layout fasil, osi byen ke melanj pwisan pou jenere plis layout semantik .
Sistèm kadriyaj yo itilize pou kreye layout paj atravè yon seri ranje ak kolòn ki loje kontni ou. Men ki jan sistèm kadriyaj Bootstrap la ap travay:
.container
(fiks-lajè) oswa .container-fluid
(plen-lajè) pou bon aliyman ak padding..row
epi .col-xs-4
yo disponib pou fè byen vit layout kadriyaj. Mwens mixin yo ka itilize tou pou plis layout semantik.padding
. Sa padding se konpanse nan ranje pou premye ak dènye kolòn nan maj negatif sou .row
s..col-xs-4
..col-md-*
klas nan yon eleman pa pral sèlman afekte style li sou aparèy mwayen, men tou sou aparèy gwo si yon .col-lg-*
klas pa prezan.Gade nan egzanp yo pou aplike prensip sa yo nan kòd ou a.
Nou itilize demann medya sa yo nan dosye Less nou an pou kreye pwen rupture kle yo nan sistèm kadriyaj nou an.
/* 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) { ... }
Nou detanzantan elaji sou demann medya sa yo pou mete yon max-width
limit CSS nan yon seri aparèy ki pi etwat.
@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) { ... }
Gade ki jan aspè nan sistèm kadriyaj Bootstrap la ap travay sou plizyè aparèy ak yon tab sou la men.
Aparèy siplemantè ti Telefòn (<768px) | Ti aparèy tablèt (≥768px) | Aparèy mwayen Desktop (≥992px) | Gwo aparèy Desktop (≥1200px) | |
---|---|---|---|---|
Konpòtman griyaj | Orizontal nan tout tan | Efondre pou kòmanse, orizontal pi wo a breakpoints | ||
Lajè veso | Okenn (oto) | 750 px | 970 px | 1170 px |
Prefiks klas la | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# nan kolòn | 12 | |||
Lajè kolòn | Oto | ~62px | ~81px | ~97px |
Lajè goutyè | 30px (15px sou chak bò yon kolòn) | |||
Nestable | Wi | |||
Offsets | Wi | |||
Kòmann kolòn | Wi |
Sèvi ak yon sèl seri .col-md-*
klas gri, ou ka kreye yon sistèm griy debaz ki kòmanse anpile sou aparèy mobil ak aparèy tablèt (anplis ti a ti seri) anvan ou vin orizontal sou aparèy Desktop (mwayen). Mete kolòn kadriyaj nan nenpòt .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>
Vire nenpòt layout kadriyaj la lajè fiks nan yon layout plen lajè lè w chanje pi ekstèn .container
ou an .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Ou pa vle kolòn ou yo tou senpleman pile nan pi piti aparèy? Sèvi ak klas siplemantè ti ak mwayen gri aparèy lè w ajoute .col-xs-*
.col-md-*
nan kolòn ou yo. Gade egzanp ki anba a pou yon pi bon lide sou kijan li fonksyone.
<!-- 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>
Bati sou egzanp anvan an pa kreye menm plis dinamik ak pi pwisan Layout ak .col-sm-*
klas tablèt.
<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>
Si plis pase 12 kolòn yo mete nan yon sèl ranje, chak gwoup kolòn siplemantè pral, kòm yon sèl inite, vlope sou yon nouvo liy.
<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>
Avèk kat nivo kadriyaj ki disponib, ou gen pou w rankontre pwoblèm kote, nan sèten pwen, kolòn ou yo pa klè byen paske youn pi wo pase lòt la. Pou repare sa, sèvi ak yon konbinezon de yon .clearfix
ak klas sèvis piblik ki reponn nou yo .
<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>
Anplis netwayaj kolòn nan pwen rupture ki reponn, ou ka bezwen reset desantre, pouse, oswa rale . Gade sa an aksyon nan egzanp kadriyaj la .
<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>
Deplase kolòn sou bò dwat yo lè l sèvi avèk .col-md-offset-*
klas yo. Klas sa yo ogmante maj gòch nan yon kolòn pa *
kolòn. Pou egzanp, .col-md-offset-4
deplase .col-md-4
sou kat kolòn.
<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>
Ou kapab tou pase sou plas konpanse nan nivo gri ki pi ba yo ak .col-*-offset-0
klas yo.
<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>
Pou fè nich kontni ou a ak kadriyaj default la, ajoute yon nouvo .row
ak seri .col-sm-*
kolòn nan yon .col-sm-*
kolòn ki deja egziste. Ranje anbrike yo ta dwe gen ladan yon seri kolòn ki ajoute jiska 12 oswa mwens (li pa oblije itilize tout 12 kolòn ki disponib).
<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>
Fasil chanje lòd nan kolòn kadriyaj entegre nou yo .col-md-push-*
ak .col-md-pull-*
klas modifye yo.
<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>
Anplis klas griy prekonstwi pou layouts rapid, Bootstrap gen ladan mwens varyab ak mixin pou jenere byen vit pwòp senp, layout semantik ou.
Varyab yo detèmine kantite kolòn yo, lajè goutyè a, ak pwen rechèch medya yo kote yo kòmanse kolòn k ap flote. Nou itilize sa yo pou jenere klas griy predefini dokimante pi wo a, osi byen ke pou mixin koutim ki nan lis anba a.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Mixins yo itilize ansanm ak varyab kadriyaj yo pou jenere CSS semantik pou kolòn kadriyaj endividyèl yo.
// 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));
}
}
Ou ka modifye varyab yo nan pwòp valè koutim ou, oswa jis itilize mixin yo ak valè default yo. Men yon egzanp lè w sèvi ak anviwònman default yo pou kreye yon layout de kolòn ak yon espas ant.
.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>
Tout tit HTML, <h1>
jiska <h6>
, yo disponib. .h1
atravè .h6
klas yo disponib tou, pou lè ou vle matche ak stil la font nan yon tit men ou toujou vle tèks ou a parèt nan liy.
h1. Bootstrap tit |
Semibold 36px |
h2. Bootstrap tit |
Semibold 30px |
h3. Bootstrap tit |
Semibold 24px |
h4. Bootstrap tit |
Semibold 18px |
h5. Bootstrap tit |
Semibold 14px |
h6. Bootstrap tit |
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>
Kreye pi lejè, tèks segondè nan nenpòt tit ak yon <small>
tag jenerik oswa .small
klas la.
h1. Bootstrap tit Segondè tèks |
h2. Bootstrap tit Segondè tèks |
h3. Bootstrap tit Segondè tèks |
h4. Bootstrap tit Segondè tèks |
h5. Bootstrap tit Segondè tèks |
h6. Bootstrap tit Segondè tèks |
<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>
Defo global Bootstrap a font-size
se 14px , ak yon line-height
nan 1.428 . Sa a se aplike nan <body>
ak tout paragraf yo. Anplis de sa, <p>
(paragraf) resevwa yon maj anba nan mwatye wotè liy kalkile yo (10px pa default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Fè yon paragraf parèt deyò lè w ajoute .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lè sa a, se pa yon bagay ki pa fasil.
<p class="lead">...</p>
Echèl tipografik la baze sou de Less variables in variables.less : @font-size-base
and @line-height-base
. Premye a se gwosè font de baz yo itilize nan tout e dezyèm lan se wotè liy debaz la. Nou itilize varyab sa yo ak kèk matematik senp pou kreye maj yo, paddings, ak liy-wotè nan tout kalite nou yo ak plis ankò. Customize yo epi Bootstrap adapte yo.
Pou mete aksan sou yon seri tèks akòz enpòtans li nan yon lòt kontèks, sèvi ak <mark>
tag la.
Ou ka itilize tag mak la poumete aksan soutèks.
You can use the mark tag to <mark>highlight</mark> text.
Pou endike blòk tèks ki te efase itilize <del>
tag la.
Liy tèks sa a fèt pou trete kòm tèks efase.
<del>This line of text is meant to be treated as deleted text.</del>
Pou endike blòk tèks ki pa enpòtan ankò itilize <s>
tag la.
Liy tèks sa a fèt pou trete kòm li pa egzat ankò.
<s>This line of text is meant to be treated as no longer accurate.</s>
Pou endike adisyon nan dokiman an itilize <ins>
tag la.
Liy tèks sa a vle di yo dwe trete kòm yon adisyon nan dokiman an.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Pou souliye tèks itilize <u>
tag la.
Liy tèks sa a pral rann jan yo souliye
<u>This line of text will render as underlined</u>
Sèvi ak etikèt default HTML anfaz ak estil ki lejè.
Pou de-aksantye sou liy oswa blòk tèks, sèvi ak <small>
etikèt la pou mete tèks nan 85% gwosè paran an. Eleman tit resevwa pwòp pa yo font-size
pou enbrike<small>
pou eleman
Ou ka altènativman itilize yon eleman inline ak .small
nan plas nenpòt ki <small>
.
Liy tèks sa a vle di ke yo dwe trete kòm bèl lèt.
<small>This line of text is meant to be treated as fine print.</small>
Pou mete aksan sou yon ti bout tèks ak yon pwa ki pi lou.
Fragman tèks sa a ap rann kòm tèks fonse .
<strong>rendered as bold text</strong>
Pou mete aksan sou yon ti bout tèks ak italik.
Fragman tèks sa a ap rann kòm tèks italik .
<em>rendered as italicized text</em>
Ou lib pou itilize <b>
ak <i>
nan HTML5. <b>
se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans pandan y ap <i>
se sitou pou vwa, tèm teknik, elatriye.
Fasil reyaliye tèks nan eleman ak klas aliyman tèks.
Tèks ki aliye agoch.
Sant aliye tèks.
Tèks ki aliyen dwat.
Tèks jistifye.
Pa gen tèks vlope.
<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>
Transfòme tèks nan eleman ak klas lèt majiskil.
Tèks miniskil.
Tèks majiskil.
Tèks majiskil.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Enplemantasyon stilize nan <abbr>
eleman HTML pou abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover. Abreviyasyon ki gen yon title
atribi yo gen yon fwontyè anba limyè pwentiye ak yon kurseur èd sou hover, bay kontèks adisyonèl sou hover ak itilizatè teknoloji asistans.
Yon abrevyasyon mo atribi se attr .
<abbr title="attribute">attr</abbr>
Ajoute .initialism
nan yon abrevyasyon pou yon ti kras pi piti gwosè font.
HTML se pi bon bagay depi tranche pen.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Prezante enfòmasyon kontak pou zansèt ki pi pre a oswa tout kò travay la. Konsève fòma lè w fini tout liy yo ak <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>
Pou site blòk kontni ki soti nan yon lòt sous nan dokiman w la.
Anvlope <blockquote>
nenpòt HTML kòm quote la. Pou quotes dwat, nou rekòmande yon <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>
Style ak chanjman kontni pou varyasyon senp sou yon estanda <blockquote>
.
Ajoute yon <footer>
pou idantifye sous la. Mete non travay sous la nan <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>
Ajoute .blockquote-reverse
pou yon blockquote ak kontni dwat-aliyen.
<blockquote class="blockquote-reverse">
...
</blockquote>
Yon lis atik nan ki lòd la pa klèman enpòtan.
<ul>
<li>...</li>
</ul>
Yon lis atik nan ki lòd la fè klèman enpòtan.
<ol>
<li>...</li>
</ol>
Retire defo a list-style
ak maj gòch sou atik lis (timoun imedya sèlman). Sa a sèlman aplike pou atik imedya lis timoun yo , sa vle di w ap bezwen ajoute klas la pou nenpòt lis enbrike tou.
<ul class="list-unstyled">
<li>...</li>
</ul>
Mete tout atik lis yo sou yon sèl liy ak display: inline-block;
kèk limyè padding.
<ul class="list-inline">
<li>...</li>
</ul>
Yon lis tèm ak deskripsyon ki asosye yo.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Fè tèm ak deskripsyon nan <dl>
liy kòt a kòt. Kòmanse anpile tankou default <dl>
s, men lè navbar la elaji, se konsa fè sa yo.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Lis deskripsyon orizontal yo pral tronpe tèm ki twò long pou antre nan kolòn gòch la ak text-overflow
. Nan vi ki pi etwat yo, yo pral chanje nan Layout default anpile.
Vlope fragman nan kòd ak <code>
.
<section>
yo ta dwe vlope kòm inline.
For example, <code><section></code> should be wrapped as inline.
Sèvi ak la <kbd>
pou endike opinyon ki tipikman antre atravè klavye.
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>
Itilize <pre>
pou plizyè liy kòd. Asire ou ke ou chape anba nenpòt parantèz ang nan kòd la pou rann apwopriye.
<p>Egzanp tèks isit la...</p>
<pre><p>Sample text here...</p></pre>
Opsyonèlman, ou ka ajoute.pre-scrollable
klas la, ki pral mete yon wotè maksimòm de 350px epi bay yon ba defile aks y.
Pou endike varyab itilize <var>
tag la.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Pou endike pwodiksyon echantiyon blòk soti nan yon pwogram itilize <samp>
tag la.
Tèks sa a vle di yo dwe trete kòm rezilta echantiyon nan yon pwogram òdinatè.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Pou manier debaz - padding limyè ak divizyon orizontal sèlman - ajoute klas debaz la .table
nan nenpòt <table>
. Li ka sanble super redondants, men bay itilizasyon tab yo toupatou pou lòt grefon tankou kalandriye ak chwazi dat, nou te chwazi izole estil tab koutim nou yo.
# | Premye Non | Siyati | Non itilizatè |
---|---|---|---|
1 | Mak | Otto | @mdo |
2 | Jakòb | Thornton | @grès |
3 | Larry | Zwazo a |
<table class="table">
...
</table>
Sèvi ak .table-striped
pou ajoute zebra-striping nan nenpòt ranje tab nan <tbody>
.
Tablo trase yo style atravè :nth-child
seleksyon CSS la, ki pa disponib nan Internet Explorer 8.
# | Premye Non | Siyati | Non itilizatè |
---|---|---|---|
1 | Mak | Otto | @mdo |
2 | Jakòb | Thornton | @grès |
3 | Larry | Zwazo a |
<table class="table table-striped">
...
</table>
Ajoute .table-bordered
pou fwontyè sou tout kote tab la ak selil yo.
# | Premye Non | Siyati | Non itilizatè |
---|---|---|---|
1 | Mak | Otto | @mdo |
2 | Jakòb | Thornton | @grès |
3 | Larry | Zwazo a |
<table class="table table-bordered">
...
</table>
Ajoute .table-hover
pou pèmèt yon eta hover sou ranje tab nan yon <tbody>
.
# | Premye Non | Siyati | Non itilizatè |
---|---|---|---|
1 | Mak | Otto | @mdo |
2 | Jakòb | Thornton | @grès |
3 | Larry | Zwazo a |
<table class="table table-hover">
...
</table>
Ajoute .table-condensed
pou fè tab yo plis kontra enfòmèl ant pa koupe selil padding an mwatye.
# | Premye Non | Siyati | Non itilizatè |
---|---|---|---|
1 | Mak | Otto | @mdo |
2 | Jakòb | Thornton | @grès |
3 | Larry zwazo a |
<table class="table table-condensed">
...
</table>
Sèvi ak klas kontèks pou koulè ranje tab oswa selil endividyèl yo.
Klas | Deskripsyon |
---|---|
.active |
Aplike koulè hover nan yon ranje oswa selil patikilye |
.success |
Endike yon aksyon siksè oswa pozitif |
.info |
Endike yon chanjman enfòmatif net oswa aksyon |
.warning |
Endike yon avètisman ki ta ka bezwen atansyon |
.danger |
Endike yon aksyon danjere oswa potansyèlman negatif |
# | Tit kolòn | Tit kolòn | Tit kolòn |
---|---|---|---|
1 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
2 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
3 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
4 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
5 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
6 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
7 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
8 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
9 | Kontni kolòn | Kontni kolòn | Kontni kolòn |
<!-- 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>
Sèvi ak koulè pou ajoute siyifikasyon nan yon ranje tab oswa selil endividyèl sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (tèks la vizib nan ranje/selil tablo ki enpòtan), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-only
klas la.
Kreye tab repons pa vlope nenpòt .table
nan.table-responsive
pou fè yo woule orizontal sou ti aparèy (anba 768px). Lè w ap gade nenpòt bagay ki pi gwo pase 768px lajè, ou p ap wè okenn diferans nan tablo sa yo.
Tablo ki reponn yo sèvi ak overflow-y: hidden
, ki koupe nenpòt kontni ki ale pi lwen pase kwen anba oswa anwo tab la. An patikilye, sa a ka koupe meni dropdown ak lòt widgets twazyèm pati.
Firefox gen kèk stil fieldset gòch ki enplike width
ki entèfere ak tab la reponn. Sa a pa ka ranplase san yon Hack espesifik pou Firefox ke nou pa bay nan Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
Pou plis enfòmasyon, li repons Stack Overflow sa a .
# | Tit tab la | Tit tab la | Tit tab la | Tit tab la | Tit tab la | Tit tab la |
---|---|---|---|---|---|---|
1 | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la |
2 | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la |
3 | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la |
# | Tit tab la | Tit tab la | Tit tab la | Tit tab la | Tit tab la | Tit tab la |
---|---|---|---|---|---|---|
1 | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la |
2 | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la |
3 | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la | Selil tab la |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Kontwòl fòm endividyèl otomatikman resevwa kèk style mondyal. Tout tèks <input>
, <textarea>
, ak <select>
eleman ak .form-control
yo mete nan width: 100%;
pa default. Vlope etikèt ak kontwòl yo .form-group
pou pi gwo espas.
<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>
Pa melanje gwoup fòm dirèkteman ak gwoup antre . Olye de sa, nich gwoup la antre anndan gwoup fòm lan.
Ajoute .form-inline
nan fòm ou a (ki pa dwe yon <form>
) pou kontwole bò gòch ak aliye-blòk. Sa a sèlman aplike nan fòm ki nan fenèt ki gen omwen 768 px lajè.
Antre ak seleksyon yo te width: 100%;
aplike pa default nan Bootstrap. Nan fòm inline, nou reset sa a width: auto;
pou plizyè kontwòl ka abite sou menm liy lan. Tou depan de layout ou a, yo ka mande plis lajè koutim.
Lektè ekran yo pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou fòm enline sa yo, ou ka kache etikèt yo lè l sèvi avèk .sr-only
klas la. Gen lòt metòd altènatif pou bay yon etikèt pou teknoloji asistans, tankou aria-label
, aria-labelledby
oswa title
atribi. Si okenn nan sa yo pa prezan, lektè ekran yo ka itilize placeholder
atribi a, si yo prezan, men sonje ke itilizasyon placeholder
kòm yon ranplasman pou lòt metòd etikèt yo pa konseye.
<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>
Sèvi ak klas kadriyaj predefini Bootstrap yo pou fè aliman etikèt ak gwoup kontwòl fòm yo nan yon layout orizontal lè w ajoute .form-horizontal
nan fòm nan (ki pa oblije yon <form>
). Lè w fè sa, chanje .form-group
yo konpòte yo kòm ranje kadriyaj, kidonk pa bezwen .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>
Egzanp kontwòl fòm estanda sipòte nan yon layout fòm egzanp.
Ki pi komen kontwòl fòm, tèks ki baze sou jaden D '. Gen ladann sipò pou tout kalite HTML5: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, ak color
.
Antre yo pral sèlman konplètman style si yo type
byen deklare.
<input type="text" class="form-control" placeholder="Text input">
Pou ajoute tèks entegre oswa bouton anvan ak/oswa apre nenpòt ki baze sou tèks <input>
, tcheke eleman gwoup la antre .
Kontwòl fòm ki sipòte plizyè liy tèks. Chanje rows
atribi jan sa nesesè.
<textarea class="form-control" rows="3"></textarea>
Bwat yo se pou chwazi youn oswa plizyè opsyon nan yon lis, pandan y ap radyo yo se pou chwazi yon opsyon nan plizyè.
Yo sipòte kaz ak radyo ki andikape yo, men pou bay yon kurseur "ki pa pèmèt" sou paran an <label>
, w ap bezwen ajoute .disabled
klas la nan paran an .radio
, .radio-inline
, .checkbox
, oswa .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>
Sèvi ak klas yo .checkbox-inline
oswa .radio-inline
sou yon seri kaz oswa radyo pou kontwòl ki parèt sou menm liy lan.
<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>
Si ou pa gen okenn tèks nan <label>
, opinyon an pozisyone jan ou ta espere. Kounye a travay sèlman sou kaz ak radyo ki pa aliye. Sonje toujou bay kèk fòm etikèt pou teknoloji asistans (pa egzanp, lè l sèvi avèk 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>
Remake byen ke anpil meni natif natal chwazi-savwa nan Safari ak Chrome-gen kwen awondi ki pa ka modifye atravè border-radius
pwopriyete.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Pou <select>
kontwòl ak multiple
atribi a, opsyon miltip yo montre pa default.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Lè ou bezwen mete tèks klè akote yon etikèt fòm nan yon fòm, sèvi ak .form-control-static
klas la sou yon <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>
Nou retire estil default outline
yo sou kèk kontwòl fòm epi aplike yon box-shadow
nan plas li pou :focus
.
:focus
eta aAntre egzanp pi wo a itilize estil koutim nan dokiman nou an pou demontre :focus
eta a sou yon .form-control
.
Ajoute disabled
atribi boolean an sou yon opinyon pou anpeche entèraksyon itilizatè yo. Antre ki andikape parèt pi lejè epi ajoute yon not-allowed
kurseur.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Ajoute disabled
atribi a nan yon <fieldset>
pou enfim tout kontwòl yo nan <fieldset>
yon fwa.
<a>
Pa default, navigatè yo pral trete tout kontwòl fòm natif natal ( <input>
, <select>
ak <button>
eleman) andedan yon <fieldset disabled>
kòm andikape, anpeche tou de entèraksyon klavye ak sourit sou yo. Sepandan, si fòm ou a gen ladan tou <a ... class="btn btn-*">
eleman, yo pral sèlman bay sa yo yon style nan pointer-events: none
. Jan yo note sa nan seksyon sou eta andikape pou bouton yo (e spesyalman nan sou-seksyon pou eleman jete lank), pwopriyete CSS sa a poko estandadize epi li pa konplètman sipòte nan Opera 18 ak anba a, oswa nan Internet Explorer 11, epi li te genyen. pa anpeche itilizatè klavye yo kapab konsantre oswa aktive lyen sa yo. Se konsa, yo dwe an sekirite, sèvi ak JavaScript koutim pou enfim lyen sa yo.
Pandan ke Bootstrap pral aplike estil sa yo nan tout navigatè, Internet Explorer 11 ak anba a pa konplètman sipòte disabled
atribi a sou yon <fieldset>
. Sèvi ak JavaScript koutim pou enfim fieldset nan navigatè sa yo.
<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>
Ajoute readonly
atribi boolean an sou yon opinyon pou anpeche modifikasyon valè opinyon an. Antre lekti sèlman parèt pi lejè (menm jan ak entrain andikape), men kenbe kurseur estanda a.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Blòk nivo èd tèks pou kontwòl fòm.
Tèks èd yo ta dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedby
atribi a. Sa a pral asire ke teknoloji asistans - tankou lektè ekran - pral anonse tèks èd sa a lè itilizatè a konsantre oswa antre nan kontwòl la.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
Bootstrap gen ladan estil validation pou erè, avètisman, ak eta siksè sou kontwòl fòm. Pou itilize, ajoute .has-warning
, .has-error
, oswa .has-success
nan eleman paran an. Nenpòt .control-label
, .form-control
, ak .help-block
nan eleman sa a pral resevwa estil validation yo.
Sèvi ak estil validation sa yo pou endike eta yon kontwòl fòm bay sèlman yon endikasyon vizyèl, ki baze sou koulè, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran - oswa itilizatè daltonòm.
Asire w ke yo bay yon lòt endikasyon leta tou. Pa egzanp, ou ka mete yon sijesyon sou eta nan <label>
tèks kontwòl fòm nan li menm (tankou se ka a nan egzanp kòd sa a), enkli yon Glyphicon (ak tèks altènatif apwopriye lè l sèvi avèk .sr-only
klas la - gade egzanp Glyphicon yo ), oswa lè w bay yon blòk tèks èd adisyonèl . Espesyalman pou teknoloji asistans yo, yo ka bay kontwòl fòm ki pa valab tou yon aria-invalid="true"
atribi.
<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>
Ou kapab tou ajoute ikon fidbak si ou vle ak adisyon a .has-feedback
ak icon dwat la.
Ikon Feedback travay sèlman ak <input class="form-control">
eleman tèks yo.
Manyèl pwezante nan ikon fidbak obligatwa pou antre san yon etikèt ak pou gwoup opinyon ak yon adisyon sou bò dwat la. Nou ankouraje w anpil pou bay etikèt pou tout antre pou rezon aksè. Si ou vle anpeche etikèt yo parèt, kache yo ak .sr-only
klas la. Si ou dwe fè san yo pa etikèt, ajiste top
valè a nan icon nan fidbak. Pou gwoup opinyon, ajiste right
valè a nan yon valè pixel ki apwopriye selon lajè addon ou a.
Pou asire ke teknoloji asistans yo - tankou lektè ekran - kòrèkteman transmèt siyifikasyon an nan yon ikòn, yo ta dwe enkli lòt tèks kache nan .sr-only
klas la epi yo dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedby
. Altènativman, asire w ke siyifikasyon an (pa egzanp, lefèt ke gen yon avètisman pou yon jaden antre tèks patikilye) transmèt nan kèk lòt fòm, tankou chanje tèks aktyèl la <label>
ki asosye ak kontwòl fòm lan.
Malgre ke egzanp sa yo deja mansyone eta validation nan kontwòl fòm respektif yo nan <label>
tèks la li menm, teknik ki anwo a (itilize .sr-only
tèks ak aria-describedby
) yo te enkli pou rezon ilistrasyon.
<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
etikèt kacheSi w itilize .sr-only
klas la pou kache yon kontwòl fòm <label>
(olye ke w sèvi ak lòt opsyon etikèt, tankou aria-label
atribi a), Bootstrap pral otomatikman ajiste pozisyon icon nan yon fwa li te ajoute.
<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>
Mete wotè lè l sèvi avèk klas tankou .input-lg
, epi mete lajè lè l sèvi avèk klas kolòn kadriyaj tankou .col-lg-*
.
Kreye kontwòl fòm ki pi wo oswa pi kout ki matche ak gwosè bouton.
<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>
Byen vit gwosè etikèt ak fòm kontwòl nan .form-horizontal
ajoute .form-group-lg
oswa .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>
Vlope antre nan kolòn kadriyaj, oswa nenpòt eleman paran koutim, pou aplike fasil lajè vle.
<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>
Sèvi ak klas bouton yo sou yon <a>
, <button>
, oswa <input>
eleman.
<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">
Pandan ke klas bouton yo ka itilize sou <a>
ak <button>
eleman, se sèlman <button>
eleman ki sipòte nan konpozan nav ak navbar nou yo.
Si <a>
yo itilize eleman yo pou yo aji kòm bouton - deklanche fonksyonalite nan paj, olye ke navige nan yon lòt dokiman oswa seksyon nan paj aktyèl la - yo ta dwe tou bay yon role="button"
.
Kòm yon pi bon pratik, nou rekòmande anpil itilize <button>
eleman nan chak fwa sa posib asire matche kwa-navigatè rann.
Pami lòt bagay, gen yon ensèk nan Firefox <30 ki anpeche nou mete bouton line-height
ki <input>
baze sou yo, sa ki lakòz yo pa egzakteman matche ak wotè lòt bouton sou Firefox.
Sèvi ak nenpòt nan klas bouton ki disponib yo byen vit kreye yon bouton style.
<!-- 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>
Sèvi ak koulè pou ajoute siyifikasyon nan yon bouton sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (tèks la vizib nan bouton an), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-only
klas la.
Anpenpan bouton ki pi gwo oswa pi piti? Ajoute .btn-lg
, .btn-sm
, oswa .btn-xs
pou gwosè adisyonèl.
<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>
Kreye bouton nivo blòk - sa yo ki kouvri tout lajè yon paran - lè w ajoute .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>
Bouton yo ap parèt peze (avèk yon background ki pi fonse, yon fwontyè ki pi fonse, ak yon lonbraj insérer) lè yo aktif. Pou <button>
eleman, sa a se fè atravè :active
. Pou <a>
eleman, li fè ak .active
. Sepandan, ou ka itilize .active
sou <button>
s (epi enkli aria-pressed="true"
atribi a) si ou bezwen repwodui eta aktif la pwogramasyon.
Pa bezwen ajoute :active
kòm li se yon pseudo-klas, men si ou bezwen fòse menm aparans la, ale pi devan epi ajoute .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>
Ajoute .active
klas la nan <a>
bouton.
<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>
Fè bouton yo parèt unclickable pa fennen yo tounen ak opacity
.
Ajoute disabled
atribi a nan <button>
bouton.
<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>
Si ou ajoute disabled
atribi a nan yon <button>
, Internet Explorer 9 ak pi ba a pral rann tèks gri ak yon lonbraj tèks anbarasan ke nou pa ka ranje.
Ajoute .disabled
klas la nan <a>
bouton.
<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>
Nou itilize .disabled
kòm yon klas sèvis piblik isit la, menm jan ak klas la komen .active
, kidonk pa gen okenn prefiks obligatwa.
Klas sa a itilize pointer-events: none
pou eseye enfim fonksyonalite lyen nan <a>
s, men pwopriyete CSS sa a poko ofisyèl epi li pa konplètman sipòte nan Opera 18 ak pi ba a, oswa nan Internet Explorer 11. Anplis de sa, menm nan navigatè ki sipòte pointer-events: none
klavye. navigasyon rete pa afekte, sa vle di itilizatè klavye ki wè ak itilizatè teknoloji asistans yo ap toujou kapab aktive lyen sa yo. Se konsa, yo dwe an sekirite, sèvi ak JavaScript koutim pou enfim lyen sa yo.
Imaj nan Bootstrap 3 yo ka fè zanmitay repons atravè adisyon nan .img-responsive
klas la. Sa a aplike max-width: 100%;
, height: auto;
ak display: block;
imaj la pou ke li balanse joliman nan eleman paran an.
Pou santre imaj ki sèvi ak .img-responsive
klas la, sèvi ak .center-block
olye de .text-center
. Gade seksyon klas asistan yo pou plis detay sou .center-block
itilizasyon.
Nan Internet Explorer 8-10, imaj SVG yo .img-responsive
gen yon gwosè disproporsyonèl. Pou repare sa a, ajoute width: 100% \9;
kote sa nesesè. Bootstrap pa aplike sa otomatikman paske li lakòz konplikasyon nan lòt fòma imaj.
<img src="..." class="img-responsive" alt="Responsive image">
Ajoute klas nan yon <img>
eleman fasilman style imaj nan nenpòt pwojè.
Kenbe nan tèt ou ke Internet Explorer 8 manke sipò pou kwen awondi.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Transmèt siyifikasyon atravè koulè ak yon ti ponyen klas itilite anfaz. Sa yo ka aplike tou nan lyen epi yo pral fè nwa sou hover jis tankou estil lyen default nou an.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Men, li pa gen okenn bagay ki konfòm, li pa gen okenn bagay ki pa fasil pou li.
Mecenas 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>
Pafwa klas anfaz pa ka aplike akòz espesifik nan yon lòt seleksyon. Nan pifò ka yo, yon solisyon ase se vlope tèks ou nan yon <span>
ak klas la.
Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a swa evidan nan kontni an li menm (koulè kontèks yo itilize sèlman pou ranfòse siyifikasyon ki deja prezan nan tèks la/marke), oswa yo enkli atravè lòt mwayen, tankou tèks adisyonèl kache ak .sr-only
klas la . .
Menm jan ak klas koulè tèks kontèks yo, fasilman mete background nan yon eleman nan nenpòt klas kontèks. Konpozan jete lank yo pral fè nwa sou hover, menm jan ak klas tèks yo.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Men, li pa gen okenn bagay ki konfòm, li pa gen okenn bagay ki pa fasil pou li.
Mecenas 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>
Pafwa klas background kontèks pa ka aplike akòz espesifik nan yon lòt seleksyon. Nan kèk ka, yon solisyon ase se vlope kontni eleman ou a nan yon <div>
ak klas la.
Menm jan ak koulè kontèks , asire ke nenpòt siyifikasyon transmèt atravè koulè yo transmèt tou nan yon fòma ki pa piman prezantasyon.
Sèvi ak jenerik ikòn fèmen pou ranvwaye kontni tankou modal ak alèt.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Sèvi ak kolèt pou endike fonksyonalite ak direksyon dropdown. Remake byen ke caret default la ap ranvèse otomatikman nan meni dropup yo .
<span class="caret"></span>
Flote yon eleman a goch oswa adwat ak yon klas. !important
enkli pou evite pwoblèm espesifik. Klas yo ka itilize tou kòm mixin.
<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();
}
Mete yon eleman nan display: block
ak sant atravè margin
. Disponib kòm yon mixin ak klas.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
Fasil klè float
s lè w ajoute .clearfix
nan eleman paran an . Itilize mikwo clearfix jan Nicolas Gallagher te popularize. Kapab tou itilize kòm yon mixin.
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
Fòse yon eleman yo dwe montre oswa kache ( ki gen ladan pou lektè ekran ) ak itilizasyon .show
ak .hidden
klas yo. Klas sa yo itilize !important
pou evite konfli espesifik, menm jan ak flote rapid yo . Yo disponib sèlman pou baskil nivo blòk. Yo kapab tou itilize kòm mixin.
.hide
disponib, men li pa toujou afekte lektè ekran yo epi li demode apati v3.0.1 . Sèvi .hidden
ak .sr-only
pito.
Anplis de sa, .invisible
yo ka itilize pou chanje sèlman vizibilite yon eleman, sa vle di li display
pa modifye epi eleman an ka toujou afekte koule dokiman an.
<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();
}
Kache yon eleman nan tout aparèy eksepte lektè ekran ki gen .sr-only
. Konbine .sr-only
ak .sr-only-focusable
pou montre eleman an ankò lè li konsantre (egzanp pa yon itilizatè klavye sèlman). Li nesesè pou swiv meyè pratik aksesiblite yo . Kapab itilize tou kòm mixin.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
Sèvi ak .text-hide
klas la oswa melanje pou ede ranplase kontni tèks yon eleman ak yon imaj background.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
Pou yon devlopman ki pi rapid zanmitay mobil, sèvi ak klas sèvis piblik sa yo pou montre ak kache kontni pa aparèy atravè rechèch medya yo. Yo enkli tou klas sèvis piblik pou chanje kontni lè enprime.
Eseye sèvi ak sa yo sou yon baz limite epi evite kreye vèsyon totalman diferan nan menm sit la. Olye de sa, sèvi ak yo pou konplete prezantasyon chak aparèy.
Sèvi ak yon sèl oswa yon konbinezon de klas ki disponib yo pou chanje kontni atravè pwen pant vi yo.
Aparèy siplemantè pitiTelefòn (<768px) | Ti aparèyTablèt (≥768px) | Aparèy mwayenDesktop (≥992px) | Gwo aparèyDesktop (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
Vizib | Kache | Kache | Kache |
.visible-sm-* |
Kache | Vizib | Kache | Kache |
.visible-md-* |
Kache | Kache | Vizib | Kache |
.visible-lg-* |
Kache | Kache | Kache | Vizib |
.hidden-xs |
Kache | Vizib | Vizib | Vizib |
.hidden-sm |
Vizib | Kache | Vizib | Vizib |
.hidden-md |
Vizib | Vizib | Kache | Vizib |
.hidden-lg |
Vizib | Vizib | Vizib | Kache |
Apati v3.2.0, .visible-*-*
klas yo pou chak breakpoint vini nan twa varyasyon, youn pou chak display
valè pwopriyete CSS ki nan lis anba a.
Gwoup klas yo | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
xs
Kidonk, pou ti ekran siplemantè ( ) pa egzanp, klas ki disponib .visible-*-*
yo se: .visible-xs-block
, .visible-xs-inline
, ak .visible-xs-inline-block
.
Klas yo .visible-xs
, .visible-sm
, .visible-md
, ak .visible-lg
egziste tou, men yo obsolète apati v3.2.0 . Yo apeprè ekivalan a .visible-*-block
, eksepte ak ka espesyal adisyonèl pou <table>
eleman ki gen rapò ak baskil.
Menm jan ak klas repons regilye yo, sèvi ak sa yo pou chanje kontni pou enprime.
Klas | Navigatè | Enprime |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Kache | Vizib |
.hidden-print |
Vizib | Kache |
Klas la .visible-print
egziste tou men li depreche apati v3.2.0. Li se apeprè ekivalan a .visible-print-block
, eksepte ak ka espesyal adisyonèl pou <table>
eleman ki gen rapò.
Redimansyone navigatè w la oswa chaje sou diferan aparèy pou teste klas sèvis piblik ki reponn yo.
Mark vèt yo endike eleman an vizib nan fenèt ou ye kounye a.
Isit la, mak vèt yo endike tou eleman an kache nan fenèt ou ye kounye a.
CSS Bootstrap la bati sou Less, yon preproseseur ak fonksyonalite adisyonèl tankou varyab, mixin, ak fonksyon pou konpile CSS. Moun k ap chèche sèvi ak sous la mwens dosye olye pou yo konpile dosye CSS nou yo ka sèvi ak plizyè varyab ak mixin nou itilize nan tout kad la.
Varyab kadriyaj ak mixin yo kouvri nan seksyon sistèm Grid la .
Bootstrap ka itilize nan omwen de fason: avèk CSS konpile a oswa ak sous la mwens dosye. Pou konpile Fichye Mwens yo, konsilte seksyon Kòmansman pou konnen kijan pou konfigirasyon anviwònman devlopman ou pou kouri kòmandman ki nesesè yo.
Zouti konpilasyon twazyèm pati yo ka travay avèk Bootstrap, men ekip prensipal nou an pa sipòte yo.
Varyab yo itilize nan tout pwojè a kòm yon fason pou santralize ak pataje valè souvan itilize tankou koulè, espas, oswa pil font. Pou yon pann konplè, tanpri gade Customizer la .
Fasil sèvi ak de plan koulè: gri ak semantik. Koulè gri bay aksè rapid nan tout koulè nwa yo souvan itilize pandan semantik gen ladan divès koulè ki asiyen nan valè kontèks ki gen sans.
@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;
Sèvi ak nenpòt nan varyab koulè sa yo jan yo ye oswa reassigner yo nan varyab ki gen plis sans pou pwojè ou a.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Yon ti ponyen varyab pou byen vit personnalisation eleman kle nan eskèlèt sit ou a.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Fasil style lyen ou yo ak koulè a dwat ak yon sèl valè.
// 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;
}
}
Remake byen ke @link-hover-color
sèvi ak yon fonksyon, yon lòt zouti awizom ki soti nan Less, pou kreye otomatikman koulè dwat hover. Ou ka itilize darken
, lighten
, saturate
, ak desaturate
.
Fasil mete tipografi ou, gwosè tèks, dirijan, ak plis ankò ak kèk varyab rapid. Bootstrap sèvi ak sa yo tou pou bay mixin tipografik fasil.
@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;
De varyab rapid pou pèrsonalize kote ak non fichye ikon ou yo.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Konpozan atravè Bootstrap sèvi ak kèk varyab default pou mete valè komen. Isit la yo se pi souvan itilize yo.
@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;
Mixin machann yo se mixin pou ede sipòte plizyè navigatè lè yo enkli tout prefiks machann ki enpòtan nan CSS ou konpile.
Reyajiste modèl bwat konpozan ou yo ak yon sèl mixin. Pou kontèks, gade sa a atik itil sa a soti nan Mozilla .
Mixin la demode apati v3.2.0 , ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye sèvi ak mixin anndan an jiskaske Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Jodi a tout navigatè modèn yo sipòte pwopriyete a ki pa prefiks border-radius
. Kòm sa yo, pa gen okenn .border-radius()
mixin, men Bootstrap gen ladan rakoursi pou byen vit awondi de kwen sou yon bò patikilye nan yon objè.
.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;
}
Si odyans sib ou a ap itilize dènye ak pi gwo navigatè ak aparèy, asire w ke ou jis itilize box-shadow
pwopriyete a poukont li. Si ou bezwen sipò pou pi gran Android (pre-v4) ak iOS aparèy (pre-iOS 5), sèvi ak mixin depreche a pou ranmase sa ki nesesè yo.-webkit
prefiks ki nesesè yo.
Mixin la demode , paske Bootstrap pa ofisyèlman sipòte platfòm demode ki pa sipòte pwopriyete estanda a. Pou prezève konpatibilite bak, Bootstrap ap kontinye sèvi ak mixin anndan an jiskaske Bootstrap v4.
Asire ou ke ou sèvi ak rgba()
koulè nan lonbraj bwat ou a pou yo melanje kòm san pwoblèm ke posib ak orijin.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Plizyè melanj pou fleksibilite. Mete tout enfòmasyon tranzisyon yo ak youn, oswa presize yon delè separe ak dire jan sa nesesè.
Mixin yo demode apati v3.2.0 , ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye itilize mixin yo anndan jiskaske 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;
}
Wotasyon, echèl, tradwi (deplase), oswa twonpe nenpòt objè.
Mixin yo demode apati v3.2.0 , ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye itilize mixin yo anndan jiskaske 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;
}
Yon sèl mixin pou itilize tout pwopriyete animasyon CSS3 nan yon deklarasyon ak lòt mixin pou pwopriyete endividyèl yo.
Mixin yo demode apati v3.2.0 , ak entwodiksyon Autoprefixer. Pou prezève konpatibilite bak, Bootstrap ap kontinye itilize mixin yo anndan jiskaske 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;
}
Mete opakite a pou tout navigatè epi bay yon filter
sekou pou IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Bay kontèks pou kontwòl fòm nan chak jaden.
.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
}
Jenere kolòn atravè CSS nan yon sèl eleman.
.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;
}
Fasil vire nenpòt de koulè nan yon gradyan background. Jwenn plis avanse epi mete yon direksyon, sèvi ak twa koulè, oswa itilize yon gradyan radial. Avèk yon sèl mixin ou jwenn tout sentaks prefiks ou pral bezwen.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Ou kapab tou presize ang yon estanda de koulè, gradyan lineyè:
#gradient > .directional(#333; #000; 45deg);
Si ou bezwen yon gradyan style kwafè-bande, sa a fasil tou. Jis presize yon sèl koulè epi nou pral kouvri yon bann translusid blan.
#gradient > .striped(#333; 45deg);
Leve ante a epi sèvi ak twa koulè olye. Mete premye koulè a, dezyèm koulè a, dezyèm koulè a sispann (yon valè pousantaj tankou 25%), ak twazyèm koulè a ak melanj sa yo:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Tèt leve! Si ou ta dwe janm bezwen retire yon gradyan, asire w ke ou retire nenpòt ki espesifik IE filter
ou ka ajoute. Ou ka fè sa lè w itilize .reset-filter()
mixin la ansanm background-image: none;
.
Mixin sèvis piblik yo se mixin ki konbine pwopriyete CSS otreman ki pa gen rapò pou reyalize yon objektif oswa yon travay espesifik.
Bliye ajoute class="clearfix"
nan nenpòt eleman epi olye ajoute .clearfix()
mixin a kote sa apwopriye. Sèvi ak mikwo clearfix ki soti nan Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Byen vit santre nenpòt eleman nan paran li. Egzije width
oswa max-width
yo dwe mete.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Espesifye dimansyon yon objè pi fasil.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Fasil konfigirasyon opsyon redimansyon yo pou nenpòt ki zòn tèks, oswa nenpòt lòt eleman. Defo nan konpòtman nòmal navigatè ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Fasil tronpe tèks ak yon elips ak yon sèl mixin. Mande eleman yo dwe block
oswa inline-block
nivo.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.
.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);
}
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
Path | Description |
---|---|
lib/ |
Ruby gem code (Sass configuration, Rails and Compass integrations) |
tasks/ |
Converter scripts (turning upstream Less to Sass) |
test/ |
Compilation tests |
templates/ |
Manifest pake konpa |
vendor/assets/ |
Sass, JavaScript, ak dosye font |
Rakefile |
Travay entèn, tankou rato ak konvèti |
Vizite depo GitHub pò Sass la pou wè dosye sa yo an aksyon.
Pou enfòmasyon sou fason pou enstale epi sèvi ak Bootstrap pou Sass, konsilte GitHub repository readme . Li se sous ki pi ajou epi li gen ladann enfòmasyon pou itilize ak Rails, Compass, ak pwojè estanda Sass.