Alaen ti lowdown kadagiti kangrunaan a pedaso ti imprastruktura ti Bootstrap, agraman ti pamay-anmi iti nasaysayaat, naparpartak, napigpigsa a panagdur-as ti web.

Tipo ti dokto ti HTML5

Ti Bootstrap ket agus-usar kadagiti sumagmamano nga elemento ti HTML ken dagiti tagikua ti CSS a kasapulan ti panagusar ti doctype ti HTML5. Iramanmo dayta iti rugi ti amin a proyektom.

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

Mobile nga umuna

Iti Bootstrap 2, innayonmi dagiti opsional a mobile friendly nga estilo para kadagiti kangrunaan nga aspeto ti balangkas. Babaen ti Bootstrap 3, insuratmi manen ti proyekto tapno agbalin a mobile friendly manipud pay idi damo. Imbes a mangnayon kadagiti opsional nga estilo ti mobile, naluto dagitoy a mismo iti puso. Kinapudnona, ti Bootstrap ti umuna a mobile . Dagiti mobile nga umuna nga estilo ket mabalin a masarakan iti intero a sibubukel a biblioteka imbes a kadagiti agsina a file.

Tapno masigurado ti umno a panagiparang ken panag-touch zooming, inayon ti meta tag ti viewport iti <head>.

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

Mabalinmo a balbaliwan dagiti kabaelan ti panag-zoom kadagiti mobile nga alikamen babaen ti pananginayon user-scalable=noiti meta tag ti viewport. Daytoy ket mangbaldado ti panag-zoom, kayatna a sawen a dagiti agar-aramat ket mabalinda laeng ti ag-scroll, ken agresulta iti site-mo a makarikna iti bassit nga ad-adda a kasla katutubo nga aplikasion. Iti pakabuklan, saanmi nga irekomendar daytoy iti tunggal site, isu nga agannadkayo!

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

Tipograpia ken dagiti silpo

Ti Bootstrap ket mangikeddeng kadagiti batayan a sangalubongan a panagiparang, tipograpia, ken dagiti estilo ti silpo. Espesipiko, datayo:

Itakderan background-color: #fff;tibody
Usaren ti @font-family-base, @font-size-base, ken @line-height-basedagiti attribute a kas ti tipograpiko a batayantayo
Itakderan ti sangalubongan a kolor ti silpo babaen @link-colorken iyaplikar ti link underlines laeng iti:hover

Dagitoy nga estilo ket mabalin a masarakan iti uneg ti scaffolding.less.

Normalisar ti.css

Para iti napasayaat a panagiparang ti krus-browser, usarenmi ti Normalize.css , maysa a proyekto babaen da Nicolas Gallagher ken Jonathan Neal .

Dagiti Pagkargaan

Ti bootstrap ket agkasapulan ti naglaon nga elemento a mangbalkot kadagiti linaon ti site ken mangbalay ti sistema ti gridtayo. Mabalinmo ti agpili iti maysa kadagiti dua a pagkargaan nga usarem kadagiti proyektom. Paliiwenyo a, gapu paddingken ad-adu pay, awan ti uray maysa a pagkargaan a maumok.

Usaren .containerpara iti responsive fixed width container.

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

Usaren .container-fluidpara iti naan-anay a kalawa a pagkargaan, a mangsaklaw iti sibubukel a kalawa ti viewport-mo.

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

Ti Bootstrap ket mangiraman ti makasungbat, mobile nga umuna a sistema ti grid ti pluido a maitutop a mang-scale aginggana ti 12 a kolum bayat nga umad-adu ti kadakkel ti alikamen wenno viewport. Daytoy ket mangiraman kadagiti nasakbay a naikeddeng a klase para kadagiti nalaka a pagpilian ti layout, ken dagiti pay nabileg a mixin para iti panagpataud kadagiti ad-adu a semantiko a layout .

Pauna

Dagiti sistema ti grid ket maus-usar para iti panagpartuat kadagiti layout ti panid babaen ti serye dagiti hilera ken dagiti adigi a mangikabil ti linaonmo. Kastoy ti panagandar ti sistema ti grid ti Bootstrap:

Masapul a maikabil dagiti hilera iti uneg ti .container(fixed-width) wenno .container-fluid(full-width) para iti umno a pannakaitunos ken padding.
Usaren dagiti hilera tapno mangpartuat kadagiti horizontal a grupo dagiti adigi.
Rumbeng a maikabil ti linaon iti uneg dagiti adigi, ken dagiti laeng adigi ti mabalin a dagus nga annak dagiti hilera.
Dagiti nasakbay a naikeddeng a klase ti grid ket kas .rowken .col-xs-4magun-od para iti napardas a panagaramid kadagiti layout ti grid. Dagiti basbassit a mixin ket mabalin pay nga usaren para kadagiti ad-adu a semantiko a layout.
Dagiti adigi ket mangpartuat kadagiti kanal (dagiti giwang iti nagbaetan ti linaon ti adigi) babaen ti padding. Dayta a padding ket na-offset kadagiti hilera para iti umuna ken maudi a kolum babaen ti negatibo a margin iti .rows.
Ti negatibo a margin ti gapuna a na-outdent dagiti pagarigan iti baba. Daytoy ket tapno ti linaon iti uneg dagiti grid a kolum ket nailinya kadagiti saan a grid a linaon.
Dagiti adigi ti grid ket naparsua babaen ti panangidatag ti bilang dagiti sangapulo ket dua a magun-od a kolum a kayatmo a span. Kas pagarigan, tallo nga agpapada a kolum ti agusar koma iti tallo .col-xs-4.
No nasurok a 12 nga adigi ti naikabil iti uneg ti maymaysa a linia, tunggal grupo dagiti ekstra nga adigi ket, kas maysa a yunit, agbalkot iti baro a linia.
Dagiti klase ti grid ket agaplikar kadagiti alikamen nga addaan kadagiti kalawa ti iskrin a dakdakkel wenno kapada dagiti kadakkel ti breakpoint, ken mangbalbaliw kadagiti klase ti grid a naipuntiria kadagiti babbabassit nga alikamen. Gapuna, kas pagarigan ti panangipakat ti ania man a .col-md-*klase iti maysa nga elemento ket saan laeng nga apektaranna ti estilona kadagiti kalalainganna nga alikamen ngem pay kadagiti dadakkel nga alikamen no ti maysa a .col-lg-*klase ket awan.

Kitaem dagiti pagarigan para iti panangyaplikar kadagitoy a prinsipio iti kodigom.

Dagiti saludsod ti media

Usarenmi dagiti sumaganad a panagsaludsod ti media kadagiti Basbassit a filemi tapno mangpartuat kadagiti kangrunaan a breakpoint iti sistema ti gridmi.

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

Sagpaminsan a palawaenmi dagitoy a panagsaludsod ti media tapno mairaman ti a max-widthtapno malimitaran ti CSS iti akikid a grupo dagiti alikamen.

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

Dagiti pagpilian iti grid

Kitaen no kasano nga agtrabaho dagiti aspeto ti sistema ti grid ti Bootstrap iti ballasiw dagiti adu nga alikamen nga addaan iti nalaka a mausar a lamisaan.

	Dagiti ekstra a babassit nga alikamen Dagiti telepono (<768px) .	Bassit nga alikamen Tablets (≥768px) .	Dagiti kalalainganna nga alikamen Dagiti Desktop (≥992px) .	Dagiti dadakkel nga alikamen Dagiti Desktop (≥1200px) .
Grid ti kababalin	Paisaad iti amin a tiempo	Narakrak tapno mangrugi, horizontal iti ngato dagiti breakpoint
Kalawa ti pagkargaan	Awan (auto) .	750px nga	970px nga	1170px nga
Prefix ti klase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ti kolum	12 nga
Kalawa ti adigi	Auto nga	~62px nga	~81px nga	~97px nga
Lapad ti kanal	30px (15px iti tunggal sikigan ti maysa a kolum) .
Mabalin nga umok	Wen
Dagiti Offset	Wen
Panag-order iti kolum	Wen

Kas pagarigan: Naurnong-agingga-iti-paidasig

Babaen ti panagusar ti maymaysa a grupo dagiti .col-md-*klase ti grid, mabalinmo ti mangpartuat ti batayan a sistema ti grid a mangrugi a naurnong kadagiti mobile nga alikamen ken dagiti alikamen ti tablet (ti ekstra a bassit aginggana ti bassit a sakop) sakbay nga agbalin a horizontal kadagiti desktop (kalalainganna) nga alikamen. Ikabil dagiti grid columns iti aniaman a .row.

.kol-md-1 nga

.kol-md-8 nga

.kol-md-4 nga

.kol-md-6 nga

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

Kas pagarigan: Pagkargaan ti pluido

Pagbalinem ti ania man a naikeddeng-kalawa a layout ti grid iti naan-anay a kalawa a layout babaen ti panangbalbaliwmo iti makinruar .containerunay iti .container-fluid.

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

Kas pagarigan: Mobile ken desktop

Dimo kayat a basta agtumpok dagiti kolummo kadagiti babbabassit nga alikamen? Usaren dagiti ekstra a bassit ken kalalainganna a klase ti grid ti alikamen babaen ti pananginayon .col-xs-* .col-md-*kadagiti kolummo. Kitaen ti pagarigan iti baba para iti nasaysayaat nga ideya no kasano nga agtrabaho amin dayta.

.kol-xs-12 .kol-md-8

.kol-xs-6 .kol-md-4

.kol-xs-6 nga

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

Kas pagarigan: Mobile, tablet, desktop

Mangbangon iti napalabas a pagarigan babaen ti panangparnuay kadagiti ad-adda pay a dinamiko ken nabileg a layout nga addaan kadagiti .col-sm-*klase ti tablet.

.kol-xs-12 .kol-sm-6 .kol-md-8

.kol-xs-6 .kol-md-4

.kol-xs-6 .kol-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Kas pagarigan: Panagbalkot iti kolum

No nasurok a 12 nga adigi ti naikabil iti uneg ti maymaysa a linia, tunggal grupo dagiti ekstra nga adigi ket, kas maysa a yunit, agbalkot iti baro a linia.

.kol-xs-9 nga

.col-xs-4
Gapu ta 9 + 4 = 13 > 12, daytoy nga 4-kolum-a-kalawa a div ket makagun-od ti nabalkot iti baro a linia a kas maysa nga agsasaruno a yunit.

.col-xs-6
Agtultuloy dagiti sumaganad a kolum iti baro a linia.

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

Responsibo nga i-reset ti kolum

Iti uppat a tukad dagiti grid a magun-od ket sigurado a makatarayka kadagiti isyu a sadiay, kadagiti sumagmamano a breakpoint, dagiti kolummo ket saan unay a nalawag a kas ti maysa ket nataytayag ngem ti sabali. Tapno matarimaan dayta, usaren ti kombinasion ti a .clearfixken dagiti responsive utility class -tayo .

.col-xs-6 .col-sm-3
Baliwam ti kadakkel ti viewport-mo wenno kitaem iti teleponom kas pagarigan.

.kol-xs-6 .kol-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Malaksid iti panagikkat ti adigi kadagiti sumungbat a breakpoint, mabalin a kasapulam nga i- reset dagiti offset, panagduron, wenno panagguyod . Kitaen daytoy nga agtigtignay iti pagarigan ti grid .

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

Panang-offset kadagiti kolum

Iyakar dagiti kolum iti kannawan babaen ti panagusar kadagiti .col-md-offset-*klase. Dagitoy a klase ket paaduenda ti kannigid a pingir ti maysa a kolum babaen dagiti *adigi. Kas pagarigan, .col-md-offset-4aggaraw .col-md-4iti rabaw ti uppat a kolum.

.kol-md-4 nga

.kol-md-4 .kol-md-offset-4

.kol-md-3 .kol-md-offset-3

.kol-md-6 .kol-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Mabalinmo pay nga i-override dagiti offset manipud kadagiti nababbaba a grid tier nga addaan kadagiti .col-*-offset-0klase.

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

Dagiti adigi ti panagumok

Tapno mai-nest ti linaonmo babaen ti default a grid, manginayon ti baro .rowken grupo dagiti .col-sm-*adigi iti uneg ti addan a .col-sm-*kolum. Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti 12 wenno basbassit (saan a kasapulan nga usarem amin dagiti 12 a magun-od a kolum).

Antas 1: .col-sm-9

Lebel 2: .kol-xs-8 .kol-sm-6

Lebel 2: .kol-xs-4 .kol-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>

Panag-order iti kolum

Nalaka a baliwan ti urnos dagiti naibangon a grid columns-tayo nga addaan .col-md-push-*ken .col-md-pull-*modifier classes.

.kol-md-9 .kol-md-iduron-3

.kol-md-3 .kol-md-guyod-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>

Basbassit dagiti mixins ken variables

Malaksid kadagiti nasakbay a naibangon a klase ti grid para kadagiti napardas a layout, ti Bootstrap ket mangiraman kadagiti Basbassit a variable ken dagiti mixin para iti napardas a panagpataud kadagiti bukodmo a simple, semantiko a layout.

Dagiti Variable

Dagiti variable ket mangikeddeng ti bilang dagiti adigi, ti kalawa ti kanal, ken ti puntos ti panagsaludsod ti media a pangrugian kadagiti agtaytayab nga adigi. Usarenmi dagitoy tapno mangpataud kadagiti nasakbay a naikeddeng a klase ti grid a nadokumento iti ngato, ken kasta met para kadagiti kostumbre a mixin a nailista iti baba.

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

Dagiti mixin

Dagiti mixin ket naus-usar a maikuyog kadagiti grid a variable tapno mangpataud ti semantiko a CSS para kadagiti indibidual a grid a kolum.

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

Pagarigan ti panagusar

Mabalinmo a baliwan dagiti variable kadagiti bukodmo a kostumbre a pateg, wenno usarem laeng dagiti mixin nga addaan kadagiti default a pategda. Adda ditoy ti pagarigan ti panagusar kadagiti default a panagitunos tapno mangpartuat ti dua-a-kolum a layout nga addaan iti giwang iti nagbaetan.

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

Dagiti Paulo

Amin a paulo ti HTML, <h1>babaen ti <h6>, ket magun-od. .h1babaen .h6dagiti klase ket magun-od pay, para no kayatmo a maipada ti estilo ti letra ti maysa a paulo ngem kayatmo latta a maiparang ti tekstom iti inline.

h1. Bootstrap nga paulo	Semibold nga 36px
h2. Bootstrap nga paulo	Semibold nga 30px
h3. Bootstrap nga paulo	Semibold nga 24px
h4. Bootstrap nga paulo	Semibold nga 18px
h5. Bootstrap nga paulo	Semibold nga 14px
h6. Bootstrap nga paulo	Semibold nga 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>

Mangaramid ti nalaglag-an, segundario a teksto iti ania man a paulo nga addaan iti generic <small>tag wenno ti .smallklase.

h1. Paulo ti bootstrap Sekondario a teksto

h2. Paulo ti bootstrap Sekondario a teksto

h3. Paulo ti bootstrap Sekondario a teksto

h4. Paulo ti bootstrap Sekondario a teksto

h5. Paulo ti bootstrap Sekondario a teksto

h6. Paulo ti bootstrap Sekondario a teksto

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

Kopia ti bagi

Ti sangalubongan a default ti Bootstrap font-sizeket 14px , nga addaan line-heightiti 1.428 . Mayaplikar daytoy iti <body>ken amin a parapo. Iti pay maipatinayon, dagiti <p>(parapo) ket umawatda ti baba a margin ti kagudua ti nakumpirma a line-height-da (10px babaen ti default).

Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lugan.

Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Donec ullamcorper nulla nga saan nga auctor nga fringilla. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla nga saan nga auctor nga fringilla.

Maecenas sed diam eget risus varius blandit agtugaw amet saan a magna. Donec id elit nga saan nga mi porta gravida iti eget metus. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Kopia ti bagi ti lead

Pagbalinem a naisangsangayan ti maysa a parapo babaen ti pananginayonmo iti .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus ti dolor ti panagsubasta. Duis mollis, est saan a komodo a luctus.

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

Naibangon iti Basbassit

Ti tipograpiko a sukog ket naibatay kadagiti dua a Basbassit a variable kadagiti variable.less : @font-size-baseken @line-height-base. Ti umuna ket ti base font-size a nausar iti intero ken ti maikadua ket ti base line-height. Usarenmi dagita a variable ken sumagmamano a simple a matematika tapno mangparnuay kadagiti margin, padding, ken line-heights ti amin a kitami ken dadduma pay. Ipasayaat dagitoy ken makibagay ti Bootstrap.

Inline nga elemento ti teksto

Namarkaan a teksto

Para iti panangitampok ti panagtaray ti teksto gapu ti pakainaigan daytoy iti sabali a konteksto, usaren ti <mark>etiketa.

Mabalinmo nga usaren ti mark tag tapnoikkan ti talmegteksto.

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

Nabura ti teksto

Para iti panangipamatmat kadagiti bloke ti teksto a naikkat usaren ti <del>etiketa.

~~Daytoy a linia ti teksto ket nairanta a matrato a kas naikkat a teksto.~~

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

Strikethrough ti teksto

Para iti panangipamatmat kadagiti bloke ti teksto a saanen a mainaig usaren ti <s>etiketa.

~~Daytoy a linia ti teksto ket nairanta a matrato a kas saanen nga umiso.~~

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

Naikabil ti teksto

Para iti panangipamatmat kadagiti nainayon iti dokumento usaren ti <ins>etiketa.

Daytoy a linia ti teksto ket nairanta a matrato a kas maysa a kanayonan iti dokumento.

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

Nagurit a teksto

Tapno maigurit ti teksto usarem ti <u>tag.

Daytoy a linia ti teksto ket mangiparang a kas iti nagurit

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

Usaren dagiti default nga emphasis tag ti HTML nga addaan kadagiti nalag-an nga estilo.

Bassit a teksto

Para iti panangikkat iti panangipaganetget iti inline wenno bloke ti teksto, usaren ti <small>tag tapno mangikeddeng iti teksto iti 85% ti kadakkel ti nagannak. Dagiti elemento ti paulo ket umawatda kadagiti bukodda font-sizepara kadagiti naisanglad <small>nga elemento.

Mabalinmo ti alternatibo nga agusar ti inline nga elemento nga addaan .smalliti kasukat ti ania man <small>.

Daytoy a linia ti teksto ket nairanta a matrato a kas napino a letra.

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

Naingel

Para iti panangipaganetget iti snippet ti teksto nga addaan iti nadagdagsen a font-weight.

Ti sumaganad a snippet ti teksto ket naiparang a kas nalukmeg a teksto .

<strong>rendered as bold text</strong>

Dagiti Italiko

Para iti panangipaganetget iti maysa a snippet ti teksto nga addaan iti italiko.

Ti sumaganad a snippet ti teksto ket naiparang a kas naitaliko a teksto .

<em>rendered as italicized text</em>

Agsinnublat nga elemento

Marikna a nawaya nga usaren <b>ken <i>iti HTML5. <b>ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg bayat <i>a kaaduanna ket para iti timek, teknikal a termino, kdpy.

Dagiti klase ti panagtunos

Nalaka nga i-realign ti teksto kadagiti paset nga addaan kadagiti klase ti panagtunos ti teksto.

Naitunos iti kannigid a teksto.

Naitunos iti sentro a teksto.

Kannawan a naitunos a teksto.

Nainkalintegan a teksto.

Awan ti wrap text.

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

Dagiti klase ti panagbalbaliw

Baliwan ti teksto kadagiti paset nga addaan kadagiti klase ti kapitalisasion ti teksto.

Basbassit a teksto.

Dakkel a letra ti teksto.

Nakapital a teksto.

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

Dagiti abbreviation

Estilo a pannakaipatungpal ti <abbr>elemento ti HTML para kadagiti abbreviation ken acronym tapno maipakita ti napalawa a bersion iti hover. Dagiti abbrevio nga addaan iti titleattribute ket addaan iti nalawag a tulnek a baba a beddeng ken ti kursor ti tulong iti panag-hover, a mangipaay ti kanayonan a konteksto iti panag-hover ken kadagiti agar-aramat kadagiti makatulong a teknolohia.

Pangrugian nga abbreviation

Ti maysa nga abbreviation ti sao nga attribute ket attr .

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

Inisialismo nga

Inayon .initialismiti abbreviation para iti basbassit bassit a font-size.

HTML ti kasayaatan a banag sipud idi naiwa a tinapay.

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

Dagiti Adres

Ipresentar ti impormasion a pakakontakan para iti kaasitgan nga inapo wenno ti intero a bagi ti trabaho. Ipreserba ti panagpormat babaen ti panangipatingga kadagiti amin a linia iti <br>.

Twitter, Inc.
1355 Kalsada ti Merkado, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Buo a Nagan
[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>

Dagiti sitas ti bloke

Para iti panangadaw kadagiti bloke ti linaon manipud iti sabali a taudan iti uneg ti dokumentom.

Default nga blockquote

Balkoten <blockquote>ti aniaman nga HTML kas quote. Para kadagiti diretso a sitas, irekomendarmi ti <p>.

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

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

Blockquote dagiti pagpilian

Dagiti panagbalbaliw ti estilo ken linaon para kadagiti simple a panagduduma iti maysa a pagalagadan <blockquote>.

Panagnagan iti maysa a gubuayan

Inayon ti <footer>para iti panangilasin iti gubuayan. Balkoten ti nagan ti taudan nga obra iti <cite>.

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

Maysa a nalatak iti Source Title

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

Agsinnublat dagiti display

Inayon .blockquote-reversepara iti blockquote nga addaan iti kannawan a naitunos a linaon.

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

Maysa a nalatak iti Source Title

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

Dagiti Listaan

Di naurnos

Listaan dagiti banag a saan a nalawag a napateg ti urnos.

Lorem ipsum dolor agtugaw amet
Consectetur nga adipiscing nga elit
Integer nga molestie lorem iti masa
Facilisis iti pretium nisl nga aliquet
Nulla volutpat nga aliquam nga velit
- Phasellus nga iaculis nga neque
- Purus dagiti sodales nga ultricies
- Vestibulum nga laoreet nga porttitor sem
- Ac tristique nga libero nga volutpat ni
Faucibus porta nga lakos nga fringilla vel
Aenean agtugaw amet erat nunc
Eget nga porttitor nga lorem

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

Nabilin

Listaan dagiti banag a ti urnos ket nalawag a napateg.

Lorem ipsum dolor agtugaw amet
Consectetur nga adipiscing nga elit
Integer nga molestie lorem iti masa
Facilisis iti pretium nisl nga aliquet
Nulla volutpat nga aliquam nga velit
Faucibus porta nga lakos nga fringilla vel
Aenean agtugaw amet erat nunc
Eget nga porttitor nga lorem

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

Saan nga estilo

Ikkaten ti default list-styleken kannigid a margin kadagiti banag ti listaan (dagiti dagus nga ubbing laeng). Daytoy ket agaplikar laeng kadagiti dagus a banag ti listaan dagiti ubbing , kayatna a sawen a kasapulam nga inayon ti klase para kadagiti ania man a naisanglad a listaan pay.

Lorem ipsum dolor agtugaw amet
Consectetur nga adipiscing nga elit
Integer nga molestie lorem iti masa
Facilisis iti pretium nisl nga aliquet
Nulla volutpat nga aliquam nga velit
- Phasellus nga iaculis nga neque
- Purus dagiti sodales nga ultricies
- Vestibulum nga laoreet nga porttitor sem
- Ac tristique nga libero nga volutpat ni
Faucibus porta nga lakos nga fringilla vel
Aenean agtugaw amet erat nunc
Eget nga porttitor nga lorem

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

Inline nga

Ikabil amin a banag ti listaan iti maymaysa a linia nga addaan display: inline-block;ken sumagmamano a nalag-an a padding.

Lorem nga ipsum
Phasellus nga iaculis
Nulla nga volutpat

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

Panangiladawan

Listaan dagiti termino nga addaan kadagiti nainaig a panangiladawan kadagitoy.

Dagiti listaan ti panangiladawan: Ti listaan ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Euismod nga: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit nga saan nga mi porta gravida iti eget metus.
Malesuada nga porta: Etiam porta sem malesuada nga agtagibalay nga euismod.

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

Paisaad nga deskripsion

Mangaramid kadagiti termino ken deskripsion nga <dl>agpila nga agkakadua. Mangrugi a naurnong a kas ti default <dl>nga s, ngem no ti navbar ket lumawa, isu nga aramiden dagitoy.

Dagiti listaan ti panangiladawan: Ti listaan ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Euismod nga: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit nga saan nga mi porta gravida iti eget metus.
Malesuada nga porta: Etiam porta sem malesuada nga agtagibalay nga euismod.
Felis euismod nga semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimentum nibh, ut fermentum masa laeng agtugaw amet risus.

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

Auto-panagputed

Dagiti horizontal a listaan ti panangiladawan ket mangputed kadagiti termino nga atiddog unay tapno maibagay iti kannigid a kolum babaen ti text-overflow. Kadagiti akikid a viewport, agbaliwda iti default a naurnong a layout.

Inline nga

Balkoten dagiti inline a snippet ti kodigo babaen ti<code> .

Kas pagarigan, <section>rumbeng a mabalkot kas inline.

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

Input ti agar-aramat

Usaren ti<kbd> tapno mangipakita ti input a gagangay a maiserrek babaen ti teklado.

Tapno agbaliw dagiti direktorio, i-type a cdsarunuen ti nagan ti direktorio.
Tapno ma-edit dagiti setting, i-press 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>

Basic nga bloke

Usaren <pre>para iti adu a linia ti kodigo. Siguraduen a makalisi iti aniaman a bracket ti anggulo iti kodigo para iti umno a panagiparang.

<p>Pagarigan a teksto ditoy...</p>

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

Mabalinmo a pagpilian nga inayon ti .pre-scrollableklase, a mangikeddeng ti max-height iti 350px ken mangipaay ti y-axis scrollbar.

Dagiti Variable

Para iti panangipamatmat kadagiti variable usaren ti <var>tag.

y = m x + b nga

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

Sample nga output

Para kadagiti mangipakita kadagiti bloke sample output manipud iti maysa a programa usaren ti <samp>tag.

Daytoy a teksto ket nairanta a matrato a kas pagarigan a rimmuar manipud iti programa ti kompiuter.

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

Pangrugian a pagarigan

Para iti kangrunaan nga estilo—nalag-an a padding ken dagiti laeng horizontal divider—inayonmo ti base class .tableiti aniaman a <table>. Mabalin a kasla super redundant, ngem gapu ti nasaknap a panagusar kadagiti lamisaan para kadagiti sabali a plugin a kas dagiti kalendario ken dagiti agpili ti petsa, pinilimi nga isina dagiti kostumbre nga estilo ti lamisaanmi.

Opsional a kapsion ti lamisaan.
#	Nagan	Apelyido	Nagan ti agar-aramat
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Dagiti garitgaritan a hilera

Usaren .table-stripeda manginayon ti zebra-striping iti ania man a hilera ti lamisaan iti uneg ti <tbody>.

Panagtunos ti krus-browser

Dagiti garitgaritan a lamisaan ket naistilo babaen ti :nth-childCSS selector, a saan a magun-od iti Internet Explorer 8.

#	Nagan	Apelyido	Nagan ti agar-aramat
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Nabeddengan ti lamisaan

Inayon .table-borderedpara kadagiti beddeng iti amin a sikigan ti lamisaan ken selula.

#	Nagan	Apelyido	Nagan ti agar-aramat
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

I-hover dagiti hilera

Inayon .table-hovertapno mapalubosan ti estado ti hover kadagiti hilera ti lamisaan iti uneg ti maysa a <tbody>.

#	Nagan	Apelyido	Nagan ti agar-aramat
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ni Larry	ti Tumatayab	@twitter nga

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

Napaababa a lamisaan

Inayon .table-condensedtapno ad-adda a kompakto dagiti lamisaan babaen ti panangputed iti cell padding iti kagudua.

#	Nagan	Apelyido	Nagan ti agar-aramat
1 nga	Marka	Otto ni Otto	@mdo nga
2. 2	Jacob ni Jacob	Thornton nga	@nalukmeg
3.	Larry ti Tumatayab		@twitter nga

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

Dagiti klase ti konteksto

Usaren dagiti klase ti konteksto tapno mangkolor kadagiti hilera ti lamisaan wenno dagiti indibidual a selula.

Klase	Panangiladawan
`.active`	Iyaplikar ti kolor ti hover iti partikular a hilera wenno selula
`.success`	Ipamatmatna ti naballigi wenno positibo nga aramid
`.info`	Ipamatmatna ti neutral nga impormatibo a panagbalbaliw wenno panagtignay
`.warning`	Ipamatmatna ti pakdaar a mabalin a kasapulan ti atension
`.danger`	Ipamatmatna ti napeggad wenno mabalin a negatibo nga aramid

#	Paulo ti kolum	Paulo ti kolum	Paulo ti kolum
1 nga	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
2. 2	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
3.	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
4.	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
5.	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
6.	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
7 nga	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
8 nga	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum
9 nga	Linaon ti kolum	Linaon ti kolum	Linaon ti kolum

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

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan iti maysa a linia ti lamisaan wenno indibidual a selula ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – a kas dagiti managbasa ti iskrin. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (ti makita a teksto iti mainaig a linia/selula ti lamisaan), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.

Dagiti sumungsungbat a lamisaan

Mangpartuat kadagiti makasungbat a lamisaan babaen ti panangbalkot ti ania man nga .tablein .table-responsivetapno agbalin dagitoy nga ag-scroll a paidasig kadagiti babassit nga alikamen (iti baba ti 768px). No agbuya iti ania man a dakdakkel ngem 768px ti kalawana, saanmo a makita ti ania man a nagdumaan kadagitoy a lamisaan.

Bertikal a panagputed/pannakaputed

Dagiti makasungbat a lamisaan ket agus-usar ti overflow-y: hidden, a mang-clip off ti ania man a linaon a lumablabas iti baba wenno ngato nga igid ti lamisaan. Nangnangruna, daytoy ket mabalinna nga i-clip off dagiti dropdown a menu ken dagiti dadduma pay a third-party a widget.

Firefox ken dagiti fieldset

Ti Firefox ket addaan kadagiti sumagmamano a makauma nga estilo ti fieldset a mairaman widtha mangsinga iti sumungbat a lamisaan. Daytoy ket saan a mabalin a mabaliwan no awan ti Firefox-espesipiko a hack a saanmi nga ipaay iti Bootstrap:

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

Para iti ad-adu pay nga impormasion, basaen daytoy a sungbat ti Stack Overflow .

#	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan
1 nga	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
2. 2	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
3.	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan

#	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan
1 nga	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
2. 2	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
3.	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan

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

Pangrugian a pagarigan

Dagiti indibidual a kontrol ti porma ket automatiko nga umawatda ti sumagmamano a sangalubongan nga estilo. Amin a tekstual <input>, <textarea>, ken <select>dagiti elemento nga addaan .form-controlket naikeddeng iti width: 100%;babaen ti kasisigud. Balkoten dagiti etiketa ken kontrol .form-grouppara iti kasayaatan nga espasyo.

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

Dimo paglaoken dagiti grupo ti porma kadagiti grupo ti input

Dimo paglaoken dagiti grupo ti porma a direkta kadagiti grupo ti input . Imbes ketdi, i-nest ti grupo ti input iti uneg ti grupo ti porma.

Inline nga porma

Inayon .form-inlineiti pormam (a saan a kasapulan a maysa a <form>) para kadagiti kannigid-a-naitunos ken inline-block a kontrol. Daytoy ket agaplikar laeng kadagiti porma iti uneg dagiti viewport a saan a basbassit ngem 768px ti kalawana.

Mabalin a kasapulan dagiti kostumbre a kalawa

Dagiti input ken selects ket width: 100%;naipakat babaen ti default iti Bootstrap. Iti uneg dagiti inline a porma, i-resetmi dayta tapno width: auto;dagiti adu a kontrol ket mabalin nga agtaeng iti isu met laeng a linia. Depende iti layout-mo, mabalin a kasapulan dagiti kanayonan a kostumbre a kalawa.

Kanayon nga inayon dagiti etiketa

Marigatan dagiti screen reader kadagiti pormam no dimo iraman ti etiketa para iti tunggal input. Para kadagitoy nga inline a porma, mabalinmo nga ilemmeng dagiti etiketa babaen ti panagusar ti .sr-onlyklase. Adda dagiti kanayonan nga alternatibo a pamay-an ti panangipaay ti etiketa para kadagiti makatulong a teknolohia, a kas ti aria-label, aria-labelledbywenno titleattribute. No awan kadagitoy ti adda, dagiti agbasbasa iti iskrin ket mabalinda ti agpatulong iti panagusar ti placeholderattribute, no adda, ngem laglagipen a ti panagusar ti placeholderkas kasukat dagiti sabali a pamay-an ti panagmarka ket saan a maibalakad.

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

Paisaad a porma

Usaren dagiti nasakbay a naikeddeng a klase ti grid ti Bootstrap tapno mangitunos kadagiti etiketa ken dagiti grupo dagiti kontrol ti porma iti maysa a horisontal a layout babaen ti pananginayon .form-horizontaliti porma (a saan a kasapulan a maysa <form>). Ti panagaramid iti daytoy ket mangbalbaliw .form-groupti s nga agtignay a kas dagiti hilera ti grid, isu a saan a kasapulan ti .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>

Nasuportaran dagiti kontrol

Dagiti pagarigan dagiti pagalagadan a kontrol ti porma a nasuportaran iti maysa a pagarigan a layout ti porma.

Dagiti Input

Kaaduan a gagangay a panangtengngel ti porma, dagiti tay-ak ti panagserrek a naibatay iti teksto. Iramanna ti suporta para kadagiti amin a kita ti HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ken color.

Masapul ti deklarasion ti i-type

Dagiti input ket naan-anay laeng a ma-estilo no ti da typeket umiso a naideklara.

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

Dagiti grupo ti input

Tapno manginayon ti naikaykaysa a teksto wenno dagiti buton sakbay ken/wenno kalpasan ti ania man a naibatay iti teksto <input>, kitaen ti paset ti grupo ti panagserrek .

Lugar ti Teksto

Kontrol ti porma a mangsuporta iti adu a linia ti teksto. Baliwan ti rowsattribute no kasapulan.

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

Dagiti checkbox ken radio

Dagiti kahon ti tsek ket para iti panagpili iti maysa wenno sumagmamano a pagpilian iti maysa a listaan, idinto ta dagiti radio ket para iti panagpili iti maysa a pagpilian manipud iti adu.

Dagiti baldado a kahon ti tsek ken dagiti radio ket nasuportaran, ngem tapno mangipaay ti "saan a maipalubos" a kursor iti hover ti nagannak <label>, kasapulam nga inayon ti .disabledklase iti nagannak .radio, .radio-inline, .checkbox, wenno .checkbox-inline.

Default (naurnong) .

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

Inline dagiti checkbox ken radio

Usaren ti .checkbox-inlinewenno .radio-inlinedagiti klase iti agsasaruno a kahon ti tsek wenno radio para kadagiti kontrol nga agparang iti isu met laeng a linia.

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

Dagiti checkbox ken radio nga awanan iti teksto ti etiketa

No awan koma ti teksto iti uneg ti <label>, ti input ket naiposision a kas ti namnamaem. Iti agdama ket agtrabaho laeng kadagiti saan nga inline a kahon ti tsek ken radio. Laglagipem nga ipaay pay laeng ti sumagmamano a porma ti etiketa para kadagiti makatulong a teknolohia (kas pagarigan, panagusar 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>

Pilien ti

Paliiwenyo nga adu a native select menu—nga isu ti Safari ken Chrome—ket addaan kadagiti nagtimbukel a suli a saan a mabalin a baliwan babaen border-radiuskadagiti properties.

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

Para <select>kadagiti kontrol nga addaan ti multipleattribute, dagiti adu a pagpilian ket maipakita babaen ti default.

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

Estatiko nga kontrol

No kasapulam nga ikabil ti plain text iti abay ti etiketa ti porma iti uneg ti porma, usarem ti .form-control-staticklase iti maysa a <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>

Kasasaad ti pokus

Ikkatenmi dagiti default outlinenga estilo kadagiti sumagmamano a kontrol ti porma ken iyaplikarmi ti box-shadowa iti lugarna para iti :focus.

Demo `:focus`nga estado

Ti pagarigan nga input iti ngato ket agus-usar kadagiti kostumbre nga estilo iti dokumentasionmi tapno maipakita ti :focusestado iti maysa a .form-control.

Kasasaad ti baldado

Inayon ti disabledboolean a kababalin iti maysa nga input tapno malapdan dagiti panagtitinnulong ti agar-aramat. Agparang a nalaglag-an dagiti baldado nga input ken mangnayon iti not-allowedkursor.

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

Nabaldado dagiti fieldset

Inayon ti disabledattribute iti a <fieldset>tapno mapasardeng amin dagiti kontrol iti uneg ti <fieldset>maminsan.

Pakdaar maipapan iti panagandar ti silpo ti`<a>`

Babaen ti kasisigud, dagiti browser ket tratuendanto amin dagiti katutubo a kontrol ti porma ( <input>, <select>ken <button>dagiti elemento) iti uneg ti a a <fieldset disabled>kas baldado, a manglapped ti agpada a panagtitinnulong ti teklado ken mouse kadagitoy. Nupay kasta, no ti pormam ket mangiraman pay kadagiti <a ... class="btn btn-*">elemento, dagitoy ket maited laeng ti estilo ti pointer-events: none. Kas naibagbaga iti benneg maipapan ti baldado nga estado para kadagiti buton (ken espesipiko iti sub-seksion para kadagiti elemento ti angkla), daytoy a tagikua ti CSS ket saan pay a naistandard ken saan a naan-anay a nasuportaran iti Opera 18 ken iti baba, wenno iti Internet Explorer 11, ken nangabak 't lapdan dagiti agar-aramat ti teklado manipud iti pannakabalin a mangipamaysa wenno mangpaaktibo kadagitoy a silpo. Isu a tapno natalgedka, agusarka iti custom a JavaScript tapno mapasardeng dagiti kasta a link.

Panagtunos ti krus-browser

Bayat nga iyaplikar ti Bootstrap dagitoy nga estilo kadagiti amin a browser, ti Internet Explorer 11 ken iti baba ket saan a naan-anay a mangsuporta ti disabledattribute iti maysa a <fieldset>. Usaren ti kostumbre a JavaScript tapno mapasardeng ti fieldset kadagitoy a browser.

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

Basaen laeng ti estado

Inayon ti readonlyboolean a kababalin iti maysa nga input tapno malapdan ti pannakabalbaliw ti pateg ti input. Agparang a nalaglag-an dagiti mabasa laeng nga input (kas met laeng kadagiti nabaldado nga input), ngem pagtalinaeden ti gagangay a kursor.

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

Teksto ti tulong

Teksto ti tulong ti lebel ti bloke para kadagiti kontrol ti porma.

Pananginaig ti teksto ti tulong kadagiti kontrol ti porma

Ti teksto ti tulong ket rumbeng a nalawag a nainaig iti panagtengngel ti porma a mainaig daytoy iti panagusar ti aria-describedbyattribute. Daytoy ket mangsigurado a dagiti makatulong a teknolohia – kas kadagiti screen reader – ket mangipakaammo iti daytoy a teksto ti tulong no ti agar-aramat ket agpokus wenno sumrek iti kontrol.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Kuna ti panangipaneknek

Ti Bootstrap ket mangiraman kadagiti estilo ti panangipaneknek para iti biddut, pakdaar, ken dagiti estado ti balligi kadagiti kontrol ti porma. Tapno mausar, inayon .has-warningti , .has-error, wenno .has-successiti nagannak nga elemento. Ania man a .control-label, .form-control, ken .help-blockiti uneg dayta nga elemento ket umawatto kadagiti estilo ti panangipaneknek.

Ti panangipatulod ti estado ti panangipaneknek kadagiti makatulong a teknolohia ken dagiti agar-aramat a colorblind

Ti panagusar kadagitoy nga estilo ti panangipaneknek tapno mangipakpakita ti kasasaad ti maysa a panagtengngel ti porma ket mangipaay laeng ti makita, naibatay iti kolor a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia - a kas dagiti agbasbasa ti iskrin - wenno kadagiti agar-aramat a bulsek ti kolor.

Siguraduen a maited met ti alternatibo nga indikasion ti estado. Kas pagarigan, mabalinmo nga iraman ti pammalubos maipapan ti estado iti <label>teksto a mismo ti kontrol ti porma (kas ti kaso iti sumaganad a pagarigan ti kodigo), iraman ti maysa a Glyphicon (nga addaan iti maitutop nga alternatibo a teksto nga agus-usar ti .sr-onlyklase - kitaen dagiti pagarigan ti Glyphicon ), wenno babaen ti panangipaay ti maysa kanayonan a tulong a bloke ti teksto . Espesipiko para kadagiti makatulong a teknolohia, dagiti saan nga umiso a panagtengngel ti porma ket mabalin pay a maituding ti maysa a aria-invalid="true"kababalin.

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

Adda dagiti opsional nga ikono

Mabalinmo pay ti manginayon kadagiti opsional nga ikono ti feedback babaen ti pannakainayon ti .has-feedbackken ti kannawan nga ikono.

Dagiti ikono ti feedback ket agtrabaho laeng kadagiti tekstual <input class="form-control">nga elemento.

Dagiti ikono, etiketa, ken dagiti grupo ti input

Ti manual a panagposision kadagiti ikono ti feedback ket kasapulan para kadagiti input nga awan ti etiketa ken para kadagiti grupo ti input nga addaan iti add-on iti kannawan. Maiparegtakayo unay a mangipaay kadagiti etiketa para kadagiti amin nga input para kadagiti rason ti pannakagun-od. No kayatmo a lapdan ti pannakaiparang dagiti etiketa, ilemmengmo dagitoy a kadua ti .sr-onlyklase. No masapul nga aramidem nga awan dagiti etiketa, baliwam ti toppateg ti ikono ti feedback. Para kadagiti grupo ti input, ilinteg ti rightpateg iti maitutop a pateg ti pixel depende iti kalawa ti addon-mo.

Panangipakaammo iti kaipapanan ti icon kadagiti makatulong a teknolohia

Tapno masigurado a dagiti makatulong a teknolohia – a kas dagiti agbasbasa iti iskrin – ket umiso a mangipakaammo ti kaipapanan ti maysa nga ikono, dagiti kanayonan a nailemmeng a teksto ket rumbeng a mairaman iti .sr-onlyklase ken nalawag a mainaig iti panagtengngel ti porma a mainaig iti panagusar aria-describedby. Iti sabali a wagas, siguraduen a ti kaipapanan (kas pagarigan, ti kinapudno nga adda ti pakdaar para iti partikular a tay-ak ti panagserrek ti teksto) ket maidanon iti sumagmamano a sabali a porma, a kas ti panagbalbaliw ti teksto ti aktual a <label>nainaig iti panagtengngel ti porma.

Urayno dagiti sumaganad a pagarigan ket dati a mangdakamat ti kasasaad ti panangipaneknek kadagiti bukodda a kontrol ti porma iti <label>teksto a mismo, ti tekniko iti ngato (nga agus -usar ti .sr-onlyteksto ken aria-describedby) ket nairaman para kadagiti mangiladawan a panggep.

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

Opsional nga ikono kadagiti horizontal ken inline a porma

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

Opsional nga icon nga addaan kadagiti nailemmeng `.sr-only`nga etiketa

No usarem ti .sr-onlyklase a mangilemmeng ti maysa a porma a kontrol's <label>(imbes nga agusar kadagiti dadduma a pagpilian ti panagmarka, a kas ti aria-labelattribute), ti Bootstrap ket automatiko a mangbalbaliw ti posision ti ikono apaman a nainayon daytoy.

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

Kontrolado ti panagdakkel

Mangikeddeng kadagiti kangato babaen ti panagusar kadagiti klase a kas ti .input-lg, ken mangikeddeng kadagiti kalawa babaen ti panagusar kadagiti klase ti adigi ti grid a kas ti .col-lg-*.

Panagdakkel ti katayag

Mangaramid kadagiti nataytayag wenno ab-ababa a kontrol ti porma a maitunos kadagiti kadakkel ti buton.

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

Paisaad a porma dagiti kadakkel ti grupo

Napardas a kadakkel dagiti etiketa ken porma dagiti kontrol iti uneg .form-horizontalbabaen ti pananginayon .form-group-lgwenno .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>

Panagdakkel ti adigi

Balkoten dagiti input kadagiti adigi ti grid, wenno ania man a kostumbre a nagannak nga elemento, tapno nalaka a maipatungpal dagiti tarigagayan a kalawa.

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

Dagiti etiketa ti buton

Usaren dagiti klase ti buton iti maysa<a> , <button>, wenno <input>elemento.

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

Konteksto-espesipiko a panagusar

Bayat a dagiti klase ti buton ket mabalin nga usaren kadagiti elemento <a>ken <button>dagiti elemento, dagiti laeng <button>elemento ti masuportaran iti uneg dagiti pasettayo ti nav ken navbar.

Dagiti silpo nga agtigtignay kas buton

No dagiti <a>elemento ket maus-usar nga agtignay a kas dagiti buton – a mangtignay ti panagusar iti uneg ti panid, imbes a mangiturong iti sabali a dokumento wenno benneg iti uneg ti agdama a panid – rumbeng met a maited kadakuada ti maitutop role="button".

Panagparang ti krus-browser

Kas kasayaatan nga aramid, irekomendarmi unay ti panangusar iti <button>elemento no mabalin tapno masigurado ti panagtunos ti panagiparang ti krus-browser.

Malaksid kadagiti dadduma pay a banag, adda ti bug iti Firefox <30 a manglapped kadatayo a mangikeddeng kadagiti line-heightof <input>-based a buton, a pakaigapuan dagitoy a saan nga eksakto a maitunos iti kangato dagiti dadduma a buton iti Firefox.

Dagiti Pagpilian

Usaren ti ania man kadagiti magun-od a klase ti buton tapno napardas a mangpartuat ti estilo a buton.

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

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan iti maysa a buton ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – a kas dagiti managbasa ti iskrin. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (ti makita a teksto ti buton), wenno mairaman babaen dagiti alternatibo a pamay-an, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.

Dagiti Kadakkel

Magarbo a dakdakkel wenno basbassit a butones? Inayon ti .btn-lg, .btn-sm, wenno .btn-xspara kadagiti kanayonan a kadakkel.

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

Mangaramid kadagiti buton ti block level—dagidiay mangsaklaw iti naan-anay a kalawa ti maysa a nagannak— babaen ti pananginayon iti .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>

Aktibo nga estado

Agparang dagiti buton a naiprenta (nga addaan iti natayengteng a likudan, natayengteng a beddeng, ken inset nga anniniwan) no aktibo. Para <button>kadagiti elemento, daytoy ket maaramid babaen ti :active. Para <a>kadagiti elemento, naaramid dayta babaen ti .active. Nupay kasta, mabalinmo nga usaren .activeiti <button>s (ken iraman ti aria-pressed="true"attribute) no kasapulam a tuladen ti aktibo nga estado iti programatiko.

Elemento ti buton

Saan a kasapulan ti mangnayon :activeta pseudo-klase dayta, ngem no kasapulam a piliten ti isu met laeng a panagparang, sige ket inayonmo .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>

Angkla nga elemento

Inayon ti .activeklase kadagiti <a>buton.

Panguna a silpo Inaig

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

Kasasaad ti baldado

Pagbalinem a kasla saan a mai-click dagiti buton babaen ti panangikusna manen kadagita babaen ti opacity.

Elemento ti buton

Inayon ti disabledattribute kadagiti <button>buton.

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

Panagtunos ti krus-browser

No inayonmo ti disabledattribute iti a <button>, ti Internet Explorer 9 ken iti baba ket mangiparang iti teksto nga abuabu nga addaan iti naalas a text-shadow a ditay mabalin nga ilinteg.

Angkla nga elemento

Inayon ti .disabledklase kadagiti <a>buton.

Panguna a silpo Inaig

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

Usarenmi a .disabledkas maysa a klase ti utilidad ditoy, a kapada ti gagangay a .activeklase, isu nga awan ti kasapulan a pangrugian.

Pakdaar ti panagandar ti silpo

Daytoy a klase ket agus-usar pointer-events: nonea mangpadas a mangbaldado ti panagusar ti silpo ti <a>s, ngem dayta a tagikua ti CSS ket saan pay a naistandard ken saan a naan-anay a nasuportaran iti Opera 18 ken iti baba, wenno iti Internet Explorer 11. Mainayon pay, urayno kadagiti browser nga agaramid ti suporta pointer-events: none, teklado agtalinaed a saan a naapektaran ti nabigasion, kayatna a sawen a dagiti makakita nga agus-usar iti teklado ken dagiti agus-usar kadagiti makatulong a teknolohia ket makabaeldanto pay laeng a mangpaaktibo kadagitoy a silpo. Isu a tapno natalgedka, agusarka iti custom a JavaScript tapno mapasardeng dagiti kasta a link.

Dagiti makasungbat a ladawan

Dagiti ladawan iti Bootstrap 3 ket mabalin a maaramid a responsive-friendly babaen ti pannakainayon ti .img-responsiveklase. Daytoy ket agaplikar max-width: 100%;, height: auto;ken display: block;iti ladawan tapno daytoy ket ag-scale a nasayaat iti nagannak nga elemento.

Tapno mangisentro kadagiti ladawan nga agus-usar ti .img-responsiveklase, usaren .center-blockimbes a ti .text-center. Kitaen ti benneg dagiti klase ti katulongan para kadagiti ad-adu pay a detalye maipapan .center-blockti panagusar.

Dagiti ladawan ti SVG ken IE 8-10

Iti Internet Explorer 8-10, dagiti ladawan ti SVG nga addaan .img-responsiveket di proporsional ti kadakkelda. Tapno matarimaan daytoy, inayonmo width: 100% \9;no kasapulan. Saan nga automatiko nga iyaplikar ti Bootstrap daytoy ta mangpataud daytoy kadagiti komplikasion kadagiti dadduma a pormat ti ladawan.

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

Dagiti sukog ti ladawan

Inayon dagiti klase iti maysa nga <img>elemento tapno nalaka nga estilo dagiti ladawan iti ania man a proyekto.

Panagtunos ti krus-browser

Laglagipem a ti Internet Explorer 8 ket awanan iti suporta para kadagiti nagtimbukel a suli.

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

Dagiti kolor ti konteksto

Ipakaammo ti kaipapanan babaen ti kolor babaen ti sumagmamano a klase ti utilidad ti panangipaganetget. Dagitoy ket mabalin pay a maipakat kadagiti silpo ken agsipnget iti hover a kas met laeng kadagiti default nga estilo ti silpotayo.

Fusce dapibus, tellus ac lunod a komodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies lugan ut id elit.

Duis mollis, est saan a komodo a luctus, nisi erat a porttitor a ligula.

Maecenas sed diam eget risus varius blandit agtugaw amet saan a magna.

Etiam porta sem malesuada nga agtagibalay nga euismod.

Donec ullamcorper nulla nga saan nga auctor nga 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>

Panangtaming iti kinaespesipiko

No dadduma dagiti klase ti panangipaganetget ket saan a maipakat gapu ti kinaespesipiko ti sabali a mangpili. Iti kaaduan a kaso, ti umdas a panangliklik ket ti panangibalkot iti tekstom iti a a <span>kadua ti klase.

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (dagiti kolor ti konteksto ket maus-usar laeng a mangpatibker ti kaipapanan a dati nga adda iti teksto/markup), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase .

Dagiti konteksto a likudan

Kasla dagiti klase ti kolor ti teksto ti konteksto, nalaka nga ikeddeng ti likudan ti maysa nga elemento iti ania man a klase ti konteksto. Agsipnget dagiti paset ti angkla iti hover, kas met laeng kadagiti klase ti teksto.

Nullam id dolor id nibh ultricies lugan ut id elit.

Duis mollis, est saan a komodo a luctus, nisi erat a porttitor a ligula.

Maecenas sed diam eget risus varius blandit agtugaw amet saan a magna.

Etiam porta sem malesuada nga agtagibalay nga euismod.

Donec ullamcorper nulla nga saan nga auctor nga 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>

Panangtaming iti kinaespesipiko

No dadduma dagiti konteksto a klase ti likudan ket saan a maipakat gapu ti kinaespesipiko ti sabali a mangpili. Iti dadduma a kaso, ti umdas a panagliklik ket ti panangibalkot ti linaon ti elementom iti a <div>iti klase.

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Kas kadagiti konteksto a kolor , siguraduen nga aniaman a kaipapanan a maidanon babaen ti kolor ket maidanon met iti pormat a saan laeng a presentasion.

Iserram ti ikono

Usaren ti generic close icon para iti panangilaksid ti linaon a kas dagiti modal ken alerto.

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

Dagiti Caret

Usaren dagiti caret a mangipakita iti dropdown functionality ken direksion. Imutektekanyo a ti default a caret ket automatiko a mangbaliktad kadagiti dropup menu .

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

Napartak nga agtaytayab

Ilugan ti maysa nga elemento iti kannigid wenno kannawan nga addaan iti maysa a klase. !importantket nairaman tapno maliklikan dagiti isyu ti kinaespesipiko. Mabalin met nga usaren dagiti klase kas mixin.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Dagiti bloke ti linaon ti sentro

Itakderan ti maysa nga elemento iti display: blockken sentro babaen ti margin. Magun-od kas mixin ken klase.

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

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

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

Clearfix nga

Nalaka a ikkaten floatti s babaen ti pananginayon .clearfix iti nagannak nga elemento . Usarenna ti micro clearfix kas pinalatak ni Nicolas Gallagher. Mabalin met nga usaren a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  .clearfix();
}

Panangipakita ken panangilemmeng iti linaon

Piliten ti maysa nga elemento a maipakita wenno mailemmeng ( agraman para kadagiti agbasbasa iti iskrin ) babaen ti panagusar ti .showken .hiddendagiti klase. Dagitoy a klase ket agus-usar !importanttapno maliklikan dagiti panagsusuppiat ti espesipiko, a kas met laeng dagiti napardas a panagtaytayab . Dagitoy ket magun-od laeng para iti block level toggling. Mabalin met nga usaren dagitoy a kas mixin.

.hideket magun-od, ngem saan a kanayon nga apektaranna dagiti agbasbasa ti iskrin ken saanen a maus-usar manipud iti v3.0.1. Usaren ti .hiddenwenno .sr-onlyimbes ketdi.

Iti pay maipatinayon, .invisiblemabalin nga usaren a mangbalbaliw laeng ti pannakakita ti maysa nga elemento, a ti kayatna a sawen displayket saan a nabaliwan ken ti elemento ket mabalinna pay laeng nga apektaran ti panagayus ti dokumento.

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

Linaon ti nabigasion ti screen reader ken teklado

Ilemmeng ti maysa nga elemento kadagiti amin nga alikamen malaksid kadagiti screen reader nga addaan iti .sr-only. Pagtiponen .sr-onlyti .sr-only-focusabletapno maipakita manen ti elemento no daytoy ket naipamaysa (kas pagarigan babaen ti maysa a teklado-laeng nga agar-aramat). Kasapulan para iti panangsurot kadagiti kasayaatan nga aramid ti pannakagun-od . Mabalin met nga usaren a kas 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();
}

Panangsukat iti ladawan

Usaren ti .text-hideklase wenno mixin tapno makatulong a mangsukat ti linaon ti teksto ti maysa nga elemento iti ladawan ti likudan.

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

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

Para iti naparpartak a mobile-friendly a panagrang-ay, usaren dagitoy a klase ti utilidad para iti panangipakita ken panangilemmeng ti linaon babaen ti alikamen babaen ti panagsaludsod ti media. Nairaman pay dagiti klase ti utilidad para iti panagbalbaliw ti linaon no maimaldit.

Padasem nga usaren dagitoy iti limitado a pamay-an ken liklikam ti mangparnuay kadagiti interamente a naiduma a bersion ti isu met laeng a site. Imbes ketdi, usarem dagitoy a mangkomplemento iti presentasion ti tunggal alikamen.

Magun-odan dagiti klase

Usaren ti maymaysa wenno kombinasion dagiti magun-od a klase para iti panagbalbaliw ti linaon iti ballasiw dagiti puntos ti panagsardeng ti viewport.

	Ekstra a babassit nga alikamenDagiti telepono (<768px) .	Bassit nga alikamenDagiti tableta (≥768px) .	Kalalainganna nga alikamenDagiti lamisaan (≥992px) .	Dakkel nga alikamenDagiti lamisaan (≥1200px) .
`.visible-xs-*`	Makita	Naidulin	Naidulin	Naidulin
`.visible-sm-*`	Naidulin	Makita	Naidulin	Naidulin
`.visible-md-*`	Naidulin	Naidulin	Makita	Naidulin
`.visible-lg-*`	Naidulin	Naidulin	Naidulin	Makita
`.hidden-xs`	Naidulin	Makita	Makita	Makita
`.hidden-sm`	Makita	Naidulin	Makita	Makita
`.hidden-md`	Makita	Makita	Naidulin	Makita
`.hidden-lg`	Makita	Makita	Makita	Naidulin

Manipud iti v3.2.0, dagiti .visible-*-*klase para iti tunggal maysa a breakpoint ket umay kadagiti tallo a panagduduma, maysa para iti tunggal maysa displaya pateg ti sanikua ti CSS a nailista iti baba.

Grupo ti klase	CSS nga`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Isu a, para kadagiti ekstra a babassit ( xs) nga iskrin kas pagarigan, dagiti magun-od .visible-*-*a klase ket: .visible-xs-block, .visible-xs-inline, ken .visible-xs-inline-block.

Dagiti klase .visible-xs, .visible-sm, .visible-md, ken .visible-lgadda pay, ngem saanen a maus-usar manipud iti v3.2.0 . Dagitoy ket agarup a katupag ti .visible-*-block, malaksid kadagiti kanayonan nga espesial a kaso para kadagiti elemento a mainaig iti panag- <table>toggling.

Dagiti klase ti panagimprenta

Kas kadagiti regular a sumungbat a klase, usarem dagitoy para iti panangi-toggling iti linaon para iti panagimaldit.

Dagiti Klase	Browser nga	I-print
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Naidulin	Makita
`.hidden-print`	Makita	Naidulin

Adda met ti klase .visible-printngem saanen a maus-usar manipud iti v3.2.0. Daytoy ket agarup a katupag ti .visible-print-block, malaksid kadagiti kanayonan nga espesial a kaso para kadagiti <table>-mainaig nga elemento.

Dagiti kaso ti pagsubok

Baliwam ti kadakkel ti browsermo wenno ikargam kadagiti nadumaduma nga alikamen tapno masubok dagiti makasungbat a klase ti utilidad.

Makita iti...

Dagiti berde a marka ti tsek ket mangipakita a ti elemento ket makita iti agdama a viewport-mo.

Ekstra nga bassit ✔ Makita iti x-small

Bassit ✔ Makita iti bassit

Medio ✔ Makita iti medium

Dakkel ✔ Makita iti dakkel

Extra bassit ken bassit ✔ Makita iti x-bassit ken bassit

Kalalainganna ken dakkel ✔ Makita iti kalalainganna ken dakkel

Extra bassit ken kalalainganna ✔ Makita iti x-bassit ken kalalainganna

Bassit ken dakkel ✔ Makita iti bassit ken dadakkel

Extra bassit ken dakkel ✔ Makita iti x-bassit ken dakkel

Bassit ken kalalainganna ✔ Makita iti bassit ken kalalainganna

Nailemmeng iti...

Ditoy, dagiti berde a marka ti tsek ket mangipakita pay a ti elemento ket nailemmeng iti agdama a viewport-mo.

Ekstra nga bassit ✔ Nailemmeng iti x-small

Bassit ✔ Nailemmeng iti bassit

Medio ✔ Nailemmeng iti medium

Dakkel ✔ Nailemmeng iti dakkel

Extra bassit ken bassit ✔ Nailemmeng iti x-bassit ken bassit

Kalalainganna ken dakkel ✔ Nailemmeng iti kalalainganna ken dakkel

Extra bassit ken kalalainganna ✔ Nailemmeng iti x-bassit ken kalalainganna

Bassit ken dakkel ✔ Nailemmeng iti bassit ken dadakkel

Extra bassit ken dakkel ✔ Nailemmeng iti x-bassit ken dakkel

Bassit ken kalalainganna ✔ Nailemmeng iti bassit ken kalalainganna

Ti CSS ti Bootstrap ket naibangon iti Less, ti maysa a preprosesor nga addaan kadagiti kanayonan a panagusar a kas dagiti variable, mixin, ken dagiti panagandar para iti panagtipon ti CSS. Dagidiay agsapsapul nga agusar kadagiti taudan a Basbassit a papeles imbes a dagiti naurnongtayo a CSS a papeles ket mabalinda nga usaren dagiti adu a variable ken dagiti mixin nga us-usarentayo iti intero a balangkas.

Dagiti variable ti Grid ken dagiti mixin ket masakupan iti uneg ti benneg ti sistema ti Grid .

Panagtipon ti Bootstrap

Ti bootstrap ket mabalin nga usaren iti saan a basbassit ngem dua a wagas: babaen ti naurnong a CSS wenno kadagiti taudan a Less a papeles. Tapno maurnong dagiti Basbassit a papeles, kitaen ti benneg ti Panangrugi para iti no kasano ti mangiset-up ti aglawlaw ti panagrang-aymo tapno mapataray dagiti kasapulan a bilin.

Dagiti ramit ti panagtipon ti maikatlo a partido ket mabalin nga agtrabaho iti Bootstrap, ngem dagitoy ket saan a suportado babaen ti kangrunaan a grupomi.

Dagiti Variable

Dagiti variable ket maus-usar iti intero a sibubukel a proyekto a kas maysa a wagas a mangisentralisa ken mangibinglay kadagiti kadawyan a maus-usar a pateg a kas dagiti kolor, panagsisina, wenno dagiti stack ti letra. Para iti naan-anay a pannakabingbingay, pangngaasi a kitaen ti Customizer .

Dagiti kolor

Nalaka laeng nga usaren ti dua nga eskema ti kolor: grayscale ken semantiko. Dagiti kolor ti abuabuo ket mangipaayda ti napardas a panagserrek kadagiti kadawyan a maus-usar a maris ti nangisit bayat a ti semantiko ket mangiraman kadagiti nadumaduma a kolor a naituding kadagiti addaan kaipapanan a konteksto a pateg.

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

Usaren ti ania man kadagitoy a variable ti kolor a kas dagitoy wenno ituding manen dagitoy kadagiti ad-adu a kaipapanan a variable para iti proyektom.

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

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

Andamio nga

Sumagmamano a variable para iti napardas a panangpasayaat kadagiti kangrunaan nga elemento ti iskeleton ti site-mo.

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

Dagiti silpo

Nalaka laeng nga estilo dagiti silpom iti umno a kolor nga addaan laeng iti maysa a pateg.

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

Imutektekanyo a ti @link-hover-coloragus-usar iti function, sabali pay a nakaam-amak nga alikamen manipud iti Less, tapno automatiko a mangparnuay iti umno a kolor ti hover. Mabalinmo nga usaren darkenti , lighten, saturate, ken desaturate.

Tipograpia

Nalaka nga i-set ti typeface, kadakkel ti teksto, leading, ken dadduma pay babaen ti sumagmamano a napartak a variable. Ti Bootstrap ket agus-usar kadagitoy pay tapno mangipaay kadagiti nalaka a tipograpiko a mixin.

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

Dagiti Ikono

Dua a napardas a variable para iti panangipasayaat ti lokasion ken nagan ti file dagiti ikonom.

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

Dagiti paset

Dagiti paset iti intero a Bootstrap ket agus-usar kadagiti sumagmamano a default a variable para iti panangisaad kadagiti gagangay a pateg. Adtoy dagiti kaaduan a maus-usar.

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

Dagiti mixins ti aglaklako

Dagiti mixin ti aglaklako ket dagiti mixin tapno makatulong a mangsuporta kadagiti adu a browser babaen ti panangiraman kadagiti amin a mainaig a pangrugian ti aglaklako iti naurnong a CSS-mo.

Panagdakkel ti kahon

I-reset ti modelo ti kahon dagiti components-mo babaen ti maymaysa a mixin. Para iti konteksto, kitaen daytoy a makatulong nga artikulo manipud iti Mozilla .

Ti mixin ket saanen a maus-usar manipud iti v3.2.0, nga addaan ti pannakaiyam-ammo ti Autoprefixer. Tapno mapreserba ti backwards-compatibility, ti Bootstrap ket agtultuloyto nga agusar ti mixin iti uneg aginggana ti Bootstrap v4.

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

Nagtimbukel a suli

Itatta amin a moderno a browser ket mangsuporta ti saan a naipangpangruna border-radiusa tagikua. Kas kasta, awan ti .border-radius()mixin, ngem ti Bootstrap ket talaga a mangiraman kadagiti ab-ababa a dalan para iti napardas a panagtimbukel ti dua a suli iti partikular a sikigan ti maysa a banag.

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

Kahon (Drop) nga anniniwan

No dagiti target audience-yo ket agus-usar kadagiti kaudian ken kadakkelan a browser ken alikamen, siguraduenyo nga usaren laeng ti box-shadowsanikua a bukodna. No kasapulam ti suporta para kadagiti daan nga Android (pre-v4) ken iOS devices (pre-iOS 5), usarem ti saanen a maus-usar a mixin tapno alaem ti kasapulan a -webkitprefix.

Ti mixin ket saan a maus- usar manipud iti v3.1.0, gapu ta ti Bootstrap ket saan nga opisial a mangsuporta kadagiti daanen a plataporma a saan a mangsuporta ti pagalagadan a tagikua. Tapno mapreserba ti backwards-compatibility, ti Bootstrap ket agtultuloyto nga agusar ti mixin iti uneg aginggana ti Bootstrap v4.

Siguraduenyo nga agusar kadagiti rgba()kolor kadagiti anniniwan ti kahon tapno agtipon dagitoy agingga a mabalin kadagiti background.

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

Dagiti Panagbalbaliw

Adu a mixins para iti flexibility. Itakderan amin nga impormasion ti panagbalbaliw babaen ti maysa, wenno ikeddeng ti naisina a pannakataktak ken kapaut no kasapulan.

Dagiti mixin ket saanen a maus-usar manipud iti v3.2.0, nga addaan ti pannakaiyam-ammo ti Autoprefixer. Tapno mapreserba ti backwards-compatibility, ti Bootstrap ket agtultuloyto nga agusar kadagiti mixins iti uneg aginggana ti Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Dagiti Panagbalbaliw

I-rotate, i-scale, ipatarus (iyakar), wenno i-skew ti aniaman a banag.

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

Dagiti Animasion

Ti maymaysa a mixin para iti panagusar kadagiti amin a tagikua ti animasion ti CSS3 iti maysa a deklarasion ken dagiti dadduma pay a mixin para kadagiti indibidual a tagikua.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacity nga

Itakderan ti opacity para kadagiti amin a browser ken mangipaay ti filterfallback para iti IE8.

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

Teksto ti placeholder

Mangted ti konteksto para kadagiti kontrol ti porma iti uneg ti tunggal tay-ak.

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

Dagiti Kolumna

Mangpataud kadagiti adigi babaen ti CSS iti uneg ti maymaysa nga elemento.

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

Dagiti Gradiente

Nalaka laeng a pagbalinen ti aniaman a dua a kolor a background gradient. Ad-adda nga advanced ken mangikeddeng iti direksion, agusar iti tallo a kolor, wenno agusar iti radial gradient. Babaen ti maymaysa a mixin makagun-odka amin dagiti prefixed syntaxes a kasapulam.

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

Mabalinmo pay nga ikeddeng ti anggulo ti gagangay a dua-kolor, linia a panagrang-ay:

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

No kasapulam ti barber-stripe style gradient, nalaka met dayta. Ibaga laeng ti maymaysa a kolor ket i-overlay tayo ti translucent white stripe.

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

Ipangato ti ante ken agusar ketdi iti tallo a kolor. Itakderan ti umuna a kolor, ti maikadua a kolor, ti panagsardeng ti kolor ti maikadua a kolor (maysa a porsiento a pateg a kas iti 25%), ken ti maikatlo a kolor babaen kadagitoy a mixin:

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

Ulo nga agpangato! No kasapulam pay nga ikkaten ti maysa a gradient, siguraduem nga ikkaten ti ania man nga IE-espesipiko filtera mabalin nga innayonmo. Mabalinmo nga aramiden dayta babaen ti panangusarmo iti .reset-filter()mixin iti abayna background-image: none;.

Dagiti mixin ti utilidad

Dagiti utilidad a mixin ket dagiti mixin a mangtipon kadagiti sabali a saan a nainaig a tagikua ti CSS tapno makagun-od ti espesipiko a panggep wenno trabaho.

Clearfix nga

Lipatan ti mangnayon class="clearfix"iti aniaman nga elemento ket imbes ketdi, inayon ti .clearfix()mixin no sadino a maitutop. Usaren ti mikro a clearfix manipud kenni Nicolas Gallagher .

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

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

Paisaad a panagsentro

Napartak nga isentro ti aniaman nga elemento iti uneg ti nagannakna. Kasapulan widthwenno max-widthmaituding.

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

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

Sizing dagiti katulongan

Ibaga dagiti dimension ti maysa a banag a nalaklaka.

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

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

Mabalin a mabaliwan ti kadakkel dagiti textareas

Nalaka nga ikonfigura dagiti pagpilian ti panagbalbaliw ti kadakkel para iti ania man a textarea, wenno ania man a sabali nga elemento. Default iti gagangay a kababalin ti browser ( both).

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

Panangputed iti teksto

Nalaka a putden ti teksto babaen ti ellipsis babaen ti maymaysa a mixin. Kasapulan ti elemento nga agbalin blockwenno inline-blocklevel.

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

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

Dagiti ladawan ti retina

Ibaga ti dua a dalan ti ladawan ken dagiti dimension ti ladawan ti @1x, ken ti Bootstrap ket mangipaayto ti panagsaludsod ti media ti @2x. No adu dagiti ladawan a pagserbiam, ibilangmo ti panangisuratmo iti CSS ti ladawanmo iti retina a manual iti maymaysa a media query.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bayat a ti Bootstrap ket naibangon iti Less, daytoy ket addaan pay ti opisial a puerto ti Sass . Mantenerenmi daytoy iti naisina a pagidulinan ti GitHub ken mangasikaso kadagiti panagpabaro babaen ti iskrip ti panagbalbaliw.

Ania ti nairaman

Gapu ta ti puerto ti Sass ket addaan iti naisina a repo ken agserserbi iti naiduma bassit a dumdumngeg, dagiti linaon ti proyekto ket naiduma unay manipud iti kangrunaan a proyekto ti Bootstrap. Daytoy ket mangsigurado a ti puerto ti Sass ket maitunos kadagiti adu a sistema a naibatay iti Sass aginggana a mabalin.

Dalan	Panangiladawan
`lib/`	Ruby gem code (Konfigurasion ti Sass, dagiti panagtipon ti Riles ken Kompas) .
`tasks/`	Dagiti iskrip ti konberter (panagturong ti upstream a Basbassit iti Sass) .
`test/`	Dagiti pagsubok ti panagtipon
`templates/`	Kompas nga pakete nga manipesto
`vendor/assets/`	Sass, JavaScript, ken dagiti file ti letra
`Rakefile`	Internal tasks, kas iti rake ken convert

Bisitaen ti pagidulinan ti GitHub ti puerto ti Sass tapno makita dagitoy a papeles nga agtigtignay.

Panakaipasdek

Para iti impormasion no kasano ti mangikabil ken agusar ti Bootstrap para iti Sass, kitaen ti pagidulinan ti GitHub a readme . Daytoy ti kaaduan a napabaro a taudan ken mangiraman ti impormasion a mausar kadagiti Rails, Compass, ken dagiti gagangay a proyekto ti Sass.

Bootstrap para sa Sass

CSS nga

Panangkita iti pakabuklan

Tipo ti dokto ti HTML5

Mobile nga umuna

Tipograpia ken dagiti silpo

Normalisar ti.css

Dagiti Pagkargaan

Sistema ti grid

Pauna

Dagiti saludsod ti media

Dagiti pagpilian iti grid

Kas pagarigan: Naurnong-agingga-iti-paidasig

Kas pagarigan: Pagkargaan ti pluido

Kas pagarigan: Mobile ken desktop

Kas pagarigan: Mobile, tablet, desktop

Kas pagarigan: Panagbalkot iti kolum

Responsibo nga i-reset ti kolum

Panang-offset kadagiti kolum

Dagiti adigi ti panagumok

Panag-order iti kolum

Basbassit dagiti mixins ken variables

Dagiti Variable

Dagiti mixin

Pagarigan ti panagusar

Tipograpia

Dagiti Paulo

h1. Bootstrap nga paulo

h2. Bootstrap nga paulo

h3. Bootstrap nga paulo

h4. Bootstrap nga paulo

h5. Bootstrap nga paulo

h6. Bootstrap nga paulo

h1. Paulo ti bootstrap Sekondario a teksto

h2. Paulo ti bootstrap Sekondario a teksto

h3. Paulo ti bootstrap Sekondario a teksto

h4. Paulo ti bootstrap Sekondario a teksto

h5. Paulo ti bootstrap Sekondario a teksto

h6. Paulo ti bootstrap Sekondario a teksto

Kopia ti bagi

Kopia ti bagi ti lead

Naibangon iti Basbassit

Inline nga elemento ti teksto

Namarkaan a teksto

Nabura ti teksto

Strikethrough ti teksto

Naikabil ti teksto

Nagurit a teksto

Bassit a teksto

Naingel

Dagiti Italiko

Agsinnublat nga elemento

Dagiti klase ti panagtunos

Dagiti klase ti panagbalbaliw

Dagiti abbreviation

Pangrugian nga abbreviation

Inisialismo nga

Dagiti Adres

Dagiti sitas ti bloke

Default nga blockquote

Blockquote dagiti pagpilian

Panagnagan iti maysa a gubuayan

Agsinnublat dagiti display

Dagiti Listaan

Di naurnos

Nabilin

Saan nga estilo

Inline nga

Panangiladawan

Paisaad nga deskripsion

Auto-panagputed

Kodigo nga

Inline nga

Input ti agar-aramat

Basic nga bloke

Dagiti Variable

Sample nga output

Dagiti Lamisaan

Pangrugian a pagarigan

Dagiti garitgaritan a hilera

Panagtunos ti krus-browser

Demo `:focus`nga estado

Pakdaar maipapan iti panagandar ti silpo ti`<a>`

Opsional nga icon nga addaan kadagiti nailemmeng `.sr-only`nga etiketa