Merrni pakësimin e pjesëve kryesore të infrastrukturës së Bootstrap, duke përfshirë qasjen tonë për zhvillimin më të mirë, më të shpejtë dhe më të fortë të uebit.

Doctype HTML5

Bootstrap përdor disa elementë HTML dhe veti CSS që kërkojnë përdorimin e tipit HTML5. Përfshijeni atë në fillim të të gjitha projekteve tuaja.

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

Së pari celulari

Me Bootstrap 2, ne shtuam stile opsionale miqësore për celularin për aspektet kryesore të kornizës. Me Bootstrap 3, ne e kemi rishkruar projektin për të qenë miqësor me celularin që nga fillimi. Në vend që të shtohen stile opsionale celulare, ato futen drejt e në thelb. Në fakt, Bootstrap është së pari celular . Stilet e para celulare mund të gjenden në të gjithë bibliotekën në vend të skedarëve të veçantë.

Për të siguruar paraqitjen e duhur dhe zmadhimin me prekje, shtoni meta-etiketën e portit të pamjes në tuajin tuaj <head>.

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

Mund të çaktivizoni aftësitë e zmadhimit në pajisjet celulare duke shtuar user-scalable=note etiketa meta e portit të pamjes. Kjo çaktivizon zmadhimin, që do të thotë se përdoruesit janë në gjendje vetëm të lëvizin dhe rezulton që faqja juaj të ndihet pak më shumë si një aplikacion vendas. Në përgjithësi, ne nuk e rekomandojmë këtë në çdo faqe, kështu që kini kujdes!

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

Tipografia dhe lidhjet

Bootstrap vendos stilet bazë globale të ekranit, tipografisë dhe lidhjeve. Konkretisht ne:

Vendosur background-color: #fff;nëbody
Përdorni atributet , dhe si bazën @font-family-basetonë @font-size-basetipografike@line-height-base
Vendosni ngjyrën globale të lidhjes nëpërmjet @link-colordhe aplikoni vetëm nënvizimet e lidhjes:hover

Këto stile mund të gjenden brenda scaffolding.less.

Normalizo.css

Për paraqitje të përmirësuar të ndër-shfletuesve, ne përdorim Normalize.css , një projekt nga Nicolas Gallagher dhe Jonathan Neal .

Kontejnerët

Bootstrap kërkon një element që përmban për të mbështjellë përmbajtjen e faqes dhe për të vendosur sistemin tonë të rrjetit. Ju mund të zgjidhni një nga dy kontejnerët për t'u përdorur në projektet tuaja. Vini re se, për shkak paddingdhe më shumë, asnjë kontejner nuk është i folezueshëm.

Përdorni .containerpër një enë të përgjegjshme me gjerësi fikse.

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

Përdoreni .container-fluidpër një kontejner me gjerësi të plotë, që përfshin të gjithë gjerësinë e portit tuaj të shikimit.

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

Bootstrap përfshin një sistem të përgjegjshëm, të lëvizshëm të rrjetit të lëngut të parë, që shkallëzohet në mënyrë të përshtatshme deri në 12 kolona ndërsa madhësia e pajisjes ose e pamjes rritet. Ai përfshin klasa të paracaktuara për opsione të thjeshta paraqitjeje, si dhe përzierje të fuqishme për gjenerimin e më shumë paraqitjeve semantike .

Prezantimi

Sistemet e rrjetit përdoren për krijimin e paraqitjeve të faqeve përmes një serie rreshtash dhe kolonash që strehojnë përmbajtjen tuaj. Ja se si funksionon sistemi i rrjetit Bootstrap:

Rreshtat duhet të vendosen brenda një .container(me gjerësi fikse) ose .container-fluid(me gjerësi të plotë) për shtrirjen dhe mbushjen e duhur.
Përdorni rreshta për të krijuar grupe horizontale të kolonave.
Përmbajtja duhet të vendoset brenda kolonave dhe vetëm kolonat mund të jenë fëmijë të menjëhershëm të rreshtave.
Klasat e paracaktuara të rrjetit pëlqejnë .rowdhe .col-xs-4janë të disponueshme për krijimin e shpejtë të paraqitjeve të rrjetit. Më pak përzierje mund të përdoren gjithashtu për më shumë paraqitje semantike.
Kolonat krijojnë ulluqe (boshllëqe midis përmbajtjes së kolonës) nëpërmjet padding. Ky mbushje kompensohet në rreshta për kolonën e parë dhe të fundit nëpërmjet marzhit negativ në .rows.
Marzhi negativ është arsyeja pse shembujt e mëposhtëm janë të vjetëruar. Është kështu që përmbajtja brenda kolonave të rrjetit është e rreshtuar me përmbajtje jo rrjetë.
Kolonat e rrjetit krijohen duke specifikuar numrin e dymbëdhjetë kolonave të disponueshme që dëshironi të shtrini. Për shembull, tre kolona të barabarta do të përdorin tre .col-xs-4.
Nëse më shumë se 12 kolona vendosen brenda një rreshti të vetëm, çdo grup kolonash shtesë, si një njësi, do të mbyllet në një rresht të ri.
Klasat e rrjetit zbatohen për pajisjet me gjerësi ekrani më të madhe se ose të barabartë me madhësitë e pikës së ndërprerjes dhe anashkalojnë klasat e rrjetit të synuara për pajisje më të vogla. Prandaj, p.sh. aplikimi i ndonjë .col-md-*klase në një element jo vetëm që do të ndikojë në stilin e tij në pajisjet mesatare, por edhe në pajisjet e mëdha nëse një .col-lg-*klasë nuk është e pranishme.

Shikoni shembujt për zbatimin e këtyre parimeve në kodin tuaj.

Pyetjet në media

Ne përdorim pyetjet e mëposhtme të medias në skedarët tanë Less për të krijuar pikat kryesore të ndërprerjes në sistemin tonë të rrjetit.

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

Ne zgjerojmë herë pas here këto pyetje mediatike për të përfshirë një max-widthpër të kufizuar CSS në një grup më të ngushtë pajisjesh.

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

Opsionet e rrjetit

Shihni se si funksionojnë aspektet e sistemit të rrjetit Bootstrap nëpër pajisje të shumta me një tabelë të dobishme.

	Pajisjet tepër të vogla Telefonat (<768 px)	Tableta të pajisjeve të vogla (≥768 px)	Pajisjet e mesme kompjuterike (≥992 px)	Desktop të pajisjeve të mëdha (≥1200 px)
Sjellja e rrjetit	Horizontal në çdo kohë	U rrëzua për të filluar, horizontale mbi pikat e ndërprerjes
Gjerësia e kontejnerit	Asnjë (auto)	750 px	970 px	1170 px
Parashtesa e klasës	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# e kolonave	12
Gjerësia e kolonës	Auto	~ 62 px	~ 81 px	~ 97 px
Gjerësia e ulluqit	30 px (15 px në secilën anë të një kolone)
Nestable	po
Kompensimet	po
Renditja e kolonave	po

Shembull: Stacked-to-horizontal

Duke përdorur një grup të vetëm .col-md-*klasash rrjeti, mund të krijoni një sistem bazë të rrjetit që fillon i grumbulluar në pajisjet celulare dhe pajisjet tablet (nga ekstra i vogël deri në të vogël) përpara se të bëhet horizontal në pajisjet desktop (të mesme). Vendosni kolonat e rrjetit në çdo .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Shembull: Enë me lëngje

Kthejeni çdo plan urbanistik me gjerësi fikse në një plan urbanistik me gjerësi të plotë duke ndryshuar pjesën tuaj të jashtme .containernë .container-fluid.

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

Shembull: Celular dhe desktop

A nuk dëshironi që kolonat tuaja thjesht të grumbullohen në pajisje më të vogla? Përdorni klasat shtesë të rrjetit të pajisjeve të vogla dhe të mesme duke shtuar .col-xs-* .col-md-*në kolonat tuaja. Shihni shembullin më poshtë për një ide më të mirë se si funksionon gjithçka.

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

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

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Shembull: celular, tablet, desktop

.col-sm-*Ndërtoni në shembullin e mëparshëm duke krijuar paraqitje edhe më dinamike dhe më të fuqishme me klasa tabletash .

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

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

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

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

Shembull: Mbështjellja e kolonës

Nëse më shumë se 12 kolona vendosen brenda një rreshti të vetëm, çdo grup kolonash shtesë, si një njësi, do të mbyllet në një rresht të ri.

.col-xs-9

.col-xs-4
Meqenëse 9 + 4 = 13 > 12, kjo ndarje me 4 kolona mbështillet në një linjë të re si një njësi e afërt.

.col-xs-6
Kolonat pasuese vazhdojnë përgjatë vijës së re.

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

Rivendos kolona të përgjegjshme

Me katër nivelet e rrjeteve të disponueshme, do të hasni në probleme ku, në pika të caktuara ndërprerjeje, kolonat tuaja nuk pastrohen fare mirë pasi njëra është më e gjatë se tjetra. Për ta rregulluar këtë, përdorni një kombinim të a .clearfixdhe klasave tona të shërbimeve të përgjegjshme .

.col-xs-6 .col-sm-3 Ndryshoni madhësinë e portit
tuaj të pamjes ose shikoni atë në telefonin tuaj për një shembull.

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

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

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

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

Përveç pastrimit të kolonës në pikat e ndërprerjes reaguese, mund t'ju duhet të rivendosni kompensimet, shtytjet ose tërheqjet . Shihni këtë në veprim në shembullin e rrjetit .

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

Kompensimi i kolonave

Zhvendosni kolonat në të djathtë duke përdorur .col-md-offset-*klasat. Këto klasa rrisin kufirin e majtë të një kolone me *kolona. Për shembull, .col-md-offset-4lëviz .col-md-4mbi katër kolona.

.col-md-4

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

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

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

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

Ju gjithashtu mund të anashkaloni kompensimet nga nivelet më të ulëta të rrjetit me .col-*-offset-0klasa.

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

Kolonat e folesë

Për të futur përmbajtjen tuaj me rrjetin e parazgjedhur, shtoni një .rowgrup të ri .col-sm-*kolonash brenda një .col-sm-*kolone ekzistuese. Rreshtat e mbivendosur duhet të përfshijnë një grup kolonash që shtojnë deri në 12 ose më pak (nuk kërkohet që të përdorni të 12 kolonat e disponueshme).

Niveli 1: .col-sm-9

Niveli 2: .col-xs-8 .col-sm-6

Niveli 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Renditja e kolonave

Ndryshoni me lehtësi rendin e kolonave tona të integruara të rrjetit me klasat .col-md-push-*dhe .col-md-pull-*modifikuesit.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-tërheq-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>

Më pak përzierje dhe variabla

Përveç klasave të parandërtuara të rrjetit për paraqitje të shpejta, Bootstrap përfshin më pak variabla dhe miks për gjenerimin e shpejtë të paraqitjeve tuaja të thjeshta semantike.

Variablat

Variablat përcaktojnë numrin e kolonave, gjerësinë e kanalit dhe pikën e pyetjes së medias në të cilën do të fillojnë kolonat lundruese. Ne i përdorim këto për të gjeneruar klasat e paracaktuara të rrjetit të dokumentuara më sipër, si dhe për përzierjet e personalizuara të listuara më poshtë.

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

Përzierjet

Përzierjet përdoren në lidhje me variablat e rrjetit për të gjeneruar CSS semantike për kolonat individuale të rrjetit.

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

Shembull i përdorimit

Mund t'i modifikoni variablat në vlerat tuaja të personalizuara, ose thjesht përdorni miksin me vlerat e tyre të paracaktuara. Këtu është një shembull i përdorimit të cilësimeve të paracaktuara për të krijuar një plan urbanistik me dy kolona me një hendek midis tyre.

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

Titujt

Të gjithë titujt HTML, <h1>përmes <h6>, janë të disponueshëm. .h1përmes .h6klasave janë gjithashtu të disponueshme, kur dëshironi të përputheni me stilin e shkronjave të një titulli, por ende dëshironi që teksti juaj të shfaqet në linjë.

h1. Titulli i bootstrap	Gjysmë e trashë 36 px
h2. Titulli i bootstrap	Gjysmë e theksuar 30 px
h3. Titulli i bootstrap	Gjysmë e theksuar 24 px
h4. Titulli i bootstrap	Gjysmë e trashë 18 px
h5. Titulli i bootstrap	Gjysmë e trashë 14 px
h6. Titulli i bootstrap	Gjysmë e trashë 12 px

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

Krijo tekst më të lehtë, dytësor në çdo titull me një <small>etiketë të përgjithshme ose .smallklasë.

h1. Titulli i nisjes Teksti dytësor

h2. Titulli i nisjes Teksti dytësor

h3. Titulli i nisjes Teksti dytësor

h4. Titulli i nisjes Teksti dytësor

h5. Titulli i nisjes Teksti dytësor

h6. Titulli i nisjes Teksti dytësor

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

Kopje e trupit

Parazgjedhja globale e Bootstrap font-sizeështë 14pxline-height , me një 1.428 . Kjo zbatohet për të <body>gjithë paragrafët. Përveç kësaj, <p>(paragrafët) marrin një diferencë të poshtme prej gjysmës së lartësisë së linjës së tyre të llogaritur (10 px si parazgjedhje).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

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

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

<p>...</p>

Kopje e trupit kryesor

Bëni një paragraf të dallohet duke shtuar .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Ndërtuar me më pak

Shkalla tipografike bazohet në dy variabla Less në variabla.më pak : @font-size-basedhe @line-height-base. E para është madhësia e fontit bazë të përdorur në të gjithë dhe e dyta është lartësia e linjës bazë. Ne përdorim ato variabla dhe disa matematikë të thjeshtë për të krijuar kufijtë, mbushjet dhe lartësitë e rreshtave të të gjitha llojeve tona dhe më shumë. Personalizojini ato dhe Bootstrap përshtatet.

Elementet e tekstit në linjë

Teksti i shënuar

Për të theksuar një varg teksti për shkak të rëndësisë së tij në një kontekst tjetër, përdorni <mark>etiketën.

Ju mund të përdorni etiketën e shenjës për tënxjerr në pahteksti.

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

Teksti i fshirë

Për të treguar blloqet e tekstit që janë fshirë, përdorni <del>etiketën.

~~Ky rresht teksti është menduar të trajtohet si tekst i fshirë.~~

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

Teksti strikethrough

Për të treguar blloqe teksti që nuk janë më relevante, përdorni <s>etiketën.

~~Ky rresht teksti është menduar të trajtohet si jo më i saktë.~~

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

Teksti i futur

Për të treguar shtesat në dokument, përdorni <ins>etiketën.

Ky rresht teksti është menduar të trajtohet si një shtesë në dokument.

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

Teksti i nënvizuar

Për të nënvizuar tekstin përdorni <u>etiketën.

Ky rresht teksti do të shfaqet siç është nënvizuar

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

Përdorni etiketat e paracaktuara të theksit të HTML me stile të lehta.

Tekst i vogël

Për të hequr theksin brenda linjës ose blloqeve të tekstit, përdorni <small>etiketën për të vendosur tekstin në 85% të madhësisë së bazës. Elementet e titullit marrin të tyren font-sizepër elementët e mbivendosur <small>.

Mund të përdorni në mënyrë alternative një element inline me .smallnë vend të ndonjë <small>.

Ky rresht teksti është menduar të trajtohet si shtyp i imët.

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

E guximshme

Për theksimin e një fragmenti teksti me një peshë më të rëndë të shkronjave.

Fragmenti i mëposhtëm i tekstit paraqitet si tekst i trashë .

<strong>rendered as bold text</strong>

Kursivë

Për theksimin e një fragmenti teksti me shkronja të pjerrëta.

Pjesa e mëposhtme e tekstit përkthehet si tekst i pjerrët .

<em>rendered as italicized text</em>

Elemente alternative

Mos ngurroni të përdorni <b>dhe <i>në HTML5. <b>ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>është kryesisht për zërin, termat teknike, etj.

Klasat e shtrirjes

Rivendosni lehtësisht tekstin me komponentët me klasa të shtrirjes së tekstit.

Teksti i rreshtuar majtas.

Teksti i rreshtuar në qendër.

Teksti i rreshtuar djathtas.

Teksti i justifikuar.

Nuk ka tekst mbështjellës.

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

Klasat e transformimit

Transformoni tekstin në komponentë me klasa të shkronjave të mëdha të tekstit.

Tekst me shkronja të vogla.

Teksti me shkronja të mëdha.

Teksti me shkronjë të madhe.

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

Shkurtesat

Implementimi i stilizuar i <abbr>elementit HTML për shkurtesat dhe akronimet për të treguar versionin e zgjeruar në lëvizje. Shkurtesat me një titleatribut kanë një kufi të poshtëm me pika të lehta dhe një kursor ndihmës në lëvizje, duke ofruar kontekst shtesë në lëvizje dhe për përdoruesit e teknologjive ndihmëse.

Shkurtesa bazë

Një shkurtim i fjalës atribut është attr .

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

Inicializmi

Shtoni .initialismnë një shkurtim për një madhësi fonti pak më të vogël.

HTML është gjëja më e mirë që nga buka e prerë.

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

Adresat

Paraqisni informacionin e kontaktit për paraardhësin më të afërt ose të gjithë trupin e punës. Ruani formatimin duke i përfunduar të gjitha rreshtat me <br>.

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

Emri i plotë
[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>

Blloqe kuotash

Për të cituar blloqe të përmbajtjes nga një burim tjetër brenda dokumentit tuaj.

Blloku i parazgjedhur

Mbështilleni <blockquote>rreth çdo HTML si citat. Për thonjëza të drejta, ne rekomandojmë një <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

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

Opsionet e bllokimit të kuotave

Ndryshimet e stilit dhe përmbajtjes për variacione të thjeshta në një standard <blockquote>.

Emërtimi i një burimi

Shto një <footer>për identifikimin e burimit. Mbështillni emrin e punës burimore në <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit

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

Shfaqje alternative

Shto .blockquote-reversepër një kuotë blloku me përmbajtje të rreshtuar djathtas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante.

Dikush i famshëm në Titullin e Burimit

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

Listat

E pa porositur

Një listë e artikujve në të cilat rendi nuk ka rëndësi në mënyrë të qartë.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Enean sit amet erat nunc
Eget porttitor lorem

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

porositur

Një listë e artikujve në të cilat rendi ka rëndësi të qartë.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Enean sit amet erat nunc
Eget porttitor lorem

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

E pa stiluar

Hiqni kufirin e paracaktuar list-styledhe të majtë në artikujt e listës (vetëm fëmijët e menjëhershëm). Kjo vlen vetëm për artikujt e listës së fëmijëve të menjëhershëm , që do të thotë se do t'ju duhet të shtoni klasën edhe për çdo listë të ndërthurur.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Lehtësimi në pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Enean sit amet erat nunc
Eget porttitor lorem

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

Në rradhë

Vendosni të gjithë artikujt e listës në një rresht të vetëm me display: inline-block;dhe disa mbushje të lehta.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Përshkrim

Një listë termash me përshkrimet e tyre të lidhura.

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

Përshkrimi horizontal

Bëni termat dhe përshkrimet në <dl>rresht krah për krah. Fillon i grumbulluar si <dl>s-të e paracaktuar, por kur zgjerohet shiriti i navigimit, bëni edhe këto.

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Auto-shkurtim

Listat e përshkrimeve horizontale do të shkurtojnë termat që janë shumë të gjatë për t'u përshtatur në kolonën e majtë me text-overflow. Në pamjet më të ngushta, ato do të ndryshojnë në paraqitjen e paracaktuar të grumbulluar.

Në rradhë

Mbështillni pjesët e kodit në linjë me <code>.

Për shembull, <section>duhet të mbështillet si inline.

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

Hyrja e përdoruesit

Përdorni <kbd>për të treguar hyrjen që zakonisht futet përmes tastierës.

Për të ndërruar drejtoritë, shkruani cdtë ndjekur nga emri i drejtorisë.
Për të modifikuar cilësimet, shtypni 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>

Blloku bazë

Përdorni <pre>për linja të shumta kodi. Sigurohuni që të shmangni çdo kllapa këndore në kod për paraqitjen e duhur.

<p>Shembull teksti këtu...</p>

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

Mund të shtoni në mënyrë opsionale .pre-scrollableklasën, e cila do të vendosë një lartësi maksimale prej 350 px dhe do të sigurojë një shirit lëvizës me bosht y.

Variablat

Për të treguar variablat përdorni <var>etiketën.

y = m x + b

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

Prodhimi i mostrës

Për të treguar blloqet e prodhimit të mostrës nga një program përdorni <samp>etiketën.

Ky tekst është menduar të trajtohet si rezultat i mostrës nga një program kompjuterik.

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

Shembull themelor

Për stilimin bazë - mbushje e lehtë dhe vetëm ndarëse horizontale - shtoni klasën bazë .tablenë çdo <table>. Mund të duket super e tepërt, por duke pasur parasysh përdorimin e gjerë të tabelave për shtojca të tjera si kalendarët dhe zgjedhësit e datave, ne kemi zgjedhur të izolojmë stilet tona të tabelave të personalizuara.

Titulli opsional i tabelës.
#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Rreshtat me vija

Përdoreni .table-stripedpër të shtuar vija zebra në çdo rresht tabele brenda <tbody>.

Pajtueshmëria me shfletues

Tabelat me vija stilohen nëpërmjet :nth-childpërzgjedhësit CSS, i cili nuk është i disponueshëm në Internet Explorer 8.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Tabela me kufi

Shto .table-borderedpër kufijtë në të gjitha anët e tabelës dhe qelizat.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Zhvendos rreshtat

Shto .table-hoverpër të aktivizuar një gjendje qëndrimi në rreshtat e tabelës brenda një <tbody>.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Tabela e kondensuar

Shtoni .table-condensedpër t'i bërë tavolinat më kompakte duke e prerë mbushjen e qelizave në gjysmë.

#	Emri	Mbiemri	Emri i përdoruesit
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Klasat kontekstuale

Përdorni klasa kontekstuale për të ngjyrosur rreshtat e tabelës ose qelizat individuale.

Klasa	Përshkrim
`.active`	Zbaton ngjyrën e pezullimit në një rresht ose qelizë të veçantë
`.success`	Tregon një veprim të suksesshëm ose pozitiv
`.info`	Tregon një ndryshim ose veprim informativ neutral
`.warning`	Tregon një paralajmërim që mund të ketë nevojë për vëmendje
`.danger`	Tregon një veprim të rrezikshëm ose potencialisht negativ

#	Titulli i kolonës	Titulli i kolonës	Titulli i kolonës
1	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
2	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
3	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
4	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
5	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
6	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
7	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
8	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës
9	Përmbajtja e kolonës	Përmbajtja e kolonës	Përmbajtja e kolonës

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për t'i shtuar kuptim një rreshti tabele ose një qelize individuale ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (teksti i dukshëm në rreshtin/qelizën përkatëse të tabelës), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Tabelat e përgjegjshme

Krijoni tabela të përgjegjshme duke mbështjellë ndonjë .tablepër .table-responsivet'i bërë ato të lëvizin horizontalisht në pajisjet e vogla (nën 768 pikselë). Kur shikoni në diçka më të madhe se 768 px gjerësi, nuk do të shihni ndonjë ndryshim në këto tabela.

Prerje/prerje vertikale

Tabelat e përgjegjshme përdorin overflow-y: hidden, e cila heq çdo përmbajtje që shkon përtej skajeve të poshtme ose të sipërme të tabelës. Në veçanti, kjo mund të fshijë menytë rënëse dhe pajisje të tjera të palëve të treta.

Firefox dhe grupet e fushave

Firefox-i ka disa stilime të sikletshme të grupeve të fushave widthqë ndërhyjnë në tabelën e përgjegjshme. Kjo nuk mund të anashkalohet pa një hak specifik të Firefox-it që ne nuk e ofrojmë në Bootstrap:

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

Për më shumë informacion, lexoni këtë përgjigje të Stack Overflow .

#	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës
1	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
2	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
3	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline

#	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës
1	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
2	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
3	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline

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

Shembull themelor

Kontrollet individuale të formës marrin automatikisht një stil global. Të gjithë elementët tekstualë <input>, <textarea>, dhe me janë caktuar si parazgjedhje. Mbështillni etiketat dhe kontrollet për hapësirë optimale.<select>.form-controlwidth: 100%;.form-group

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

Mos i përzieni grupet e formave me grupet hyrëse

Mos i përzieni grupet e formave drejtpërdrejt me grupet hyrëse . Në vend të kësaj, futni grupin e hyrjes brenda grupit të formave.

Forma inline

Shtoni .form-inlinenë formularin tuaj (i cili nuk duhet të jetë një <form>) për kontrollet e rreshtuara majtas dhe të blloqeve inline. Kjo vlen vetëm për format brenda portave të shikimit që janë të paktën 768 piksele të gjera.

Mund të kërkojë gjerësi të personalizuara

Inputet dhe përzgjedhjet janë width: 100%;aplikuar si parazgjedhje në Bootstrap. Brenda formularëve të linjës, ne rivendosim që width: auto;kontrollet e shumta të mund të qëndrojnë në të njëjtën linjë. Në varësi të paraqitjes suaj, mund të kërkohen gjerësi shtesë të personalizuara.

Gjithmonë shtoni etiketa

Lexuesit e ekranit do të kenë probleme me formularët tuaj nëse nuk përfshini një etiketë për çdo hyrje. Për këto forma inline, ju mund t'i fshehni etiketat duke përdorur .sr-onlyklasën. Ka metoda të tjera alternative për të siguruar një etiketë për teknologjitë ndihmëse, të tilla si atributi aria-label, aria-labelledbyose . titleNëse asnjëra nga këto nuk është e pranishme, lexuesit e ekranit mund të përdorin placeholderatributin, nëse është i pranishëm, por vini re se përdorimi i tij placeholdersi zëvendësim për metodat e tjera të etiketimit nuk këshillohet.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Forma horizontale

Përdorni klasat e paracaktuara të rrjetit të Bootstrap për të rreshtuar etiketat dhe grupet e kontrolleve të formularit në një plan urbanistik duke shtuar .form-horizontalnë formular (i cili nuk duhet të jetë një <form>). Duke bërë këtë ndryshon .form-groupsjelljen si rreshta rrjeti, kështu që nuk ka nevojë për .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>

Kontrollet e mbështetura

Shembuj të kontrolleve standarde të formularit të mbështetur në një paraqitje të formularit shembull.

Inputet

Kontrolli më i zakonshëm i formës, fushat e futjes së bazuar në tekst. Përfshin mbështetjen për të gjitha llojet e HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, teldhe color.

Kërkohet deklarata e llojit

Inputet do të stilohen plotësisht vetëm nëse typedeklarohen siç duhet.

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

Grupet hyrëse

Për të shtuar tekst ose butona të integruar përpara dhe/ose pas çdo teksti të bazuar <input>, shikoni komponentin e grupit të hyrjes .

Textarea

Kontrolli i formës që mbështet linja të shumta teksti. Ndrysho rowsatributin sipas nevojës.

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

Kutitë e kontrollit dhe radiot

Kutitë e kontrollit janë për zgjedhjen e një ose disa opsioneve në një listë, ndërsa radiot janë për zgjedhjen e një opsioni nga shumë.

Kutitë e kontrollit dhe radiot e çaktivizuara mbështeten, por për të siguruar një kursor "të palejuar" në lëvizjen e prindit <label>, do t'ju duhet të shtoni .disabledklasën te prindi .radio, .radio-inline, .checkboxose .checkbox-inline.

E parazgjedhur (e grumbulluar)

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

Kutitë e kontrollit në linjë dhe radiot

Përdorni .checkbox-inlineose .radio-inlineklasat në një sërë kuti kontrolli ose radio për kontrollet që shfaqen në të njëjtën linjë.

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

Kutitë e zgjedhjes dhe radiot pa tekst etiketë

Nëse nuk keni tekst brenda <label>, hyrja pozicionohet ashtu siç prisni. Aktualisht funksionon vetëm në kutitë e kontrollit dhe radiot jo-inline. Mos harroni të jepni ende një formë etiketimi për teknologjitë ndihmëse (për shembull, duke përdorur 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>

Zgjedh

Vini re se shumë meny të zgjedhura vendase - domethënë në Safari dhe Chrome - kanë qoshe të rrumbullakosura që nuk mund të modifikohen përmes border-radiusveçorive.

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

Për <select>kontrollet me multipleatribut, opsionet e shumta shfaqen si parazgjedhje.

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

Kontroll statik

Kur duhet të vendosni tekst të thjeshtë pranë një etikete formulari brenda një formulari, përdorni .form-control-staticklasën në një <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>

Gjendja e fokusit

Ne heqim outlinestilet e paracaktuara në disa kontrolle të formularit dhe aplikojmë një box-shadownë vend të tij për :focus.

`:focus`Shteti Demo

Hyrja e shembullit të mësipërm përdor stile të personalizuara në dokumentacionin tonë për të demonstruar :focusgjendjen në një .form-control.

Gjendja me aftësi të kufizuara

Shtoni disabledatributin boolean në një hyrje për të parandaluar ndërveprimet e përdoruesit. Hyrjet e çaktivizuara duken më të lehta dhe shtojnë një not-allowedkursor.

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

Grupe fushash të çaktivizuara

Shtoni disabledatributin në a <fieldset>për të çaktivizuar të gjitha kontrollet brenda <fieldset>në të njëjtën kohë.

Paralajmërim për funksionalitetin e lidhjes së`<a>`

Si parazgjedhje, shfletuesit do t'i trajtojnë të gjitha kontrollet e formës ( <input>, <select>dhe <button>elementët) brenda një <fieldset disabled>si të paaftë, duke parandaluar ndërveprimet e tastierës dhe të miut në to. Megjithatë, nëse forma juaj përfshin gjithashtu <a ... class="btn btn-*">elementë, atyre do t'u jepet vetëm një stil i pointer-events: none. Siç u përmend në seksionin rreth gjendjes së çaktivizuar për butonat (dhe veçanërisht në nën-seksionin për elementët e ankorimit), kjo veçori CSS nuk është ende e standardizuar dhe nuk mbështetet plotësisht në Opera 18 dhe më poshtë, ose në Internet Explorer 11, dhe fitoi Mos i parandaloni përdoruesit e tastierës që të jenë në gjendje të fokusohen ose aktivizojnë këto lidhje. Pra, për të qenë të sigurt, përdorni JavaScript të personalizuar për të çaktivizuar lidhje të tilla.

Pajtueshmëria me shfletues

Ndërsa Bootstrap do t'i zbatojë këto stile në të gjithë shfletuesit, Internet Explorer 11 dhe më poshtë nuk e mbështesin plotësisht disabledatributin në një <fieldset>. Përdorni JavaScript të personalizuar për të çaktivizuar grupin e fushave në këta shfletues.

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

Shteti vetëm për lexim

Shtoni readonlyatributin boolean në një hyrje për të parandaluar modifikimin e vlerës së hyrjes. Hyrjet vetëm për lexim duken më të lehta (ashtu si hyrjet e çaktivizuara), por ruajnë kursorin standard.

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

Teksti i ndihmës

Teksti i ndihmës në nivelin e bllokimit për kontrollet e formularit.

Lidhja e tekstit të ndihmës me kontrollet e formularit

Teksti i ndihmës duhet të shoqërohet në mënyrë eksplicite me kontrollin e formës me të cilin lidhet duke përdorur aria-describedbyatributin. Kjo do të sigurojë që teknologjitë ndihmëse - të tilla si lexuesit e ekranit - do ta shpallin këtë tekst ndihme kur përdoruesi fokusohet ose futet në kontroll.

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

Gjendjet e vlefshmërisë

Bootstrap përfshin stilet e vlefshmërisë për gjendjet e gabimit, paralajmërimit dhe suksesit në kontrollet e formularit. Për të përdorur, shtuar .has-warning, .has-errorose .has-successnë elementin prind. Çdo .control-label, .form-control, dhe .help-blockbrenda atij elementi do të marrë stilet e vlefshmërisë.

Përcjellja e gjendjes së vlefshmërisë tek teknologjitë ndihmëse dhe përdoruesit e verbër nga ngjyra

Përdorimi i këtyre stileve të vërtetimit për të treguar gjendjen e një kontrolli formulari ofron vetëm një tregues vizual, të bazuar në ngjyra, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - si lexuesit e ekranit - ose përdoruesve të verbër nga ngjyra.

Sigurohuni që të sigurohet edhe një tregues alternativ i gjendjes. Për shembull, mund të përfshini një sugjerim rreth gjendjes në <label>vetë tekstin e kontrollit të formularit (siç është rasti në shembullin e kodit të mëposhtëm), të përfshini një Glyphicon (me tekst alternativ të përshtatshëm duke përdorur .sr-onlyklasën - shih shembujt Glyphicon ), ose duke ofruar një bllok teksti shtesë për ndihmë. Në mënyrë të veçantë për teknologjitë ndihmëse, kontrolleve të formularit të pavlefshëm mund t'u caktohet gjithashtu një aria-invalid="true"atribut.

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

Me ikona opsionale

Ju gjithashtu mund të shtoni ikona opsionale të komenteve me shtimin .has-feedbackdhe ikonën e duhur.

Ikonat e komenteve funksionojnë vetëm me <input class="form-control">elementë tekstualë.

Ikonat, etiketat dhe grupet hyrëse

Pozicionimi manual i ikonave të komenteve kërkohet për hyrjet pa etiketë dhe për grupet e hyrjes me një shtesë në të djathtë. Jeni të inkurajuar fuqimisht të jepni etiketa për të gjitha inputet për arsye aksesueshmërie. Nëse dëshironi të parandaloni shfaqjen e etiketave, fshihini ato me .sr-onlyklasën. Nëse duhet të bëni pa etiketa, rregulloni topvlerën e ikonës së komenteve. Për grupet e hyrjes, rregulloni rightvlerën në një vlerë të përshtatshme piksel në varësi të gjerësisë së shtesës suaj.

Përcjellja e kuptimit të ikonës në teknologjitë ndihmëse

Për të siguruar që teknologjitë ndihmëse – të tilla si lexuesit e ekranit – përcjellin saktë kuptimin e një ikone, teksti shtesë i fshehur duhet të përfshihet me .sr-onlyklasën dhe të shoqërohet në mënyrë eksplicite me kontrollin e formularit me të cilin lidhet duke përdorur aria-describedby. Përndryshe, sigurohuni që kuptimi (për shembull, fakti që ka një paralajmërim për një fushë të veçantë të hyrjes së tekstit) të përcillet në ndonjë formë tjetër, si ndryshimi i tekstit të tekstit aktual të <label>lidhur me kontrollin e formularit.

Megjithëse shembujt e mëposhtëm përmendin tashmë gjendjen e vlefshmërisë së kontrolleve të tyre përkatëse të formës në <label>vetë tekstin, teknika e mësipërme (duke përdorur .sr-onlytekstin dhe aria-describedby) është përfshirë për qëllime ilustruese.

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

Ikona opsionale në forma horizontale dhe inline

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

Ikona opsionale me `.sr-only`etiketa të fshehura

Nëse përdorni .sr-onlyklasën për të fshehur kontrollet e një formulari <label>(në vend që të përdorni opsione të tjera etiketimi, siç është aria-labelatributi), Bootstrap do të rregullojë automatikisht pozicionin e ikonës pasi të shtohet.

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

Kontrolloni madhësinë

Vendosni lartësitë duke përdorur klasa si .input-lg, dhe vendosni gjerësi duke përdorur klasat e kolonave të rrjetit si .col-lg-*.

Madhësia e lartësisë

Krijoni komanda të formës më të gjatë ose më të shkurtër që përputhen me madhësitë e butonave.

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

Madhësitë e grupeve të formës horizontale

Përmasoni shpejt etiketat dhe kontrollet e formave brenda .form-horizontalduke shtuar .form-group-lgose .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>

Madhësia e kolonës

Mbështillni hyrjet në kolonat e rrjetit, ose ndonjë element prind të personalizuar, për të zbatuar me lehtësi gjerësinë e dëshiruar.

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

Etiketat e butonave

Përdorni klasat e butonave në një<a> element , <button>, ose .<input>

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

Përdorimi i kontekstit specifik

Ndërsa klasat e butonave mund të përdoren në <a>dhe <button>elementë, vetëm <button>elementët mbështeten brenda komponentëve tanë të navigimit dhe shiritit navigues.

Lidhjet që veprojnë si butona

Nëse <a>elementët përdoren për të vepruar si butona - duke aktivizuar funksionalitetin brenda faqes, në vend që të lundrojnë në një dokument ose seksion tjetër brenda faqes aktuale - atyre gjithashtu duhet t'u jepet një role="button".

Rendering ndër-shfletues

Si një praktikë më e mirë, ne rekomandojmë shumë përdorimin e <button>elementit sa herë që është e mundur për të siguruar paraqitjen e përputhshme të ndërshfletuesit.

Ndër të tjera, ka një gabim në Firefox <30 që na pengon të vendosim butonat line-heighte <input>bazuar, duke bërë që ata të mos përputhen saktësisht me lartësinë e butonave të tjerë në Firefox.

Opsione

Përdorni ndonjë nga klasat e disponueshme të butonave për të krijuar shpejt një buton të stiluar.

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për t'i shtuar kuptim një butoni ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - si lexuesit e ekranit. Sigurohuni që informacioni i shënuar me ngjyrën të jetë ose i dukshëm nga vetë përmbajtja (teksti i dukshëm i butonit), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Përmasat

Dëshironi butona më të mëdhenj apo më të vegjël? Shto .btn-lg, .btn-smose .btn-xspër madhësi shtesë.

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

Krijoni butona të nivelit të bllokut—ato që përfshijnë gjerësinë e plotë të një prindi—duke shtuar .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>

Gjendja aktive

Butonat do të shfaqen të shtypur (me sfond më të errët, kufi më të errët dhe hije të futur) kur janë aktivë. Për <button>elementet, kjo bëhet nëpërmjet :active. Për <a>elementet, është bërë me .active. Megjithatë, ju mund të përdorni .activenë <button>s (dhe të përfshiniaria-pressed="true" atributin) nëse duhet të përsërisni gjendjen aktive në mënyrë programore.

Elementi i butonit

Nuk ka nevojë të shtoni :activepasi është një pseudo-klasë, por nëse duhet të detyroni të njëjtën pamje, vazhdoni dhe shtoni .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>

Elementi i ankorimit

Shtoni .activeklasën te <a>butonat.

Lidhja kryesore Lidhje

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

Gjendja me aftësi të kufizuara

Bëjini butonat të duken të paklikueshëm duke i zbehur përsëri me opacity.

Elementi i butonit

Shtoni disabledatributin te <button>butonat.

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

Pajtueshmëria me shfletues

Nëse shtoni disabledatributin në një <button>, Internet Explorer 9 dhe më poshtë do ta kthejë tekstin gri me një hije të keqe teksti që ne nuk mund ta rregullojmë.

Elementi i ankorimit

Shtoni .disabledklasën te <a>butonat.

Lidhja kryesore Lidhje

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

Ne përdorim .disabledsi një klasë të shërbimeve këtu, të ngjashme me .activeklasën e zakonshme, kështu që nuk kërkohet prefiks.

Paralajmërim për funksionalitetin e lidhjes

Kjo klasë përdor pointer-events: nonepër të tentuar të çaktivizojë funksionalitetin e lidhjes së <a>s, por ajo veti CSS nuk është ende e standardizuar dhe nuk mbështetet plotësisht në Opera 18 e më poshtë, ose në Internet Explorer 11. Përveç kësaj, edhe në shfletuesit që mbështesin pointer-events: none, tastiera navigimi mbetet i paprekur, që do të thotë se përdoruesit e tastierës me shikim dhe përdoruesit e teknologjive ndihmëse do të jenë ende në gjendje t'i aktivizojnë këto lidhje. Pra, për të qenë të sigurt, përdorni JavaScript të personalizuar për të çaktivizuar lidhje të tilla.

Imazhe të përgjegjshme

Imazhet në Bootstrap 3 mund të bëhen të përshtatshme për t'u përgjigjur nëpërmjet shtimit të .img-responsiveklasës. Kjo vlen max-width: 100%;, height: auto;dhe display: block;për imazhin në mënyrë që të shkallëzohet bukur në elementin prind.

Për të përqendruar imazhet që përdorin .img-responsiveklasën, përdorni .center-blocknë vend të .text-center. Shikoni seksionin e klasave ndihmëse për më shumë detaje rreth .center-blockpërdorimit.

Imazhet SVG dhe IE 8-10

Në Internet Explorer 8-10, imazhet SVG me .img-responsivejanë me madhësi joproporcionale. Për ta rregulluar këtë, shtoni width: 100% \9;aty ku është e nevojshme. Bootstrap nuk e zbaton këtë automatikisht pasi shkakton komplikime në formatet e tjera të imazhit.

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

Format e imazhit

Shtoni klasa në një <img>element për të stiluar lehtësisht imazhet në çdo projekt.

Pajtueshmëria me shfletues

Mbani në mend se Internet Explorer 8 nuk ka mbështetje për qoshet e rrumbullakosura.

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

Ngjyrat kontekstuale

Përcillni kuptimin përmes ngjyrës me një sërë klasash të dobishme të theksuara. Këto mund të zbatohen gjithashtu për lidhjet dhe do të errësohen kur rri pezull ashtu si stilet tona të parazgjedhura të lidhjeve.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Ballafaqimi me specifikat

Ndonjëherë klasat e theksit nuk mund të aplikohen për shkak të specifikës së një përzgjedhësi tjetër. Në shumicën e rasteve, një zgjidhje e mjaftueshme është të mbështillni tekstin tuaj në një <span>me klasën.

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (ngjyrat kontekstuale përdoren vetëm për të përforcuar kuptimin që është tashmë i pranishëm në tekst/shënjimin), ose përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën .

Sfondet kontekstuale

Ngjashëm me klasat e ngjyrave të tekstit kontekstual, vendosni lehtësisht sfondin e një elementi për çdo klasë kontekstuale. Komponentët e ankorimit do të errësohen kur rri pezull, ashtu si klasat e tekstit.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Ballafaqimi me specifikat

Ndonjëherë klasat kontekstuale të sfondit nuk mund të aplikohen për shkak të specifikës së një përzgjedhësi tjetër. Në disa raste, një zgjidhje e mjaftueshme është të mbështillni përmbajtjen e elementit tuaj në një <div>me klasën.

Përcjellja e kuptimit tek teknologjitë ndihmëse

Ashtu si me ngjyrat kontekstuale , sigurohuni që çdo kuptim i përcjellë përmes ngjyrës të përcillet edhe në një format që nuk është thjesht prezantues.

Ikona e mbylljes

Përdorni ikonën e përgjithshme të mbylljes për të hequr përmbajtjen si modalet dhe sinjalizimet.

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

Carets

Përdorni karrocat për të treguar funksionalitetin dhe drejtimin e renditjes. Vini re se porta e paracaktuar do të kthehet automatikisht në menutë e lëshimit .

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

Noton të shpejta

Fluturoni një element majtas ose djathtas me një klasë. !importantpërfshihet për të shmangur çështjet specifike. Klasat mund të përdoren gjithashtu si miks.

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

Blloqet e përmbajtjes në qendër

Vendosni një element në display: blockdhe në qendër nëpërmjet margin. E disponueshme si miks dhe klasë.

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

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

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

Qartë

Pastroni lehtësisht floats duke shtuar .clearfix në elementin prind . Përdor fiksimin mikro siç është popullarizuar nga Nicolas Gallagher. Mund të përdoret edhe si miks.

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

Shfaqja dhe fshehja e përmbajtjes

Detyroni që një element të shfaqet ose të fshihet ( përfshirë lexuesit e ekranit ) me përdorimin e .showdhe .hiddenklasave. Këto klasa përdoren !importantpër të shmangur konfliktet e specifikave, ashtu si notat e shpejta . Ato janë të disponueshme vetëm për ndërrimin e nivelit të bllokut. Mund të përdoren edhe si përzierje.

.hideështë i disponueshëm, por jo gjithmonë prek lexuesit e ekranit dhe është i vjetëruar që nga v3.0.1. Përdorni .hiddenose .sr-onlynë vend.

Për më tepër, .invisiblemund të përdoret për të ndryshuar vetëm dukshmërinë e një elementi, që do të thotë se displayai nuk është modifikuar dhe elementi mund të ndikojë ende në rrjedhën e dokumentit.

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

Lexuesi i ekranit dhe përmbajtja e navigimit të tastierës

Fshihni një element në të gjitha pajisjet përveç lexuesve të ekranit me .sr-only. Kombinoje .sr-onlyme .sr-only-focusablepër të shfaqur sërish elementin kur është i fokusuar (p.sh. nga një përdorues vetëm me tastierë). E nevojshme për ndjekjen e praktikave më të mira të aksesueshmërisë . Mund të përdoret edhe si miks.

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

Zëvendësimi i imazhit

Përdorni .text-hideklasën ose miksin për të ndihmuar në zëvendësimin e përmbajtjes së tekstit të një elementi me një imazh të sfondit.

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

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

Për zhvillim më të shpejtë miqësor për celularin, përdorni këto klasa të shërbimeve për shfaqjen dhe fshehjen e përmbajtjes nga pajisja nëpërmjet pyetjes së medias. Gjithashtu përfshihen klasat e shërbimeve për ndryshimin e përmbajtjes kur printohet.

Mundohuni t'i përdorni këto në një bazë të kufizuar dhe shmangni krijimin e versioneve krejtësisht të ndryshme të të njëjtit sajt. Në vend të kësaj, përdorni ato për të plotësuar prezantimin e çdo pajisjeje.

Klasat e disponueshme

Përdorni një të vetme ose një kombinim të klasave të disponueshme për ndryshimin e përmbajtjes nëpër pikat e ndërprerjes së pamjes.

	Pajisje ekstra të voglaTelefonat (<768 px)	Pajisjet e voglaTabletat (≥768 px)	Pajisjet e mesmeDesktopët (≥992px)	Pajisjet e mëdhaDesktopët (≥1200 px)
`.visible-xs-*`	E dukshme	I fshehur	I fshehur	I fshehur
`.visible-sm-*`	I fshehur	E dukshme	I fshehur	I fshehur
`.visible-md-*`	I fshehur	I fshehur	E dukshme	I fshehur
`.visible-lg-*`	I fshehur	I fshehur	I fshehur	E dukshme
`.hidden-xs`	I fshehur	E dukshme	E dukshme	E dukshme
`.hidden-sm`	E dukshme	I fshehur	E dukshme	E dukshme
`.hidden-md`	E dukshme	E dukshme	I fshehur	E dukshme
`.hidden-lg`	E dukshme	E dukshme	E dukshme	I fshehur

Që nga v3.2.0, .visible-*-*klasat për çdo pikë ndërprerjeje vijnë në tre variacione, një për çdo displayvlerë të vetive CSS të renditur më poshtë.

Grupi i klasave	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsPra, për ekranet ekstra të vogla ( ), për shembull, .visible-*-*klasat e disponueshme janë: .visible-xs-block, .visible-xs-inline, dhe .visible-xs-inline-block.

Klasat .visible-xs, .visible-sm, .visible-mddhe .visible-lggjithashtu ekzistojnë, por janë të zhvlerësuara që nga v3.2.0 . Ato janë afërsisht ekuivalente me .visible-*-block, me përjashtim të rasteve të veçanta shtesë për ndërrimin e <table>elementeve.

Klasat e printimit

Ngjashëm me klasat e zakonshme të përgjegjshme, përdorni këto për të ndërruar përmbajtjen për printim.

Klasat	Shfletuesi	Printo
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	I fshehur	E dukshme
`.hidden-print`	E dukshme	I fshehur

Klasa .visible-printekziston gjithashtu, por është e vjetëruar që nga v3.2.0. Është përafërsisht ekuivalente me .visible-print-block, me përjashtim të rasteve të veçanta shtesë për <table>elementë të lidhur.

Rastet e testimit

Ndryshoni madhësinë e shfletuesit tuaj ose ngarkoni në pajisje të ndryshme për të testuar klasat reaguese të shërbimeve.

E dukshme në...

Shenjat e gjelbërta tregojnë se elementi është i dukshëm në pamjen tuaj aktuale.

Shume e vogel ✔ E dukshme në x-small

I vogël ✔ E dukshme në të vogla

E mesme ✔ E dukshme në mesatare

I madh ✔ Të dukshme në të mëdha

Tepër e vogël dhe e vogël ✔ E dukshme në x-small dhe small

E mesme dhe e madhe ✔ E dukshme në të mesme dhe të mëdha

Ekstra e vogël dhe e mesme ✔ E dukshme në x-small dhe medium

Të vogla dhe të mëdha ✔ E dukshme në të vogla dhe të mëdha

Ekstra i vogël dhe i madh ✔ E dukshme në x-small dhe të mëdha

Të vogla dhe të mesme ✔ E dukshme në të vogla dhe të mesme

I fshehur në...

Këtu, shenjat e gjelbra tregojnë gjithashtu se elementi është i fshehur në pamjen tuaj aktuale.

Shume e vogel ✔ Fshehur në x-small

I vogël ✔ Fshehur në të vogla

E mesme ✔ Fshehur në të mesme

I madh ✔ Fshehur në të mëdha

Tepër e vogël dhe e vogël ✔ Fshehur në x-small dhe small

E mesme dhe e madhe ✔ Fshehur në të mesme dhe të mëdha

Ekstra e vogël dhe e mesme ✔ Fshehur në x-small dhe medium

Të vogla dhe të mëdha ✔ Fshehur në të vogla dhe të mëdha

Ekstra i vogël dhe i madh ✔ Fshehur në x-të vogla dhe të mëdha

Të vogla dhe të mesme ✔ Fshehur në të vogla dhe të mesme

CSS e Bootstrap është ndërtuar në Less, një paraprocesor me funksione shtesë si variabla, miks dhe funksione për përpilimin e CSS. Ata që kërkojnë të përdorin skedarët e burimit Më pak në vend të skedarëve tanë të përpiluar CSS, mund të përdorin variablat dhe përzierjet e shumta që përdorim në të gjithë kornizën.

Variablat dhe miksat e rrjetit mbulohen brenda seksionit të sistemit të rrjetit .

Përpilimi i Bootstrap

Bootstrap mund të përdoret në të paktën dy mënyra: me CSS-në e përpiluar ose me skedarët burim Less. Për të përpiluar skedarët Më pak, konsultohuni me seksionin Fillimi për mënyrën e konfigurimit të mjedisit tuaj të zhvillimit për të ekzekutuar komandat e nevojshme.

Mjetet e përpilimit të palëve të treta mund të funksionojnë me Bootstrap, por ato nuk mbështeten nga ekipi ynë kryesor.

Variablat

Variablat përdoren gjatë gjithë projektit si një mënyrë për të centralizuar dhe ndarë vlerat e përdorura zakonisht si ngjyrat, hapësirat ose grupet e shkronjave. Për një ndarje të plotë, ju lutemi shikoni Përshtatësin .

Ngjyrat

Përdorni lehtësisht dy skema ngjyrash: shkallë gri dhe semantike. Ngjyrat në shkallë gri ofrojnë qasje të shpejtë në nuancat e zakonshme të së zezës, ndërsa semantike përfshin ngjyra të ndryshme të caktuara për vlerat kuptimplote kontekstuale.

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

Përdorni ndonjë nga këto variabla ngjyrash siç janë ose ricaktojini ato në variabla më kuptimplotë për projektin tuaj.

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

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

Skela

Një grusht variablash për personalizimin e shpejtë të elementeve kryesore të skeletit të faqes suaj.

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

Lidhjet

Stiloni lehtësisht lidhjet tuaja me ngjyrën e duhur me vetëm një vlerë.

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

Vini re se @link-hover-colorpërdor një funksion, një mjet tjetër i mrekullueshëm nga Less, për të krijuar automatikisht ngjyrën e duhur të pezullimit. Ju mund të përdorni darken, lighten, saturate, dhe desaturate.

Tipografia

Vendosni me lehtësi shkronjat tuaja, madhësinë e tekstit, kryesimin dhe më shumë me disa variabla të shpejtë. Bootstrap i përdor këto gjithashtu për të ofruar përzierje të lehta tipografike.

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

Ikonat

Dy variabla të shpejtë për personalizimin e vendndodhjes dhe emrit të skedarit të ikonave tuaja.

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

Komponentët

Komponentët në të gjithë Bootstrap përdorin disa variabla të paracaktuar për vendosjen e vlerave të përbashkëta. Këtu janë më të përdorurat.

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

Përzierjet e shitësve

Miksinat e shitësve janë miks për të ndihmuar në mbështetjen e shfletuesve të shumtë duke përfshirë të gjitha prefikset përkatëse të shitësit në CSS-në tuaj të përpiluar.

Madhësia e kutisë

Rivendosni modelin e kutisë së komponentëve me një përzierje të vetme. Për kontekstin, shihni këtë artikull të dobishëm nga Mozilla .

Miksin është shfuqizuar që nga v3.2.0, me prezantimin e Autoprefixer. Për të ruajtur përputhshmërinë prapa, Bootstrap do të vazhdojë të përdorë mixin-in brenda deri në Bootstrap v4.

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

Qoshe të rrumbullakosura

Sot të gjithë shfletuesit modernë mbështesin border-radiuspronën pa prefiks. Si i tillë, nuk ka .border-radius()mixin, por Bootstrap përfshin shkurtore për rrumbullakimin e shpejtë të dy qosheve në një anë të caktuar të një objekti.

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

Kutia (Drop) hijet

Nëse audienca juaj e synuar po përdor shfletuesit dhe pajisjet më të fundit dhe më të mira, sigurohuni që ta përdorni box-shadowpronën më vete. Nëse keni nevojë për mbështetje për pajisjet e vjetra Android (para-v4) dhe iOS (para-iOS 5), përdorni mixin-in e vjetëruar-webkit për të marrë prefiksin e kërkuar .

Miksin është i vjetëruar që nga v3.1.0, pasi Bootstrap nuk i mbështet zyrtarisht platformat e vjetruara që nuk mbështesin pronën standarde. Për të ruajtur përputhshmërinë prapa, Bootstrap do të vazhdojë të përdorë mixin-in brenda deri në Bootstrap v4.

Sigurohuni që të përdorni rgba()ngjyrat në hijet e kutisë tuaj në mënyrë që ato të përzihen sa më mirë që të jetë e mundur me sfondet.

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

Tranzicionet

Përzierje të shumta për fleksibilitet. Vendosni të gjitha informacionet e tranzicionit me një ose specifikoni një vonesë dhe kohëzgjatje të veçantë sipas nevojës.

Miksinat janë shfuqizuar që nga v3.2.0, me futjen e Autoprefixer. Për të ruajtur përputhshmërinë e prapambetur, Bootstrap do të vazhdojë të përdorë mixins brenda deri në 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;
}

Transformimet

Rrotulloni, shkallëzoni, përktheni (lëvizni) ose anoni ndonjë objekt.

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

Animacionet

Një miks i vetëm për përdorimin e të gjitha veçorive të animacionit të CSS3 në një deklaratë dhe përzierje të tjera për vetitë individuale.

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

Opaciteti

Vendosni opacitetin për të gjithë shfletuesit dhe jepni një filterrezervë për IE8.

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

Teksti i vendmbajtësit

Siguroni kontekstin për kontrollet e formularit brenda çdo fushe.

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

Kolonat

Gjeneroni kolona përmes CSS brenda një elementi të vetëm.

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

Gradientët

Shndërroni me lehtësi çdo dy ngjyra në një gradient të sfondit. Përparoni më shumë dhe vendosni një drejtim, përdorni tre ngjyra ose përdorni një gradient radial. Me një miks të vetëm ju merrni të gjitha sintaksat e paracaktuara që ju nevojiten.

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

Ju gjithashtu mund të specifikoni këndin e një gradienti linear standard me dy ngjyra:

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

Nëse keni nevojë për një gradient të stilit të shiritit të berberit, kjo është gjithashtu e lehtë. Thjesht specifikoni një ngjyrë të vetme dhe ne do të mbulojmë një shirit të bardhë të tejdukshëm.

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

Ngritni anten dhe përdorni tre ngjyra në vend. Vendosni ngjyrën e parë, ngjyrën e dytë, ndalesën e ngjyrës së dytë (një vlerë në përqindje si 25%) dhe ngjyrën e tretë me këto përzierje:

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

Kokat lart! Nëse ndonjëherë ju duhet të hiqni një gradient, sigurohuni që të hiqni çdo specifik të IE filterqë mund të keni shtuar. Këtë mund ta bëni duke përdorur .reset-filter()miksin së bashku background-image: none;.

Përzierjet e shërbimeve

Miksinat e shërbimeve janë miks që kombinojnë veti CSS të palidhura për të arritur një qëllim ose detyrë specifike.

Qartë

Harrojeni shtimin class="clearfix"e ndonjë elementi dhe në vend të kësaj shtoni .clearfix()miksin aty ku është e përshtatshme. Përdor fiksimin mikro nga Nicolas Gallagher .

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

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

Përqendrimi horizontal

Përqendroni shpejt çdo element brenda prindit të tij. Kërkon widthose max-widthpër t'u vendosur.

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

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

Ndihmës për përmasat

Specifikoni më lehtë përmasat e një objekti.

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

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

Zonat e tekstit të ripërmasave

Konfiguro me lehtësi opsionet e ndryshimit të madhësisë për çdo zonë teksti ose ndonjë element tjetër. Parazgjedhja e sjelljes normale të shfletuesit ( both).

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

Shkurtimi i tekstit

Shkurtoni me lehtësi tekstin me një elipsë me një përzierje të vetme. Kërkon që elementi të jetë blockose inline-blocknivel.

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

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

Imazhet e retinës

Specifikoni dy shtigje imazhi dhe dimensionet e imazhit @1x dhe Bootstrap do të sigurojë një kërkesë të medias @2x. Nëse keni shumë imazhe për të shërbyer, merrni parasysh të shkruani imazhin tuaj të retinës CSS me dorë në një pyetje të vetme mediatike.

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

Ndërsa Bootstrap është ndërtuar në Less, ai gjithashtu ka një port zyrtar Sass . Ne e mbajmë atë në një depo të veçantë GitHub dhe trajtojmë përditësimet me një skript konvertimi.

Çfarë përfshihet

Meqenëse porti Sass ka një depo të veçantë dhe i shërben një audiencë paksa të ndryshme, përmbajtja e projektit ndryshon shumë nga projekti kryesor i Bootstrap. Kjo siguron që porti Sass të jetë sa më i pajtueshëm me sa më shumë sisteme të bazuara në Sass.

Rrugë	Përshkrim
`lib/`	Kodi i gur i çmuar rubin (konfigurimi Sass, integrimet Rails dhe Compass)
`tasks/`	Skriptet e konvertuesit (duke kthyer në rrjedhën e sipërme Less në Sass)
`test/`	Testet e përpilimit
`templates/`	Manifesti i paketës së busullës
`vendor/assets/`	Sass, JavaScript dhe skedarët e shkronjave
`Rakefile`	Detyrat e brendshme, të tilla si raketa dhe konvertimi

Vizitoni depon e GitHub të portit Sass për t'i parë këta skedarë në veprim.

Instalimi

Për informacion se si të instaloni dhe përdorni Bootstrap për Sass, konsultohuni me repositorin GitHub readme . Është burimi më i përditësuar dhe përfshin informacione për përdorim me Rails, Compass dhe projektet standarde Sass.

Bootstrap për Sass

CSS

Vështrim i përgjithshëm

Doctype HTML5

Së pari celulari

Tipografia dhe lidhjet

Normalizo.css

Kontejnerët

Sistemi i rrjetit

Prezantimi

Pyetjet në media

Opsionet e rrjetit

Shembull: Stacked-to-horizontal

Shembull: Enë me lëngje

Shembull: Celular dhe desktop

Shembull: celular, tablet, desktop

Shembull: Mbështjellja e kolonës

Rivendos kolona të përgjegjshme

Kompensimi i kolonave

Kolonat e folesë

Renditja e kolonave

Më pak përzierje dhe variabla

Variablat

Përzierjet

Shembull i përdorimit

Tipografia

Titujt

h1. Titulli i bootstrap

h2. Titulli i bootstrap

h3. Titulli i bootstrap

h4. Titulli i bootstrap

h5. Titulli i bootstrap

h6. Titulli i bootstrap

h1. Titulli i nisjes Teksti dytësor

h2. Titulli i nisjes Teksti dytësor

h3. Titulli i nisjes Teksti dytësor

h4. Titulli i nisjes Teksti dytësor

h5. Titulli i nisjes Teksti dytësor

h6. Titulli i nisjes Teksti dytësor

Kopje e trupit

Kopje e trupit kryesor

Ndërtuar me më pak

Elementet e tekstit në linjë

Teksti i shënuar

Teksti i fshirë

Teksti strikethrough

Teksti i futur

Teksti i nënvizuar

Tekst i vogël

E guximshme

Kursivë

Elemente alternative

Klasat e shtrirjes

Klasat e transformimit

Shkurtesat

Shkurtesa bazë

Inicializmi

Adresat

Blloqe kuotash

Blloku i parazgjedhur

Opsionet e bllokimit të kuotave

Emërtimi i një burimi

Shfaqje alternative

Listat

E pa porositur

porositur

E pa stiluar

Në rradhë

Përshkrim

Përshkrimi horizontal

Auto-shkurtim

Kodi

Në rradhë

Hyrja e përdoruesit

Blloku bazë

Variablat

Prodhimi i mostrës

Tabelat

Shembull themelor

Rreshtat me vija

Pajtueshmëria me shfletues

`:focus`Shteti Demo

Paralajmërim për funksionalitetin e lidhjes së`<a>`

Ikona opsionale me `.sr-only`etiketa të fshehura