CSS
CSS ezarpen orokorrak, oinarrizko HTML elementuak estilo hedagarriekin hobetu eta klaseak eta sareta sistema aurreratu bat.
CSS ezarpen orokorrak, oinarrizko HTML elementuak estilo hedagarriekin hobetu eta klaseak eta sareta sistema aurreratu bat.
Lortu Bootstrap-en azpiegituraren gakoen xehetasunak, web garapen hobea, azkarrago eta sendoagoa izateko gure ikuspegia barne.
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>
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=no
bistaratuko 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">
Bootstrap-ek oinarrizko bistaratzeko, tipografia eta esteka-estilo orokorrak ezartzen ditu. Zehazki, guk:
background-color: #fff;
_body
@font-family-base
, @font-size-base
, eta @line-height-base
atributuak gure oinarri tipografiko gisa@link-color
eta aplikatu estekaren azpimarra bakarrik:hover
Estilo hauek barruan aurki daitezke scaffolding.less
.
Arakatzaileen arteko errendaketa hobetzeko, Normalize.css erabiltzen dugu , Nicolas Gallagher eta Jonathan Neal -en proiektua .
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, padding
eta gehiago dela eta, ez bata ez bestea edukiontzia ez dela enbokatu.
Erabili .container
zabalera finko erantzuteko edukiontzi baterako.
<div class="container">
...
</div>
Erabili .container-fluid
zabalera osoko edukiontzi baterako, zure ikuspegiaren zabalera osoan zehar.
<div class="container-fluid">
...
</div>
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 .
Sare-sistemak orriaren diseinuak sortzeko erabiltzen dira zure edukia biltzen duten errenkada eta zutabe batzuen bidez. Hona hemen nola funtzionatzen duen Bootstrap grid sistemak:
.container
(zabalera finkoko) edo .container-fluid
(zabalera osoko) barruan kokatu behar dira lerrokadura eta betegarri egokia izateko..row
eta .col-xs-4
eskuragarri daude sare-diseinuak azkar egiteko. Mixin gutxiago ere erabil daitezke diseinu semantiko gehiagorako.padding
. Betegarri hori lehen eta azken zutaberako errenkadetan konpentsatzen da marjina negatiboaren bidez .row
..col-xs-4
..col-md-*
bere estiloari eragingo dio gailu ertainetan, baita gailu handietan ere, .col-lg-*
klaserik ez badago.Begiratu adibideei printzipio hauek zure kodean aplikatzeko.
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-width
CSS 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) { ... }
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 |
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
.
<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>
Bihurtu zabalera finkoko edozein sareta-diseinu zabalera osoko diseinu batean, zure kanpokoena .container
aldatuz .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
.col-sm-*
Eraiki aurreko adibidea tableten klaseekin diseinu are dinamikoagoak eta indartsuagoak sortuz .
<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>
Errenkada bakarrean 12 zutabe baino gehiago jartzen badira, zutabe gehigarrien talde bakoitza, unitate batean, lerro berri batean bilduko da.
<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>
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 .clearfix
eta gure responsive utility class -en konbinazioa .
<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>
Kendu errenkada batetik erretenak eta zutabeak .row-no-gutters
klasearekin.
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Mugitu zutabeak eskuinera .col-md-offset-*
klaseak erabiliz. Klase hauek zutabe baten ezkerreko marjina zutabeka handitzen dute *
. Adibidez, lau zutabetan .col-md-offset-4
mugitzen da..col-md-4
<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-0
klaseekin.
<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>
Zure edukia sareta lehenetsiarekin habiratzeko, gehitu zutabe berri bat .row
eta 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).
<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>
Erraz aldatu gure sareko zutabeen ordena .col-md-push-*
eta .col-md-pull-*
aldagailu klaseekin.
<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>
Diseinu azkarretarako aurrez eraikitako sareta-klaseez gain , Bootstrap-ek Less aldagai eta nahasketa biltzen ditu zure diseinu sinple eta semantikoak azkar sortzeko.
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 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));
}
}
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>
HTML goiburu guztiak, , <h1>
bidez <h6>
, eskuragarri daude. .h1
bidezko .h6
klaseak 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 .small
klasearekin 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>
Bootstrap-en lehenetsi globala font-size
14px 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 dago 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 dago elit.
<p>...</p>
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>
Eskala tipografikoa bi Aldagai Gutxiagotan oinarritzen da.gutxiago : @font-size-base
eta @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.
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 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>
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>
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>
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-lerroak edo blokeak azpimarratzeko, erabili <small>
etiketa testua gurasoaren tamainaren %85ean ezartzeko. Goiburuko elementuek berea jasotzen dute font-size
habiaraturiko <small>
elementuentzat.
Bestela, lerroko elementu bat erabil dezakezu .small
edozein 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>
Letra-pisu pisu handiagoa duen testu zati bat azpimarratzeko.
Hurrengo testu zatia testu lodi gisa errendatzen da .
<strong>rendered as bold text</strong>
Letra etzanarekin testu zati bat azpimarratzeko.
Ondorengo testu zatia testu etzanez gisa errendatzen da .
<em>rendered as italicized text</em>
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.
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>
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>
HTML elementuaren inplementazio estilizatua <abbr>
laburdura eta akronimoetarako bertsio zabaldua erakusteko. Atributu bat duten laburdurek title
puntu argidun beheko ertza dute eta laguntza-kurtsorea pasatzean, testuinguru gehigarria eskaintzen die pasatzean eta laguntza-teknologien erabiltzaileei.
Atributu hitzaren laburdura attr da .
<abbr title="attribute">attr</abbr>
Gehitu .initialism
laburdura bati letra-tamaina apur bat txikiagoa izateko.
HTML gauzarik onena da ogi xerratik.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Aurkeztu hurbilen dagoen arbasoaren edo lan-talde osoaren harremanetarako informazioa. Gorde formatua lerro guztiak rekin amaituz <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>
Zure dokumentuan beste iturri bateko eduki-blokeak aipatzeko.
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>
Estilo- eta eduki-aldaketak estandar baten aldaera sinpleetarako <blockquote>
.
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>
Gehitu .blockquote-reverse
eskuinera lerrokatuta dagoen edukia duen bloke-aipatzeko.
<blockquote class="blockquote-reverse">
...
</blockquote>
Ordenak esplizituki garrantzirik ez duen elementuen zerrenda .
<ul>
<li>...</li>
</ul>
Ordenak esplizituki garrantzia duen elementuen zerrenda .
<ol>
<li>...</li>
</ol>
Kendu zerrendako elementuetan lehenetsitako list-style
eta 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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Jarri zerrendako elementu guztiak lerro bakarrean display: inline-block;
eta betegarri arin batekin.
<ul class="list-inline">
<li>...</li>
</ul>
Terminoen zerrenda, elkartutako deskribapenekin.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Egin terminoak eta deskribapenak <dl>
elkarren ondoan lerroan. Lehenetsitako s bezala pilatuta hasten da <dl>
, baina nabigazio-barra zabaltzen denean, egin hauek.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Azalpen zerrenda horizontalek ezkerreko zutabean sartzeko luzeegiak diren terminoak moztuko dituzte text-overflow
. Ikuspegi estuagoetan, pilatutako diseinu lehenetsira aldatuko dira.
Itzulbiratu lerroko kode zatiak <code>
.
<section>
lerroan bezala bildu behar da.
For example, <code><section></code> should be wrapped as inline.
Erabili <kbd>
normalean teklatuaren bidez sartzen den sarrera adierazteko.
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>
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-scrollable
klasea, 350 px-ko gehienezko altuera ezarriko duena eta y ardatzeko korritze-barra emango duena.
Aldagaiak adierazteko, erabili <var>
etiketa.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
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>
Oinarrizko estilorako (betegarri arina eta banatzaile horizontalak soilik) gehitu oinarrizko klasea .table
edozein <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>
Erabili .table-striped
zebra marra gehitzeko <tbody>
.
Marradun taulak :nth-child
CSS 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>
Gehitu .table-bordered
ertzak 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>
Gehitu .table-hover
pasatzeko 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>
Gehitu .table-condensed
mahaiak 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>
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>
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-only
klasearekin ezkutatuta dagoen testu gehigarria.
Sortu erantzunak diren taulak edozein .table
sartuta .table-responsive
gailu txikietan horizontalki mugi daitezen (768 px-tik behera). 768 px-ko zabalera baino handiagoan ikusten duzunean, ez duzu desberdintasunik ikusiko taula hauetan.
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-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>
Inprimaki indibidualaren kontrolak automatikoki jasotzen ditu estilo global batzuk. Testu <input>
, <textarea>
, eta <select>
elementu guztiak lehenespenez .form-control
ezarrita daude . width: 100%;
Itzulbiratu etiketak eta kontrolak .form-group
tarterik 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 nahastu inprimaki-taldeak zuzenean sarrera-taldeekin . Horren ordez, habiatu sarrera-taldea inprimaki-taldearen barruan.
Gehitu .form-inline
zure 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.
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.
Pantaila-irakurleek arazoak izango dituzte zure inprimakiekin sarrera bakoitzeko etiketarik sartzen ez baduzu. Lineako inprimaki hauetarako, etiketak ezkutatu ditzakezu .sr-only
klasea erabiliz. Laguntza-teknologiei etiketa bat emateko beste metodo alternatibo batzuk daude, hala nola aria-label
, aria-labelledby
edo title
atributua. Horietako bat ere ez badago, pantaila-irakurleek placeholder
atributua erabil dezakete, baldin badago, baina kontuan izan placeholder
ez 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>
Erabili Bootstrap-en aurrez definitutako sareta-klaseak etiketak eta inprimaki-kontrol-taldeak diseinu horizontalean lerrokatzeko, formularioari gehituz .form-horizontal
(ez du zertan <form>
). .form-group
Hori 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>
Inprimaki-kontrol estandarren adibideak inprimaki-diseinu adibide batean onartzen dira.
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
.
Sarrerak guztiz estiloa izango dira type
behar bezala deklaratzen badira.
<input type="text" class="form-control" placeholder="Text input">
Testuan oinarritutako edozein testuren aurretik eta/edo ondoren integratua edo botoiak gehitzeko <input>
, begiratu sarrera-taldearen osagaia .
Testu-lerro bat baino gehiago onartzen dituen inprimaki-kontrola. Aldatu rows
atributua behar izanez gero.
<textarea class="form-control" rows="3"></textarea>
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
<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>
Erabili .checkbox-inline
edo .radio-inline
klaseak 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>
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>
border-radius
Kontuan 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 , multiple
aukera 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>
Inprimaki baten etiketa baten ondoan testu arrunta jarri behar duzunean, erabili .form-control-static
klasea <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>
outline
Inprimaki-kontrol batzuetan estilo lehenetsiak kentzen ditugu eta box-shadow
bere lekuan a aplikatzen dugu :focus
.
:focus
egoeraGoiko adibide-sarrerak estilo pertsonalizatuak erabiltzen ditu gure dokumentazioan :focus
egoera erakusteko .form-control
.
Gehitu disabled
atributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko. Desgaitutako sarrerak arinagoak agertzen dira eta not-allowed
kurtsorea gehitzen dute.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Gehitu disabled
atributua a- <fieldset>
ri barruko kontrol guztiak <fieldset>
aldi berean desgaitzeko.
<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.
Bootstrap-ek estilo hauek arakatzaile guztietan aplikatuko dituen arren, Internet Explorer 11 eta ondorengoek ez dute guztiz onartzen disabled
atributua <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>
Gehitu readonly
atributu 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>
Bloke-mailako laguntza-testua inprimaki-kontroletarako.
aria-describedby
Laguntza-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 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-ek errore, abisu eta arrakasta-egoeretarako baliozkotze-estiloak biltzen ditu inprimaki-kontroletan. Elementu nagusia erabiltzeko, gehitu .has-warning
, .has-error
, edo . .has-success
Edozein .control-label
, .form-control
, eta .help-block
elementu horren barruan baliozkotze estiloak jasoko ditu.
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 iritzi-ikonoak ere gehi ditzakezu .has-feedback
eta eskuineko ikonoa gehituta.
<input class="form-control">
Iritzi-ikonoek testu- elementuekin soilik funtzionatzen dute .
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-only
klasearekin. Etiketarik gabe egin behar baduzu, egokitu top
iritzia ikonoaren balioa. Sarrera-taldeetarako, egokitu right
balioa pixel-balio egoki batera zure gehigarriaren zabaleraren arabera.
Laguntza-teknologiek (pantaila-irakurleek, esaterako) ikono baten esanahia behar bezala transmititzen dutela ziurtatzeko, ezkutuko testu gehigarria sartu behar da .sr-only
klasean 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-only
testua 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>
<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
etiketak dituzten hautazko ikonoak.sr-only
Klasea inprimaki-kontrol bat ezkutatzeko erabiltzen baduzu <label>
(beste etiketa-aukera batzuk erabili beharrean, aria-label
atributua adibidez), Bootstrap-ek automatikoki egokituko du ikonoaren posizioa gehitutakoan.
<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>
Ezarri altuerak bezalako klaseak erabiliz .input-lg
, eta ezarri zabalerak sareta bezalako zutabe klaseak erabiliz .col-lg-*
.
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>
Bizkor dimensionatu etiketak eta inprimakien kontrolak barruan edo .form-horizontal
gehituz ..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>
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>
Erabili botoien klaseak <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">
<a>
Botoien klaseak eta elementuetan erabil daitezkeen arren , gure nabigazio eta nabigazio-barrako osagaietan elementuak <button>
bakarrik onartzen dira.<button>
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"
.
Praktika onena gisa , elementua 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.
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>
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-only
klasearekin ezkutatuta dagoen testu gehigarria.
Botoi handiagoak edo txikiagoak nahi dituzu? Gehitu .btn-lg
, .btn-sm
, edo .btn-xs
tamaina 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>
Botoiak sakatuta agertuko dira (atzealde ilunarekin, ertz ilunarekin eta txertatutako itzalarekin) aktibatuta dagoenean. Elementuetarako <button>
, hau :active
. Elementuetarako <a>
, rekin egiten da .active
. .active
Hala ere, s -en erabil dezakezu <button>
(eta aria-pressed="true"
atributua barne) egoera aktiboa programatikoki errepikatu behar baduzu.
Ez da gehitu behar :active
sasi-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>
Gehitu .active
klasea <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>
Egin botoiei klik eginezinak itxura emanez, lausotuz opacity
.
Gehitu disabled
atributua <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>
disabled
Atributua gehitzen baduzu <button>
, Internet Explorer 9 eta ondorengoak testua gris bihurtuko du konpondu ezin dugun testu-itzal gaizto batekin.
Gehitu .disabled
klasea <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.
Klase hau s-ren pointer-events: none
estekaren 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: none
nabigazioak 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.
Bootstrap 3-ko irudiak sentikor bihur daitezke .img-responsive
klasea gehituz. Hau aplikatzen da max-width: 100%;
, height: auto;
eta display: block;
irudiari, beraz, ondo eskala dadin elementu nagusira.
.img-responsive
Klasea erabiltzen duten irudiak zentratzeko, erabili .center-block
ordez .text-center
. Ikusi laguntzaileen klaseen atala.center-block
erabilerari buruzko xehetasun gehiago lortzeko .
Internet Explorer 8-10-n, SVG irudiek .img-responsive
neurrigabeko 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">
Gehitu klaseak <img>
elementu bati edozein proiektutako irudiak erraz estiloatzeko.
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">
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>
Batzuetan, enfasi-klaseak ezin dira aplikatu beste hautatzaile baten espezifikotasunagatik. Kasu gehienetan, konponbide nahikoa zure testua <span>
klasearekin batera biltzea da.
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-only
klasearekin ezkutatuta dagoen testu gehigarria. .
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>
Batzuetan, testuinguruaren atzeko planoko klaseak ezin dira aplikatu beste hautatzaile baten espezifikotasunagatik. Zenbait kasutan, konponbide nahikoa zure elementuaren edukia <div>
klasearekin batera biltzea da.
Testuinguruko koloreekin gertatzen den bezala , ziurtatu kolorearen bidez helarazten den edozein esanahi ere aurkezpen hutsa ez den formatu batean transmititzen dela.
Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Erabili ikurra goitibeherako funtzionaltasuna eta norabidea adierazteko. Kontuan izan ikurra lehenetsia automatikoki alderantzikatuko dela goitibeherako menuetan .
<span class="caret"></span>
Jarri elementu bat ezkerrera edo eskuinera klase batekin. !important
espezifikotasun 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();
}
Ezarri elementu bat display: block
eta 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();
}
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();
}
Behartu elementu bat erakustera edo ezkutatzera ( pantaila-irakurleentzat barne ) .show
eta .hidden
klaseak erabiliz. Klase hauek !important
espezifikotasun-gatazkak saihesteko erabiltzen dira, karroza azkarrak bezala . Bloke-maila aldatzeko bakarrik daude erabilgarri. Mixin gisa ere erabil daitezke.
.hide
eskuragarri dago, baina ez die beti pantaila-irakurleei eragiten eta zaharkituta dago v3.0.1. Erabili .hidden
edo .sr-only
horren ordez.
Gainera, .invisible
elementu baten ikusgarritasuna soilik aldatzeko erabil daiteke, hau display
da, 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();
}
Ezkutatu elementu bat gailu guztietan , pantaila-irakurgailuak izan ezik .sr-only
. Konbinatu .sr-only
honekin .sr-only-focusable
elementua 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();
}
Erabili .text-hide
klasea 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();
}
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.
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 display
behean 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-lg
ere existitzen dira, baina zaharkituta daude v3.2.0-tik aurrera . Gutxi gorabehera, baliokideak dira , txandakatzeko erlazionatutako elementuen .visible-*-block
kasu berezi gehigarriekin izan ezik .<table>
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-print
ere badago baina zaharkituta dago v3.2.0-tik aurrera. Gutxi gorabehera baliokidea da , -lotutako elementuen .visible-print-block
kasu berezi gehigarriekin izan ezik .<table>
Aldatu zure arakatzailearen tamaina edo kargatu gailu desberdinetan sentikorren erabilgarritasun klaseak probatzeko.
Marka berdeek adierazten dute elementua ikusgai dagoela zure uneko ikuspegian.
Hemen, marka berdeek ere adierazten dute elementua zure uneko ikuspegian ezkutatuta dagoela .
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 gutxienez bi modutara erabil daiteke: konpilatutako CSSarekin edo iturburu Gutxiago fitxategiekin. Gutxiago fitxategiak biltzeko, 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 proiektu osoan zehar erabiltzen dira koloreak, tartea edo letra-tipo-pilak bezalako balioak zentralizatzeko eta partekatzeko modu gisa. Matxura osoa lortzeko, ikusi Pertsonalizatzailea .
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;
}
Aldagai batzuk zure gunearen hezurduraren funtsezko elementuak azkar pertsonalizatzeko.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
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-color
funtzio bat erabiltzen duela, Less-en beste tresna ikaragarri bat, automatikoki pasatzeko kolore egokia sortzeko. darken
, lighten
, saturate
, eta erabil ditzakezu desaturate
.
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;
Bi aldagai azkar zure ikonoen kokapena eta fitxategi-izena pertsonalizatzeko.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
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 nabigatzaile anitz onartzen laguntzeko nahasketak dira, konpilatutako CSSan saltzaile aurrizki guztiak sartuz.
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;
}
Gaur egun arakatzaile moderno guztiek aurrizkirik gabeko border-radius
propietatea 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;
}
Zure xede-hartzaileak arakatzaile eta gailu berrienak eta onenak erabiltzen baditu, ziurtatu box-shadow
jabetza bere kabuz erabiltzen duzula. Android (aurreko v4) eta iOS gailu zaharragoetarako (iOS 5 aurrekoa) laguntza behar baduzu, erabili zaharkitutako mixin beharrezkoa dena jasotzeko.-webkit
mixin behar den aurrizkia
Mixin-a zaharkituta dago v3.1.0-tik aurrera, Bootstrap-ek ez baititu ofizialki onartzen propietate estandarra onartzen ez duten plataforma zaharkituak. Atzerako bateragarritasuna gordetzeko, Bootstrap-ek mixin-a barnean erabiltzen jarraituko du Bootstrap v4 arte.
Ziurtatu rgba()
koloreak erabiltzen dituzula kutxako itzaletan, hondoekin ahalik eta ondoen nahas daitezen.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Mixin anitz malgutasuna lortzeko. Ezarri trantsizio-informazio guztia batekin, edo zehaztu aparteko atzerapen eta iraupena behar izanez gero.
Mixin-ak zaharkituta daude v3.2.0-tik aurrera, Autoaurrizkiaren sarrerarekin. Atzerako bateragarritasuna gordetzeko, Bootstrap-ek mixinak barnean erabiltzen jarraituko du Bootstrap v4 arte.
.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;
}
Biratu, eskalatu, itzuli (mugitu) edo okertu edozein objektu.
Mixin-ak zaharkituta daude v3.2.0-tik aurrera, Autoaurrizkiaren sarrerarekin. Atzerako bateragarritasuna gordetzeko, Bootstrap-ek mixinak barnean erabiltzen jarraituko du Bootstrap v4 arte.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
Mixin bakarra CSS3-ren animazio-propietate guztiak deklarazio batean erabiltzeko eta beste mixin banakako propietateetarako.
Mixin-ak zaharkituta daude v3.2.0-tik aurrera, Autoaurrizkiaren sarrerarekin. Atzerako bateragarritasuna gordetzeko, Bootstrap-ek mixinak barnean erabiltzen jarraituko du Bootstrap v4 arte.
.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;
}
Ezarri opakutasuna nabigatzaile guztientzat eta filter
eman IE8-ren babesa.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Eman testuingurua eremu bakoitzaren barruan inprimaki-kontroletarako.
.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
}
Sortu zutabeak CSS bidez elementu bakar baten barruan.
.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;
}
Bihurtu erraz edozein bi kolore atzeko planoko gradiente batean. Aurreratu eta ezarri norabide bat, erabili hiru kolore edo erabili gradiente erradiala. Mixin bakar batekin behar dituzun aurrizki sintaxi guztiak lortuko dituzu.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Bi koloreko gradiente lineal estandarraren angelua ere zehaztu dezakezu:
#gradient > .directional(#333; #000; 45deg);
Barber-marra estiloko gradiente bat behar baduzu, hori ere erraza da. Zehaztu kolore bakarra eta marra zuri zeharrargi bat gainjarriko dugu.
#gradient > .striped(#333; 45deg);
Aurrera igo eta hiru kolore erabili ordez. Ezarri lehen kolorea, bigarren kolorea, bigarren kolorearen kolore-geldia (% 25 bezalako ehuneko balioa) eta hirugarren kolorea nahasketa hauekin:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Buruak gora! Inoiz gradiente bat kendu behar baduzu, ziurtatu filter
gehitu dezakezun IE espezifikoa kendu duzula. Hori egin dezakezu .reset-filter()
mixin batera erabiliz background-image: none;
.
Erabilgarritasun-mixin-ak bestela zerikusirik ez duten CSS propietateak konbinatzen dituzten mixin-ak dira, helburu edo zeregin zehatz bat lortzeko.
Ahaztu class="clearfix"
edozein elementuri gehitzea eta, horren ordez, gehitu .clearfix()
nahasketa egokia denean. Nicolas Gallagher - en mikro clearfixa erabiltzen du .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Zentratu azkar edozein elementu bere gurasoaren barruan. Beharrezkoa width
edo max-width
ezarri beharrekoa.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Zehaztu objektu baten neurriak errazago.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Erraz konfiguratu tamaina aldatzeko aukerak edozein testu-eremurako edo beste edozein elementutarako. Arakatzailearen portaera normalaren lehenetsia ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Erraz moztu testua elipsi batekin nahasketa bakarrarekin. Elementua izatea block
edo inline-block
maila izatea eskatzen du.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Zehaztu bi irudi bide eta @1x irudiaren dimentsioak, eta Bootstrap-ek @2x multimedia kontsulta bat emango du. Zerbitzatzeko irudi asko badituzu, kontuan hartu zure erretinako irudia CSS eskuz idaztea multimedia kontsulta bakar batean.
.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);
}
Bootstrap Less-en eraikita dagoen arren, Sass ataka ofiziala ere badu . GitHub-en biltegi bereizi batean mantentzen dugu eta eguneraketak bihurketa script batekin kudeatzen ditugu.
Sass atakak repo bereizi bat dauka eta publiko apur bat desberdina denez, proiektuaren edukiak oso desberdinak dira Bootstrap proiektu nagusitik. Horrek Sass ataka Sass-en oinarritutako sistema gehienekin bateragarria dela ziurtatzen du.
Bidea | Deskribapena |
---|---|
lib/ |
Ruby gem kodea (Sass konfigurazioa, Rails eta Compass integrazioak) |
tasks/ |
Bihurgailuen gidoiak (Less Sass-era igotzen dira) |
test/ |
Konpilazio probak |
templates/ |
Iparrorratza paketearen manifestua |
vendor/assets/ |
Sass, JavaScript eta letra-tipo fitxategiak |
Rakefile |
Barne-zereginak, hala nola rakea eta bihurtzea |
Bisitatu Sass atakaren GitHub biltegia fitxategi hauek martxan ikusteko.
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.