Ստացեք Bootstrap-ի ենթակառուցվածքի հիմնական մասերի ցածր մակարդակը, ներառյալ մեր մոտեցումը ավելի լավ, արագ և ուժեղ վեբ մշակման համար:

HTML5 doctype

Bootstrap-ն օգտագործում է որոշակի HTML տարրեր և CSS հատկություններ, որոնք պահանջում են օգտագործել HTML5 doctype: Ներառեք այն ձեր բոլոր նախագծերի սկզբում:

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

Բջջային առաջինը

Bootstrap 2-ի միջոցով մենք ավելացրել ենք կամընտիր շարժական սարքերի համար հարմար ոճեր շրջանակի հիմնական ասպեկտների համար: Bootstrap 3-ի միջոցով մենք վերաշարադրել ենք նախագիծը, որպեսզի ի սկզբանե լինի շարժական սարքերի համար հարմար: Ընտրովի շարժական ոճեր ավելացնելու փոխարեն, դրանք թխվում են հենց հիմքում: Իրականում, Bootstrap-ը առաջին հերթին բջջային է : Բջջային առաջին ոճերը կարելի է գտնել ամբողջ գրադարանում՝ առանձին ֆայլերի փոխարեն:

Պատշաճ արտապատկերում և հպումով խոշորացում ապահովելու համար ավելացրեք տեսադաշտի մետա թեգը ձեր <head>.

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

Դուք կարող եք անջատել շարժական սարքերի խոշորացման հնարավորությունները՝ ավելացնելով user-scalable=noտեսադաշտի մետա-պիտակին: Սա անջատում է խոշորացումը, ինչը նշանակում է, որ օգտվողները կարող են միայն ոլորել, և արդյունքում ձեր կայքը մի փոքր ավելի նման է հայրենի հավելվածին: Ընդհանուր առմամբ, մենք դա խորհուրդ չենք տալիս յուրաքանչյուր կայքում, այնպես որ զգույշ եղեք:

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

Տպագրություն և հղումներ

Bootstrap-ը սահմանում է հիմնական գլոբալ ցուցադրման, տպագրության և կապի ոճերը: Մասնավորապես, մենք.

Սահմանել background-color: #fff;վրաbody
Օգտագործեք @font-family-base, @font-size-base, և @line-height-baseատրիբուտները որպես մեր տպագրական հիմք
Սահմանեք գլոբալ հղման գույնը միջոցով @link-colorև կիրառեք միայն հղումի ընդգծումները:hover

Այս ոճերը կարելի է գտնել ներսում scaffolding.less:

Normalize.css

Բրաուզերների միջոցով կատարելագործված մատուցման համար մենք օգտագործում ենք Normalize.css- ը՝ Նիկոլաս Գալագերի և Ջոնաթան Նիլի նախագիծը :

Տարաներ

Bootstrap-ը պահանջում է պարունակող տարր՝ կայքի բովանդակությունը փաթաթելու և մեր ցանցային համակարգը տեղավորելու համար: Դուք կարող եք ընտրել երկու կոնտեյներներից մեկը՝ ձեր նախագծերում օգտագործելու համար: Նկատի ունեցեք, որ պատճառով paddingև ավելին, ոչ մի տարա բնադրելի չէ:

Օգտագործեք .containerարձագանքող ֆիքսված լայնությամբ կոնտեյների համար:

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

Օգտագործեք .container-fluidամբողջ լայնությամբ կոնտեյների համար՝ ընդգրկելով ձեր տեսադաշտի ամբողջ լայնությունը:

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

Bootstrap-ը ներառում է արձագանքող, շարժական առաջին հեղուկ ցանցի համակարգ, որը պատշաճ կերպով չափվում է մինչև 12 սյունակ, քանի որ սարքի կամ տեսադաշտի չափը մեծանում է: Այն ներառում է նախապես սահմանված դասեր դասավորության հեշտ տարբերակների համար, ինչպես նաև հզոր միքսներ՝ ավելի շատ իմաստային դասավորություններ ստեղծելու համար :

Ներածություն

Ցանցային համակարգերն օգտագործվում են էջի դասավորությունների ստեղծման համար մի շարք տողերի և սյունակների միջոցով, որոնք պարունակում են ձեր բովանդակությունը: Ահա թե ինչպես է աշխատում Bootstrap grid համակարգը.

Տողերը պետք է տեղադրվեն .container(ֆիքսված լայնությամբ) կամ .container-fluid(ամբողջ լայնությամբ)՝ պատշաճ հարթեցման և լիցքավորման համար:
Օգտագործեք տողեր՝ սյունակների հորիզոնական խմբեր ստեղծելու համար:
Բովանդակությունը պետք է տեղադրվի սյունակներում, և միայն սյունակները կարող են լինել տողերի անմիջական զավակներ:
Նախապես սահմանված ցանցային դասերը հավանում են .rowև .col-xs-4հասանելի են ցանցի դասավորություններն արագ պատրաստելու համար: Ավելի քիչ միքսներ կարող են օգտագործվել նաև ավելի իմաստային դասավորությունների համար:
Սյունակները ստեղծում են ջրհեղեղներ (սյունակների բովանդակության միջև բացեր) padding. Այդ լիցքը շեղվում է տողերով առաջին և վերջին սյունակի համար .rows-ի բացասական լուսանցքի միջոցով:
Բացասական մարժան այն է, թե ինչու են ստորև բերված օրինակները հնացած: Դա այնպես է, որ ցանցի սյունակներում պարունակվող բովանդակությունը շարվում է ոչ ցանցային բովանդակությամբ:
Ցանցային սյունակները ստեղծվում են՝ նշելով հասանելի տասներկու սյունակների քանակը, որոնք ցանկանում եք տարածել: Օրինակ, երեք հավասար սյունակներում կօգտագործվեն երեքը .col-xs-4:
Եթե մեկ տողում տեղադրված են ավելի քան 12 սյունակներ, ապա լրացուցիչ սյունակների յուրաքանչյուր խումբ, որպես մեկ միավոր, կփաթաթվի նոր տողի վրա:
Ցանցի դասերը կիրառվում են սարքերի վրա, որոնց էկրանի լայնությունը մեծ է կամ հավասար է ընդհատման կետի չափերին, և անտեսում են ցանցի դասերը, որոնք ուղղված են փոքր սարքերին: Հետևաբար, օրինակ, որևէ .col-md-*դասի կիրառումը տարրի վրա ոչ միայն կազդի դրա ոճավորման վրա միջին սարքերի վրա, այլև մեծ սարքերի վրա, եթե .col-lg-*դաս չկա:

Նայեք այս սկզբունքները ձեր կոդի մեջ կիրառելու օրինակներին:

Մեդիա հարցումներ

Մենք օգտագործում ենք հետևյալ մեդիա հարցումները մեր Less ֆայլերում՝ մեր ցանցային համակարգի հիմնական բեկման կետերը ստեղծելու համար:

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

Մենք երբեմն ընդլայնում ենք այս մեդիա հարցումները՝ ներառելով max-widthCSS-ը սարքերի ավելի նեղ շարքով սահմանափակելու համար:

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

Ցանցային ընտրանքներ

Տեսեք, թե ինչպես են Bootstrap grid համակարգի ասպեկտները աշխատում հարմար սեղան ունեցող բազմաթիվ սարքերում:

	Լրացուցիչ փոքր սարքեր Հեռախոսներ (<768px)	Փոքր սարքերի պլանշետներ (≥768px)	Միջին սարքերի աշխատասեղաններ (≥992px)	Խոշոր սարքերի աշխատասեղաններ (≥1200px)
Ցանցի վարքագիծը	Հորիզոնական բոլոր ժամանակներում	Ծալվել է սկսելու համար, հորիզոնական՝ ընդմիջման կետերից վեր
Տարայի լայնությունը	Ոչ մեկը (ավտոմատ)	750px	970px	1170px
Դասի նախածանց	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# սյունակներ	12
Սյունակի լայնությունը	Ավտոմատ	~ 62px	~ 81px	~ 97px
Հեղեղաջրերի լայնությունը	30px (15px սյունակի յուրաքանչյուր կողմում)
Բնադրելի	Այո՛
Օֆսեթներ	Այո՛
Սյունակների պատվիրում	Այո՛

Օրինակ՝ շարված-հորիզոնական

Օգտագործելով ցանցի դասերի մեկ հավաքածու .col-md-*՝ դուք կարող եք ստեղծել հիմնական ցանցային համակարգ, որը սկսվում է շարժական սարքերում և պլանշետային սարքերում (ավելի փոքրից փոքր տիրույթում)՝ նախքան աշխատասեղանի (միջին) սարքերում հորիզոնական դառնալը: Տեղադրեք ցանցի սյունակները ցանկացածում .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>

Օրինակ՝ հեղուկի տարա

Ցանկացած ֆիքսված լայնությամբ ցանցի դասավորությունը վերածեք ամբողջ լայնության դասավորության՝ փոխելով ձեր ամենաարտաքինը .container:.container-fluid

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

Օրինակ՝ բջջային և աշխատասեղան

Չե՞ք ուզում, որ ձեր սյունակները պարզապես կուտակվեն ավելի փոքր սարքերում: Օգտագործեք լրացուցիչ փոքր և միջին սարքերի ցանցի դասերը՝ ավելացնելով .col-xs-* .col-md-*ձեր սյունակներին: Տես ստորև բերված օրինակը՝ ավելի լավ պատկերացնելու համար, թե ինչպես է այդ ամենը աշխատում:

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

Օրինակ՝ բջջային, պլանշետ, աշխատասեղան

Կառուցեք նախորդ օրինակի վրա՝ ստեղծելով նույնիսկ ավելի դինամիկ և հզոր դասավորություններ պլանշետների .col-sm-*դասերով:

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

Օրինակ՝ սյունակի փաթաթում

Եթե մեկ տողում տեղադրված են ավելի քան 12 սյունակներ, ապա լրացուցիչ սյունակների յուրաքանչյուր խումբ, որպես մեկ միավոր, կփաթաթվի նոր տողի վրա:

.col-xs-9

.col-xs-4
Քանի որ 9 + 4 = 13 > 12, այս 4 սյունակ լայնությամբ բաժանումը փաթաթվում է նոր տողի վրա որպես մեկ հարակից միավոր:

.col-xs-6
Հաջորդ սյունակները շարունակվում են նոր տողի երկայնքով:

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

Պատասխանատու սյունակը վերակայվում է

Առկա ցանցերի չորս մակարդակների առկայության դեպքում դուք ստիպված կլինեք հանդիպել այնպիսի խնդիրների, երբ որոշակի բեկման կետերում ձեր սյունակները այնքան էլ ճիշտ չեն մաքրվում, քանի որ մեկը մյուսից բարձր է: Դա շտկելու համար օգտագործեք a-ի .clearfixև մեր արձագանքող օգտակար դ��սերի համակցությունը :

.col-xs-6 .col-sm-3
Չափափոխեք ձեր տեսադաշտը կամ ստուգեք այն ձեր հեռախոսում օրինակի համար:

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

Ի հավելումն արձագանքող ընդմիջման կետերում սյունակի մաքրմանը, ձեզ կարող է անհրաժեշտ լինել զրոյացնել հաշվանցումները, հրումներ կամ ձգումներ : Տեսեք սա ցանցի օրինակում գործողության մեջ :

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

Փոխհատուցման սյունակներ

Տեղափոխեք սյունակները դեպի աջ՝ օգտագործելով .col-md-offset-*դասերը: Այս դասերը մեծացնում են սյունակի ձախ լուսանցքն ըստ *սյունակների: Օրինակ՝ .col-md-offset-4շարժվում .col-md-4է չորս սյունակի վրայով:

.col-md-4

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

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

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

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

Դուք կարող եք նաև չեղյալ համարել դասերի հետ կապված ցանցի ստորին շերտերից օֆսեթները .col-*-offset-0:

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

Բնադրող սյուներ

Ձեր բովանդակությունը լռելյայն ցանցի հետ տեղադրելու համար ավելացրեք նոր .rowև մի շարք .col-sm-*սյունակներ գոյություն ունեցող .col-sm-*սյունակում: Ներդրված տողերը պետք է ներառեն մի շարք սյունակներ, որոնք ավելանում են մինչև 12 կամ ավելի քիչ (պարտադիր չէ, որ օգտագործեք բոլոր 12 հասանելի սյունակները):

Մակարդակ 1: .col-sm-9

Մակարդակ 2: .col-xs-8 .col-sm-6

Մակարդակ 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>

Սյունակների պատվիրում

Հեշտությամբ փոխեք մեր ներկառուցված ցանցի սյունակների հերթականությունը .col-md-push-*և .col-md-pull-*փոփոխիչ դասերը:

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

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Ավելի քիչ միքսներ և փոփոխականներ

Ի լրումն արագ դասավորությունների համար նախապես կառուցված ցանցային դասերի , Bootstrap-ը ներառում է ավելի քիչ փոփոխականներ և միքսներ՝ ձեր սեփական պարզ, իմաստային դասավորությունները արագ ստեղծելու համար:

Փոփոխականներ

Փոփոխականները որոշում են սյունակների քանակը, ջրհեղեղի լայնությունը և մեդիա հարցման կետը, որտեղից սկսելու են լողացող սյունակները: Մենք դրանք օգտագործում ենք վերևում փաստաթղթավորված նախապես սահմանված ցանցային դասերը, ինչպես նաև ստորև թվարկված հատուկ միքսների համար ստեղծելու համար:

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

Միքսիններ

Միքսներն օգտագործվում են ցանցի փոփոխականների հետ համատեղ՝ առանձին ցանցի սյունակների համար իմաստային CSS ստեղծելու համար:

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

Օգտագործման օրինակ

Դուք կարող եք փոփոխել փոփոխականները ձեր սեփական արժեքներով, կամ պարզապես օգտագործել միքսներն իրենց լռելյայն արժեքներով: Ահա լռելյայն կարգավորումների օգտագործման օրինակ՝ երկու սյունակի դասավորություն ստեղծելու համար՝ միջև բացը:

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Վերնագրեր

Բոլոր HTML վերնագրերը, <h1>միջոցով <h6>, հասանելի են: .h1միջոցով .h6դասերը նույնպես մատչելի են, երբ ցանկանում եք համապատասխանել վերնագրի տառատեսակի ոճին, բայց դեռ ցանկանում եք, որ ձեր տեքստը ցուցադրվի ներդիրում:

հ1. Bootstrap վերնագիր	Կիսատավ 36px
h2. Bootstrap վերնագիր	Կիսատավ 30px
h3. Bootstrap վերնագիր	Կիսատավ 24px
h4. Bootstrap վերնագիր	Կիսատավ 18px
h5. Bootstrap վերնագիր	Կիսատավ 14px
h6. Bootstrap վերնագիր	Կիսատավ 12px

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

Ստեղծեք ավելի թեթև, երկրորդական տեքստ ցանկացած վերնագրում ընդհանուր <small>պիտակով կամ .smallդասով:

հ1. Bootstrap վերնագիր Երկրորդական տեքստ

h2. Bootstrap վերնագիր Երկրորդական տեքստ

h3. Bootstrap վերնագիր Երկրորդական տեքստ

h4. Bootstrap վերնագիր Երկրորդական տեքստ

h5. Bootstrap վերնագիր Երկրորդական տեքստ

h6. Bootstrap վերնագիր Երկրորդական տեքստ

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

Հիմնական պատճենը

Bootstrap-ի գլոբալ լռելյայն 14pxfont-size է , 1,428 - ի հետ : Սա կիրառվում է և բոլոր պարբերությունների նկատմամբ: Բացի այդ, (պարբերությունները) ստանում են իրենց հաշվարկված տողի բարձրության կեսի ստորին լուսանցքը (10px ըստ լռելյայն):line-height<body><p>

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

Cum sociis natoque penatibus et magnis dis parturient 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>

Հիմնական մարմնի պատճենը

Պարբերությունն աչքի ընկնելով՝ ավելացնելով .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, դա ոչ կոմոդո Կասետային.

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

Կառուցվել է Less-ով

Տպագրական սանդղակը հիմնված է երկու Less variables in variables.less : @font-size-baseand @line-height-base. Առաջինը բազային տառատեսակի չափն է, որն օգտագործվում է ամբողջ ընթացքում, իսկ երկրորդը՝ բազային տողի բարձրությունը: Մենք օգտագործում ենք այդ փոփոխականները և մի քանի պարզ մաթեմատիկա՝ ստեղծելու մեր բոլոր տեսակի լուսանցքները, լցոնումները և գծերի բարձրությունները և ավելին: Անհատականացրեք դրանք, և Bootstrap-ը հարմարվում է:

Ներդիր տեքստի տարրեր

Նշված տեքստ

Մեկ այլ համատեքստում դրա արդիականության պատճառով տեքստի շարքը ընդգծելու համար օգտագործեք <mark>պիտակը:

Դուք կարող եք օգտագործել նշանի պիտակը, որպեսզիընդգծելտեքստը։

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

Ջնջված տեքստ

Ջնջված տեքստի բլոկները նշելու համար օգտագործեք <del>պիտակը:

~~Տեքստի այս տողը նախատեսված է որպես ջնջված տեքստ:~~

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

Կտրված տեքստ

Տեքստի բլոկները նշելու համար, որոնք այլևս տեղին չեն, օգտագործեք <s>պիտակը:

~~Տեքստի այս տողը պետք է դիտարկվի որպես այլևս ոչ ճշգրիտ:~~

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

Տեղադրված տեքստ

Փաստաթղթում լրացումներ նշելու համար օգտագործեք <ins>պիտակը:

Տեքստի այս տողը նախատեսված է որպես փաստաթղթի հավելում:

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

Ընդգծված տեքստ

Տեքստն ընդգծելու համար օգտագործեք <u>պիտակը:

Տեքստի այս տողը կարտացոլվի այնպես, ինչպես ընդգծված է

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

Օգտագործեք HTML-ի լռելյայն շեշտադրման թեգերը թեթև ոճերով:

Փոքր տեքստ

Տեքստի ներդիրում կամ բլոկների շեշտադրումից հանելու համար օգտագործեք <small>պիտակը, որպեսզի տեքստը սահմանեք մայրի չափի 85%-ով: Վերնագրի տարրերը ստանում են իրենց սեփականը font-sizeներդիր <small>տարրերի համար:

Դուք կարող եք որպես այլընտրանք օգտագործել ներկառուցված տարր .smallորևէ մեկի փոխարեն <small>:

Տեքստի այս տողը նախատեսված է որպես նուրբ տպագիր:

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

Համարձակ

Ավելի ծանր տառատեսակով տեքստի հատվածն ընդգծելու համար:

Տեքստի հետևյալ հատվածը ներկայացվում է որպես թավ տեքստ :

<strong>rendered as bold text</strong>

Շեղագիր

Տեքստի հատվածը շեղատառերով ընդգծելու համար:

Տեքստի հետևյալ հատվածը ներկայացվում է որպես շեղ տեքստ :

<em>rendered as italicized text</em>

Այլընտրանքային տարրեր

Ազատորեն օգտագործեք <b>և <i>HTML5-ում: <b>նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ <i>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

Հարթեցման դասեր

Հեշտությամբ վերադասավորեք տեքստը բաղադրիչներին տեքստի հավասարեցման դասերով:

Ձախ հավասարեցված տեքստ:

Կենտրոնում հավասարեցված տեքստ:

Աջ հավասարեցված տեքստ:

Արդարացված տեքստ.

Փաթեթավորող տեքստ չկա:

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

Փոխակերպման դասեր

Փոխակերպեք տեքստը բաղադրիչներով տեքստի մեծատառերի դասերով:

Փոքրատառ տեքստ.

Մեծատառ տեքստ.

Մեծատառով տեքստ:

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

հապավումներ

HTML-ի տարրի ոճավորված իրականացում <abbr>հապավումների և հապավումների համար՝ սավառնելիս ընդլայնված տարբերակը ցուցադրելու համար: Հատկանիշ ունեցող հապավումներն titleունեն թեթև կետավոր ներքևի եզրագիծ և սավառնելիս օգնության կուրսորը, որը լրացուցիչ համատեքստ է տրամադրում սավառնելիս և օժանդակ տեխնոլոգիաների օգտագործողներին:

Հիմնական հապավումը

Հատկանիշ բառի հապավումը attr է :

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

Ինիցիոնալիզմ

.initialismՄի փոքր ավելի փոքր տառաչափի համար ավելացրեք հապավումը:

HTML- ն ամենալավ բանն է կտրատած հացից հետո:

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

Հասցեներ

Ներկայացրե՛ք մոտակա նախնիների կամ աշխատանքի ողջ մարմնի կոնտակտային տվյալները: Պահպանեք ֆորմատավորումը՝ վերջացնելով բոլոր տողերը <br>:

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

Ամբողջական անուն
[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>

Արգելափակման մեջբերումներ

Ձեր փաստաթղթում մեկ այլ աղբյուրից բովանդակության բլոկներ մեջբերելու համար:

Կանխադրված բլոկի մեջբերում

Փաթաթեք <blockquote>ցանկացած HTML- ի շուրջը որպես մեջբերում: Ուղղակի չակերտների համար խորհուրդ ենք տալիս <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

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

Արգելափակման ընտրանքներ

Ոճը և բովանդակությունը փոխվում են ստանդարտի պարզ տատանումների համար <blockquote>:

Աղբյուրի անվանումը

Ավելացրեք <footer>աղբյուրը նույնականացնելու համար: Փաթեթավորեք սկզբնաղբյուր աշխատանքի անվանումը <cite>:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

Աղբյուրի վերնագրում հայտնի մեկը

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Այլընտրանքային ցուցադրումներ

Ավելացրեք .blockquote-reverseաջ հարթեցված բովանդակությամբ բլոկի մեջբերում:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

Աղբյուրի վերնագրում հայտնի մեկը

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

Ցուցակներ

Չպատվիրված

Նյութերի ցանկ, որոնց կարգը բացահայտորեն կարևոր չէ :

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

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

Պատվիրել է

Ապրանքների ցանկ, որոնցում պատվերը բացահայտ նշանակություն ունի :

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

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

Ոչ ոճավորված

Հեռացրեք լռելյայն list-styleև ձախ լուսանցքը ցանկի տարրերից (միայն անմիջական երեխաների համար): Սա վերաբերում է միայն անմիջապես երեխաների ցանկի տարրերին , ինչը նշանակում է, որ դուք պետք է դասը ավելացնեք նաև ցանկացած ներդիր ցուցակների համար:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
Eget porttitor lorem

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

Inline

Տեղադրեք ցանկի բոլոր տարրերը մեկ տողի վրա display: inline-block;և մի քանի թեթև լցոնով:

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Նկարագրություն

Տերմինների ցանկ՝ իրենց հարակից նկարագրություններով:

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ: 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>

Հորիզոնական նկարագրություն

Կազմեք տերմիններ և նկարագրություններ՝ <dl>կողք կողքի շարված: Սկսվում է լռելյայն ներդիրների պես <dl>, բայց երբ նավագոտն ընդլայնվում է, արեք դրանք:

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ: 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>

Ավտոմատ կտրում

Հորիզոնական նկարագրության ցուցակները կկրճատեն տերմինները, որոնք չափազանց երկար են ձախ սյունակում տեղավորվելու համար text-overflow: Ավելի նեղ տեսադաշտերում դրանք կվերածվեն լռելյայն կուտակված դասավորության:

Inline

Փաթեթավորեք կոդի ներդիր հատվածները <code>.

Օրինակ, <section>պետք է փաթաթված լինի որպես ներդիր:

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

Օգտագործողի մուտքագրում

Օգտագործեք <kbd>ստեղնաշարի միջոցով մուտքագրվող մուտքը նշելու համար:

Գրացուցակները փոխելու համար մուտքագրեք cdգրացուցակի անվանումը:
Պարամետրերը խմբագրելու համար սեղմեք 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>

Հիմնական բլոկ

Օգտագործեք <pre>կոդի բազմաթիվ տողերի համար: Համոզվեք, որ կոդի ցանկացած անկյունային փակագծերից խուսափելու համար ճիշտ մատուցման համար:

<p>Տեքստի նմուշ այստեղ...</p>

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

Դուք կարող եք կամայականորեն ավելացնել .pre-scrollableդասը, որը կսահմանի 350px առավելագույն բարձրություն և կապահովի y առանցքի ոլորման տող:

Փոփոխականներ

Փոփոխականները նշելու համար օգտագործեք <var>պիտակը:

y = m x + b

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

Նմուշի ելք

Ծրագրից ստացված նմուշի բլոկները նշելու համար օգտագործեք <samp>պիտակը:

Այս տեքստը նախատեսված է որպես համակարգչային ծրագրի նմուշի արդյունք:

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

Հիմնական օրինակ

Հիմնական ոճավորման համար՝ թեթև լիցք և միայն հորիզոնական բաժանիչներ, ավելացրեք հիմնական դասը .tableցանկացածին <table>: Դա կարող է չափազանց ավելորդ թվալ, բայց հաշվի առնելով աղյուսակների լայն կիրառումը այլ հավելումների համար, ինչպիսիք են օրացույցները և ամսաթվերը ընտրողները, մենք որոշել ենք առանձնացնել աղյուսակի մեր հատուկ ոճերը:

Աղյուսակի ընտրովի վերնագիր:
#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

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

Գծավոր շարքեր

Օգտագործեք .table-stripedզեբրա-գծապատկեր ավելացնելու համար աղյուսակի ցանկացած տողում <tbody>:

Բրաուզերների համատեղելիություն

Գծավոր աղյուսակները ձևավորվում են :nth-childCSS ընտրիչի միջոցով, որը հասանելի չէ Internet Explorer 8-ում:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

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

Սահմաններով սեղան

Ավելացրեք .table-borderedաղյուսակի և բջիջների բոլոր կողմերի սահմանները:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

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

Սավառնել տողերը

Ավելացրեք .table-hover՝ սավառնող վիճակը միացնելու համար աղյուսակի տողերում <tbody>:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

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

Խտացրած սեղան

Ավելացրեք .table-condensedսեղանները ավելի կոմպակտ դարձնելու համար՝ կիսով չափ կտրելով բջիջների լցոնումը:

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի թռչուն		@twitter

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

Համատեքստային դասեր

Օգտագործեք համատեքստային դասեր աղյուսակի տողերը կամ առանձին բջիջները գունավորելու համար:

Դասարան	Նկարագրություն
`.active`	Կիրառում է սավառնողի գույնը որոշակի տողի կամ բջիջի վրա
`.success`	Ցույց է տալիս հաջող կամ դրական գործողություն
`.info`	Ցույց է տալիս չեզոք տեղեկատվական փոփոխություն կամ գործողություն
`.warning`	Ցույց է տալիս նախազգուշացում, որը կարող է ուշադրության կարիք ունենալ
`.danger`	Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն

#	Սյունակի վերնագիր	Սյունակի վերնագիր	Սյունակի վերնագիր
1	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
2	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
3	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
4	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
5	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
6	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
7	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
8	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը
9	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը	Սյունակի բովանդակությունը

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

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Գույնի օգտագործումը աղյուսակի տողին կամ առանձին բջիջին իմաստ ավելացնելու համար միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (տեսանելի տեքստը համապատասխան աղյուսակի տողում/բջջում), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսիք են .sr-onlyդասի հետ թաքցված լրացուցիչ տեքստը:

Պատասխանատու աղյուսակներ

Ստեղծեք արձագանքող աղյուսակներ՝ փաթաթելով ցանկացածը .table, .table-responsiveորպեսզի դրանք հորիզոնական ոլորվեն փոքր սարքերում (768px-ից ցածր): 768px-ից ավելի լայնությամբ որևէ բան դիտելիս այս աղյուսակներում որևէ տարբերություն չեք տեսնի:

Ուղղահայաց կտրում/կտրում

Պատասխանատու աղյուսակները օգտագործում են overflow-y: hidden, որը կտրում է ցանկացած բովանդակություն, որը դուրս է աղյուսակի ներքևի կամ վերին եզրերից: Մասնավորապես, սա կարող է անջատել բացվող ընտրացանկերը և այլ երրորդ կողմի վիդջեթները:

Firefox և դաշտերի հավաքածուներ

Firefox-ն ունի անհարմար դաշտային հավաքածուի ոճավորում, widthորը խանգարում է արձագանքող աղյուսակին: Սա չի կարող անտեսվել առանց Firefox-ի հատուկ հակերի, որը մենք չենք տրամադրում Bootstrap-ում.

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

Լրացուցիչ տեղեկությունների համար կարդացեք Stack Overflow-ի այս պատասխանը :

#	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր
1	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ
2	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ
3	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ

#	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր
1	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ
2	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ
3	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ

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

Հիմնական օրինակ

Առանձին ձևի կառավարիչներ ավտոմատ կերպով ստանում են որոշակի գլոբալ ոճավորում: Բոլոր տեքստային <input>, <textarea>, և <select>տարրերի հետ .form-controlդրված width: 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>

Մի խառնեք ձևերի խմբերը մուտքային խմբերի հետ

Մի խառնեք ձևերի խմբերն ուղղակիորեն մուտքային խմբերի հետ : Փոխարենը, տեղադրեք մուտքային խումբը ձևախմբում:

Ներդիր ձև

Ավելացրեք .form-inlineձեր ձևին (որը պարտադիր չէ, որ լինի a <form>) ձախ կողմում և ներկառուցված բլոկների վերահսկման համար: Սա վերաբերում է միայն այն ձևերին, որոնք գտնվում են դիտակետերում, որոնք ունեն առնվազն 768 px լայնություն:

Կարող է պահանջվել հատուկ լայնություններ

Մուտքագրումները և ընտրանքները width: 100%;կիրառվել են լռելյայնորեն Bootstrap-ում: Ներկառուցված ձևերի շրջանակներում մենք վերակայում ենք, width: auto;որ մի քանի հսկիչները կարող են մնալ նույն տողում: Կախված ձեր դասավորությունից, կարող են պահանջվել լրացուցիչ հարմարեցված լայնություններ:

Միշտ ավելացրեք պիտակներ

Էկրանի ընթերցողները դժվարություններ կունենան ձեր ձևերի հետ, եթե յուրաքանչյուր մուտքագրման համար պիտակ չներառեք: Այս ներդիր ձևերի համար կարող եք թաքցնել պիտակները՝ օգտագործելով .sr-onlyդասը: Աջակցող տեխնոլոգիաների համար պիտակ տրամադրելու այլ այլընտրանքային մեթոդներ կան, ինչպիսիք են aria-label, aria-labelledbyկամ titleհատկանիշը: Եթե սրանցից ոչ մեկը չկա, էկրանի ընթերցողները կարող են օգտագործել placeholderհատկանիշը, եթե առկա է, բայց նշեք, որ placeholderորպես պիտակավորման այլ մեթոդների փոխարինում օգտագործելը խորհուրդ չի տրվում:

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

Հորիզոնական ձև

Օգտագործեք Bootstrap-ի նախապես սահմանված ցանցային դասերը՝ պիտակները և ձևի կառավարիչների խմբերը հորիզոնական դասավորության մեջ հավասարեցնելու համար՝ ավելացնելով .form-horizontalձևին (որը պարտադիր չէ, որ լինի <form>): Այդպես վարվելով՝ փոխվում .form-groupէ ցանցի տողերի տեսքը, ուստի կարիք չկա .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>

Աջակցվող վերահսկում

Ստանդարտ ձևի վերահսկման օրինակներ, որոնք աջակցվում են ձևի օրինակի դասավորության մեջ:

Մուտքագրումներ

Ամենատարածված ձևի կառավարում, տեքստի վրա հիմնված մուտքագրման դաշտեր: Ներառում է աջակցություն բոլոր HTML5 տեսակների համար ՝ text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telևcolor

Պահանջվում է տեսակի հայտարարագիր

Մուտքագրումները ամբողջությամբ կձևավորվեն միայն այն դեպքում, եթե դրանք typeպատշաճ կերպով հայտարարված լինեն:

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

Մուտքային խմբեր

Տեքստի վրա հիմնված ցանկացած տեքստից առաջ և/կամ հետո ինտեգրված տեքստ կամ կոճակներ ավելացնելու համար <input>ստուգեք մուտքային խմբի բաղադրիչը :

Textarea

Ձևի կառավարում, որն աջակցում է տեքստի մի քանի տող: Փոխեք rowsհատկանիշը ըստ անհրաժեշտության:

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

Նշման տուփեր և ռադիոներ

Վանդակները նախատեսված են ցուցակում մեկ կամ մի քանի տարբերակներ ընտրելու համար, մինչդեռ ռադիոկայանները նախատեսված են շատերից մեկ տարբերակ ընտրելու համար:

Անջատված վանդակներն ու ռադիոները աջակցվում են, բայց ծնողի սավառնողի վրա «չթույլատրված» կուրսորը ապահովելու համար <label>դուք պետք է .disabledդասը ավելացնեք ծնողին .radio, .radio-inline, .checkbox, կամ .checkbox-inline.

Կանխադրված (դասավոր)

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

Ներկառուցված վանդակներ և ռադիոներ

Օգտագործեք .checkbox-inlineկամ .radio-inlineդասերը մի շարք վանդակների կամ ռադիոկայանների վրա նույն տողում հայտնվող հսկիչների համար:

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

Վանդակներ և ռադիոներ առանց պիտակի տեքստի

Եթե դուք չունեք տեքստի ներսում <label>, մուտքագրումը տեղադրվում է այնպես, ինչպես դուք կակնկալեիք: Ներկայումս աշխատում է միայն ոչ ներկառուցված վանդակների և ռադիոների վրա: Հիշեք, որ դեռևս տրամադրեք պիտակի որևէ ձև օժանդակ տեխնոլոգիաների համար (օրինակ՝ օգտագործելով 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>

Ընտրում է

Նկատի ունեցեք, որ շատ տեղական ընտրացանկեր, մասնավորապես՝ Safari-ում և Chrome-ում, ունեն կլորացված անկյուններ, որոնք չեն կարող փոփոխվել border-radiusհատկությունների միջոցով:

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

<select>Հատկանիշով վերահսկիչների համար լռելյայն multipleցուցադրվում են բազմաթիվ տարբերակներ:

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

Ստատիկ հսկողություն

Երբ ձևի մեջ ձևի պիտակի կողքին պետք է տեղադրել պարզ տեքստ, օգտագործեք .form-control-staticդասը a <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Ֆոկուս վիճակ

Մենք հեռացնում ենք լռելյայն outlineոճերը որոշ ձևերի վերահսկումներից և կիրառում ենք a- box-shadowն իր տեղում :focus:

Դեմո `:focus`պետություն

Վերոնշյալ օրինակի մուտքագրումը մեր փաստաթղթերում օգտագործում է հատուկ ոճեր՝ ցուցադրելու :focusվիճակը մի .form-control.

Հաշմանդամ վիճակ

Ավելացրեք disabledբուլյան հատկանիշը մուտքագրման վրա՝ օգտատերերի փոխազդեցությունները կանխելու համար: Անջատված մուտքերը ավելի թեթև են և ավելացնում են not-allowedկուրսորը:

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

Անջատված դաշտերի հավաքածուներ

Ավելացրեք disabledհատկանիշը a-ին <fieldset>` միանգամից անջատելու բոլոր վերահսկիչները <fieldset>:

Զգուշացում կապի ֆունկցիոնալության վերաբերյալ`<a>`

Լռելյայնորեն, զննարկիչները կվերաբերվեն բոլոր բնիկ ձևի կառավարումներին ( <input>, <select>և <button>տարրեր) a-ի ներսում <fieldset disabled>որպես անջատված՝ կանխելով և՛ ստեղնաշարի, և՛ մկնիկի փոխազդեցությունը դրանց վրա: Այնուամենայնիվ, եթե ձեր ձևը ներառում է նաև <a ... class="btn btn-*">տարրեր, դրանց միայն ոճը կտրվի pointer-events: none: Ինչպես նշվեց կոճակների անջատված վիճակի մասին բաժնում (և մասնավորապես խարիսխի տարրերի ենթաբաժնում), այս CSS հատկությունը դեռ ստանդարտացված չէ և ամբողջությամբ չի աջակցվում Opera 18-ում և ստորև, կամ Internet Explorer 11-ում և շահել է: Չխոչընդոտեք ստեղնաշարի օգտագործողներին, որպեսզի կարողանան կենտրոնանալ կամ ակտիվացնել այս հղումները: Այսպիսով, ապահով լինելու համար օգտագործեք մաքսային JavaScript՝ նման հղումներն անջատելու համար:

Բրաուզերների համատեղելիություն

Թեև Bootstrap-ը կկիրառի այս ոճերը բոլոր բրաուզերներում, Internet Explorer 11-ը և ստորև նշվածը լիովին չեն աջակցում disabledհատկանիշը <fieldset>. Օգտագործեք հատուկ JavaScript՝ այս բրաուզերներում դաշտերի հավաքածուն անջատելու համար:

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

Միայն կարդալու վիճակ

Մուտքի վրա ավելացրեք readonlyբուլյան հատկանիշ՝ մուտքի արժեքի փոփոխությունը կանխելու համար: Միայն կարդալու մուտքերը ավելի թեթև են թվում (ինչպես անջատված մուտքերը), բայց պահպանում են ստանդարտ կուրսորը:

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

Օգնության տեքստ

Արգելափակման մակարդակի օգնության տեքստը ձևի վերահսկման համար:

Օգնության տեքստի կապակցում ձևի վերահսկման հետ

Օգնության տեքստը պետք է բացահայտորեն կապված լինի ձևի կառավարման հետ, որին այն առնչվում է aria-describedbyհատկանիշի օգտագործմամբ: Սա կապահովի, որ օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցողները, կհայտարարեն այս օգնության տեքստը, երբ օգտատերը կենտրոնանա կամ մտնի կառավարում:

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

Վավերացման վիճակներ

Bootstrap-ը ներառում է սխալի, նախազգուշացման և հաջողության վիճակների վավերացման ոճեր ձևերի վերահսկման վրա: Օգտագործելու, ավելացնելու .has-warning, .has-error, կամ .has-successմայր տարրին: Ցանկացած .control-label, .form-controlև .help-blockայդ տարրի ներսում կստանա վավերացման ոճերը:

Վավերացման վիճակի փոխանցում օժանդակ տեխնոլոգիաներին և դալտոնիկ օգտվողներին

Վավերացման այս ոճերի օգտագործումը՝ ձևի կառավարման վիճակը նշելու համար, ապահովում է միայն տեսողական, գույնի վրա հիմնված ցուցում, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները, կամ դալտոնիկ օգտատերերին:

Ապահովել, որ տրամադրվի նաև պետության այլընտրանքային նշում: Օրինակ, ձևի կառավարման <label>տեքստում կարող եք ներառել վիճակի մասին հուշում (ինչպես դա տեղի է ունենում հետևյալ կոդի օրինակում), ներառել Glyphicon (համապատասխան այլընտրանքային տեքստով, օգտագործելով .sr-onlyդասը. տե՛ս Glyphicon-ի օրինակները ) կամ տրամադրելով լրացուցիչ օգնության տեքստային բլոկ: Հատկապես օժանդակ տեխնոլոգիաների համար, ձևի անվավեր հսկիչները կարող են նաև aria-invalid="true"հատկանիշ վերագրվել:

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

Ընտրովի պատկերակներով

Կարող եք նաև ավելացնել հետադարձ կապի կամընտիր պատկերակներ՝ ավելացնելով .has-feedbackև ճիշտ պատկերակը:

Հետադարձ կապի պատկերակները աշխատում են միայն տեքստային <input class="form-control">տարրերի հետ:

Սրբապատկերներ, պիտակներ և մուտքային խմբեր

Հետադարձ կապի պատկերակների ձեռքով տեղադրումը պահանջվում է առանց պիտակի մուտքագրման և աջ կողմում հավելում ունեցող մուտքային խմբերի համար: Ձեզ խստորեն խրախուսվում է տրամադրել պիտակներ բոլոր մուտքերի համար՝ մատչելիության նկատառումներով: Եթե ցանկանում եք կանխել պիտակների ցուցադրումը, թաքցրեք դրանք .sr-onlyդասի հետ: Եթե դուք պետք է անեք առանց պիտակների, կարգավորեք topհետադարձ կապի պատկերակի արժեքը: Մուտքային խմբերի համար rightարժեքը հարմարեցրեք համապատասխան պիքսելային արժեքին՝ կախված ձեր հավելման լայնությունից:

Սրբապատկերի նշանակությունը փոխանցելով օժանդակ տեխնոլոգիաներին

Ապահովելու համար, որ օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցողները, ճիշտ կերպով փոխանցում են պատկերակի իմաստը, լրացուցիչ թաքնված տեքստը պետք է ներառվի .sr-onlyդասի հետ և բացահայտորեն կապված լինի ձևի կառավարման հետ, որին այն վերաբերում է օգտագործելով aria-describedby: Որպես այլընտրանք, համոզվեք, որ իմաստը (օրինակ, այն փաստը, որ կա նախազգուշացում որոշակի տեքստի մուտքագրման դաշտի համար) փոխանցվում է որևէ այլ ձևով, օրինակ՝ փոխելով <label>ձևի կառավարման հետ կապված փաստացի տեքստը:

Թեև հետևյալ օրինակներն արդեն նշում են իրենց համապատասխան ձևի վերահսկման վավերացման վիճակը հենց <label>տեքստում, վերը նշված տեխնիկան (օգտագործելով .sr-onlyտեքստը և aria-describedby) ներառվել է նկարազարդման նպատակով:

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Ընտրովի սրբապատկերներ հորիզոնական և ներդիր ձևերով

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Ընտրովի սրբապատկերներ թաքնված `.sr-only`պիտակներով

Եթե դուք օգտագործում եք .sr-onlyդասը ձևի կառավարումը թաքցնելու համար <label>(այլ պիտակավորման ընտրանքներ օգտագործելու փոխարեն, օրինակ՝ aria-labelհատկանիշը), Bootstrap-ը ավտոմատ կերպով կկարգավորի պատկերակի դիրքը, երբ այն ավելացվի:

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

Վերահսկել չափերը

Սահմանեք բարձրություններ՝ օգտագործելով դասեր, ինչպիսիք են .input-lg, և սահմանեք լայնություններ՝ օգտագործելով ցանցի սյունակների դասերը, ինչպիսիք են .col-lg-*.

Բարձրության չափը

Ստեղծեք ավելի բարձր կամ կարճ ձևի հսկիչներ, որոնք համապատասխանում են կոճակների չափերին:

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

Հորիզոնական ձևերի խմբերի չափերը

Արագ չափեք պիտակները և ձևերի վերահսկիչները .form-horizontal՝ ավելացնելով .form-group-lgկամ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Սյունակի չափսերը

Փաթեթավորեք մուտքերը ցանցի սյունակներում կամ ցանկացած հարմարեցված մայր տարրի մեջ, որպեսզի հեշտությամբ կիրառեք ցանկալի լայնությունները:

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

Կոճակի պիտակներ

Օգտագործեք կոճակների դասերը <a>, <button>, կամ <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">

Համատեքստի հատուկ օգտագործում

Թեև կոճակների դասերը կարող են օգտագործվել տարրերի <a>և <button>տարրերի վրա, միայն <button>տարրերն են աջակցվում մեր նավի և նավագոտու բաղադրիչներում:

Հղումներ, որոնք գործում են որպես կոճակներ

Եթե <a>տարրերն օգտագործվում են որպես կոճակներ գործելու համար՝ գործարկելով ներէջի ֆունկցիոնալությունը, այլ ոչ թե ընթացիկ էջի մեկ այլ փաստաթուղթ կամ բաժին նավարկելու փոխարեն, նրանց նույնպես պետք է տրվի համապատասխան role="button".

Խաչաձեւ զննարկիչի մատուցում

Որպես լավագույն պրակտիկա, մենք բարձր խորհուրդ ենք տալիս օգտագործել <button>տարրը, երբ հնարավոր է, ապահովելու համար համընկնող բրաուզերի ցուցադրումը:

Ի թիվս այլ բաների, Firefox-ում կա վրիպակ <30 , որը թույլ չի տալիս մեզ տեղադրել կոճակների line-heightվրա <input>հիմնված կոճակները, ինչը հանգեցնում է նրան, որ դրանք ճշգրտորեն չեն համապատասխանում Firefox-ի մյուս կոճակների բարձրությանը:

Ընտրանքներ

Օգտագործեք առկա կոճակների դասերից որևէ մեկը՝ ոճավորված կոճակ արագ ստեղծելու համար:

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

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Կոճակին իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (կոճակի տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցների միջոցով, ինչպիսիք են .sr-onlyդասի հետ թաքցված լրացուցիչ տեքստը:

Չափերը

Ցանկանում եք ավելի մեծ կամ փոքր կոճակներ: Ավելացնել .btn-lg, .btn-smկամ .btn-xsլրացուցիչ չափերի համար:

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

Ստեղծեք բլոկի մակարդակի կոճակներ, որոնք ընդգրկում են ծնողի ամբողջ լայնությունը՝ ավելացնելով .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>

Ակտիվ վիճակ

Երբ ակտիվ է, կոճակները կհայտնվեն սեղմված (ավելի մուգ ֆոնով, ավելի մուգ եզրագծով և ներդիր ստվերով): <button>Տարրերի համար դա արվում է :active. Տարրերի համար <a>դա արվում է .active. Այնուամենայնիվ, դուք կարող եք օգտագործել s- .activeում <button>(և ներառել aria-pressed="true"հատկանիշը), եթե անհրաժեշտ լինի ակտիվ վիճակը ծրագրային կերպով կրկնօրինակել:

Կոճակի տարր

Կարիք չկա ավելացնել :active, քանի որ դա կեղծ դաս է, բայց եթե ձեզ հարկավոր է ստիպել նույն տեսքը, շարունակեք և ավելացրեք .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>

Խարիսխի տարր

.activeԴասը ավելացրեք <a>կոճակներին:

Առաջնային հղում Հղում

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

Հաշմանդամ վիճակ

Դարձրեք կոճակներին չսեղմելու տեսք՝ դրանք նորից գունաթափելով opacity.

Կոճակի տարր

Ավելացրեք disabledհատկանիշը <button>կոճակներին:

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Բրաուզերների համատեղելիություն

Եթե ավելացնեք disabledհատկանիշը a-ին <button>, Internet Explorer 9-ը և ստորև տեքստը մոխրագույն կդարձնի տհաճ տեքստի ստվերով, որը մենք չենք կարող ուղղել:

Խարիսխի տարր

.disabledԴասը ավելացրեք <a>կոճակներին:

Առաջնային հղում Հղում

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

Մենք .disabledայստեղ օգտագործում ենք որպես օգտակար դաս, որը նման է սովորական .activeդասին, ուստի նախածանց չի պահանջվում:

Հղման գործառույթի նախազգուշացում

Այս դասը pointer-events: noneփորձում է անջատել <a>s-ի հղման գործառույթը, սակայն այդ CSS հատկությունը դեռ ստանդարտացված չէ և ամբողջությամբ չի աջակցվում Opera 18-ում և ներքևում կամ Internet Explorer 11-ում: Բացի այդ, նույնիսկ այն բրաուզերներում, որոնք աջակցում են pointer-events: none, ստեղնաշարը: նավիգացիան մնում է անփոփոխ, ինչը նշանակում է, որ տեսողությամբ ստեղնաշարի օգտագործողները և օժանդակ տեխնոլոգիաների օգտագործողները դեռ կկարողանան ակտիվացնել այս հղումները: Այսպիսով, ապահով լինելու համար օգտագործեք մաքսային JavaScript՝ նման հղումներն անջատելու համար:

Պատասխանատու պատկերներ

Bootstrap 3-ի պատկերները կարող են հարմարեցված լինել՝ .img-responsiveդասի ավելացման միջոցով: Սա վերաբերում է max-width: 100%;, height: auto;և display: block;պատկերին այնպես, որ այն լավ մասշտաբվի մինչև մայր տարրը:

.img-responsiveԴասը օգտագործող պատկերները կենտրոնացնելու համար օգտագործեք .-ի .center-blockփոխարեն .text-center: Օգտագործման մասին լրացուցիչ մանրամասների համար տես օգնականների դասերի բաժինը :.center-block

SVG պատկերներ և IE 8-10

Internet Explorer 8-10-ում SVG պատկերներն .img-responsiveունեն անհամաչափ չափսեր: Դա շտկելու համար width: 100% \9;անհրաժեշտության դեպքում ավելացրեք: Bootstrap-ը սա ինքնաբերաբար չի կիրառում, քանի որ այն բարդություններ է առաջացնում պատկերների այլ ձևաչափերի համար:

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

Պատկերի ձևեր

Ավելացրեք դասեր <img>տարրի մեջ՝ ցանկացած նախագծում պատկերները հեշտությամբ ոճավորելու համար:

Բրաուզերների համատեղելիություն

Հիշեք, որ Internet Explorer 8-ը չունի կլորացված անկյունների աջակցություն:

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

Համատեքստային գույներ

Փոխանցեք իմաստը գույնի միջոցով մի քանի ընդգծված օգտակար դասերի միջոցով: Սրանք կարող են կիրառվել նաև հղումների վրա և սավառնելիս կմթանեն այնպես, ինչպես մեր լռելյայն հղման ոճերը:

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>

Զբաղվել կոնկրետությամբ

Երբեմն շեշտադրման դասերը չեն կարող կիրառվել մեկ այլ ընտրիչի առանձնահատկությունների պատճառով: Շատ դեպքերում, բավարար լուծում է ձեր տեքստը <span>դասարանի հետ a-ով փաթաթելը:

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կամ ակնհայտ է հենց բովանդակությունից (համատեքստային գույներն օգտագործվում են միայն տեքստում/նշման մեջ արդեն առկա իմաստն ամրապնդելու համար), կամ ներառված են այլընտրանքային միջոցների միջոցով, օրինակ՝ լրացուցիչ տեքստ, որը թաքցված է .sr-onlyդասի հետ։ .

Համատեքստային նախադրյալներ

Համատեքստային տեքստի գույների դասերի նման, հեշտությամբ սահմանեք տարրի ֆոն ցանկացած համատեքստային դասի: Խարիսխի բաղադրիչները կմգանան սավառնելիս, ինչպես տեքստային դասերը:

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>

Զբաղվել կոնկրետությամբ

Երբեմն համատեքստային ֆոնային դասերը չեն կարող կիրառվել մեկ այլ ընտրիչի առանձնահատկությունների պատճառով: Որոշ դեպքերում, բավարար լուծում է ձեր տարրի բովանդակությունը <div>դասի հետ a-ով փաթաթելը:

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Ինչպես համատեքստային գույների դեպքում, համոզվեք, որ գույնի միջոցով փոխանցվող ցանկացած իմաստ նույնպես փոխանցվի այնպիսի ձևաչափով, որը զուտ ցուցադրական չէ:

Փակել պատկերակը

Օգտագործեք փակման ընդհանուր պատկերակը բովանդակությունը, օրինակ՝ մոդալները և ծանուցումները մերժելու համար:

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

Կարետներ

Օգտագործեք փեշեր՝ բացվող ֆունկցիոնալությունը և ուղղությունը նշելու համար: Նկատի ունեցեք, որ լռելյայն խցիկը ինքնաբերաբար կփոխվի բացվող ընտրացանկերում :

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

Արագ լողացողներ

Լողացրե՛ք տարրը դեպի ձախ կամ աջ դասի հետ: !importantներառված է կոնկրետ խնդիրներից խուսափելու համար: Դասերը կարող են օգտագործվել նաև որպես միքսիններ։

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

Կենտրոնական բովանդակության բլոկներ

Սահմանեք տարրը display: blockև կենտրոնացրեք դրա միջոցով margin: Առկա է որպես միքսին և դասի:

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

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

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

Մաքրել

Հեշտությամբ մաքրեք floats-ը` ավելացնելով .clearfix մայր տարրին : Օգտագործում է Nicolas Gallagher-ի կողմից տարածված միկրո հստակեցումը : Կարող է օգտագործվել նաև որպես միքսին։

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

Բովանդակության ցուցադրում և թաքցնում

Ստիպել, որ տարրը ցուցադրվի կամ թաքցվի ( ներառյալ էկրանի ընթերցողների համար )՝ օգտագործելով .showև .hiddenդասերը: Այս դասերը օգտագործվում !importantեն հատուկ կոնֆլիկտներից խուսափելու համար, ինչպես արագ լողացողները : Դրանք հասանելի են միայն բլոկի մակարդակը փոխելու համար: Նրանք կարող են օգտագործվել նաև որպես խառնուրդներ։

.hideհասանելի է, բայց միշտ չէ, որ ազդում է էկրանի ընթերցողների վրա և հնացած է v3.0.1-ի դրությամբ: Օգտագործեք .hiddenկամ .sr-onlyփոխարենը:

Ավելին, .invisibleկարող է օգտագործվել միայն տարրի տեսանելիությունը փոխելու համար, ինչը նշանակում է, որ displayայն չի փոփոխվել, և տարրը դեռ կարող է ազդել փաստաթղթի հոսքի վրա:

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

Էկրանի ընթերցիչ և ստեղնաշարի նավիգացիոն բովանդակություն

Թաքցնել տարրը բոլոր սարքերում , բացառությամբ էկրանի.sr-only ընթերցողների : Միավորել .sr-onlyհետ .sr-only-focusable՝ տարրը կրկին ցուցադրելու համար, երբ այն կենտրոնացած է (օրինակ՝ միայն ստեղնաշար ունեցող օգտվողի կողմից): Անհրաժեշտ է մատչելիության լավագույն փորձին հետևելու համար : Կարող է օգտագործվել նաև որպես խառնուրդներ։

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

Պատկերի փոխարինում

Օգտագործեք .text-hideդասը կամ mixin-ը՝ օգնելու տարրի տեքստային բովանդակությունը փոխարինել ֆոնային պատկերով:

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

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

Շարժական սարքերի համար ավելի արագ զարգացման համար օգտագործեք այս օգտակար դասերը՝ մեդիա հարցման միջոցով սարքի կողմից բովանդակությունը ցուցադրելու և թաքցնելու համար: Ներառված են նաև օգտակար դասեր՝ տպագրության ժամանակ բովանդակությունը փոխելու համար:

Փորձեք դրանք օգտագործել սահմանափակ հիմունքներով և խուսափեք նույն կայքի բոլորովին այլ տարբ��րակներ ստեղծելուց: Փոխարենը, օգտագործեք դրանք յուրաքանչյուր սարքի ներկայացումը լրացնելու համար:

Հասանելի դասեր

Օգտագործեք հասանելի դասերի մեկ կամ համակցություն՝ բովանդակությունը դիտակետերի բեկման կետերում փոխելու համար:

	Լրացուցիչ փոքր սարքերՀեռախոսներ (<768px)	Փոքր սարքերՊլանշետներ (≥768px)	Միջին սարքերՍեղաններ (≥992px)	Խոշոր սարքերՍեղաններ (≥1200px)
`.visible-xs-*`	Տեսանելի	Թաքնված	Թաքնված	Թաքնված
`.visible-sm-*`	Թաքնված	Տեսանելի	Թաքնված	Թաքնված
`.visible-md-*`	Թաքնված	Թաքնված	Տեսանելի	Թաքնված
`.visible-lg-*`	Թաքնված	Թաքնված	Թաքնված	Տեսանելի
`.hidden-xs`	Թաքնված	Տեսանելի	Տեսանելի	Տեսանելի
`.hidden-sm`	Տեսանելի	Թաքնված	Տեսանելի	Տեսանելի
`.hidden-md`	Տեսանելի	Տեսանելի	Թաքնված	Տեսանելի
`.hidden-lg`	Տեսանելի	Տեսանելի	Տեսանելի	Թաքնված

v3.2.0-ի դրությամբ, յուրաքանչյուր ընդմիջման կետի դասերը լինում են երեք տարբերակով, մեկը՝ ստորև թվարկված .visible-*-*յուրաքանչյուր CSS հատկության արժեքի համար:display

Դասարանների խումբ	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Այսպիսով, լրացուցիչ փոքր ( xs) էկրանների համար, օրինակ, մատչելի .visible-*-*դասերն են՝ .visible-xs-block, .visible-xs-inline, և .visible-xs-inline-block:

Դասերը .visible-xs, .visible-sm, .visible-mdև .visible-lgնույնպես գոյություն ունեն, բայց հնացած են v3.2.0-ի դրությամբ : Դրանք մոտավորապես համարժեք են .visible-*-block, բացառությամբ լրացուցիչ հատուկ դեպքերի, որոնք կապված են <table>տարրերի փոփոխման հետ:

Տպագրության դասեր

Ինչպես սովորական արձագանքող դասերին, օգտագործեք դրանք՝ տպագրության համար բովանդակությունը փոխելու համար:

Դասեր	Բրաուզերը	Տպել
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Թաքնված	Տեսանելի
`.hidden-print`	Տեսանելի	Թաքնված

Դասը .visible-printնույնպես գոյություն ունի, բայց հնացած է v3.2.0-ի դրությամբ: Այն մոտավորապես համարժեք է .visible-print-block, բացառությամբ լրացուցիչ հատուկ դեպքերի՝ <table>կապված տարրերի համար:

Փորձարկման դեպքեր

Չափափոխեք ձեր զննարկիչը կամ բեռնեք տարբեր սարքերում՝ արձագանքող օգտակար դասերը փորձարկելու համար:

Տեսանելի է...

Կանաչ նշագրերը ցույց են տալիս, որ տարրը տեսանելի է ձեր ընթացիկ տեսադաշտում:

Լրացուցիչ փոքր ✔ Տեսանելի է x-small-ում

Փոքր ✔ Տեսանելի է փոքրի վրա

Միջին ✔ Տեսանելի է միջինում

Մեծ ✔ Տեսանելի է մեծ

Լրացուցիչ փոքր և փոքր ✔ Տեսանելի է x-small-ի և small-ի վրա

Միջին և մեծ ✔ Տեսանելի է միջին և մեծի վրա

Լրացուցիչ փոքր և միջին ✔ Տեսանելի է x-small և medium-ի վրա

Փոքր և մեծ ✔ Տեսանելի է փոքրի և մեծի վրա

Լրացուցիչ փոքր և մեծ ✔ Տեսանելի է x-small-ի և large-ի վրա

Փոքր և միջին ✔ Տեսանելի է փոքր և միջին

Թաքնված է...

Այստեղ կանաչ վանդակները նաև ցույց են տալիս, որ տարրը թաքնված է ձեր ընթացիկ տեսադաշտում:

Լրացուցիչ փոքր ✔ Թաքնված է x-small-ի վրա

Փոքր ✔ Թաքնված է փոքրի վրա

Միջին ✔ Թաքնված է միջինում

Մեծ ✔ Թաքնված է մեծի վրա

Լրացուցիչ փոքր և փոքր ✔ Թաքնված է x-small-ի և small-ի վրա

Միջին և մեծ ✔ Թաքնված է միջին և մեծի վրա

Լրացուցիչ փոքր և միջին ✔ Թաքնված է x-small-ի և medium-ի վրա

Փոքր և մեծ ✔ Թաքնված է փոքրի և մեծի վրա

Լրացուցիչ փոքր և մեծ ✔ Թաքնված է x-small-ի և large-ի վրա

Փոքր և միջին ✔ Թաքնված է փոքր և միջինի վրա

Bootstrap-ի CSS-ը կառուցված է Less-ի վրա՝ լրացուցիչ ֆունկցիոնալությամբ, ինչպիսիք են փոփոխականները, միքսները և CSS կոմպիլյացիայի գործառույթները: Նրանք, ովքեր ցանկանում են օգտագործել սկզբնաղբյուր Less ֆայլերը մեր կազմված CSS ֆայլերի փոխարեն, կարող են օգտվել բազմաթիվ փոփոխականներից և միքսներից, որոնք մենք օգտագործում ենք շրջանակում:

Ցանցի փոփոխականները և միքսները ծածկված են Grid system բաժնում :

Bootstrap-ի կազմում

Bootstrap-ը կարող է օգտագործվել առնվազն երկու եղանակով՝ կազմված CSS-ով կամ աղբյուրի Less ֆայլերով: Less ֆայլերը կազմելու համար դիմեք «Սկսել» բաժնին , թե ինչպես կարգավորել ձեր զարգացման միջավայրը՝ անհրաժեշտ հրամանները գործարկելու համար:

Երրորդ կողմի կազմման գործիքները կարող են աշխատել Bootstrap-ի հետ, սակայն դրանք չեն աջակցվում մեր հիմնական թիմի կողմից:

Փոփոխականներ

Փոփոխականներն օգտագործվում են ողջ նախագծի ընթացքում՝ որպես կենտրոնացնելու և տարածելու սովորաբար օգտագործվող արժեքները, ինչպիսիք են գույները, տարածությունները կամ տառատեսակների կույտերը: Ամբողջական բացահայտման համար տե՛ս Customizer-ը :

Գույներ

Հեշտությամբ օգտագործեք երկու գունային սխեմաներ՝ մոխրագույն և իմաստային: Մոխրագույն գույները արագ մուտք են ապահովում սևի սովորաբար օգտագործվող երանգները, մինչդեռ իմաստայինը ներառում է տարբեր գույներ, որոնք վերագրվում են իմաստալից համատեքստային արժեքներին:

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

Օգտագործեք այս գունային փոփոխականներից որևէ մեկը, ինչպես որ կան կամ վերագրեք դրանք ձեր նախագծի համար ավելի իմաստալից փոփոխականների:

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

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

Փայտամած

Մի քանի փոփոխականներ՝ ձեր կայքի կմախքի հիմնական տարրերը արագ հարմարեցնելու համար:

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

Հղումներ

Հեշտությամբ ձևավորեք ձեր հղումները ճիշտ գույնով միայն մեկ արժեքով:

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

Նկատի ունեցեք, որ @link-hover-colorօգտագործում է ֆունկցիա՝ Less-ի մեկ այլ հիանալի գործիք՝ ավտոմատ կերպով ստեղծելու ճիշտ սավառնող գույնը: Դուք կարող եք օգտագործել darken, lighten, saturate, և desaturate.

Տպագրություն

Հեշտությամբ սահմանեք ձեր տառատեսակը, տեքստի չափը, առաջատարը և ավելին մի քանի արագ փոփոխականներով: Bootstrap-ն օգտագործում է դրանք նաև հեշտ տպագրական միքսներ ապահովելու համար:

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

Սրբապատկերներ

Երկու արագ փոփոխական՝ ձեր սրբապատկերների գտնվելու վայրը և ֆայլի անվանումը հարմարեցնելու համար:

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

Բաղադրիչներ

Ամբողջ Bootstrap-ի բաղադրիչները օգտագործում են որոշ լռելյայն փոփոխականներ՝ ընդհանուր արժեքներ սահմանելու համար: Ահա առավել հաճախ օգտագործվողները.

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

Վաճառողի խառնուրդներ

Վաճառողի միքսները միքսներ են, որոնք օգնում են աջակցել բազմաթիվ բրաուզերներին՝ ներառելով բոլոր համապատասխան վաճառողի նախածանցները ձեր կազմված CSS-ում:

Տուփի չափսեր

Վերականգնել ձեր բաղադրիչների տուփի մոդելը մեկ խառնուրդով: Համատեքստի համար տե՛ս Mozilla-ի այս օգտակար հոդվածը :

Միքսինը հնացած է v3.2.0-ի դրությամբ՝ Autoprefixer-ի ներդրմամբ: Հետադարձ-համատեղելիությունը պահպանելու համար Bootstrap-ը կշարունակի օգտագործել mixin-ը ներսից մինչև Bootstrap v4:

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

Կլորացված անկյուններ

Այսօր բոլոր ժամանակակից բրաուզերներն աջակցում են ոչ նախածանցային border-radiusհատկությանը: Որպես այդպիսին, չկա .border-radius()միքսին, բայց Bootstrap-ը ներառում է դյուրանցումներ՝ օբյեկտի որոշակի կողմում երկու անկյունները արագ կլորացնելու համար:

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

Box (Drop) ստվերներ

Եթե ձեր թիրախային լսարանը օգտագործում է ամենավերջին և լավագույն բրաուզերներն ու սարքերը, համոզվեք, որ պարզապես օգտագործեք box-shadowգույքը ինքնուրույն: Եթե Ձեզ անհրաժեշտ է աջակցում հին Android (նախավերջ 4) և iOS սարքերի համար (նախադաս՝ iOS 5), օգտագործեք հնացած-webkit mixin-ը՝ պահանջվող նախածանցը վերցնելու համար :

Միքսինը հնացած է v3.1.0-ի դրությամբ, քանի որ Bootstrap-ը պաշտոնապես չի աջակցում հնացած հարթակներին, որոնք չեն աջակցում ստանդարտ հատկությունը: Հետադարձ-համատեղելիությունը պահպանելու համար Bootstrap-ը կշարունակի օգտագործել mixin-ը ներսից մինչև Bootstrap v4:

Համոզվեք, որ օգտագործեք rgba()գույները ձեր տուփի ստվերներում, որպեսզի դրանք հնարավորինս անխափան կերպով միաձուլվեն ֆոնի հետ:

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

Անցումներ

Բազմաթիվ խառնուրդներ՝ ճկունության համար: Սահմանեք անցումային բոլոր տեղեկությունները մեկով կամ նշեք առանձին ուշացում և տեւողություն, ըստ անհրաժեշտության:

Միքսինները հնացած են v3.2.0-ի դրությամբ՝ Autoprefixer-ի ներդրմամբ: Հետադարձ-համատեղելիությունը պահպանելու համար Bootstrap-ը կշարունակի օգտագործել միքսները ներսից մինչև 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;
}

Փոխակերպումներ

Պտտեցնել, չափել, թարգմանել (տեղափոխել) կամ շեղել որևէ առարկա:

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

Անիմացիաներ

Մեկ միքսին CSS3-ի բոլոր անիմացիոն հատկությունները մեկ հռչակագրում օգտագործելու համար և այլ միքսներ առանձին հատկությունների համար:

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

Անթափանցիկություն

Սահմանեք անթափանցիկությունը բոլոր բրաուզերների համար և տրամադրեք filterհետադարձ IE8-ի համար:

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

Տեղապահի տեքստ

Տրամադրեք համատեքստ յուրաքանչյուր դաշտում ձևերի վերահսկման համար:

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

Սյունակներ

Ստեղծեք սյունակներ CSS-ի միջոցով մեկ տարրի մեջ:

.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 > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Կարող եք նաև նշել ստանդարտ երկգույն, գծային գրադիենտի անկյունը.

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

Եթե Ձեզ անհրաժեշտ է վարսավիրական գծավոր գրադիենտ, դա նույնպես հեշտ է: Պարզապես նշեք մեկ գույն, և մենք կփակցնենք կիսաթափանցիկ սպիտակ շերտ:

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

Բարձրացրեք երեսը և փոխարենը օգտագործեք երեք գույն: Սահմանեք առաջին գույնը, երկրորդ գույնը, երկրորդ գույնի գույնի կանգառը (տոկոսային արժեքը, ինչպես 25%) և երրորդ գույնը այս խառնուրդներով.

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

Գլուխը վեր Եթե դուք երբևէ կարիք ունենաք հեռացնել գրադիենտը, համոզվեք, որ հեռացնեք ցանկացած IE-ին հատուկ , որը filterդուք կարող եք ավելացրել: Դուք կարող եք դա անել՝ օգտագործելով .reset-filter()mixin-ը կողքին background-image: none;:

Կոմունալ խառնուրդներ

Կոմունալ միքսները միքսներ են, որոնք միավորում են այլ կերպ չառնչվող CSS հատկությունները՝ որոշակի նպատակի կամ առաջադրանքի հասնելու համար:

Մաքրել

Մոռացեք class="clearfix"ցանկացած տարրի ավելացում և դրա փոխարեն ավելացրեք .clearfix()միքսին, որտեղ անհրաժեշտ է: Օգտագործում է Nicolas Gallagher- ի միկրո հստակեցումը :

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

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

Հորիզոնական կենտրոնացում

Արագորեն կենտրոնացրեք ցանկացած տարր իր ծնողի մեջ: Պահանջում է widthկամ max-widthպետք է սահմանվի:

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

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

Չափերի չափման օգնականներ

Ավելի հեշտ նշեք օբյեկտի չափերը:

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

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

Չափափոխվող տեքստային տարածքներ

Հեշտությամբ կարգավորեք չափափոխման տարբերակները ցանկացած textarea-ի կամ ցանկացած այլ տարրի համար: Կանխադրված դիտարկիչի նորմալ վարքագիծը ( both):

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

Տեքստի կրճատում

Հեշտությամբ կտրեք տեքստը էլիպսով մեկ խառնուրդով: Պահանջում է տարր լինել blockկամ inline-blockմակարդակ:

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

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

Ցանցաթաղանթի պատկերներ

Նշեք պատկերի երկու ուղի և @1x պատկերի չափսերը, և Bootstrap-ը կտրամադրի @2x մեդիա հարցում: Եթե դուք շատ պատկերներ ունեք մատուցելու համար, մտածեք ձեր ցանցաթաղանթի CSS պատկերը ձեռքով գրել մեկ լրատվամիջոցի հարցում:

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

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

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

Թեև Bootstrap-ը կառուցված է Less-ի վրա, այն նաև ունի պաշտոնական Sass նավահանգիստ : Մենք այն պահում ենք GitHub-ի առանձին պահոցում և կարգավորում ենք թարմացումները փոխակերպման սցենարով:

Ինչ է ներառված

Քանի որ Sass նավահանգիստն ունի առանձին ռեպո և սպասարկում է մի փոքր այլ լսարան, նախագծի բովանդակությունը մեծապես տարբերվում է հիմնական Bootstrap նախագծից: Սա ապահովում է, որ Sass նավահանգիստը հնարավորինս համատեղելի է Sass-ի վրա հիմնված համակարգերի հետ:

Ճանապարհ	Նկարագրություն
`lib/`	Ruby Gem կոդը (Sass կոնֆիգուրացիա, Rails և Compass ինտեգրումներ)
`tasks/`	Փոխարկիչի սկրիպտներ (վերածում Less-ը Sass)
`test/`	Կոմպիլացիոն թեստեր
`templates/`	Compass փաթեթի մանիֆեստ
`vendor/assets/`	Sass, JavaScript և տառատեսակի ֆայլեր
`Rakefile`	Ներքին առաջադրանքները, ինչպիսիք են փոցխը և փոխակերպումը

Այցելեք Sass նավահանգստի GitHub պահոցը ՝ այս ֆայլերը գործողության մեջ տեսնելու համար:

Տեղադրում

Sass-ի համար Bootstrap-ի տեղադրման և օգտագործման մասին տեղեկությունների համար դիմեք GitHub ռեպոզիտորիայի readme- ին : Այն ամենաարդիական աղբյուրն է և ներառում է տեղեկատվություն Rails, Compass և Sass ստանդարտ նախագծերի հետ օգտագործելու համար:

Bootstrap Sass-ի համար

CSS

Ընդհանուր ակնարկ

HTML5 doctype

Բջջային առաջինը

Տպագրություն և հղումներ

Normalize.css

Տարաներ

Ցանցային համակարգ

Ներածություն

Մեդիա հարցումներ

Ցանցային ընտրանքներ

Օրինակ՝ շարված-հորիզոնական

Օրինակ՝ հեղուկի տարա

Օրինակ՝ բջջային և աշխատասեղան

Օրինակ՝ բջջային, պլանշետ, աշխատասեղան

Օրինակ՝ սյունակի փաթաթում

Պատասխանատու սյունակը վերակայվում է

Փոխհատուցման սյունակներ

Բնադրող սյուներ

Սյունակների պատվիրում

Ավելի քիչ միքսներ և փոփոխականներ

Փոփոխականներ

Միքսիններ

Օգտագործման օրինակ

Տպագրություն

Վերնագրեր

հ1. Bootstrap վերնագիր

h2. Bootstrap վերնագիր

h3. Bootstrap վերնագիր

h4. Bootstrap վերնագիր

h5. Bootstrap վերնագիր

h6. Bootstrap վերնագիր

հ1. Bootstrap վերնագիր Երկրորդական տեքստ

h2. Bootstrap վերնագիր Երկրորդական տեքստ

h3. Bootstrap վերնագիր Երկրորդական տեքստ

h4. Bootstrap վերնագիր Երկրորդական տեքստ

h5. Bootstrap վերնագիր Երկրորդական տեքստ

h6. Bootstrap վերնագիր Երկրորդական տեքստ

Հիմնական պատճենը

Հիմնական մարմնի պատճենը

Կառուցվել է Less-ով

Ներդիր տեքստի տարրեր

Նշված տեքստ

Ջնջված տեքստ

Կտրված տեքստ

Տեղադրված տեքստ

Ընդգծված տեքստ

Փոքր տեքստ

Համարձակ

Շեղագիր

Այլընտրանքային տարրեր

Հարթեցման դասեր

Փոխակերպման դասեր

հապավումներ

Հիմնական հապավումը

Ինիցիոնալիզմ

Հասցեներ

Արգելափակման մեջբերումներ

Կանխադրված բլոկի մեջբերում

Արգելափակման ընտրանքներ

Աղբյուրի անվանումը

Այլընտրանքային ցուցադրումներ

Ցուցակներ

Չպատվիրված

Պատվիրել է

Ոչ ոճավորված

Inline

Նկարագրություն

Հորիզոնական նկարագրություն

Ավտոմատ կտրում

Կոդ

Inline

Օգտագործողի մուտքագրում

Հիմնական բլոկ

Փոփոխականներ

Նմուշի ելք

Սեղաններ

Հիմնական օրինակ

Գծավոր շարքեր

Բրաուզերների համատեղելիություն

Դեմո `:focus`պետություն

Զգուշացում կապի ֆունկցիոնալության վերաբերյալ`<a>`

Ընտրովի սրբապատկերներ թաքնված `.sr-only`պիտակներով