Bootstrap kaqpa infraestructura kaqninmanta llalliq pedazos kaqpi lowdown kaqninta tariy, chaymanta aswan allin, aswan utqaylla, aswan kallpasapa web wiñachiyman hamutayniyku.

HTML5 nisqa doctipo nisqa

Bootstrap wakin HTML elementokuna chaymanta CSS propiedades llamk'achiyta ruwan mayqinkunachus HTML5 doctype llamk'ayta munanku. Incluyelo al inicio de todos tus proyectos.

<!doctype html>
<html lang="en">
  ...
</html>

Ñawpaqtaqa móvil

Bootstrap 2 kaqwan, akllana kuyuchina amistad estilokuna yapasqayku aspectokuna clave kaqpaq marco kaqmanta. Bootstrap 3 kaqwan, llamk'ayta musuqmanta qillqayku qallariymantapacha kuyuchina allin kananpaq. Aswanpas akllana kuyuchina estilokuna kaqpi yapaymanta, paykunaqa chiqamanta ukhuman yanusqa kanku. Chiqamanta, Bootstrap ñawpaq kuyuchina kachkan . Kuyuchina ñawpaq estilokuna tukuy biblioteca kaqpi tarikunman mana sapaq willañiqikunapi.

Allin ruwaypaq chaymanta llachpanapaq hatunyachiypaq, qhaway punku meta etiquetata yapay <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Kuyuchina dispositivokunapi hatunyachiy atiykunata mana llamk'achiyta atikunki user-scalable=noqhaway punku meta etiquetaman yapaspa. Kayqa hatunyachiyta mana llamk'achinchu, niyta munan ruwaqkuna kuyuchiylla atikunku, chaymanta sitioyki huk chhika aswan nativo ruwana hina sientekuyninta ruwan. Tukuypi, mana sapa sitiopi kayta yuyaychaykuchu, chayrayku cuidadowan ruway!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tipografía y enlaces

Bootstrap sapanchasqa tukuypaq qhaway, tipografía chaymanta t'inki estilokuna churan. Específicamente, ñuqayku:

Set background-color: #fff;en elbody
@font-family-base, @font-size-base, chaymanta @line-height-baseatributokunata qillqanapaq baseyku hina llamk'achiy
Tukuypaq t'inki llimp'ita vía nisqawan @link-colorchuray chaymanta t'inki subrayasqakunallata llamk'achiy:hover

Kay estilokunataqa tarikunmanmi ukhupi scaffolding.less.

Normalizar.css nisqa

Allinchasqa chakasqa maskaqpa ruwayninpaq, Normalize.css llamk'achiyku , huk llamk'ay Nicolas Gallagher chaymanta Jonathan Neal .

Contenedores

Bootstrap huk elementoyuqta munan sitio contenidokunata p'istunapaq chaymanta sistema rejillayku wasiman. Iskay contenedorkunamanta hukninta akllawaq proyectoykikunapi llamk'anaykipaq. Reparay, debido a paddingy más, ni mayqen contenedorpas anidadochu.

.containerHuk kutichiq takyasqa anchoyuq waqaychanapaq llamk'achiy .

<div class="container">
  ...
</div>

Huk hunt'a anchoyuq waqaychanapaq llamk'achiy .container-fluid, qhaway punkuykip tukuy anchunta mast'ariq.

<div class="container-fluid">
  ...
</div>

Bootstrap huk kutichiq, kuyuchina ñawpaq fluido rejilla sistema kaqwan kachkan chaymanta allinta escalan 12 columnakunakama dispositivo utaq qhaway punku sayaynin yapakusqanmanhina. Chayqa ñawpaqmanta riqsisqa clasekunata churan mana sasa churana akllanakunapaq, chaymanta kallpasapa mixins aswan semántico churanakuna ruwanapaq .

Qallariy

Rejilla sistemakuna llamk'achkanku p'anqa churanakuna ruwanapaq huk serie filakuna chaymanta columnakuna kaqwan mayqinkunachus contenidoykita waqaychanku. Kaypi imayna Bootstrap rejilla sistema llamk'an:

Filakunataqa huk .container(fijo-ancho) utaq .container-fluid(hunt'a-ancho) ukhupi churana tiyan allin chiqanchasqa kananpaq chaymanta acolchado kananpaq.
Sapaq sapaq huñukunata ruwanapaq filakunata llamk'achiy.
Contenidoqa columnakuna ukhupi churasqa kanan tiyan, chaymanta columnakunalla filakunap chaylla wawankuna kanman.
Ñawpaqmanta riqsisqa llika clasekuna hina .rowchaymanta .col-xs-4kanku usqhaylla ruwanapaq llika churanakuna. Aswan pisi mixinkunatapas aswan semántico churaykunapaqpas llamk'achiy atikunmi.
Sapaqchasqakunaqa kanalkunatam ruran (sapaqchasqa sapaqchasqakunap kaqninkunapura) via padding. Chay acolchadoqa filakunapim desplazasqa kachkan punta kaq hinaspa qipa kaq columnapaq via margen negativo .rows nisqapi.
Negativo margen nisqa imaraykun kay urapi ejemplokuna outdented kashan. Chayqa chayhinam, llika columnakuna ukhupi contenido mana rejilla kaq contenidowan chirusqa kananpaq.
Rejilla columnakuna ruwasqa kanku chunka iskayniyuq kaq columnakuna yupayta span munasqaykita willaspa. Ejemplopaq, kinsa kaqlla columnakunapin kinsa .col-xs-4.
Sichus huk sapaq sapaqchasqa 12 aswan sapaqchasqakuna churasqa kanqa, sapa huñu yapasqa sapaqchasqakuna, huk unidad hina, musuq chiruman p'istunqa.
Rejilla clasekuna pantalla anchokunayuq dispositivokunaman llamk'anku aswan hatun utaq kaqlla pakikuna sayaykunamanta, chaymanta rejilla clasekuna aswan huch'uy dispositivokunaman dirigisqa kaqta llallichinku. Chayrayku, p.h., mayqin .col-md-*clasetapas huk elementoman churayqa mana chawpi dispositivokunapi estilollantachu afectanqa aswanpas hatun dispositivokunapipas sichus huk .col-lg-*clase mana kanchu.

Kay kamachiykunata códigoykiman churanaykipaq ejemplokunata qhaway.

Media tapuykuna

Kay qatiq willay tapuykunata Aswan pisi willañiqiykupi llamk'achiyku llave p'akiykunata ruwanapaq rejilla sistemaykupi.

/* 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) { ... }

Wakin kuti kay willay mast'ariy tapuykunapi mast'ariyku huk max-widthCSS aswan k'iti dispositivokuna huñuman limitanapaq.

@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) { ... }

Rejilla akllanakuna

Qaway imayna Bootstrap rejilla sistemamanta aspectokuna llamkanku achka dispositivokunapura huk makiwan ruwana tablawan.

	Yapa uchuy aparatokuna Teléfonos (<768px)	Huch'uy aparatokuna Tabletas (≥768px)	Chawpi apaykachanakuna Escritoriokuna (≥992px)	Hatun apaykachanakuna Escritoriokuna (≥1200px)
Rejilla ruway	Horizontal tukuy pacha	Qallarinapaq urmasqa, pakikuna hawapi horizontal
Ancho del contenedor	Mana imapas (auto) .	750px nisqa	970px nisqa	1170px nisqa
Clasepa ñawpaqnin	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de columnas	12
Ancho de columna	Auto	~62px nisqa	~81px nisqa	~97px nisqa
Ancho de canalización	30px (15px huk sapaq sapaq ladupi)
Anidado	Arí
Desplazamientos	Arí
Columna kamachiy	Arí

Ejemplo: Apilado-a-horizontal

Huk sapalla huñu .col-md-*rejilla clasekuna llamk'achispa, huk sistema rejilla básica ruwayta atikunki chaymanta qallarikun pilasqa dispositivokuna apaykachanakunapi chaymanta tableta dispositivokunapi (chay extra uchuymanta huch'uy rango kaqpi) manaraq horizontal kaqman escritorio kaqpi (chawpi) dispositivokunapi. Mayqinpipas rejilla columnakunata churay .row.

.col-md-1 nisqa

.col-md-8 nisqa

.col-md-4 nisqa

.col-md-6 nisqa

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

Ejemplo: Fluido nisqa waqaychana

Ima takyasqa-anchoyuq llika churanatapas hunt'a anchoyuq churanaman tikray, aswan hawa .containerkaqniykita .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Ejemplo: Móvil y escritorio

¿Manachu munanki columnakunayki aswan huch'uy dispositivokunapi pilakunalla kananpaq? Yapa uchuy chaymanta chawpi dispositivo rejilla clasekuna .col-xs-* .col-md-*llamk'achiy columnakunaykiman yapaspa. Uraypi kaq ejemplota qhaway aswan allin yuyayta imayna tukuy llamk’asqanmanta.

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

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

.col-xs-6 nisqa

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

Ejemplo: Móvil, tableta, escritorio

Ñawpaq ejemplo kaqpi ruway aswan kallpasapa chaymanta atiyniyuq churanakuna tableta .col-sm-*clasekunawan ruwaspa.

.col-xs-12 .col-sm-6 .col-md-8 nisqa

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

.col-xs-6 .col-sm-4 nisqa

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

Ejemplo: Columna p’istuy

Sichus huk sapaq sapaqchasqa 12 aswan sapaqchasqakuna churasqa kanqa, sapa huñu yapasqa sapaqchasqakuna, huk unidad hina, musuq chiruman p'istunqa.

.col-xs-9 nisqa

.col-xs-4
9 + 4 = 13 > 12 kaqmanta, kay 4 columna ancho div musuq chiruman huk unidad contigua hina p'istuykusqa tarikun.

.col-xs-6
Qhipa kaq columnakuna musuq chiruwan purichkan.

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

Kutichiy columna kaqmanta churan

Tawa patakuna rejillakuna tarikuqwanqa obligasqa kanki asuntukunaman kallpanaykipaq maypi, wakin pakikuykunapi, columnakunayki mana allintachu chuyanchanku huknin hukninmanta aswan hatun kasqanrayku. Chayta allichanapaq, huk .clearfixchaymanta kutichiq yanapakuyniyku clasekuna huñusqa llamk'achiy .

.col-xs-6 .col-sm-3
Rikunaykipa sayayninta tikray utaq telefonoykipi qhaway huk ejemplopaq.

.col-xs-6 .col-sm-3 nisqa

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

Kutichiq p'akiykunapi columna ch'uyanchanamanta aswan, desplazamientos, tanqaykuna utaq aysanakuna kaqmanta churanayki tiyan . Kayta ruwaypi qhaway rejilla ejemplopi .

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

Canalización nisqakunata hurquy

Huk filamanta canaleskunata hurquy chaymanta chay columnakuna .row-no-guttersclasewan.

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

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

.col-xs-6 nisqa

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

Columnas nisqakunata offset nisqa

.col-md-offset-*Clases nisqawan columnakunata pañaman kuyuchiy . Kay clasekunaqa huk columnapa lluq'i margenninta *columnakunawan yapan. Ejemplopaq, tawa columnakunapim .col-md-offset-4kuyun ..col-md-4

.col-md-4 nisqa

.col-md-4 .col-md-offset-4 nisqa

.col-md-3 .col-md-offset-3 nisqa

.col-md-6 .col-md-offset-3 nisqa

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

Hinallataq, aswan pisi llika patakunamanta t'inkisqakunata .col-*-offset-0clasekunawan llallichiyta atikunki.

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

Columnas de nidificación

Ñawpaqmanta ruwasqa llikawan willanaykipaq, musuq .rowchaymanta huñu .col-sm-*sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa ukhupi yapay .col-sm-*. Anidado filakuna huk huñu sapaqchasqakunayuq kanan tiyan 12 utaq aswan pisi yapasqa (mana llapa 12 kaq sapaq sapaqchasqakuna llamk'achinaykipaq kamachisqachu).

1 kaq ñiqi: .col-sm-9

2 kaq ñiqi: .col-xs-8 .col-sm-6

2 kaq ñiqi: .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>

Columna kamachiy

Facil tikray ruwasqayku rejilla columnakunaykumanta .col-md-push-*chaymanta .col-md-pull-*tikraq clasekunawan.

.col-md-9 .col-md-tanqana-3

.col-md-3 .col-md-aysana-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>

Menos mixins y variables

Utqaylla churanapaq ñawpaqmanta ruwasqa rejilla clasekunamanta yapasqa , Bootstrap Aswan pisi tikraqkunata chaymanta mixins nisqakunata yapan usqhaylla kikiyki sasan, semántico churanakuna ruwanapaq.

Variables nisqakuna

Variables nisqakunam hayk'a columnakuna, canal ancho, chaymanta medios tapuy punto maypichus columnakuna flotante qallarinapaq kamachin. Kaykunata llamk'achiyku ñawpaqmanta riqsisqa rejilla clasekuna ruwanapaq, chaymanta uraypi listasqa sapanchasqa mixins kaqpaq.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixinkuna

Mixinkuna llamk'achisqa kanku llika tikraqkunawan kuskachasqa sapa llika columnakunapaq CSS semántico ruwanapaq.

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

Ejemplo de uso

Tikraqkunata kikin sapanchasqa chanikunaman tikrayta atinki, icha mixins nisqakunata ñawpaqmanta chanikunawan llamk'achiylla. Kaypi huk rikch'ana kachkan ñawpaqmanta churasqakuna llamk'achiyta iskay columna churayta ruwanapaq huk ch'usaq chawpipi.

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

Umakuna

Llapan HTML umalliqkuna, , <h1>nisqawanmi <h6>kan. .h1a través de .h6clases kaqkunapas kanku, mayk'aq huk umalliqpa letra estilowan tupachiyta munanki ichaqa qillqayki chiru ukhupi rikuchisqa kananta munanki chaypaq.

h1. Bootstrap nisqa umalliq	Yaqa negrita 36px
h2. Bootstrap nisqa umalliq	Yaqa negrita 30px
h3. Bootstrap nisqa umalliq	Yaqa negrita 24px
h4. Bootstrap nisqa umalliq	Yaqa negrita 18px
h5. Bootstrap nisqa umalliq	Yaqa negrita 14px
h6. Bootstrap nisqa umalliq	Yaqa negrita 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Aswan k'anchariq, iskay ñiqin qillqata mayqin umalliqpipas huk genérico <small>etiquetawan utaq .smallclasewan ruway.

h1. Bootstrap umalliq Iskay ñiqin qillqa

h2. Bootstrap umalliq Iskay ñiqin qillqa

h3. Bootstrap umalliq Iskay ñiqin qillqa

h4. Bootstrap umalliq Iskay ñiqin qillqa

h5. Bootstrap umalliq Iskay ñiqin qillqa

h6. Bootstrap umalliq Iskay ñiqin qillqa

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

Copia del cuerpo

Bootstrappa tukuypaq ñawpaqmanta churasqanqa font-size14px , huk line-height1.428 kaqwan . Kayqa churakunmi <body>hinaspa llapan parrafokunapipas. Chaymantapas, <p>(paragrafokuna) huk uray margenta chaskinku kuskan yupasqa chiru-alturankumanta (10px ñawpaqmanta).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa. Nullam id dolor id nibh ultriciakuna antawakuna.

Cum sociis natoque penatibus y magnis disparuriente montes, nascetur ridiculus mus nisqa. Donec ullamcorper nulla mana metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit nisqa. Donec ullamcorper nulla mana metus auctor fringilla.

Maecenas sed diam eget risus varius blandit tiyay amet mana magna. Donec id elit mana mi porta gravida nisqapi eget metus nisqapi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit nisqa.

<p>...</p>

Copia de cuerpo de plomo

Huk parrafota aswan allinta qhawarichiy, chayta yapaspa .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor nisqa suministrador nisqa. Duis mollis, est mana imayuq.

<p class="lead">...</p>

Construido con Menos

Escala tipográfica nisqa iskay Less variables nisqapi variables nisqapi sayasqa kachkan.less : @font-size-basey @line-height-base. Ñawpaq kaqmi tukuyninpi llamk'achisqa base font-size iskay kaqtaq base line-height nisqa. Chay variablekuna chaymanta wakin sanu matemáticas kaqwan llamk'achiyku margenkuna, rellenokuna, chaymanta chiru-alturakuna tukuy layaykumanta chaymanta aswan ruwanapaq. Personalizarlos y Bootstrap adapta.

Chiru ukhupi qillqa elementokuna

Markasqa qillqasqa

Huk qillqap puriyninta huk contextopi relevancianrayku resaltanapaq, <mark>etiquetata llamk'achiy.

Puedes utilizar la etiqueta de marca parakancharichiyqillqa.

You can use the mark tag to <mark>highlight</mark> text.

Qullusqa qillqasqa

Qullusqa qillqa bloquekunata rikuchinapaqqa <del>etiquetata llamk'achiy.

~~Kay chiru qillqaqa qullusqa qillqa hina qhawanapaqmi.~~

<del>This line of text is meant to be treated as deleted text.</del>

Huelga a través de texto

Manaña tupaqnin qillqa bloquekunata rikuchinapaq <s>etiquetata llamk'achiy.

~~Kay chiru qillqasqaqa manaña chiqap kaqta hina qawanapaqmi.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Qillqasqa churasqa

Qillqaman yapasqakunata rikuchinapaqqa <ins>etiquetata llamk'achiy.

Kay chiru qillqaqa qillqasqaman yapasqa hina qhawanapaqmi.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Subrayasqa qillqasqa

Qillqasqata uraykachinapaqqa <u>etiquetawanmi llamk’achiy.

Kay chiru qillqaqa chirusqa hinam tikranqa

<u>This line of text will render as underlined</u>

HTML kaqpa ñawpaqmanta churasqa enfasis etiquetakuna llamp'u estilokunawan llamk'achiy.

Uchuy qillqasqa

Chiru ukhupi utaq qillqa bloquekuna mana enfatizananpaq, <small>etiquetata llamk'achiy qillqata 85% tayta mamapa sayayninmanta churanaykipaq. Uma elementokuna kikinkumanta chaskinku font-sizeanidado <small>elementokunapaq.

Hukninpi huk chiru elementota llamk'achiyta atinki .smallmayqinpa rantinpi <small>.

Kay chiru qillqasqaqa sumaq qillqasqa hina qhawanapaqmi.

<small>This line of text is meant to be treated as fine print.</small>

Yanacha

Aswan llasa letra-llasaqwan huk qillqasqata aswanta kallpanchanapaq.

Kay qatiq qillqasqaqa yana qillqa hinam ruwasqa kachkan .

<strong>rendered as bold text</strong>

Cursiva

Huk qillqasqata kursivawan aswanta kallpanchanapaq.

Kay qatiq qillqasqaqa kursivawan qillqasqa hinam ruwasqa kachkan .

<em>rendered as italicized text</em>

Elementos alternados

Sientete libre de usar <b>y <i>en HTML5. <b>es destinado a resaltar palabras o frases sin transmitir importancia adicional mientras <i>que es mayormente para voz, términos técnicos, etc.

Clases de alineación

Qillqa chiqanchay clasekunawan componentekunaman mana sasachakuspa musuqmanta chiqanchay.

Lloq’eman chiqanchasqa qillqasqa.

Chawpi chiqanchasqa qillqasqa.

Paña chiqanchasqa qillqasqa.

Qillqasqa chaninchasqa.

Mana qillqana p’istuyuq.

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

Clases de transformación nisqa

Qillqa hatun qillqana clasekunawan componentekunapi qillqa tikray.

Uchuy qillqa.

Hatun qillqa.

Hatun qillqawan qillqasqa.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Pisichasqa simikuna

HTML kaqpa <abbr>elementonpa estilizasqa ruwaynin pisichasqakuna chaymanta siglas kaqpaq mast'arisqa laya hover kaqpi rikuchinapaq. Huk atributo kaqwan pisichasqakuna titlehuk k'anchay ch'ikuyuq ura fronterayuq chaymanta huk yanapakuy kursor hover kaqpi, huk contexto yapasqa hover kaqpi chaymanta yanapakuy tecnologiakuna ruwaqkunaman qun.

Abreviatura básica

Atributo simip pisichasqanqa attr .

<abbr title="attribute">attr</abbr>

Initialismo nisqa

.initialismAswan huch'uy qillqap sayayninpaq pisichasqa simiman yapay .

HTML nisqaqa t'anta phatmasqamanta pacha aswan allin kaqmi.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Direcciones

Aswan qaylla tayta mamapaq utaq llapa llamkaypa kurkunpaq rimanakuy willakuykunata riqsichiy. Llapan chirukunata <br>.

Twitter, Inc.
1355 qhatu calle, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Tukuy Suti
ñ[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>

Bloqueo nisqa

Qillqayki ukhupi huk pukyumanta bloquekuna contenidomanta citasqaykirayku.

Ñawpaqmanta churasqa bloqueo

<blockquote>Ima HTMLtapas cita hina p'istuy . Chiqan citakunapaqqa, huk <p>.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote nisqa akllanakuna

Estilo chaymanta contenido tikray huk estándar kaqpi simple variaciones kaqpaq <blockquote>.

Huk pukyuta sutichay

Pukyuta riqsichinapaq huk yapay <footer>. Pukyu llamk'aypa sutinta <cite>.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

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

Huk qhawarichiykuna

.blockquote-reversePaña chiqanchasqa willayniyuq bloquepaq yapay .

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listakuna

Mana kamachisqa

Lista de artículos en los que el orden no importa explícitamente importa.

Lorem ipsum dolor tiyay amet
Consectetur adipiscing nisqa elit
Entero molestie lorem en massa
Facilisis en aliquet nisl de pretio nisqa
Nulla volutpat aliquam velit
- Fasello iaculis nisqa neque nisqa
- Purus sodales ultricas nisqa
- Vestibulo laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean tiyay amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Kamachisqa

Lista de artículos en los que el orden hace explícitamente importa.

Lorem ipsum dolor tiyay amet
Consectetur adipiscing nisqa elit
Entero molestie lorem en massa
Facilisis en aliquet nisl de pretio nisqa
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean tiyay amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Mana estiloyuq

Lista elementokunapi ñawpaqmanta chaymanta lluq'i margenta hurquy list-style(chaylla wawakunalla). Kayqa chaylla wawakuna lista kaqkunamanlla ruwakun , niyta munan mayqin anidado listakunapaqpas claseta yapanayki tiyan.

Lorem ipsum dolor tiyay amet
Consectetur adipiscing nisqa elit
Entero molestie lorem en massa
Facilisis en aliquet nisl de pretio nisqa
Nulla volutpat aliquam velit
- Fasello iaculis nisqa neque nisqa
- Purus sodales ultricas nisqa
- Vestibulo laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean tiyay amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

Inline

Llapan lista kaqkunata huk chirullapi churay display: inline-block;chaymanta wakin k’anchay acolchado kaqwan.

Lorem ipsum
Fasello iaculis nisqa
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Willay

Huk lista términokuna chaywan tupaq willakuykunawan.

Listas de descripción: Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.
Euismod nisqa: Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod nisqamanta.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descripción horizontal

Términos y descripciones en <dl>filapi lado-lado ruway. Qallarin pilasqa hina ñawpaqmanta <dl>s, ichaqa mayk'aq navbar mast'arikun, chayrayku kaykunata ruway.

Listas de descripción: Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.
Euismod nisqa: Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod nisqamanta.
Felis euismod semper eget lacinia nisqa: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum masa justo tiyay amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Kikinmanta truncamiento

Horizontal sut'inchay listakunaqa ancha hatun simikunatam kuchunqa, lluq'i columnapi churanapaq text-overflow. Aswan k'iti qhawanakunapi, ñawpaqmanta churasqa pilasqa churanaman tikranqanku.

Inline

Chiru ukhupi chirusqakunata <code>.

Ejemplopaq, <section>inline hinam wankusqa kanan.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Insumo de usuario

Utilizar el <kbd>para indicar entrada que típicamente se entra a través de teclado.

Directoriokunata cambianaykipaqqa, directoriopa cdsutinta qillqay.
Ajustes nisqakunata allichanaykipaqqa, ñitiy 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>

Bloque básico

<pre>Achka chiru qillqakunapaq llamk'achiy . Aswan allinta ruwanapaq ima k'uchu corchetekunamantapas codigopi ayqiy.

<p>Kaypi qillqasqata rikuchiy...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Munasqaykimanhina claseta yapayta atinki .pre-scrollable, mayqinchus huk max-altura 350px kaqmanta churanqa chaymanta huk y-eje kuyuchina barrata qunqa.

Variables nisqakuna

Variables nisqakunata rikuchinapaqqa <var>etiqueta nisqawanmi llamk'achiy.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Salida de muestra

Bloques muestra lluqsiyta huk programamanta rikuchinapaq <samp>etiquetata llamk'achiy.

Kay qillqasqaqa computadora programamanta muestra lluqsisqa hina qhawanapaqmi.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Ejemplo básico

Estilo básico kaqpaq —k'anchay acolchado kaqpaq chaymanta horizontal rakiqkunallapaq— yapay clase base .tablekaqmanta mayqin kaqmanpas <table>. Ichapas super redundante rikchakunman, ichaqa huk plugins kaqpaq tablakuna mast'arisqa llamk'achiyta qusqa calendariokuna chaymanta p'unchaw akllaqkuna hina, akllasqayku sapanchasqa tabla estilokunaykumanta.

Capción de tabla opcional.
# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

<table class="table">
  ...
</table>

Rayayuq filakuna

.table-stripedIma tabla filamanpas zebra-rayado nisqa yapanapaq llamk'achiy <tbody>.

Chawpi maskaqpa tupachiynin

Rayado tablakuna CSS akllaq kaqnintakama estilochasqa kanku :nth-child, chaymanta mana Internet Explorer 8 kaqpi kanchu.

# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

<table class="table table-striped">
  ...
</table>

Mesa bordeada

.table-borderedTablapa tukuy ladunpi, celdakunapipas fronterakunapaq yapay .

# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

<table class="table table-bordered">
  ...
</table>

Hover filas

Huk . .table-hover_<tbody>

# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry	chay Pisqu	@twitter nisqapi

<table class="table table-hover">
  ...
</table>

Mesa condensada

.table-condensedMesakuna aswan compacta kananpaq yapay , celda acolchadota kuskanman kuchuspa.

# .	Ñawpa suti	Taytamama suti	Nombre de usuario
1.	Marcos	Otto	@mdo nisqa
2.	Jacob	Thornton sutiyuq	@wira
3.	Larry chay P'isqu		@twitter nisqapi

<table class="table table-condensed">
  ...
</table>

Clases contextuales nisqa

Contextual clasekunata llamk'achiy tabla filakunata utaq sapa celdakunata llimp'inaykipaq.

Yachakuna	Willay
`.active`	Huk filaman utaq celdaman hover colorta churan
`.success`	Allin ruwasqa utaq allin ruwasqa kasqanmantam qawachin
`.info`	Huk neutral informativo cambio utaq acción nisqatam qawachin
`.warning`	Huk advertenciatam qawachin, chay willakuyqa allintam qawana kanman
`.danger`	Peligroso otaq mana allin ruway kasqanmantan willan

# .	Columna umalliq	Columna umalliq	Columna umalliq
1.	Contenido de columna	Contenido de columna	Contenido de columna
2.	Contenido de columna	Contenido de columna	Contenido de columna
3.	Contenido de columna	Contenido de columna	Contenido de columna
4.	Contenido de columna	Contenido de columna	Contenido de columna
5.	Contenido de columna	Contenido de columna	Contenido de columna
6.	Contenido de columna	Contenido de columna	Contenido de columna
7.	Contenido de columna	Contenido de columna	Contenido de columna
8.	Contenido de columna	Contenido de columna	Contenido de columna
9. 9.1	Contenido de columna	Contenido de columna	Contenido de columna

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

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta huk tabla filaman utaq sapalla celdaman significadota yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (rikuna qillqa tupaqnin tabla fila/célula kaqpi), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .sr-onlyclasewan pakasqa.

Tablas respuestas

Kutichiq tablakunata ruway mayqintapas p'istuykuspa .table, .table-responsivehuch'uy dispositivokunapi (768px urapi) horizontalta kuyuchinankupaq. Imapas 768px anchomanta aswan hatun kaqpi qhawaspa, mana kay tablakunapi huknirayta rikunkichu.

Recorte/truncación vertical nisqa

Tablakuna kutichiq ruwanku llamk'achiyta overflow-y: hidden, mayqinchus ima contenidotapas tabla urapi utaq pata kantukunamanta aswan karuman riqmanta k'utun. Aswanta, kayqa urayk'aq menúkuna chaymanta wak kimsa kaq widgetkuna k'utuyta atin.

Firefox y conjuntos de campos

Firefox wakin mana allin fieldset estiloyuq kachkan widthchaymanta chay kutichiq tablawan harkakun. Kayqa mana huk Firefox-paq hack kaqwan mana Bootstrap kaqpi qusqaykuchu llallichiyta atikunmanchu:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Aswan willakuypaq, kay Pila Desbordamiento kutichiyta ñawiriy .

# .	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin
1.	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda
2.	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda
3.	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda

# .	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin	Tablapa umalliqnin
1.	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda
2.	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda
3.	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda	Tabla celda

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Ejemplo básico

Sapa formulario kamachiykuna kikillanmanta wakin global estilota chaskinku. Llapan qillqasqa <input>, <textarea>, chaymanta <select>elementokuna kaqwan ñawpaqmanta .form-controlchurasqa width: 100%;kachkan. Etiquetas y controles en .form-groupenvolver para un espaciamiento óptimo.

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

Ama formulario huñukunata yaykusqa huñukunawan chaqruychu

Ama formulario huñukunataqa chiqapmanta yaykusqa huñukunawan chaqruychu . Aswanpas, yaykusqa huñuta formulario huñu ukhupi nido ruway.

Formulario en línea

Formularioykiman yapay .form-inline(mayqinchus mana huk kananchu tiyan <form>) lluq'i-alineado chaymanta inline-block kamachiykunapaq. Kayqa qhawanakuna ukhupi formulariokunallapaqmi, chaykunaqa 768px anchoyuqmi.

Ichapas anchos personalizados nisqakunata mañakunman

Yaykuykuna chaymanta akllaykuna width: 100%;Bootstrap kaqpi ñawpaqmanta churasqa kanku. Chiru ukhupi formulariokuna ukhupi, chayta kutichiyku chaymanta width: auto;achka kamachiykuna kikin chirupi tiyayta atinku. Ima churasqaykimanhina, yapasqa sapanchasqa anchokuna necesitakunman.

Etiquetas nisqakunata yapaypuni

Pantalla ñawiriqkuna formulariokunaykiwan sasachakuyniyuq kanqanku sichus mana sapa yaykuypaq etiquetata churankichu. Kay chiru ukhupi formulariokunapaq, .sr-onlyclaseta llamk'achispa etiquetakunata pakayta atinki. Yanapakuq tecnologiakuna kaqpaq huk etiqueta quypaq aswan huk ruwanakuna kanku, kayhina aria-label, aria-labelledbyutaq titleatributo kaqhina. Sichus mana mayqinpas kaykunamanta kanchu, pantalla ñawiriqkuna placeholderatributo llamk'achiyta atinku, sichus kan, ichaqa reparay placeholderhuk etiquetado ruwanakunap rantinpi llamk'achiyta mana yuyaychasqachu.

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

Bootstrap kaqpa ñawpaqmanta riqsisqa llika clasekuna llamk'achiy etiquetakuna chaymanta huñukuna formulario kamachiykunamanta huk horizontal churaypi chiqanchaypaq formularioman yapaspa .form-horizontal(mayqinchus mana huk kananchu tiyan <form>). Chayta ruwaspaqa .form-groups nisqatam tikran rejilla filakuna hina purinanpaq, chaymi mana necesitakunchu .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>

Yanapasqa kamachiykuna

Huk ejemplo formulario churaypi yanapasqa formulario kamachiykuna estándar kaqmanta ejemplokuna.

Insumos

Aswan riqsisqa formulario kamachiy, qillqapi sayasqa yaykuna pampakuna. Llapan HTML5 layakunapaq yanapakuyta yapan: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, chaymanta color.

Tipo declaración nisqa necesitakun

Insumos nisqakunaqa hunt'asqa estiloyuqlla kanqa sichus paykunap typeallinta willasqa kaptin.

<input type="text" class="form-control" placeholder="Text input">

Yaykuy huñukuna

Huñusqa qillqata utaq ñit'inakunata yapanaykipaq ñawpaq chaymanta/utaq qhipa mayqin qillqamanta ruwasqa <input>, qhaway yaykusqa huñu componenta .

Área de texto

Control de formas nisqa mayqinchus achka chiru qillqakunata yanapan. rowsNecesario kasqanman hina atributota cambiay .

<textarea class="form-control" rows="3"></textarea>

Cajas de verificación y radios

Chay cuadros nisqakunaqa huk listapi huk otaq askha akllanakunata akllanapaqmi, radiokunataq askhamanta huk akllanakunata akllanapaq.

Mana llamk'achisqa qhaway qutukuna chaymanta radiokuna yanapasqa kanku, ichaqa huk "mana saqisqa" kursuta qunapaq tayta mamamanta hover kaqpi , taytaman claseta <label>yapanayki tiyan , , , utaq ..disabled.radio.radio-inline.checkbox.checkbox-inline

Ñawpaqmanta churasqa (pilasqa) .

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

Cajas de verificación y radios en línea

.checkbox-inlineHuk serie cuadrokunapi utaq radiokunapi utaq clasekunata llamk'achiy .radio-inlinekikin chirupi rikuriq controlkunapaq.

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

Cajas de verificación y radios sin texto de etiqueta

Sichus mana qillqayuqchu kanki chay ukhupi <label>, yaykuchiyqa suyasqaykimanhina churasqa kachkan. Kunanqa mana internetpi kaq qhaway qutukunapi, radiokunapi imalla llamkan. Yuyariyraq wakin forma etiquetata quyta yanapaq tecnologiakunapaq (kayhina, llamk'achispa 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>

Akllan

Reparay achka nativo akllana menúkuna —kayhina Safari kaqpi chaymanta Chrome kaqpi— muyu k'uchuyuq kanku mana border-radiuspropiedades kaqnintakama tikray atikunkuchu.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Atributoyuq <select>kamachiykunapaq multiple, achka akllanakuna ñawpaqmanta rikuchisqa.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Control estático nisqa

Huk formulario ukhupi huk formulario etiquetapa waqtanpi llañu qillqata churanayki kaptinqa .form-control-static, huk <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>

Enfoque nisqa estado

outlineWakin formulario kamachiykunapi ñawpaqmanta ruwasqa estilokunata hurquyku chaymanta huk box-shadowrantinpi churayku :focus.

Demo `:focus`estado

Hawa ejemplo yaykuchiyqa qillqaykupi sapanchasqa estilokunata llamk'achin :focushuk kaqpi estadota rikuchinanpaq .form-control.

Mana atiq suyu

Huk yaykusqapi boolean laya yapay, disabledllamk'achiqpa tinkiyninkunata hark'anapaq. Mana llamk'achisqa yaykuykunaqa aswan k'anchariq rikukun chaymanta huk not-allowedkursuta yapan.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Mana atichisqa chakra huñukuna

disabledHuk kaqman atributota yapay llapa kamachiykunata huk kutillapi <fieldset>ukhupi mana llamk'achinapaq .<fieldset>

Advertencia sobre funcionalidad de enlace de`<a>`

Ñawpaqmanta, maskaqkuna llapa nativo formulario kamachiykunata ( <input>, <select>chaymanta <button>elementokuna) a ukhupi <fieldset disabled>mana llamk'achisqa hina qhawanqa, iskaynin teclado chaymanta sillu tinkiykuna paykunapi hark'aspa. Ichaqa, sichus formularioykipi <a ... class="btn btn-*">elementokunatapas churan chayqa, kaykunamanqa huk estilollatam qusqa kanqa pointer-events: none. Imaynatachus t'aqapi mana atichisqa estadomanta botones kaqpaq (hinallataq específicamente sub-t'aqapi ancla elementokuna kaqpaq), kay CSS propiedad manaraq estandarizadachu chaymanta mana hunt'asqa yanapasqachu Opera 18 kaqpi chaymanta uraypi, utaq Internet Explorer 11 kaqpi, chaymanta atipasqa 't hark'an teclado llamk'aqkuna kay t'inkikunata qhawayta utaq llamk'achiyta atinankupaq. Chaymi mana imamanta manchakuspa, JavaScript ruwasqa llamk'achiy chayhina t'inkikunata mana llamk'achinaykipaq.

Chawpi maskaqpa tupachiynin

Bootstrap kay estilokuna llapa maskaqkunapi ruwanqa chaypas, Internet Explorer 11 chaymanta uraypi mana hunt'asqatachu yanapanku disabledatributota huk kaqpi <fieldset>. Sapanchasqa JavaScript llamk'achiy kay maskaqkunapi chakra huñuta mana llamk'achinaykipaq.

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

Ñawinchaylla nisqa

Huk yaykusqapi boolean laya yapay, readonlyyaykusqapa chanin tikrayta harkananpaq. Ñawirinapaqlla yaykuykunaqa aswan llamp'u rikukun (mana llamk'achisqa yaykuna hina), ichaqa estándar kursuta waqaychay.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Yanapakuy qillqa

Bloqueo nivel yanapakuy qillqa formulario kamachiykunapaq.

Yanapakuy qillqata formulario kamachiykunawan tinkuchispa

Yanapakuy qillqaqa sut'imanta formulario kamachiywan tinkisqa kanan tiyan chaymanta aria-describedbyatributo llamk'achiyta tinkin. Kayqa yanapakuq tecnologiakuna – pantalla ñawiriqkuna hina – kay yanapakuy qillqata willanqa mayk'aq llamk'achiq kamachiyman enfocakun utaq yaykun.

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

Validación nisqa

Bootstrap pantaypaq, willakuypaq chaymanta allin ruway estadokuna formulario kamachiykunapi chiqaqchay estilokunayuq. Llamk'achinapaq, yapay .has-warning, .has-error, icha .has-successtayta elementoman. Mayqin .control-label, .form-control, chaymanta .help-blockchay elemento ukhupipas chiqapchay estilokunata chaskinqa.

Yanapakuq tecnologiakunaman chaymanta colorblind kaqkunaman estado validacionta apachiy

Kay chiqaqchay estilokuna llamk'achiyta huk formulario kamachiypa estadonta riqsichinapaq huk rikuylla, llimp'i-sapanchasqa rikuchiyta qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman - pantalla ñawiriqkuna hina - utaq llimp'i ñawsa ruwaqkunaman chayachikunqachu.

Asegurar que también se proporciona una indicación alternativa de Estado nisqa. Ejemplopaq, huk yuyaychayta estadomanta <label>kikin formulario kamachiypa qillqanpi churayta atikunki (imaynachus kay qatiq codigo ejemplopi kachkan), huk Glyphicon churayta (kayhina huk qillqawan .sr-onlyclaseta llamk'achispa - qhaway Glyphicon ejemplokuna ), utaq huk quspa yapasqa yanapakuy qillqa harkay. Específicamente yanapakuy tecnologiakuna kaqpaq, mana allin formulario kamachiykunaman huk aria-invalid="true"atributota quyta atikunkutaq.

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

Con iconos opcionales

Chantapas yapayta atikunki akllana kutichiy iconokuna yapasqawan .has-feedbackchaymanta paña iconowan.

<input class="form-control">Willakuy iconokuna qillqa elementokunawanlla llamkan .

Iconokuna, etiquetakuna, yaykuna huñukuna ima

Retroalimentación iconokuna makiwan churayqa mana etiquetayuq yaykuykunapaq chaymanta paña kaqpi huk yapasqayuq yaykuna qutukunapaq mañakun. Sinchita kallpachasqa kanki llapa yaykuykunapaq etiquetakuna qunaykipaq chayayta atiyrayku. Etiquetakuna mana rikuchisqa kananta munaspaykiqa, .sr-onlyclasewan pakay. Sichus mana etiquetakunayuq ruwanayki tiyan, topkutichiy icono chanita allichay. Yaykuy huñukunapaq, rightchaninta huk tupaq pixel chaninman allichay yapasqaykipa anchunmanta.

Yanapakuq tecnologiakunaman iconopa ima niyta munasqanmanta apachiy

Yanapakuq tecnologiakuna – pantalla ñawiriqkuna hina – huk iconopa niyninta allinta willanankupaq, yapa pakasqa qillqa .sr-onlyclasewan churasqa kanan tiyan chaymanta explícitamente control de formulario kaqwan tinkisqa kanan tiyan mayqinchus llamk'achiyta ruwan aria-describedby. Hukninpi, qhaway kay significado kaqmanta (kayhina, huk willakuy huk qillqa yaykuna pampapaq huk willakuy kasqanmanta) huk wak formapi apachisqa kaqta, kayhina huk qillqamanta chiqamanta <label>formulario kamachiywan tinkisqa tikray.

Aunque los siguientes ejemplos ya mencionan el estado de validación de sus respectivos controles de forma en el <label>mismo texto, la técnica anterior (usando .sr-onlytexto y aria-describedby) se ha incluido para fines ilustrativos.

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

Iconos opcionales en formas horizontales y en línea

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

Pakasqa `.sr-only`etiquetakunawan akllana iconokuna

Sichus .sr-onlyclaseta huk formulario kamachiypa pakananpaq <label>llamk'achkanki (aswan wak etiquetakuna akllanakuna llamk'achiymanta, ahinataq aria-labelatributo kaqmanta), Bootstrap kikinmanta iconopa posiciónninta huk kuti yapasqa kaqtin allichanqa.

@ .

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

Control de tamaño

Alturakunata churay clasekuna hina .input-lg, hinallataq anchokunata churay rejilla columna clasekuna hina .col-lg-*.

Tamaño de altura

Aswan hatun utaq aswan pisi formulario kamachiykunata ruway mayqinkunachus botón sayaykunawan tupan.

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

Horizontal forma qutu sayayninkuna

Utqaylla hatun sayay etiquetakuna chaymanta formulario kamachiykuna ukhupi .form-horizontalyapaspa .form-group-lgutaq .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>

Dimensionamiento de columna

Yaykuykuna llika columnakunapi, utaq mayqin sapanchasqa tayta elemento kaqpipas, munasqa anchokunata mana sasachakuspa kallpachanapaq.

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

Etiquetas de botón

<a>Huk , <button>, icha <input>elemento nisqapi ñit'ina clasekunata llamk'achiy .

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

Uso específico de contexto

<a>Mientras clasekuna botón kaqpi chaymanta <button>elementokunapi llamk'achiy atikunku , <button>elementokunalla yanapasqa kanku nav chaymanta navbar componentesniyku ukhupi.

Enlaces que actúan como botones

Sichus <a>elementokuna botones hina ruwanankupaq llamk'achkanku – p'anqa ukhupi ruwayta qallarichispa, aswan wak qillqaman utaq t'aqaman kunan p'anqa ukhupi puriymanta – huk tupaq role="button".

Chawpi maskaqpa ruway

Aswan allin ruway hina, anchata yuyaychayku <button>elementota llamk'achiyta mayk'aq atikuqtin tupachisqa chimpa-navegador ruwayta qhawanapaq.

Huk imakuna ukhupi, huk pantay Firefox <30 kaqpi kan chaymanta harkawanchik line-heightof <input>-based ñit'inakuna churayta, chaymanta mana allintachu tupan huk ñit'inakuna Firefox kaqpi sayayninwan.

Akllanakuna

Mayqin kaqniyuq ñit'ina clasekunatapas llamk'achiy usqhaylla huk estiloyuq ñit'inata ruwanapaq.

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

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta huk botón kaqman significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (botón rikukuq qillqa), utaq huk ruwaykunawan churasqa kaqta, kayhina huk qillqa .sr-onlyclasewan pakasqa.

Tamaños

¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? Yapay .btn-lg, .btn-sm, icha .btn-xshuk hatun sayaykunapaq.

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

Bloque nivel botones ruway —chaykuna huk tayta-mamapa hunt'a anchunta span— yapaspa .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>

Estado activa

Botonkuna ñit'isqa rikukunqa (aswan yana qhipa kaqwan, aswan yana frontera kaqwan, chaymanta churasqa llantuywan) ruwasqa kaqtin. Elementokunapaqqa, kayqa <button>ruwakun via :active. <a>Elementokunapaqqa , .active. .activeIchaqa, s kaqpi llamk'achiy atikunki <button>(hinallataq aria-pressed="true"atributota churanki) sichus programaticamente ruwasqa estadota kutichiyta necesitanki.

Elemento de botón

Mana necesariochu yapayta :activeimaynachus huk pseudo-clase kaq, ichaqa sichus necesitanki obligayta kikin rikhuriyta, ñawpaqman riy chaymanta yapay .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>

Elemento de anclaje

.activeChay claseta <a>botonkunaman yapay .

Enlace primario Tupana

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

Mana atiq suyu

Botonkunata mana ñit'iy atikuq hina ruway opacity.

Elemento de botón

disabledChay atributota <button>botonkunaman yapay .

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

Chawpi maskaqpa tupachiynin

disabledSichus atributota huk kaqman yapanki <button>, Internet Explorer 9 chaymanta uraypi qillqata gris ruwanqa huk millay qillqa-llantuywan mana allichayta atiykuchu.

Elemento de anclaje

.disabledChay claseta <a>botonkunaman yapay .

Enlace primario Tupana

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

Kaypi .disabledhuk utilidad clase hina llamk'achiyku, común .activeclase kaqman rikch'akuq, chayrayku mana ñawpaq simita mañakunchu.

Advertencia de funcionalidad de enlace

Kay clase llamk'achin s pointer-events: nonet'inki ruwayta mana llamk'achiyta munaspa <a>, ichaqa chay CSS propiedad manaraq estandarizadachu chaymanta mana hunt'asqa yanapasqachu Opera 18 kaqpi chaymanta uraypi, utaq Internet Explorer 11 pointer-events: nonekaqpi puriy mana afectasqa qhipakuchkan, niyta munan rikuq teclado llamk'aqkuna chaymanta yanapakuq tecnologiakuna llamk'aqkuna kay t'inkikunata llamk'achiyta atinqakuraq. Chaymi mana imamanta manchakuspa, JavaScript ruwasqa llamk'achiy chayhina t'inkikunata mana llamk'achinaykipaq.

Imagenes respuestas

.img-responsiveBootstrap 3 kaqpi siq'ikuna kutichiy-amigo ruwasqa kanman clase yapasqa kaqnintakama . Kayqa max-width: 100%;, height: auto;chaymanta display: block;siq'iman llamk'achin chaymanta tayta elementoman sumaqta escalan.

Yachayta llamk'achiq siq'ikunata chawpichaypaq .img-responsive, llamk'achiy .center-blockranti .text-center. Yanapakuq clasekuna t'aqapi qhaway aswan sut'inchaykuna .center-blockllamk'aymanta.

SVG imaymanakuna chaymanta IE 8-10

Internet Explorer 8-10 kaqpi, SVG siq'ikuna kaqwan .img-responsivemana tupaq sayayniyuq kanku. Kayta allichanapaq, width: 100% \9;maypichus necesario chaypi yapay. Bootstrap mana kayta kikinmantachu ruwan imaynachus huk siq'i formatokunaman sasachakuykunata ruwan.

<img src="..." class="img-responsive" alt="Responsive image">

Imahina rikchaykuna

Huk elementoman clasekunata yapay <img>ima proyectopipas siq'ikunata mana sasachakuspalla estilochanaykipaq.

Chawpi maskaqpa tupachiynin

Yuyaypi hap'iy Internet Explorer 8 mana yanapakuyniyuqchu muyu k'uchukunapaq.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Colores contextuales nisqa

Colorwan significadota apachiy huk makilla clases de utilidad de énfasis nisqawan. Kaykunaqa t'inkikunamanpas churasqa kanman chaymanta hover kaqpi tutayachinqa imaynachus ñawpaq t'inki estilokunayku hina.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh nisqa.

Nullam id dolor id nibh ultricies antawakuna ut id elit.

Duis mollis, est mana commodo luctus, nisi erat porttitor ligula nisqa.

Maecenas sed diam eget risus varius blandit tiyay amet mana magna.

Etiam porta sem malesuada magna mollis euismod nisqamanta.

Donec ullamcorper nulla mana 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>

Especificidad nisqamanta rimay

Wakin kutiqa mana clases de énfasis nisqakuna churakunmanchu huk akllaqpa especificidadninrayku. Yaqa llapanpi, huk suficiente allichayqa qillqaykita huk <span>clasewan p'istuymi.

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa icha kikin contenidomanta sut'i kaqta (contextual llimp'ikuna qillqapi/markapi kachkaqña significadota kallpachanapaqlla llamk'achkanku), utaq huk ñankunawan churasqa kaqta, kayhina huk qillqa .sr-onlyclasewan pakasqa .

Antecedentes contextuales nisqamanta

Contextual qillqa llimp'i clasekunaman rikch'akuq, huk elementop qhipanta mayqin contextual clasemanpas facil-llata churay. Ancla componentes hover kaqpi tutayaq kanqa, imaynachus qillqa clasekuna.

Nullam id dolor id nibh ultricies antawakuna ut id elit.

Duis mollis, est mana commodo luctus, nisi erat porttitor ligula nisqa.

Maecenas sed diam eget risus varius blandit tiyay amet mana magna.

Etiam porta sem malesuada magna mollis euismod nisqamanta.

Donec ullamcorper nulla mana 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>

Especificidad nisqamanta rimay

Wakin kutipiqa huk akllaqpa especificidadninraykum mana contextual de fondo clasekuna churakunmanchu. Wakin kutikunapi, huk suficiente llamkana elementoykipa contenidonta huk <div>clasewan p'istuy.

Yanapakuq tecnologiakunaman significadota apachiy

As with contextual colors , asegurar que cualquier significado transmitido a través de color también se transmitido en un formato que no sea puramente presentación.

Cerrar icono

Genérico wichq'ana icono llamk'achiy contenidota modales hina chaymanta alertas hina qarqunapaq.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Caretes nisqawan llamk’achiy, urayk’aq ruwayninta, maymanchus puriyninta ima rikuchinapaq. Reparay ñawpaqmanta churasqa caret kikinmanta kutirinqa urmay menúkunapi .

<span class="caret"></span>

Utqaylla puriq

Huk elementota huk clasewan lluq'iman icha pañaman wayt'ay. !importantnisqa churasqa kachkan mana especificidad nisqamanta sasachakuykuna kananpaq. Clases nisqakunatapas mixin nisqa hinam servichikunmanku.

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

Chawpi contenido bloques

Huk elementota display: blockchaymanta chawpiman churay via margin. Disponible como mixin y clase.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Chuya allichay

Facilmente chuyanchay s tayta elementomanfloat yapaspa . Nicolas Gallagherpa riqsisqan micro clearfix nisqatam llamk'achin. También puede ser utilizado como mixin..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();
}

Contenidota rikuchispa pakaspa

Huk elementota kallpachay rikuchisqa utaq pakasqa kananpaq ( pantalla ñawiriqkunapaqpas ) .showchaymanta .hiddenclasekuna llamk'achiyninwan. Kay clasekuna llamk'achinku !importantmana especificidad ch'aqwaykunamanta, imaynachus usqhaylla flotadores . Chaykunaqa bloque nivel toggling nisqallapaqmi kanku. Chaykunataqa mixin hinapas llamk’achiy atikunmi.

.hidekachkan, ichaqa mana sapa kutichu pantalla ñawiriqkunata afectan chaymanta v3.0.1 kaqmanta manaña llamk'achisqachu . Utilizar .hiddeno .sr-onlyen vez de.

Chaymanta, .invisiblehuk elemento rikuylla tikraypaq llamk'achiy atikun, niyta munan su displaymana tikrasqachu chaymanta elemento qillqap puriyninta afectanmanraq.

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

Pantalla ñawiriq chaymanta teclado puriy contenido

Huk elementota tukuy dispositivokunaman pakay pantalla ñawiriqkunaman mana .sr-only. Huñuy .sr-onlyelementota .sr-only-focusableyapamanta rikuchinapaq mayk'aq enfocadu kachkan (kayhina huk teclado-lla llamk'achiqwan). Yaykuna atiy allin ruwaykunata qatipanapaq necesario . También puede ser utilizado como mixins.

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

Imahina tikrana

Clase utaq mixin .text-hidellamk'achiy huk elementop qillqap kaqninta huk qhipa siq'iwan tikrayta yanapanapaq.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Aswan utqaylla kuyuchina-amigo wiñachiypaq, kay yanapakuy clasekuna llamk'achiy dispositivo kaqwan willayta tapuy kaqnintakama rikuchiypaq chaymanta pakaypaq. Hinallataq, utilidad clasekuna kanku contenidota tikranapaq impreso kaqtin.

Kaykunata pisilla llamk'achiyta kallpachakuy chaymanta mana kikin sitiomanta tukuy wak layakunata ruwaychu. Aswanpas chaykunata utilizay sapa aparatoq presentacionninta hunt’anaykipaq.

Clases nisqakuna tarikuq

Huklla utaq huñusqa kaq clasekuna llamk'achiy imayna ruwanakuna qhawaypaq p'akiykunapura tikranapaq.

	Yapamanta uchuy aparatokunaTeléfonos (<768px) nisqa.	Huch’uy aparatokunaTabletas (≥768px) nisqa.	Chawpi aparatokunaEscritoriokuna (≥992px)	Hatun aparatokunaEscritoriokuna (≥1200px)
`.visible-xs-*`	Rikuna	Pakasqa	Pakasqa	Pakasqa
`.visible-sm-*`	Pakasqa	Rikuna	Pakasqa	Pakasqa
`.visible-md-*`	Pakasqa	Pakasqa	Rikuna	Pakasqa
`.visible-lg-*`	Pakasqa	Pakasqa	Pakasqa	Rikuna
`.hidden-xs`	Pakasqa	Rikuna	Rikuna	Rikuna
`.hidden-sm`	Rikuna	Pakasqa	Rikuna	Rikuna
`.hidden-md`	Rikuna	Rikuna	Pakasqa	Rikuna
`.hidden-lg`	Rikuna	Rikuna	Rikuna	Pakasqa

v3.2.0 kaqmanta, .visible-*-*sapa p'akiypaq clasekuna kimsa tikraykunapi hamunku, huk sapa CSS displaykaqpa chaninpaq uraypi listasqa.

Grupo de clases	CSS nisqa`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Chaymi, pantallakuna extra huch'uy ( xs) kaqpaq ejemplopaq, .visible-*-*clasekuna kaqkuna kanku: .visible-xs-block, .visible-xs-inline, chaymanta .visible-xs-inline-block.

Chay clasekuna .visible-xs, .visible-sm, .visible-md, chaymanta .visible-lgkanku, ichaqa v3.2.0 kaqmanta manaña llamk'achisqa kanku . Paykunaqa yaqa kaqlla kanku .visible-*-block, salvo casos especiales adicionales para <table>elementos relacionados con toggling.

Clases de imprimir

Sapa kuti kutichiq clasekunaman rikch'akuq, kaykunata llamk'achiy contenidota impriminapaq tikraypaq.

Clases	Navegador nisqa	Imprimir
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Pakasqa	Rikuna
`.hidden-print`	Rikuna	Pakasqa

Clasepas .visible-printkanmi ichaqa v3.2.0 kaqmanta manaña llamk'achisqachu . Yaqa , nisqawanmi tupan , manataqmi -wan tupaq elementokunapaq .visible-print-blockcasos especiales adicionales nisqawanchu.<table>

Casos de prueba

Navegadorniykipa sayayninta tikray utaq wak dispositivokunapi kargay kutichiq yanapakuy clasekuna pruebapaq.

Rikuna kaypi...

Q'umir qhaway chimpukuna kunan qhawanaykipi elemento rikukuq kaqta rikuchin.

Extra pequeño ✔ Visible en x-pequeño

Uchuy ✔ Huch’uyllapi rikukuq

Chawpi ✔ Chawpipi rikukuq

Hatun ✔ Hatunpi rikukuq

Extra pequeño y pequeño ✔ Visible en x-pequeño y pequeño

Chawpi y hatun ✔ Chawpi hatunpipas rikukun

Extra pequeño y mediano ✔ Visible en x-pequeño y mediano

Uchuy hatun ✔ Huch’uypipas hatunpipas rikukun

Extra pequeño y grande ✔ Visible en x-pequeño y grande

Pequeño y mediano ✔ Huch’uy, chawpi kaqpi rikukuq

Pakasqa...

Kaypi, q'umir qhaway markakuna elemento kunan qhawanaykipi pakasqa kaqtapas rikuchin.

Extra pequeño ✔ Pakasqa en x-pequeño

Uchuy ✔ Hidden on small

Chawpi ✔ Hidden on medium

Large ✔ Hatun patapi pakasqa

Extra pequeño y pequeño ✔ Hidden on x-small and small

Medium and large ✔ Chawpi hatunpi pakasqa

Extra pequeño y mediano ✔ Hidden on x-small and medium

Small and large ✔ Huch’uy hatunpi pakasqa

Extra small and large ✔ Pakasqa en x-pequeño y grande

Pequeño y mediano ✔ Hidden on small and medium

Bootstrap kaqpa CSS Less kaqpi ruwasqa kachkan, huk ñawpaq ruwaq yapasqa ruwanakunayuq imayna tikraqkuna, mixins chaymanta ruwanakuna CSS huñunapaq. Pikunachus maskanku llamk'ayta pukyuta Aswan pisi willañiqikuna rantipi ñuqayku huñusqa CSS willañiqikuna ruwayta atinku llamk'ayta achka tikraqkunata chaymanta mixins llamk'achisqayku tukuy marco kaqpi.

Rejilla variables y mixins nisqakunam Grid sistema nisqa raki ukupi qawarisqa kachkan .

Compilación de Bootstrap

Bootstrap iskay ñanllapipas llamk'achiy atikun: huñusqa CSS kaqwan icha pukyuta Less willañiqikunawan. Aswan pisi willañiqikunata huñunaykipaq, Qallarina t'aqapi qhaway imayna wiñachiy pachaykita churanaykipaq necesario kamachiykunata purichinaykipaq.

Kimsa kaq huñunapaq yanapakuykuna Bootstrap kaqwan llamkanman, ichaqa mana uma equipoykuwan yanapasqachu.

Variables nisqakuna

Variables tukuy proyectopi llamk'achkanku huk ñan hina chawpichaypaq chaymanta qunakuypaq común llamk'achisqa chanikuna imayna llimp'ikuna, espaciamiento utaq letra pilakuna. Huk hunt'asqa t'aqaypaq, ama hina kaspa qhaway Ruwanapaq .

Colores

Facilmente haz uso de dos esquemas de colores: escala de grises y semántica. Gris escala llimp'ikuna usqaylla yaykuyta qun común llamk'achisqa yana llimp'ikunaman chaymanta semántico imaymana llimp'ikuna asignasqa significativo contextual chanikunaman.

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

Mayqintapas kay llimp'i tikraqkunamanta imayna kasqanmanhina llamk'achiy utaq aswan yuyayniyuq tikraqkunaman proyectoykipaq musuqmanta churay.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Andamios

Huk makilla variablekuna usqhaylla elementokuna clave sitioykipa esqueletonmanta ruwanapaq.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

T'inkikuna

Facilmente estilo tus enlaces con el color correcto con solo un valor.

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

Reparay chay @link-hover-colorhuk ruwayta llamk'achin, huk manchay yanapakuy Less kaqmanta, kikillanmanta allin hover colorta ruwanapaq. darken, lighten, saturate, nisqawanmi yanapachikuwaq desaturate.

Tipografía

Facil churay qillqana mayt'uyki, qillqa sayayniyki, umalliq chaymanta aswan huk pisi utqaylla tikraqkunawan. Bootstrap kaykunata llamk'achin chaymanta mana sasa tipográfico mixins qunanpaq.

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

Iconos nisqakuna

Iskay utqaylla tikraqkuna maypi kayninta chaymanta willañiqi sutita iconoykikuna ruwanapaq.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Componentes nisqakuna

Tukuy Bootstrap kaqpi componentes wakin ñawpaqmanta tikraqkunata llamk'achinku común chanikuna churanapaq. Kaypiqa aswan riqsisqa kaqkunam kachkan.

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

Vendedor mixins nisqa

Vendor mixins mixins kanku achka maskaqkuna yanapakuy yanapakuypaq llapa tupaq ranqhaq ñawpaqninkuna huñusqa CSS kaqpi churaspa.

Caja-tamaño

Huk mixinwan componentekunaykipa caja modelonta musuqmanta churay. Contextopaq, qhaway kay yanapakuq qillqasqata Mozillamanta .

Mixin nisqaqa v3.2.0 nisqamanta pacha manaña llamk'achisqachu , Autoprefixer nisqap riqsichiyninwan. Qhipaman-tumpayta waqaychaypaq, Bootstrap mixin ukhupi llamk'achinqa Bootstrap v4 kaqkama.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Esquinas redondas

Kunan pacha tukuy kunan pacha maskaqkuna mana ñawpaq simiyuq border-radiuskaqninta yanapanku. Chayhina, mana .border-radius()mixin kanchu, ichaqa Bootstrap huk imayaypa huk ladunpi iskay k'uchukunata usqhaylla muyurichinapaq llalliq ñankunata churan.

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

Caja (Gota) llantuykuna

Sichus munasqayki audienciakuna aswan qhipa chaymanta aswan hatun maskaqkuna chaymanta dispositivokuna llamk'achkanku, ama hina kaspa sapallamanta box-shadowpropiedadta llamk'achiylla. Sichus yanapakuyta munanki ñawpaq Android kaqpaq (ñawpaq-v4) chaymanta iOS dispositivokuna (ñawpaq-iOS 5), llamk'achiy mana riqsisqa mixin kaqwan munasqa ñawpaq simita hapinaykipaq -webkit.

Mixin v3.1.0 kaqmanta manaña llamk'achisqachu , Bootstrap mana oficialmente yanapanchu mawk'a plataformakuna mana yanapanchu propiedad estándar kaqmanta. Qhipaman-tumpayta waqaychaypaq, Bootstrap mixin ukhupi llamk'achinqa Bootstrap v4 kaqkama.

Aseguray rgba()colorkunata caja llantuyniykipi llamk'achiy chaymanta mana pantasqa hina qhipa kaqwan chaqrukunankupaq.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transiciones nisqakuna

Flexibilidad nisqapaq achka mixinkuna. Hukwan llapa tikray willayta churay, utaq sapaq tardakuy chaymanta unayta necesitasqanmanhina willay.

Mixinkuna v3.2.0 kaqmanta manaña llamk'achisqachu , Autoprefixer riqsichiywan. Qhipaman-tunkiyta waqaychaypaq, Bootstrap mixins ukhupi llamk'achinqa Bootstrap v4 kaqkama.

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

Transformaciones nisqakuna

Imatapas muyuchiy, tupuy, tikray (kuyuchiy), icha k'iriy.

Mixinkuna v3.2.0 kaqmanta manaña llamk'achisqachu , Autoprefixer riqsichiywan. Qhipaman-tunkiyta waqaychaypaq, Bootstrap mixins ukhupi llamk'achinqa Bootstrap v4 kaqkama.

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

Animaciones

Huklla mixin llapa CSS3 kaqpa kawsachiy kaqninkunata huk willakuypi llamk'achinapaq chaymanta wak mixins sapalla kaqninkunapaq.

Mixinkuna v3.2.0 kaqmanta manaña llamk'achisqachu , Autoprefixer riqsichiywan. Qhipaman-tunkiyta waqaychaypaq, Bootstrap mixins ukhupi llamk'achinqa Bootstrap v4 kaqkama.

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

Opacidad

Llapa maskaqkunapaq opacidadta churay chaymanta huk filterfallback IE8 kaqpaq quy.

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

Maypi churana qillqa

Sapa chakra ukhupi formulario kamachiykunapaq contexto quy.

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

Columnas

Huk elemento ukhupi CSS nisqawan columnakunata paqarichiy.

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

Gradientes nisqa

Ima iskay llimp’ikunatapas mana sasachakuspalla qhipaman gradiente nisqaman tikray. Aswan ñawpaqman puriy hinaspa huk direccionta churay, kimsa colorkunata servichikuy utaq gradiente radial nisqawan. Huk mixin kaqwanqa llapa ñawpaq sintaxiskunata necesitasqaykita tarinki.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Iskay llimp'iyuq, chiru gradiente nisqap kuchuntapas niyta atinki:

#gradient > .directional(#333; #000; 45deg);

Sichus huk gradiente estilo barbero-raya necesitanki, chaypas facilmi, hinallataq. Huk llimp'illata willay chaymanta huk translúcido yuraq rayata llanthusaqku.

#gradient > .striped(#333; 45deg);

Hasta el ante y utilizar tres colores en vez de. Ñawpaq kaq llimp'ita, iskay kaq llimp'ita, iskay kaq llimp'ip llimp'i sayayninta (25% hina pachakmanta chani), kimsa kaq llimp'ita kay mixinkunawan churay:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

¡Umakuna wichayman! Sichus hayk'aqllapas huk gradiente hurqunayki tiyan, ama hina kaspa mayqin IE-específico filteryapasqaykitapas hurquy. Chaytaqa .reset-filter()ruwawaqmi ladonpi kaq mixin nisqawan background-image: none;.

Mixins de utilidad

Utility mixins nisqaqa mixins nisqakunam, huk mana tinkisqa CSS kaqpa kaqninkunata hukllachaq huk específico meta utaq ruwana aypanapaq.

Chuya allichay

Qunqay class="clearfix"ima elementomanpas yapayta hinaspa aswanpas .clearfix()maypichus allin kanman chaypi mixin nisqa yapay. Nicolas Gallaghermanta micro clearfix nisqawanmi llamk'achin .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Chawpichay horizontal

Ima elementotapas tayta-maman ukhupi usqhaylla chawpichay. Requiere widtho max-widthpara ser establecido.

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

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

Yanapakuqkuna tamaño

Imapa tupuyninkunata aswan facil-llata willay.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Áreas de texto redimensionables

Ima textareapaqpas, utaq mayqin wak elementopaqpas hatun sayay tikray akllanakunata mana sasachu ruway. Normal maskaqpa ruwayninman ñawpaqmanta churasqa ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Texto truncando

Huk mixinwan huk elipsiswan qillqasqata mana sasachakuspalla kuchuy. Requiere elemento ser blocko inline-blocknivel.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Imagenes de retina

Iskay siq'i ñankunata chaymanta @1x siq'i dimensiones nisqakunata willay, chaymanta Bootstrap huk @2x willay tapuyta qunqa. Sichus achka siq'ikuna sirwinapaq kanki, qhaway retina siq'iyki CSS makiwan qillqayta huk sapalla willay tapuypi.

.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 nisqapi ruwasqa kachkaptinpas, huk Sass nisqap kamachisqan puertoyuqmi . Sapaq GitHub waqaychasqapi waqaychayku chaymanta musuqyachiykunata huk tikray qillqawan ruwayku.

Imataq chaypi kachkan

Sass puerto huk sapaq repoyuq kasqanrayku chaymanta huk pisi wak uyariqkunaman yanapasqanrayku, chay proyectopa contenidonqa anchata hukniraq Bootstrap hatun proyectomanta. Kayqa Sass puerto aswan Sass-manta ruwasqa sistemakunawan tupachisqa kaqta qhawan.

Ñan	Willay
`lib/`	Ruby gema código (Sass ruwana, Rails chaymanta Compass tinkiykuna)
`tasks/`	Tikraq qillqakuna (wichayman Aswan pisita Sassman tikray)
`test/`	Pruebas de compilación
`templates/`	Manifiesto de paquete de brújula
`vendor/assets/`	Sass, JavaScript, chaymanta letra nisqa willañiqikuna
`Rakefile`	Ukhupi ruwaykuna, rastrillo hinallataq tikray hina

Sass puerto kaqpa GitHub waqaychasqa kaqninta watukuy kay willañiqikunata ruwaypi qhawanaykipaq.

Instalación

Sass kaqpaq Bootstrap imayna churanapaq chaymanta llamk'achinapaq willakuypaq, GitHub waqaychasqa readme kaqpi qhaway . Aswan kunan pacha pukyuta chaymanta willayta Rails, Compass, chaymanta Sass ruwanakuna estándar kaqwan llamk'anapaq churan.

Sasspaq bootstrap

CSS nisqa

Hatun qhawariy

HTML5 nisqa doctipo nisqa

Ñawpaqtaqa móvil

Tipografía y enlaces

Normalizar.css nisqa

Contenedores

Sistema de rejilla

Qallariy

Media tapuykuna

Rejilla akllanakuna

Ejemplo: Apilado-a-horizontal

Ejemplo: Fluido nisqa waqaychana

Ejemplo: Móvil y escritorio

Ejemplo: Móvil, tableta, escritorio

Ejemplo: Columna p’istuy

Kutichiy columna kaqmanta churan

Canalización nisqakunata hurquy

Columnas nisqakunata offset nisqa

Columnas de nidificación

Columna kamachiy

Menos mixins y variables

Variables nisqakuna

Mixinkuna

Ejemplo de uso

Tipografía

Umakuna

h1. Bootstrap nisqa umalliq

h2. Bootstrap nisqa umalliq

h3. Bootstrap nisqa umalliq

h4. Bootstrap nisqa umalliq

h5. Bootstrap nisqa umalliq

h6. Bootstrap nisqa umalliq

h1. Bootstrap umalliq Iskay ñiqin qillqa

h2. Bootstrap umalliq Iskay ñiqin qillqa

h3. Bootstrap umalliq Iskay ñiqin qillqa

h4. Bootstrap umalliq Iskay ñiqin qillqa

h5. Bootstrap umalliq Iskay ñiqin qillqa

h6. Bootstrap umalliq Iskay ñiqin qillqa

Copia del cuerpo

Copia de cuerpo de plomo

Construido con Menos

Chiru ukhupi qillqa elementokuna

Markasqa qillqasqa

Qullusqa qillqasqa

Huelga a través de texto

Qillqasqa churasqa

Subrayasqa qillqasqa

Uchuy qillqasqa

Yanacha

Cursiva

Elementos alternados

Clases de alineación

Clases de transformación nisqa

Pisichasqa simikuna

Abreviatura básica

Initialismo nisqa

Direcciones

Bloqueo nisqa

Ñawpaqmanta churasqa bloqueo

Blockquote nisqa akllanakuna

Huk pukyuta sutichay

Huk qhawarichiykuna

Listakuna

Mana kamachisqa

Kamachisqa

Mana estiloyuq

Inline

Willay

Descripción horizontal

Kikinmanta truncamiento

Código

Inline

Insumo de usuario

Bloque básico

Variables nisqakuna

Salida de muestra

Tablas

Ejemplo básico

Rayayuq filakuna

Demo `:focus`estado

Advertencia sobre funcionalidad de enlace de`<a>`

Pakasqa `.sr-only`etiquetakunawan akllana iconokuna