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>

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-8

.col-md-4

.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

<!-- 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

<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.

.col-xs-6
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 &gt; 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.

.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>

Kendu erretenak

Kendu errenkada batetik erretenak eta zutabeak .row-no-guttersklasearekin.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

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-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>

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 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>

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]

<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.

Iturria Tituluan ospetsua den norbait

<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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iturria Tituluan ospetsua den norbait

<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.

Sarean

Itzulbiratu lerroko kode zatiak <code>.

Adibidez, <section>lerroan bezala bildu behar da.

For example, <code>&lt;section&gt;</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 + ,

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>&lt;p&gt;Sample text here...&lt;/p&gt;</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>

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.

Aukerako taula-oina.
#	Izena	Abizena	Erabiltzaile izena
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

<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	@twitter

<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	@twitter

<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	@twitter

<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		@twitter

<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>

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&mdash;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&mdash;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 `:focus`egoera

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 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-only`etiketak 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.

<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>

Botoien etiketak

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">

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 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.

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.

Lotura nagusia Esteka

<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.

Lotura nagusia Esteka

<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.

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">

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">&times;</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();
}

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	CSS`display`
`.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 ✔ X-txikian ikusgai

Txikia ✔ Txikian ikusgai

Ertaina ✔ Ertainean ikusgai

Handia ✔ Handian ikusgai

Oso txikia eta txikia ✔ X-txikian eta txikian ikusgai

Ertainak eta handiak ✔ Ertain eta handietan ikusgai

Extra txikia eta ertaina ✔ X-txikian eta ertainean ikusgai

Txikiak eta handiak ✔ Txiki eta handietan ikusgai

Oso txikiak eta handiak ✔ X-txikian eta handietan ikusgai

Txikiak eta ertainak ✔ Txiki eta ertainetan ikusgai

Ezkutatuta...

Hemen, marka berdeek ere adierazten dute elementua zure uneko ikuspegian ezkutatuta dagoela .

Oso txikia ✔ X-txikian ezkutatuta

Txikia ✔ Txikietan ezkutatuta

Ertaina ✔ Ertainean ezkutatuta

Handia ✔ Handian ezkutatuta

Oso txikia eta txikia ✔ X-txikian eta txikian ezkutatuta

Ertainak eta handiak ✔ Ertain eta handietan ezkutatuta

Extra txikia eta ertaina ✔ Ezkutatuta x-txiki eta ertainean

Txikiak eta handiak ✔ Txiki eta handietan ezkutatuta

Oso txikiak eta handiak ✔ X-txiki eta handietan ezkutatuta

Txikiak eta ertainak ✔ Txiki eta ertainetan ezkutatuta

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 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

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

Zure xede-hartzaileak arakatzaile eta gailu berrienak eta onenak erabiltzen baditu, ziurtatu box-shadowjabetza 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;
}

Trantsizioak

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;
}

Eraldaketak

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;
}

Animazioak

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;
}

Opakotasuna

Ezarri opakutasuna nabigatzaile guztientzat eta filtereman IE8-ren babesa.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Leku-markaren testua

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
}

Zutabeak

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;
}

Gradienteak

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 filtergehitu dezakezun IE espezifikoa kendu duzula. Hori egin dezakezu .reset-filter()mixin batera erabiliz background-image: none;.

Erabilgarritasun nahasketak

Erabilgarritasun-mixin-ak bestela zerikusirik ez duten CSS propietateak konbinatzen dituzten mixin-ak dira, helburu edo zeregin zehatz bat lortzeko.

Garbitu

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();
}

Zentraketa horizontala

Zentratu azkar edozein elementu bere gurasoaren barruan. Beharrezkoa widthedo max-widthezarri beharrekoa.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Dimentsionatzeko laguntzaileak

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); }

Tamaina alda daitezkeen testu-eremuak

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;
}

Testua moztea

Erraz moztu testua elipsi batekin nahasketa bakarrarekin. Elementua izatea blockedo inline-blockmaila 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();
}

Erretinako irudiak

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.

Zer sartzen den

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.

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.

Sass-erako bootstrap

CSS

Ikuspegi orokorra

HTML5 dokumentu mota

Mugikorra lehenik

Tipografia eta estekak

Normalizatu.css

Ontziak

Sare sistema

Sarrera

Hedabideen kontsultak

Sarearen aukerak

Adibidea: pilatuta horizontalera

Adibidea: Fluido-ontzia

Adibidez: Mugikorra eta mahaigaina

Adibidez: mugikorra, tableta, mahaigaina

Adibidez: zutabeen bilketa

Zutabe erantzuleak berrezartzen dira

Kendu erretenak

Zutabeak desplazatzea

Habia-zutabeak

Zutabeen ordenazioa

Mixin eta aldagai gutxiago

Aldagaiak

Mixinak

Erabilera adibidea

Tipografia

Izenburuak

h1. Bootstrap goiburua

h2. Bootstrap goiburua

h3. Bootstrap goiburua

h4. Bootstrap goiburua

h5. Bootstrap goiburua

h6. Bootstrap goiburua

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

Gorputzaren kopia

Gorputzaren kopia nagusia

Gutxiagorekin eraikia

Sareko testu-elementuak

Testu markatua

Ezabatu da testua

Testua marratua

Txertatutako testua

Azpimarratutako testua

Testu txikia

Lodia

Etzana

Ordezko elementuak

Lerrokatze klaseak

Eraldaketa klaseak

Laburdurak

Oinarrizko laburdura

Inizialismoa

Helbideak

Blokeko komatxoak

Blokeoaurreko lehenetsia

Blockquote aukerak

Iturburu bat izendatzea

Ordezko pantailak

Zerrendak

Ordenatu gabe

Agindua

Estilorik gabekoa

Sarean

Deskribapena

Deskribapen horizontala

Moztu automatikoa

Kodea

Sarean

Erabiltzailearen sarrera

Oinarrizko blokea

Aldagaiak

Laginaren irteera

Taulak

Oinarrizko adibidea

Ilara marradunak

Demo `:focus`egoera

Estekaren funtzionaltasunari buruzko ohartarazpena`<a>`

Ezkutuko `.sr-only`etiketak dituzten hautazko ikonoak