CSS
CSS ezarpen orokorrak, oinarrizko HTML elementuak estilo hedagarriekin hobetu eta klaseak eta sareta sistema aurreratu bat.
Ikuspegi orokorra
Lortu Bootstrap-en azpiegituraren gakoen xehetasunak, web garapen hobea, azkarrago eta sendoagoa izateko gure ikuspegia barne.
HTML5 dokumentu mota
Bootstrap-ek HTML5 doktypea erabiltzea eskatzen duten HTML elementu eta CSS propietate jakin batzuk erabiltzen ditu. Sar ezazu zure proiektu guztien hasieran.
<!DOCTYPE html>
<html lang="en">
...
</html>Mugikorra lehenik
Bootstrap 2-rekin, mugikorrentzako aukerako estiloak gehitu ditugu esparruaren funtsezko alderdietarako. Bootstrap 3-rekin, proiektua berridatzi dugu hasieratik mugikorrentzako errespetua izateko. Aukerako mugikorreko estiloak gehitu beharrean, muinean labean sartzen dira. Izan ere, Bootstrap mugikorra da lehenik . Mugikorreko lehen estiloak liburutegi osoan aurki daitezke fitxategi bereizietan beharrean.
Errendatze egokia eta ukipen-zoompena ziurtatzeko, gehitu bistaratzeko meta-etiketa zure <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Gailu mugikorretan zoom-ahalmenak desgaitu ditzakezu user-scalable=nobistaratuko meta-etiketara gehituz. Honek zooma desgaitzen du, hau da, erabiltzaileek bakarrik korritu dezaketela, eta zure webgunea jatorrizko aplikazio baten antzekoa da. Orokorrean, ez dugu gune guztietan hau gomendatzen, beraz, kontuz ibili!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tipografia eta estekak
Bootstrap-ek oinarrizko bistaratzeko, tipografia eta esteka-estilo orokorrak ezartzen ditu. Zehazki, guk:
- Ezarri
background-color: #fff;_body - Erabili
@font-family-base,@font-size-base, eta@line-height-baseatributuak gure oinarri tipografiko gisa - Ezarri estekaren kolore globala honen bidez
@link-coloreta aplikatu estekaren azpimarra bakarrik:hover
Estilo hauek barruan aurki daitezke scaffolding.less.
Normalizatu.css
Arakatzaileen arteko errendaketa hobetzeko, Normalize.css erabiltzen dugu , Nicolas Gallagher eta Jonathan Neal -en proiektua .
Ontziak
Bootstrap-ek elementu eduki bat behar du guneko edukiak biltzeko eta gure sare-sistema gordetzeko. Bi edukiontzietako bat aukeratu dezakezu zure proiektuetan erabiltzeko. Kontuan izan, paddingeta gehiago dela eta, ez bata ez bestea edukiontzia ez dela enbokatu.
Erabili .containerzabalera finko erantzuteko edukiontzi baterako.
<div class="container">
...
</div>Erabili .container-fluidzabalera osoko edukiontzi baterako, zure ikuspegiaren zabalera osoan zehar.
<div class="container-fluid">
...
</div>Sare sistema
Bootstrap-ek mugikorren lehen sare fluidoen sistema bat dakar, eta 12 zutabe arte behar bezala eskalatzen du gailuaren edo ikuspegiaren tamaina handitzen den heinean. Aurrez definitutako klaseak biltzen ditu diseinu-aukera errazetarako, baita mixin indartsuak ere diseinu semantikoagoak sortzeko .
Sarrera
Sare-sistemak orriaren diseinuak sortzeko erabiltzen dira zure edukia biltzen duten errenkada eta zutabe batzuen bidez. Hona hemen nola funtzionatzen duen Bootstrap grid sistemak:
- Errenkadak
.container(zabalera finkoko) edo.container-fluid(zabalera osoko) barruan kokatu behar dira lerrokadura eta betegarri egokia izateko. - Erabili errenkadak zutabe-talde horizontalak sortzeko.
- Edukia zutabeen barruan kokatu behar da, eta zutabeak soilik izan daitezke errenkaden berehalako seme-alabak.
- Aurredefinitutako sareta-klaseak bezalakoak
.roweta.col-xs-4eskuragarri daude sare-diseinuak azkar egiteko. Mixin gutxiago ere erabil daitezke diseinu semantiko gehiagorako. - Zutabeek erretenak (zutabeen edukiaren arteko hutsuneak) sortzen dituzte
padding. Betegarri hori lehen eta azken zutaberako errenkadetan konpentsatzen da marjina negatiboaren bidez.row. - Marjina negatiboa horregatik azpiko adibideak kanpoan geratzen dira. Beraz, sareko zutabeen edukia sarekoa ez den edukiarekin lerrokatu da.
- Saretako zutabeak zabaldu nahi dituzun hamabi zutabe erabilgarrien kopurua zehaztuz sortzen dira. Adibidez, hiru zutabe berdinek hiru erabiliko dituzte
.col-xs-4. - Errenkada bakarrean 12 zutabe baino gehiago jartzen badira, zutabe gehigarrien talde bakoitza, unitate batean, lerro berri batean bilduko da.
- Sare-klaseak pantaila-zabalera handiagoak edo eten-puntuen tamainak berdinak dituzten gailuei aplikatzen zaizkie, eta gailu txikiagoei zuzendutako sare-klaseak gainidazten dituzte. Hori dela eta, adibidez, edozein klase elementu bati aplikatzeak
.col-md-*bere estiloari eragingo dio gailu ertainetan, baita gailu handietan ere,.col-lg-*klaserik ez badago.
Begiratu adibideei printzipio hauek zure kodean aplikatzeko.
Hedabideen kontsultak
Honako multimedia kontsulta hauek erabiltzen ditugu gure Gutxiago fitxategietan gure sare-sistemako eten-puntuak sortzeko.
/* 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) { ... }Noizean behin, multimedia-kontsulta hauek zabaltzen ditugu max-widthCSS gailu multzo murritzago batera mugatzeko.
@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) { ... }Sarearen aukerak
Ikusi Bootstrap sare sistemaren alderdiek gailu askotan nola funtzionatzen duten taula erabilgarri batekin.
| Gailu txikiak Telefonoak (<768 px) | Gailu txikiak Tabletak (≥768 px) | Gailu ertainak Mahaigainak (≥992 px) | Gailu handiak Mahaigainak (≥1200px) | |
|---|---|---|---|---|
| Sarearen portaera | Uneoro horizontala | Tolestuta hasteko, eten puntuen gainean horizontala | ||
| Edukiontziaren zabalera | Bat ere ez (automatikoki) | 750 px | 970 px | 1170 px |
| Klaseko aurrizkia | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| zutabe kopurua | 12 | |||
| Zutabearen zabalera | Autoa | ~ 62 px | ~ 81 px | ~ 97 px |
| Erretenaren zabalera | 30 px (15 px zutabe baten albo bakoitzean) | |||
| Kokatuta | Bai | |||
| Desplazamenduak | Bai | |||
| Zutabeen ordenazioa | Bai | |||
Adibidea: pilatuta horizontalera
Sare-klase multzo bakarra erabiliz .col-md-*, oinarrizko sareta-sistema bat sor dezakezu, gailu mugikorretan eta tablet-gailuetan pilatuta hasten dena (sorta txikia edo txikia) mahaigaineko gailuetan (ertaina) horizontal bihurtu aurretik. Jarri sareko zutabeak edozeinetan .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Adibidea: Fluido-ontzia
Bihurtu zabalera finkoko edozein sareta-diseinu zabalera osoko diseinu batean, zure kanpokoena .containeraldatuz .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Adibidez: Mugikorra eta mahaigaina
Ez dituzu zure zutabeak gailu txikiagoetan pilatzea nahi? Erabili aparteko gailu txiki eta ertainen sareko klaseak .col-xs-* .col-md-*zure zutabeetan gehituz. Ikusi beheko adibidea dena nola funtzionatzen duen jakiteko.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Adibidez: mugikorra, tableta, mahaigaina
.col-sm-*Eraiki aurreko adibidea tableten klaseekin diseinu are dinamikoagoak eta indartsuagoak sortuz .
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Adibidez: zutabeen bilketa
Errenkada bakarrean 12 zutabe baino gehiago jartzen badira, zutabe gehigarrien talde bakoitza, unitate batean, lerro berri batean bilduko da.
.col-xs-9
.col-xs-4
9 + 4 = 13 > 12 denez, 4 zutabe zabaleko div hau lerro berri batean biltzen da ondoko unitate gisa.
9 + 4 = 13 > 12 denez, 4 zutabe zabaleko div hau lerro berri batean biltzen da ondoko unitate gisa.
.col-xs-6
Ondorengo zutabeek lerro berrian jarraitzen dute.
Ondorengo zutabeek lerro berrian jarraitzen dute.
<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>Zutabe erantzuleak berrezartzen dira
Eskuragarri dauden lau sare-mailekin arazoekin topo egin behar duzu, non, eten-puntu jakin batzuetan, zure zutabeak ez diren ondo garbitzen, bata bestea baino altuagoa baita. Hori konpontzeko, erabili a .clearfixeta gure responsive utility class -en konbinazioa .
.col-xs-6 .col-sm-3
Aldatu zure ikuspegiaren tamaina edo begiratu zure telefonoan adibidez.
Aldatu zure ikuspegiaren tamaina edo begiratu zure telefonoan adibidez.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Eten-puntu erantzuteko zutabeak garbitzeaz gain, baliteke desplazamenduak, bultzadak edo tiraketak berrezarri behar izatea . Ikusi hau ekintza sarearen adibidean .
<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>Zutabeak desplazatzea
Mugitu zutabeak eskuinera .col-md-offset-*klaseak erabiliz. Klase hauek zutabe baten ezkerreko marjina zutabeka handitzen dute *. Adibidez, lau zutabetan .col-md-offset-4mugitzen da..col-md-4
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Beheko sare-mailako desplazamenduak ere baliogabe ditzakezu .col-*-offset-0klaseekin.
<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>Habia-zutabeak
Zure edukia sareta lehenetsiarekin habiratzeko, gehitu zutabe berri bat .roweta multzo .col-sm-*bat lehendik dagoen .col-sm-*zutabe batean. Habiaraturiko errenkadek 12 edo gutxiago gehitzen dituzten zutabe multzo bat izan behar dute (ez da beharrezkoa erabilgarri dauden 12 zutabe guztiak erabiltzea).
1. maila: .col-sm-9
2. maila: .col-xs-8 .col-sm-6
2. maila: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Zutabeen ordenazioa
Erraz aldatu gure sareko zutabeen ordena .col-md-push-*eta .col-md-pull-*aldagailu klaseekin.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Mixin eta aldagai gutxiago
Diseinu azkarretarako aurrez eraikitako sareta-klaseez gain , Bootstrap-ek Less aldagai eta nahasketa biltzen ditu zure diseinu sinple eta semantikoak azkar sortzeko.
Aldagaiak
Aldagaiek zutabe kopurua, erretenaren zabalera eta multimedia kontsulta-puntua zehazten dute zutabe mugikorrak hasteko. Hauek goian dokumentatutako sare-klase aurredefinituak sortzeko erabiltzen ditugu, baita behean zerrendatutako nahasketa pertsonalizatuetarako ere.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Mixinak
Mixinak sareko aldagaiekin batera erabiltzen dira sareko zutabe indibidualetarako CSS semantikoa sortzeko.
// 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));
}
}Erabilera adibidea
Aldagaiak zure balio pertsonalizatuetara alda ditzakezu edo nahasketak erabil ditzakezu balio lehenetsiekin. Hona hemen ezarpen lehenetsiak erabiltzearen adibide bat bi zutabe-diseinua sortzeko tartea duen.
.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>Tipografia
Izenburuak
HTML goiburu guztiak, , <h1>bidez <h6>, eskuragarri daude. .h1bidezko .h6klaseak ere eskuragarri daude, goiburu baten letra-tipoarekin bat etorri nahi duzunean baina zure testua lerroan bistaratzea nahi duzunerako.
h1. Bootstrap goiburua |
Erdi lodia 36 px |
h2. Bootstrap goiburua |
Erdi lodia 30 px |
h3. Bootstrap goiburua |
Erdi lodia 24 px |
h4. Bootstrap goiburua |
Erdi lodia 18 px |
h5. Bootstrap goiburua |
Erdi lodia 14 px |
h6. Bootstrap goiburua |
Erdi lodia 12 px |
<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><small>Sortu bigarren mailako testu arinagoa eta etiketa generiko batekin edo .smallklasearekin edozein goiburutan.
h1. Bootstrap goiburua Bigarren mailako testua |
h2. Bootstrap goiburua Bigarren mailako testua |
h3. Bootstrap goiburua Bigarren mailako testua |
h4. Bootstrap goiburua Bigarren mailako testua |
h5. Bootstrap goiburua Bigarren mailako testua |
h6. Bootstrap goiburua Bigarren mailako testua |
<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>Gorputzaren kopia
Bootstrap-en lehenetsi globala font-size14px da , 1.428 line-height- koa . Hau <body>paragrafoei eta guztiei aplikatzen zaie. Gainera, <p>(paragrafoek) kalkulatutako lerroaren altueraren erdiaren beheko marjina jasotzen dute (lehenespenez 10 px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies ibilgailua.
Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez da 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. Duis mollis, ez da komodoa luctus, ez da ligula garraiatzen, eta lacinia odio ez da elit.
<p>...</p>Gorputzaren kopia nagusia
Egin paragrafo bat nabarmenduz gehituz .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Hori bai, ez da nolanahikoa.
<p class="lead">...</p>Gutxiagorekin eraikia
Eskala tipografikoa bi Aldagai Gutxiagotan oinarritzen da.gutxiago : @font-size-baseeta @line-height-base. Lehenengoa zehar erabilitako oinarrizko letra-tamaina da eta bigarrena oinarrizko lerroaren altuera da. Aldagai horiek eta matematika sinple batzuk erabiltzen ditugu gure mota guztietako marjinak, betegarriak eta lerro-altuerak sortzeko. Pertsonalizatu itzazu eta Bootstrap egokitzen da.
Sareko testu-elementuak
Testu markatua
Testu sorta bat beste testuinguru batean duen garrantziagatik nabarmentzeko, erabili <mark>etiketa.
Mark etiketa erabil dezakezunabarmendutestua.
You can use the mark tag to <mark>highlight</mark> text.Ezabatu da testua
Ezabatu diren testu-blokeak adierazteko, erabili <del>etiketa.
Testu-lerro hau ezabatutako testu gisa tratatu nahi da.
<del>This line of text is meant to be treated as deleted text.</del>Testua marratua
Jada garrantzitsuak ez diren testu-blokeak adierazteko, erabili <s>etiketa.
Testu-lerro hau jada zehatza ez dela tratatu nahi da.
<s>This line of text is meant to be treated as no longer accurate.</s>Txertatutako testua
Dokumentuaren gehiketak adierazteko, erabili <ins>etiketa.
Testu-lerro hau dokumentuaren gehigarri gisa tratatu nahi da.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Azpimarratutako testua
Testua azpimarratzeko, erabili <u>etiketa.
Testu-lerro hau azpimarratutako moduan errendatuko da
<u>This line of text will render as underlined</u>Erabili HTML-ren enfasi-etiketa lehenetsiak estilo arinekin.
Testu txikia
Testu-lerroak edo blokeak azpimarratzeko, erabili <small>etiketa testua gurasoaren tamainaren %85ean ezartzeko. Goiburuko elementuek berea jasotzen dute font-sizehabiaraturiko <small>elementuentzat.
Bestela, lerroko elementu bat erabil dezakezu .smalledozein ren ordez <small>.
Testu-lerro hau letra xehe gisa tratatu nahi da.
<small>This line of text is meant to be treated as fine print.</small>Lodia
Letra-pisu pisu handiagoa duen testu zati bat azpimarratzeko.
Hurrengo testu zatia testu lodi gisa errendatzen da .
<strong>rendered as bold text</strong>Etzana
Letra etzanarekin testu zati bat azpimarratzeko.
Ondorengo testu zatia testu etzanez gisa errendatzen da .
<em>rendered as italicized text</em>Ordezko elementuak
Ez zaitez libre erabili <b>eta <i>HTML5-en. <b>hitzak edo esaldiak nabarmendu nahi ditu garrantzi gehigarririk eman gabe, <i>eta batez ere ahotsa, termino teknikoak, etab.
Lerrokatze klaseak
Erraz lerrokatu testua osagaiekin testua lerrokatzeko klaseekin.
Ezkerrean lerrokatuta dagoen testua.
Erdian lerrokatuta dagoen testua.
Eskuinean lerrokatuta dagoen testua.
Testu justifikatua.
Ez dago itzultzeko testurik.
<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>Eraldaketa klaseak
Eraldatu testua osagaietan testu larriz idazteko klaseekin.
Testua minuskulaz.
Testua maiuskulaz.
Maiuskulaz idatzitako testua.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Laburdurak
HTML elementuaren inplementazio estilizatua <abbr>laburdura eta akronimoetarako bertsio zabaldua erakusteko. Atributu bat duten laburdurek titlepuntu argidun beheko ertza dute eta laguntza-kurtsorea pasatzean, testuinguru gehigarria eskaintzen die pasatzean eta laguntza-teknologien erabiltzaileei.
Oinarrizko laburdura
Atributu hitzaren laburdura attr da .
<abbr title="attribute">attr</abbr>Inizialismoa
Gehitu .initialismlaburdura bati letra-tamaina apur bat txikiagoa izateko.
HTML gauzarik onena da ogi xerratik.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Helbideak
Aurkeztu hurbilen dagoen arbasoaren edo lan-talde osoaren harremanetarako informazioa. Gorde formatua lerro guztiak rekin amaituz <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Izen osoa
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Izen osoa
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Blokeko komatxoak
Zure dokumentuan beste iturri bateko eduki-blokeak aipatzeko.
Blokeoaurreko lehenetsia
Bilatu <blockquote>edozein HTML aipamen gisa. Komatxo zuzenetarako, gomendatzen dugu <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>Blockquote aukerak
Estilo- eta eduki-aldaketak estandar baten aldaera sinpleetarako <blockquote>.
Iturburu bat izendatzea
Gehitu a <footer>iturria identifikatzeko. Itzul ezazu iturburu-lanaren izena <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>Ordezko pantailak
Gehitu .blockquote-reverseeskuinera lerrokatuta dagoen edukia duen bloke-aipatzeko.
<blockquote class="blockquote-reverse">
...
</blockquote>Zerrendak
Ordenatu gabe
Ordenak esplizituki garrantzirik ez duen elementuen zerrenda .
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem eta masa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ak tristique libre voltpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Agindua
Ordenak esplizituki garrantzia duen elementuen zerrenda .
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem eta masa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Estilorik gabekoa
Kendu zerrendako elementuetan lehenetsitako list-styleeta ezkerreko marjina (berehalako seme-alabak soilik). Hau berehalako seme-alaben zerrendako elementuei bakarrik aplikatzen zaie , hau da, klasea gehitu beharko duzu habiaratutako edozein zerrendetarako ere.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem eta masa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ak tristique libre voltpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Sarean
Jarri zerrendako elementu guztiak lerro bakarrean display: inline-block;eta betegarri arin batekin.
- Lorem ipsum
- Phasellus iaculis
- Nulla voltpat
<ul class="list-inline">
<li>...</li>
</ul>Deskribapena
Terminoen zerrenda, elkartutako deskribapenekin.
- Deskribapen zerrendak
- Deskribapen zerrenda ezin hobea da terminoak definitzeko.
- Euismod
- Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Deskribapen horizontala
Egin terminoak eta deskribapenak <dl>elkarren ondoan lerroan. Lehenetsitako s bezala pilatuta hasten da <dl>, baina nabigazio-barra zabaltzen denean, egin hauek.
- Deskribapen zerrendak
- Deskribapen zerrenda ezin hobea da terminoak definitzeko.
- Euismod
- Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod sempre eget lacinia
- Fusce dapibus, tellus ac cursus commodo, Tortor Mauris condimentum nibh, ut fermentum massa justo eseri amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Moztu automatikoa
Azalpen zerrenda horizontalek ezkerreko zutabean sartzeko luzeegiak diren terminoak moztuko dituzte text-overflow. Ikuspegi estuagoetan, pilatutako diseinu lehenetsira aldatuko dira.
Kodea
Sarean
Itzulbiratu lerroko kode zatiak <code>.
Adibidez,
<section>lerroan bezala bildu behar da.
For example, <code><section></code> should be wrapped as inline.Erabiltzailearen sarrera
Erabili <kbd>normalean teklatuaren bidez sartzen den sarrera adierazteko.
Direktorioak aldatzeko, idatzi
cdeta ondoren direktorioaren izena.
Ezarpenak editatzeko, sakatu ctrl + ,
Ezarpenak editatzeko, sakatu ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Oinarrizko blokea
Erabili <pre>kode-lerro anitzetarako. Ziurtatu kodean angelu-kortxeteetatik ihes egiten duzula errendatze egokia lortzeko.
<p>Hemen testua...</p>
<pre><p>Sample text here...</p></pre>Aukeran gehi dezakezu .pre-scrollableklasea, 350 px-ko gehienezko altuera ezarriko duena eta y ardatzeko korritze-barra emango duena.
Aldagaiak
Aldagaiak adierazteko, erabili <var>etiketa.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Laginaren irteera
Programa baten laginaren irteera blokeak adierazteko, erabili <samp>etiketa.
Testu hau ordenagailu-programa baten lagin gisa tratatu nahi da.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Taulak
Oinarrizko adibidea
Oinarrizko estilorako (betegarri arina eta banatzaile horizontalak soilik) gehitu oinarrizko klasea .tableedozein <table>. Oso erredundantea dirudi, baina egutegiak eta data-hautatzaileak bezalako beste plugin batzuen taulak oso hedatuta daudela ikusita, gure taula-estilo pertsonalizatuak isolatzea aukeratu dugu.
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry | txoria |
<table class="table">
...
</table>Ilara marradunak
Erabili .table-stripedzebra marra gehitzeko <tbody>.
Arakatzaileen arteko bateragarritasuna
Marradun taulak :nth-childCSS hautatzailearen bidez diseinatzen dira, eta hori ez dago erabilgarri Internet Explorer 8n.
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry | txoria |
<table class="table table-striped">
...
</table>Mugadun mahaia
Gehitu .table-borderedertzak taularen eta gelaxken alde guztietan.
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry | txoria |
<table class="table table-bordered">
...
</table>Pasatu errenkadak
Gehitu .table-hoverpasatzeko egoera bat gaitzeko <tbody>.
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry | txoria |
<table class="table table-hover">
...
</table>Mahai kondentsatua
Gehitu .table-condensedmahaiak trinkoagoak izateko zelulen betegarria erditik moztuta.
| # | Izena | Abizena | Erabiltzaile izena |
|---|---|---|---|
| 1 | Markatu | Otto | @mdo |
| 2 | Jakob | Thornton | @potolo |
| 3 | Larry Txoria | ||
<table class="table table-condensed">
...
</table>Testuinguruko klaseak
Erabili testuinguru-klaseak taulen errenkadak edo gelaxka indibidualak koloreztatzeko.
| Klasea | Deskribapena |
|---|---|
.active |
Pasatzeko kolorea errenkada edo gelaxka jakin bati aplikatzen dio |
.success |
Ekintza arrakastatsua edo positiboa adierazten du |
.info |
Informazio aldaketa edo ekintza neutral bat adierazten du |
.warning |
Arreta beharko lukeen abisu bat adierazten du |
.danger |
Ekintza arriskutsua edo negatiboa izan daitekeen bat adierazten du |
| # | Zutabeen goiburua | Zutabeen goiburua | Zutabeen goiburua |
|---|---|---|---|
| 1 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 2 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 3 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 4 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 5 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 6 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 7 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 8 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
| 9 | Zutabeen edukia | Zutabeen edukia | Zutabeen edukia |
<!-- 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>Laguntza-teknologiei esanahia ematea
Taularen errenkada bati edo gelaxka indibidual bati esanahia gehitzeko kolorea erabiltzeak adierazpide bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu koloreak adierazten duen informazioa edukitik bertatik agerikoa dela (dagokion taulako errenkada/gelaxkan ikusgai dagoen testua) edo bitarteko alternatiboen bidez sartzen dela, esate baterako, .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria.
Taulen erantzunak
Sortu erantzunak diren taulak edozein .tablesartuta .table-responsivegailu txikietan horizontalki mugi daitezen (768 px-tik behera). 768 px-ko zabalera baino handiagoan ikusten duzunean, ez duzu desberdintasunik ikusiko taula hauetan.
Mozketa/mozketa bertikala
Taulen erantzunak erabiltzen dituzte overflow-y: hidden, eta horrek taularen beheko edo goiko ertzetatik haratago doan edukia mozten du. Bereziki, goitibeherako menuak eta hirugarrenen beste widget batzuk moztu ditzake.
Firefox eta fieldsets
Firefox-ek eremu-multzoaren estilo deserosoa du width, eta horrek erantzuten duen taula oztopatzen du. Hau ezin da gainidatzi Bootstrap-en eskaintzen ez dugun Firefox-en berariazko hackik gabe :
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Informazio gehiago lortzeko, irakurri Stack Overflow erantzun hau .
| # | Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua |
|---|---|---|---|---|---|---|
| 1 | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
| 2 | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
| 3 | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
| # | Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua | Taularen goiburua |
|---|---|---|---|---|---|---|
| 1 | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
| 2 | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
| 3 | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka | Taularen gelaxka |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Formak
Oinarrizko adibidea
Inprimaki indibidualaren kontrolak automatikoki jasotzen ditu estilo global batzuk. Testu <input>, <textarea>, eta <select>elementu guztiak lehenespenez .form-controlezarrita daude . width: 100%;Itzulbiratu etiketak eta kontrolak .form-grouptarterik onena lortzeko.
<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>Ez nahasi inprimaki-taldeak sarrera-taldeekin
Ez nahastu inprimaki-taldeak zuzenean sarrera-taldeekin . Horren ordez, habiatu sarrera-taldea inprimaki-taldearen barruan.
Lineako formularioa
Gehitu .form-inlinezure inprimakiari (ez du zertan bat izan beharrik <form>) ezkerreko lerrokatutako eta lerroko blokeen kontroletarako. Gutxienez 768 px-ko zabalera duten bistarauetako inprimakiei soilik aplikatzen zaie.
Baliteke zabalera pertsonalizatuak behar izatea
Sarrerak eta hautaketak width: 100%;lehenespenez aplikatu dira Bootstrap-en. Lineako inprimakietan, hori berrezartzen dugu, width: auto;hainbat kontrol lerro berean egon daitezen. Zure diseinuaren arabera, zabalera pertsonalizatu osagarriak beharko dira.
Gehitu beti etiketak
Pantaila-irakurleek arazoak izango dituzte zure inprimakiekin sarrera bakoitzeko etiketarik sartzen ez baduzu. Lineako inprimaki hauetarako, etiketak ezkutatu ditzakezu .sr-onlyklasea erabiliz. Laguntza-teknologiei etiketa bat emateko beste metodo alternatibo batzuk daude, hala nola aria-label, aria-labelledbyedo titleatributua. Horietako bat ere ez badago, pantaila-irakurleek placeholderatributua erabil dezakete, baldin badago, baina kontuan izan placeholderez dela gomendatzen beste etiketa-metodo batzuen ordezko erabiltzea.
<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>Forma horizontala
Erabili Bootstrap-en aurrez definitutako sareta-klaseak etiketak eta inprimaki-kontrol-taldeak diseinu horizontalean lerrokatzeko, formularioari gehituz .form-horizontal(ez du zertan <form>). .form-groupHori eginez gero, s sareko errenkada gisa jokatzera aldatzen da, beraz, ez da beharrezkoa .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>Onartutako kontrolak
Inprimaki-kontrol estandarren adibideak inprimaki-diseinu adibide batean onartzen dira.
Sarrerak
Inprimaki-kontrol ohikoena, testuan oinarritutako sarrera-eremuak. HTML5 mota guztientzako euskarria dakar: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, eta color.
Mota aitorpena behar da
Sarrerak guztiz estiloa izango dira typebehar bezala deklaratzen badira.
<input type="text" class="form-control" placeholder="Text input">Sarrera-taldeak
Testuan oinarritutako edozein testuren aurretik eta/edo ondoren integratua edo botoiak gehitzeko <input>, begiratu sarrera-taldearen osagaia .
Testu-eremua
Testu-lerro bat baino gehiago onartzen dituen inprimaki-kontrola. Aldatu rowsatributua behar izanez gero.
<textarea class="form-control" rows="3"></textarea>Koadroak eta irratiak
Kontrol-laukiak zerrenda batean aukera bat edo batzuk hautatzeko dira, eta irratiak, berriz, askotariko aukera bat hautatzeko.
Desgaitutako kontrol-laukiak eta irratiak onartzen dira, baina "baimendu gabeko" kurtsorea eskaintzeko gurasoaren gainean pasatzean , klasea gurasoari <label>gehitu beharko diozu , , , edo ..disabled.radio.radio-inline.checkbox.checkbox-inline
Lehenetsia (pilatuta)
<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>Sareko kontrol-laukiak eta irratiak
Erabili .checkbox-inlineedo .radio-inlineklaseak kontrol-lauki edo irrati batzuetan lerro berean agertzen diren kontroletarako.
<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>Etiketa testurik gabeko kontrol-laukiak eta irratiak
Testurik ez baduzu <label>, sarrera espero zenukeen moduan kokatuko da. Une honetan linean ez diren kontrol-laukietan eta irratietan bakarrik funtzionatzen du. Gogoratu oraindik laguntza-teknologiei etiketa bat ematen diezula (adibidez, 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>Hautatzen du
border-radiusKontuan izan jatorrizko hautapen menu askok, Safari eta Chrome-n hain zuzen, propietateen bidez aldatu ezin diren ertz biribilak dituztela.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select>Atributua duten kontroletarako , multipleaukera anitz erakusten dira lehenespenez.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kontrol estatikoa
Inprimaki baten etiketa baten ondoan testu arrunta jarri behar duzunean, erabili .form-control-staticklasea <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>Foku egoera
outlineInprimaki-kontrol batzuetan estilo lehenetsiak kentzen ditugu eta box-shadowbere lekuan a aplikatzen dugu :focus.
Demo :focusegoera
Goiko adibide-sarrerak estilo pertsonalizatuak erabiltzen ditu gure dokumentazioan :focusegoera erakusteko .form-control.
Ezindu egoera
Gehitu disabledatributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko. Desgaitutako sarrerak arinagoak agertzen dira eta not-allowedkurtsorea gehitzen dute.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Desgaitutako eremu multzoak
Gehitu disabledatributua a- <fieldset>ri barruko kontrol guztiak <fieldset>aldi berean desgaitzeko.
Estekaren funtzionaltasunari buruzko ohartarazpena<a>
Lehenespenez, arakatzaileek a barruko jatorrizko inprimaki-kontrol guztiak ( <input>, <select>eta <button>elementuak) <fieldset disabled>desgaituta bezala tratatuko dituzte, teklatuaren eta saguaren elkarrekintzak saihestuz. Hala ere, zure inprimakiak <a ... class="btn btn-*">elementuak ere baditu, hauei estilo bat baino ez zaie emango pointer-events: none. Botoien egoera desgaituari buruzko atalean adierazi bezala (eta, zehazki, aingura-elementuen azpi-atalean), CSS propietate hau oraindik ez dago estandarizatua eta ez dago guztiz onartzen Opera 18-n eta ondorengoetan, edo Internet Explorer 11-n, eta irabazi egin du. Ez eragotzi teklatuaren erabiltzaileei esteka hauek bideratu edo aktibatu ahal izatea. Beraz, seguru izateko, erabili JavaScript pertsonalizatua estekak desgaitzeko.
Arakatzaileen arteko bateragarritasuna
Bootstrap-ek estilo hauek arakatzaile guztietan aplikatuko dituen arren, Internet Explorer 11 eta ondorengoek ez dute guztiz onartzen disabledatributua <fieldset>. Erabili JavaScript pertsonalizatua arakatzaile hauetan eremu-multzoa desgaitzeko.
<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>Irakurtzeko soilik egoera
Gehitu readonlyatributu boolearra sarrera batean sarreraren balioa aldatzeko. Irakurtzeko soilik dauden sarrerak arinagoak agertzen dira (desgaitutako sarrerak bezala), baina kurtsore estandarra mantentzen dute.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Laguntza testua
Bloke-mailako laguntza-testua inprimaki-kontroletarako.
Laguntza-testua inprimaki-kontrolekin lotzea
aria-describedbyLaguntza-testua berariaz lotu behar da atributua erabiliz erlazionatutako inprimaki-kontrolarekin . Horrek bermatuko du laguntza-teknologiek (pantaila-irakurgailuak, esaterako) laguntza-testu hau iragarriko dutela erabiltzailea kontrolatzen denean edo kontrola sartzen denean.
<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>Balioztatze-egoerak
Bootstrap-ek errore, abisu eta arrakasta-egoeretarako baliozkotze-estiloak biltzen ditu inprimaki-kontroletan. Elementu nagusia erabiltzeko, gehitu .has-warning, .has-error, edo . .has-successEdozein .control-label, .form-control, eta .help-blockelementu horren barruan baliozkotze estiloak jasoko ditu.
Balidazio-egoera helaraztea laguntza-teknologiei eta daltoniko erabiltzaileei
Balidazio-estilo hauek inprimaki-kontrol baten egoera adierazteko erabiltzeak koloreetan oinarritutako adierazgarri bisuala baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei (pantaila-irakurgailuak, esaterako) edo daltoniko erabiltzaileei.
Ziurtatu egoera-adierazpen alternatibo bat ere ematen dela. Adibidez, egoerari buruzko iradokizun bat sar dezakezu inprimaki-kontrolaren <label>testuan bertan (ondoko kode-adibidean gertatzen den bezala), glifiko bat sar dezakezu (klasea erabiliz testu alternatibo egokiarekin .sr-only- ikusi glifikoen adibideak ) edo bat emanez. laguntza gehigarria testu blokea. Bereziki laguntza-teknologiei dagokienez, inprimaki-kontrol baliogabeei aria-invalid="true"atributu bat ere eslei dakieke.
<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>Aukerako ikonoekin
Aukerako iritzi-ikonoak ere gehi ditzakezu .has-feedbacketa eskuineko ikonoa gehituta.
<input class="form-control">Iritzi-ikonoek testu- elementuekin soilik funtzionatzen dute .
Ikonoak, etiketak eta sarrera-taldeak
Iritzi-ikonoen eskuz kokatzea beharrezkoa da etiketarik gabeko sarreretarako eta eskuinaldean gehigarri bat duten sarrera taldeetarako . Irisgarritasun arrazoiengatik sarrera guztiei etiketak ematera gomendatzen zaituztegu. Etiketak bistaratzea eragotzi nahi baduzu, ezkutatu .sr-onlyklasearekin. Etiketarik gabe egin behar baduzu, egokitu topiritzia ikonoaren balioa. Sarrera-taldeetarako, egokitu rightbalioa pixel-balio egoki batera zure gehigarriaren zabaleraren arabera.
Ikonoaren esanahia laguntza-teknologiei transmititzea
Laguntza-teknologiek (pantaila-irakurleek, esaterako) ikono baten esanahia behar bezala transmititzen dutela ziurtatzeko, ezkutuko testu gehigarria sartu behar da .sr-onlyklasean eta esplizituki lotu behar da erabiltzen duen inprimaki-kontrolarekin aria-describedby. Bestela, ziurtatu esanahia (adibidez, testua sartzeko eremu jakin baterako abisua dagoela) beste modu batean transmititzen dela, esate baterako <label>, inprimaki-kontrolarekin lotutako benetako testua aldatuz.
Hurrengo adibideek testuan bertan dagozkien inprimaki-kontrolen baliozkotze-egoera aipatzen badute <label>ere, goiko teknika ( .sr-onlytestua eta aria-describedby) erabilita, ilustrazio-helburuetarako sartu da.
<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>Aukerako ikonoak forma horizontaletan eta lerroan
<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>Ezkutuko .sr-onlyetiketak dituzten hautazko ikonoak
.sr-onlyKlasea inprimaki-kontrol bat ezkutatzeko erabiltzen baduzu <label>(beste etiketa-aukera batzuk erabili beharrean, aria-labelatributua adibidez), Bootstrap-ek automatikoki egokituko du ikonoaren posizioa gehitutakoan.
(arrakasta)
@
(arrakasta)
<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>Tamaina kontrolatzea
Ezarri altuerak bezalako klaseak erabiliz .input-lg, eta ezarri zabalerak sareta bezalako zutabe klaseak erabiliz .col-lg-*.
Altuera neurria
Sortu botoien tamainarekin bat datozen inprimaki-kontrol altuagoak edo laburragoak.
<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>Forma horizontaleko taldeen tamainak
Bizkor dimensionatu etiketak eta inprimakien kontrolak barruan edo .form-horizontalgehituz ..form-group-lg.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>Zutabeen tamaina
Itzulbiratu sarrerak sareta-zutabeetan edo edozein elementu nagusi pertsonalizatutan, nahi diren zabalerak erraz betetzeko.
<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>Botoiak
Botoien etiketak
Erabili botoien klaseak batean<a> , <button>, edo <input>elementu batean.
<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">Testuinguruari dagokion erabilera
<a>Botoien klaseak eta elementuetan erabil daitezkeen arren , gure nabigazio eta nabigazio-barrako osagaietan elementuak <button>bakarrik onartzen dira.<button>
Botoi gisa jarduten duten estekak
Elementuak <a>botoi gisa jarduteko erabiltzen badira (orriaren funtzionaltasuna abiaraziz, uneko orrialdeko beste dokumentu edo atal batera nabigatu beharrean), . egokia ere eman behar zaie role="button".
Arakatzaileen artean errendatzea
Praktika egoki gisa, elementua ahal den guztietan erabiltzea gomendatzen dugu<button> ahal den guztietan , arakatzaileen arteko errendaketa bat etortzea ziurtatzeko.
Besteak beste, Firefox-en <30-n akats bat dagoline-height , eta horrek -oinarritutako botoiak ezartzea eragozten digu <input>, Firefox-eko beste botoien altuerarekin ez etortzea eraginez.
Aukerak
Erabili eskuragarri dauden botoi-klaseetako edozein estilo-botoi bat azkar sortzeko.
<!-- 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>Laguntza-teknologiei esanahia ematea
Botoi bati esanahia gehitzeko kolorea erabiltzeak seinale bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik (botoiaren testu ikusgaia) agerikoa dela edo beste bitarteko batzuen bidez sartzen dela, adibidez .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria.
Tamainak
Botoi handiagoak edo txikiagoak nahi dituzu? Gehitu .btn-lg, .btn-sm, edo .btn-xstamaina gehigarrietarako.
<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>Sortu bloke-mailako botoiak —guraso baten zabalera osoa hartzen dutenak— gehituz .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>Egoera aktiboa
Botoiak sakatuta agertuko dira (atzealde ilunarekin, ertz ilunarekin eta txertatutako itzalarekin) aktibatuta dagoenean. Elementuetarako <button>, hau :active. Elementuetarako <a>, rekin egiten da .active. .activeHala ere, s -en erabil dezakezu <button>(eta aria-pressed="true"atributua barne) egoera aktiboa programatikoki errepikatu behar baduzu.
Botoiaren elementua
Ez da gehitu behar :activesasi-klase bat denez, baina itxura bera behartu behar baduzu, aurrera egin eta gehitu .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>Aingura-elementua
Gehitu .activeklasea <a>botoietara.
<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>Ezindu egoera
Egin botoiei klik eginezinak itxura emanez, lausotuz opacity.
Botoiaren elementua
Gehitu disabledatributua <button>botoiei.
<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>Arakatzaileen arteko bateragarritasuna
disabledAtributua gehitzen baduzu <button>, Internet Explorer 9 eta ondorengoak testua gris bihurtuko du konpondu ezin dugun testu-itzal gaizto batekin.
Aingura-elementua
Gehitu .disabledklasea <a>botoietara.
<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>Hemen erabilgarritasun-klase gisa erabiltzen dugu .disabled, klase arruntaren antzekoa .active, beraz, ez da aurrizkirik behar.
Estekaren funtzionalitatearen oharra
Klase hau s-ren pointer-events: noneestekaren funtzionaltasuna desgaitzen saiatzeko erabiltzen da, baina CSS propietate hori oraindik ez dago estandarizatua eta ez dago guztiz onartzen Opera 18 eta ondorengoetan, edo Internet Explorer 11n. Horrez gain , teklatua <a>onartzen duten arakatzaileetan ere pointer-events: nonenabigazioak ez du eraginik izaten, hau da, ikusmeneko teklatuaren erabiltzaileek eta laguntza-teknologien erabiltzaileek esteka hauek aktibatu ahal izango dituzte. Beraz, seguru izateko, erabili JavaScript pertsonalizatua estekak desgaitzeko.
Irudiak
Irudi sentikorrak
Bootstrap 3-ko irudiak sentikor bihur daitezke .img-responsiveklasea gehituz. Hau aplikatzen da max-width: 100%;, height: auto;eta display: block;irudiari, beraz, ondo eskala dadin elementu nagusira.
.img-responsiveKlasea erabiltzen duten irudiak zentratzeko, erabili .center-blockordez .text-center. Ikusi laguntzaileen klaseen atala.center-block erabilerari buruzko xehetasun gehiago lortzeko .
SVG irudiak eta IE 8-10
Internet Explorer 8-10-n, SVG irudiek .img-responsiveneurrigabeko tamaina dute. Hau konpontzeko, gehitu width: 100% \9;behar den tokian. Bootstrap-ek ez du hau automatikoki aplikatzen, beste irudi formatu batzuetan konplikazioak eragiten baititu.
<img src="..." class="img-responsive" alt="Responsive image">Irudi formak
Gehitu klaseak <img>elementu bati edozein proiektutako irudiak erraz estiloatzeko.
Arakatzaileen arteko bateragarritasuna
Kontuan izan Internet Explorer 8-k ez duela ertz biribilduentzako laguntzarik.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Laguntzaile klaseak
Testuinguruko koloreak
Transmititu esanahia kolorearen bidez enfasi-erabilgarritasun-klase gutxi batzuekin. Esteketan ere aplika daitezke eta pasatzean iluntzen joango dira gure esteka-estilo lehenetsiak bezala.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, ez da komenigarria luctus, ez da ligula eramangarria.
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>Espezifikotasunari aurre egitea
Batzuetan, enfasi-klaseak ezin dira aplikatu beste hautatzaile baten espezifikotasunagatik. Kasu gehienetan, konponbide nahikoa zure testua <span>klasearekin batera biltzea da.
Laguntza-teknologiei esanahia ematea
Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu koloreak adierazten duen informazioa edukitik bertatik agerikoa dela (testuinguruko koloreak testuan/markan dagoen esanahia indartzeko soilik erabiltzen dira), edo beste baliabide batzuen bidez sartzen dela, adibidez .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria. .
Testuinguruko aurrekariak
Testu-testuaren kolore-klaseen antzera, erraz ezarri elementu baten atzeko planoa edozein testuinguru-klaseri. Aingura-osagaiak pasatzean ilundu egingo dira, testu-klaseak bezala.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, ez da komenigarria luctus, ez da ligula eramangarria.
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>Espezifikotasunari aurre egitea
Batzuetan, testuinguruaren atzeko planoko klaseak ezin dira aplikatu beste hautatzaile baten espezifikotasunagatik. Zenbait kasutan, konponbide nahikoa zure elementuaren edukia <div>klasearekin batera biltzea da.
Laguntza-teknologiei esanahia ematea
Testuinguruko koloreekin gertatzen den bezala , ziurtatu kolorearen bidez helarazten den edozein esanahi ere aurkezpen hutsa ez den formatu batean transmititzen dela.
Itxi ikonoa
Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Carets
Erabili ikurra goitibeherako funtzionaltasuna eta norabidea adierazteko. Kontuan izan ikurra lehenetsia automatikoki alderantzikatuko dela goitibeherako menuetan .
<span class="caret"></span>Karroza azkarrak
Jarri elementu bat ezkerrera edo eskuinera klase batekin. !importantespezifikotasun arazoak saihesteko sartzen da. Klaseak mixin gisa ere erabil daitezke.
<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();
}Zentratu eduki-blokeak
Ezarri elementu bat display: blocketa erdiratu margin. Mixin eta klase gisa eskuragarri.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Garbitu
Erraz garbitu s elementu nagusiarifloat gehituz . Nicolas Gallagherrek ezagun egin duen mikro clearfix - a erabiltzen du. Mixin gisa ere erabil daiteke..clearfix
<!-- 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();
}Edukia erakutsi eta ezkutatu
Behartu elementu bat erakustera edo ezkutatzera ( pantaila-irakurleentzat barne ) .showeta .hiddenklaseak erabiliz. Klase hauek !importantespezifikotasun-gatazkak saihesteko erabiltzen dira, karroza azkarrak bezala . Bloke-maila aldatzeko bakarrik daude erabilgarri. Mixin gisa ere erabil daitezke.
.hideeskuragarri dago, baina ez die beti pantaila-irakurleei eragiten eta zaharkituta dago v3.0.1. Erabili .hiddenedo .sr-onlyhorren ordez.
Gainera, .invisibleelementu baten ikusgarritasuna soilik aldatzeko erabil daiteke, hau displayda, ez da aldatzen eta elementuak dokumentuaren fluxuari eragin diezaioke.
<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();
}Pantaila-irakurgailua eta teklatuaren nabigazio-edukia
Ezkutatu elementu bat gailu guztietan , pantaila-irakurgailuak izan ezik .sr-only. Konbinatu .sr-onlyhonekin .sr-only-focusableelementua berriro erakusteko fokatuta dagoenean (adibidez, teklatua soilik duen erabiltzaile batek). Beharrezkoa da irisgarritasun-jardunbide onenak jarraitzeko . Mixin gisa ere erabil daiteke.
<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();
}Irudiaren ordezkapena
Erabili .text-hideklasea edo nahasketa elementu baten testuaren edukia atzeko planoko irudi batekin ordezkatzen laguntzeko.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Erabilgarritasun erreaktiboak
Mugikorrerako garapen azkarragoa lortzeko, erabili erabilgarritasun-klase hauek gailuaren arabera edukia erakusteko eta ezkutatzeko multimedia-kontsulten bidez. Inprimatutakoan edukia aldatzeko erabilgarritasun-klaseak ere sartzen dira.
Saiatu hauek modu mugatuan erabiltzen eta saihestu gune beraren bertsio guztiz desberdinak sortzea. Horren ordez, erabili gailu bakoitzaren aurkezpena osatzeko.
Klase eskuragarriak
Erabili erabilgarri dauden klase bakar bat edo konbinazio bat edukia ikuspegi-etenguneen artean aldatzeko.
| Gailu txikiakTelefonoak (<768 px) | Gailu txikiakTabletak (≥768 px) | Gailu ertainakMahaigainak (≥992 px) | Gailu handiakMahaigainak (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Ikusgai | Ezkutuan | Ezkutuan | Ezkutuan |
.visible-sm-* |
Ezkutuan | Ikusgai | Ezkutuan | Ezkutuan |
.visible-md-* |
Ezkutuan | Ezkutuan | Ikusgai | Ezkutuan |
.visible-lg-* |
Ezkutuan | Ezkutuan | Ezkutuan | Ikusgai |
.hidden-xs |
Ezkutuan | Ikusgai | Ikusgai | Ikusgai |
.hidden-sm |
Ikusgai | Ezkutuan | Ikusgai | Ikusgai |
.hidden-md |
Ikusgai | Ikusgai | Ezkutuan | Ikusgai |
.hidden-lg |
Ikusgai | Ikusgai | Ikusgai | Ezkutuan |
3.2.0 bertsiotik aurrera, .visible-*-*eten puntu bakoitzeko klaseak hiru aldaera ditu, bat displaybehean zerrendatutako CSS propietate-balio bakoitzeko.
| Klase taldea | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Beraz, pantaila txiki gehigarrietarako ( xs) adibidez, eskuragarri dauden .visible-*-*klaseak hauek dira: .visible-xs-block, .visible-xs-inline, eta .visible-xs-inline-block.
Klaseak .visible-xs, .visible-sm, .visible-md, eta .visible-lgere existitzen dira, baina zaharkituta daude v3.2.0-tik aurrera . Gutxi gorabehera, baliokideak dira , txandakatzeko erlazionatutako elementuen .visible-*-blockkasu berezi gehigarriekin izan ezik .<table>
Inprimatu klaseak
Ohiko erantzunezko klaseen antzera, erabili hauek inprimatzeko edukia aldatzeko.
| Klaseak | Arakatzailea | Inprimatu |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Ezkutuan | Ikusgai |
.hidden-print |
Ikusgai | Ezkutuan |
Klasea .visible-printere badago baina zaharkituta dago v3.2.0-tik aurrera. Gutxi gorabehera baliokidea da , -lotutako elementuen .visible-print-blockkasu berezi gehigarriekin izan ezik .<table>
Proba kasuak
Aldatu zure arakatzailearen tamaina edo kargatu gailu desberdinetan sentikorren erabilgarritasun klaseak probatzeko.
Ikusgai...
Marka berdeek adierazten dute elementua ikusgai dagoela zure uneko ikuspegian.
Oso txikia
✔ Visible on x-small
Txikia
✔ Visible on small
Ertaina
✔ Visible on medium
Large
✔ Handian ikusgai
✔ Visible on x-small and small
✔ Ertain eta handietan ikusgai
✔ Visible on x-small and medium
✔ Txiki eta handietan ikusgai
✔ X-txikian eta handietan ikusgai
✔ Visible on small and medium
Ezkutatuta...
Hemen, marka berdeek ere adierazten dute elementua zure uneko ikuspegian ezkutatuta dagoela .
Gutxiago erabiliz
Bootstrap-en CSS Less-en eraikita dago, aldagaiak, nahasketak eta CSS konpilatzeko funtzioak bezalako funtzionalitate gehigarriak dituen aurreprozesadorea. Gure CSS fitxategi konpilatuen ordez Less fitxategiak erabili nahi dituztenek esparru osoan erabiltzen ditugun aldagai eta mixin ugari erabil ditzakete.
Sarearen aldagaiak eta nahasketak Grid sistemaren atalean azaltzen dira .
Bootstrap konpilatzen
Bootstrap gutxienez bi modutara erabil daiteke: konpilatutako CSSarekin edo iturburu Gutxiago fitxategiekin. Gutxiago fitxategiak konpilatzeko, kontsultatu Lehen urratsak atalean zure garapen ingurunea beharrezko komandoak exekutatzeko nola konfiguratu jakiteko.
Baliteke hirugarrenen konpilazio tresnak Bootstrap-ekin funtzionatzea, baina gure oinarrizko taldeak ez ditu onartzen.
Aldagaiak
Aldagaiak proiektu osoan zehar erabiltzen dira koloreak, tartea edo letra-tipo-pilak bezalako balioak zentralizatzeko eta partekatzeko modu gisa. Matxura osoa lortzeko, ikusi Pertsonalizatzailea .
Koloreak
Erabili erraz bi kolore-eskema: gris-eskala eta semantikoa. Gris-eskalako koloreek sarbide azkarra eskaintzen dute erabili ohi diren beltzen tonuetara, eta semantikoak testuinguruko balio esanguratsuei esleitutako hainbat kolore barne hartzen ditu.
@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;Erabili kolore-aldagai horietako edozein dauden bezala edo esleitu berriro zure proiekturako aldagai esanguratsuagoetara.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Aldamioak
Aldagai batzuk zure gunearen hezurduraren funtsezko elementuak azkar pertsonalizatzeko.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Estekak
Diseina ezazu erraz zure estekak kolore egokiarekin balio bakarrarekin.
// 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;
}
}Kontuan izan @link-hover-colorfuntzio bat erabiltzen duela, Less-en beste tresna ikaragarri bat, automatikoki pasatzeko kolore egokia sortzeko. darken, lighten, saturate, eta erabil ditzakezu desaturate.
Tipografia
Ezarri erraz zure letra tipoa, testuaren tamaina, hasierakoa eta gehiago aldagai azkar batzuekin. Bootstrap-ek hauek ere erabiltzen ditu nahasketa tipografiko errazak emateko.
@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;Ikonoak
Bi aldagai azkar zure ikonoen kokapena eta fitxategi-izena pertsonalizatzeko.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Osagaiak
Bootstrap-eko osagaiek aldagai lehenetsi batzuk erabiltzen dituzte balio komunak ezartzeko. Hona hemen erabilienak.
@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;Saltzaileen nahasketak
Saltzaileen nahasketak nabigatzaile anitz onartzen laguntzeko nahasketak dira, konpilatutako CSSan saltzaile aurrizki guztiak sartuz.
Kutxa-tamaina
Berrezarri zure osagaien kutxa eredua nahasketa bakar batekin. Testuingururako, ikusi Mozilla-ren artikulu lagungarri hau .
Mixin-a zaharkituta dago v3.2.0-tik aurrera, Autoaurrizkiaren sarrerarekin. Atzerako bateragarritasuna gordetzeko, Bootstrap-ek mixin-a barnean erabiltzen jarraituko du Bootstrap v4 arte.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Izkin biribilduak
Gaur egun arakatzaile moderno guztiek aurrizkirik gabeko border-radiuspropietatea onartzen dute. Horrela, ez dago .border-radius()nahasketarik, baina Bootstrap-ek objektu baten alde jakin batean bi ertzak azkar biribiltzeko lasterbideak biltzen ditu.
.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;
}Kutxa (Trop) itzalak
If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.
The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Transitions
Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until 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;
}Transformations
Rotate, scale, translate (move), or skew any object.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until 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;
}Animations
A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Opacity
Set the opacity for all browsers and provide a filter fallback for IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Placeholder text
Provide context for form controls within each field.
.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
}Columns
Generate columns via CSS within a single element.
.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;
}Gradients
Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);You can also specify the angle of a standard two-color, linear gradient:
#gradient > .directional(#333; #000; 45deg);If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.
#gradient > .striped(#333; 45deg);Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
Clearfix
Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Horizontal centering
Quickly center any element within its parent. Requires width or max-width to be set.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Sizing helpers
Specify the dimensions of an object more easily.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Resizable textareas
Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Truncating text
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina images
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);
}Using Sass
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.
What's included
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/ |
Iparrorratza paketearen manifestua |
vendor/assets/ |
Sass, JavaScript eta letra-tipo fitxategiak |
Rakefile |
Barne-zereginak, hala nola raketea eta bihurtzea |
Bisitatu Sass atakaren GitHub biltegia fitxategi hauek martxan ikusteko.
Instalazioa
Bootstrap Sass-erako nola instalatu eta erabiltzeari buruzko informazio gehiago lortzeko, kontsultatu GitHub biltegia irakurme . Iturririk eguneratuena da eta Rails, Compass eta Sass proiektu estandarrekin erabiltzeko informazioa biltzen du.