Bootstrap

Բազային CSS

Հիմնական HTML տարրերը ոճավորվել և ընդլայնվել են ընդարձակվող դասերով:

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

Վերնագրեր

Բոլոր HTML վերնագրերը <h1>հասանելի <h6>են:

հ1. Վերնագիր 1

h2. Վերնագիր 2

h3. Վերնագիր 3

h4. Վերնագիր 4

h5. Վերնագիր 5
h6. Վերնագիր 6

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

Bootstrap-ի գլոբալ լռելյայն 14px է, իսկ a- font-sizeն ՝ 20px : Սա կիրառվում է և բոլոր պարբերությունների նկատմամբ: Բացի այդ, (պարբերությունները) ստանում են իրենց տողի բարձրության կեսի ներքևի լուսանցք (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 փոփոխականների վրա փոփոխականներում . less՝ @baseFontSizeև @baseLineHeight. Առաջինը բազային տառատեսակի չափն է, որն օգտագործվում է ամբողջ ընթացքում, իսկ երկրորդը՝ բազային տողի բարձրությունը: Մենք օգտագործում ենք այդ փոփոխականները և մի քանի պարզ մաթեմատիկա՝ ստեղծելու մեր բոլոր տեսակի լուսանցքները, լցոնումները և գծերի բարձրությունները և ավելին: Անհատականացրեք դրանք, և Bootstrap-ը հարմարվում է:

Շեշտադրում

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

<small>

Տեքստի ներդիրում կամ բլոկների շեշտադրումից հանելու համար օգտագործեք փոքր պիտակը:

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

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

Համարձակ

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

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

<strong>արտադրված է որպես թավ տեքստ</strong>

Շեղագիր

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

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

<em>արտադրվում է որպես շեղ տեքստ</em>

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

Շեշտադրման դասեր

Փոխանցեք իմաստը գույնի միջոցով մի քանի ընդգծված օգտակար դասերի միջոցով:

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

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

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh:</p>
<p class="text-warning">Առաջին լրատվականը:</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla:</p>
<p class="text-info">Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula:</p>

հապավումներ

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

<abbr>

Ընդլայնված տեքստի համար երկար սավառնող հապավումների վրա ներառեք titleհատկանիշը:

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

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

<abbr class="initialism">

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

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

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

Հասցեներ

Ներկայացրե՛ք մոտակա նախնիների կամ աշխատանքի ողջ մարմնի կոնտակտային տվյալները:

<address>

Պահպանեք ֆորմատավորումը՝ վերջացնելով բոլոր տողերը <br>:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ամբողջական անուն
[email protected] 
<հասցե>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  Սան Ֆրանցիսկո, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</հասցե>

<հասցե>
  <strong>Լրիվ անուն</strong><br>
  <a href="mailto:#">[email protected]</a>
</հասցե>

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

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

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

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit: Ամբողջական թիվը կարող է առաջանալ:</p>
</blockquote>

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

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

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

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

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

Աղբյուրի վերնագրում հայտնի մեկը 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit: Ամբողջական թիվը կարող է առաջանալ:</p>
  <small>Ինչ-որ հայտնի <cite title="Source Title">Աղբյուրի անվանումը</cite></small>
</blockquote>

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

Օգտագործեք .pull-rightլողացող, աջ հարթեցված բլոկի մեջբերումների համար:

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

Աղբյուրի վերնագրում հայտնի մեկը 
<blockquote class="pull-right">
  ...
</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>

Պատվիրել է

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Ամբողջական մոլեստի լորեմ և մասսա
  4. Հեշտացում պրետիում նիսլ ալիքում
  5. Նալլա volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Էնեան նստել ամետ էրատ նունց
  8. 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="unstyled">
  <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>կողք կողքի շարված:

Նկարագրության ցուցակներ
Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Էվիզմոդ
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>պետք է փաթաթված լինի որպես ներդիր: 
Օրինակ, <code><section></code>-ը պետք է փաթաթվի որպես ներդիր:

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

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

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

Գլուխը վեր Համոզվեք, որ կոդը պահեք <pre>պիտակների մեջ որքան հնարավոր է մոտ ձախ; այն կարտացոլի բոլոր ներդիրները:

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

Սեղաններ

Կանխադրված ոճեր

Հիմնական ոճավորման համար՝ թեթև լիցք և միայն հորիզոնական բաժանիչներ, ավելացրեք հիմնական դասը .tableցանկացածին <table>:

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

Ընտրովի պարապմունքներ

.tableԲազային դասին ավելացրեք հետևյալ դասերից որևէ մեկը .

.table-striped

Ավելացնում է zebra-striping ցանկացած աղյուսակի տողում CSS ընտրիչի <tbody>միջոցով :nth-child(մատչելի չէ IE7-IE8-ում):

# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչունը @twitter 
<table class="table table-striped">
  …
</table>

.table-bordered

Սեղանին ավելացրեք եզրագծեր և կլորացված անկյուններ:

# Անուն Ազգանուն Օգտագործողի անունը
1 նշագծել Օտտո @mdo
նշագծել Օտտո @getbootstrap
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>

Ընտրովի տողերի դասեր

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

Դասարան Նկարագրություն
.success Ցույց է տալիս հաջող կամ դրական գործողություն:
.error Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն:
.warning Ցույց է տալիս նախազգուշացում, որը կարող է ուշադրության կարիք ունենալ:
.info Օգտագործվում է որպես լռելյայն ոճերի այլընտրանք:
# Արտադրանք Վերցված վճարում Կարգավիճակ
1 ՏԲ - Ամսական 01/04/2012 Հաստատված է
2 ՏԲ - Ամսական 02/04/2012 Մերժվել է
3 ՏԲ - Ամսական 03/04/2012 Սպասվում է
4 ՏԲ - Ամսական 04/04/2012 Հաստատելու համար զանգահարեք 
...
  <tr class="success">
    <td>1</td>
    <td>ՏԲ - ամսական</td>
    <td>01/04/2012</td>
    <td>Հաստատված է</td>
  </tr>
...

Աջակցված աղյուսակի նշում

Աջակցվող աղյուսակի HTML տարրերի ցանկը և ինչպես դրանք պետք է օգտագործվեն:

Նշել Նկարագրություն
<table> Փաթաթման տարր՝ տվյալների աղյուսակային ձևաչափով ցուցադրելու համար
<thead> Սեղանի վերնագրի տողերի ( <tr>) տարր՝ աղյուսակի սյունակները պիտակավորելու համար
<tbody> Սեղանի տողերի ( <tr>) տարր աղյուսակի մարմնում
<tr> Կոնտեյներ տարր աղյուսակի բջիջների ( <td>կամ <th>) հավաքածուի համար, որը հայտնվում է մեկ տողում
<td> Աղյուսակի կանխադրված բջիջ
<th> Սյունակի (կամ տողի, կախված շրջանակից և տեղադրությունից) պիտակների համար աղյուսակի հատուկ բջիջ
Պետք է օգտագործվի<thead>
<caption> Աղյուսակի նկարագրությունը կամ ամփոփումը, հատկապես օգտակար էկրանի ընթերցողների համար 
<աղյուսակ>
  <caption>...</caption>
  <գլուխ>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Ձևաթղթեր

Կանխադրված ոճեր

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

Լեգենդ Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ: 
<ձև>
  <fieldset>
    <legend>Լեգենդ</legend>
    <label>Պիտակի անուն</label>
    <input type="text" placeholder="Մուտքագրեք ինչ-որ բան…">
    <span class="help-block">Բլոկի մակարդակի օգնության տեքստի օրինակ այստեղ:</span>
    <label class="checkbox">
      <input type="checkbox"> Ստուգեք ինձ
    </label>
    <button type="submit" class="btn">Ներկայացրեք</button>
  </fieldset>
</form>

Ընտրովի դասավորություններ

Bootstrap-ի հետ ներառված են երեք կամընտիր ձևի դասավորություններ ընդհանուր օգտագործման դեպքերի համար:

Որոնման ձև

Ավելացրե՛ք .form-searchձևին և .search-queryտեքստի <input>լրացուցիչ կլորացված մուտքագրման համար:

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Որոնում</button>
</form>

Ներդիր ձև

Կոմպակտ դասավորության համար ավելացրեք .form-inlineձախից հավասարեցված պիտակների և ներկառուցված բլոկների վերահսկման համար:

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="գաղտնաբառ">
  <label class="checkbox">
    <input type="checkbox"> Հիշիր ինձ
  </label>
  <button type="submit" class="btn">Մուտք գործեք</button>
</form>

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

Աջը հավասարեցրեք պիտակները և լողացրե՛ք դրանք ձախ կողմում, որպեսզի դրանք հայտնվեն նույն տողում, ինչ հսկիչները: Պահանջում է ամենաշատ նշագրման փոփոխությունները լռելյայն ձևից.

  • Ավելացնել .form-horizontalձևին
  • Փաթեթավորեք պիտակները և հսկիչները.control-group
  • Ավելացնել .control-labelպիտակի վրա
  • Փաթեթավորեք ցանկացած հարակից հսկիչ՝ .controlsպատշաճ հավասարեցման համար
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Էլփոստ</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Գաղտնաբառ</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="գաղտնաբառ">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Հիշիր ինձ
      </label>
      <button type="submit" class="btn">Մուտք գործեք</button>
    </div>
  </div>
</form>

Աջակցված ձևերի վերահսկում

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

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

Ամենատարածված ձևի կառավարում, տեքստի վրա հիմնված մուտքագրման դաշտեր: Ներառում է աջակցություն HTML5-ի բոլոր տեսակների համար՝ տեքստ, գաղտնաբառ, ամսաթիվ, ամսաթիվ-տեղական, ամսաթիվ, ամիս, ժամ, շաբաթ, համար, էլ. հասցե, url, որոնում, հեռ. և գույն:

Պահանջում է միշտ օգտագործել նշվածը type:

<input type="text" placeholder="Text input">

Textarea

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

<textarea rows="3"></textarea>

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

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

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


<label class="checkbox">
  <input type="checkbox" value="">
  Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Առաջին տարբերակն այս և այն է՝ անպայման ներառեք, թե ինչու է դա հիանալի
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Տարբերակ երկրորդը կարող է լինել այլ բան, և այն ընտրելով կչեղարկվի առաջին տարբերակը
</label>

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

Ավելացրեք .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>

Ընտրում է

Օգտագործեք լռելյայն տարբերակը կամ նշեք a multiple="multiple"՝ միանգամից մի քանի տարբերակ ցուցադրելու համար:


<ընտրել>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Ձևերի վերահսկման ընդլայնում

Զննարկիչի առկա վերահսկման գագաթին ավելացնելով՝ Bootstrap-ը ներառում է ձևի այլ օգտակար բաղադրիչներ:

Նախապատրաստված և կցված մուտքեր

Ավելացրեք տեքստ կամ կոճակներ տեքստի վրա հիմնված ցանկացած մուտքագրումից առաջ կամ հետո: Նկատի ունեցեք, որ selectտարրերն այստեղ չեն ապահովվում:

Կանխադրված ընտրանքներ

Փաթեթավորեք an-ը .add-onև an- inputը երկու դասերից մեկի հետ՝ մուտքագրման տեքստը նախապես տեղադրելու կամ ավելացնելու համար:

@

.00 
<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

Համակցված

Օգտագործեք և՛ դասեր, և՛ երկու օրինակներ՝ .add-onմուտքագրում տեղադրելու և ավելացնելու համար:

$ .00 
<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Կոճակներ տեքստի փոխարեն

Տեքստով a-ի փոխարեն <span>օգտագործեք a- .btnն՝ մուտքագրմանը մի կոճակ (կամ երկու) կցելու համար:

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Գնա՛:</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">Որոնում</button>
  <button class="btn" type="button">Ընտրանքներ</button>
</div>

Կոճակների բացվող պատուհաններ

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Գործողություն
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Գործողություն
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Գործողություն
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Գործողություն
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

Որոնման ձև

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">Որոնում</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">Որոնում</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

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

Օգտագործեք հարաբերական չափերի դասեր, ինչպիսիք են .input-largeկամ համապատասխանեցրեք ձեր մուտքերը ցանցի սյունակների չափերին՝ օգտագործելով .span*դասերը:

Արգելափակել մակարդակի մուտքերը

Դարձրեք որևէ <input>կամ <textarea>տարր իրեն պահել բլոկի մակարդակի տարրի պես:

<input class="input-block-level" type="text" placeholder=".input-block-level">

Հարաբերական չափսեր

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Գլուխը վեր Հետագա տարբերակներում մենք կփոխենք այս հարաբերական մուտքային դասերի օգտագործումը՝ մեր կոճակների չափերին համապատասխանելու համար: Օրինակ, .input-largeկավելացնի ներածման լիցքը և տառաչափը:

Ցանցի չափսերը

Օգտագործեք .span1to .span12մուտքերի համար, որոնք համապատասխանում են ցանցի սյունակների նույն չափերին:

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

Մեկ տողում ցանցի մի քանի մուտքերի համար օգտագործեք .controls-rowմոդիֆիկատորների դասը՝ համապատասխան տարածության համար : Այն լողում է մուտքերը, որպեսզի փլուզվի սպիտակ տարածությունը, սահմանում է համապատասխան լուսանցքները և մաքրում է բոցը:

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

Չխմբագրվող մուտքեր

Ներկայացրեք տվյալները այնպիսի ձևով, որը հնարավոր չէ խմբագրել՝ առանց իրական ձևի նշագրման օգտագործման:

Որոշ արժեքներ այստեղ 
<span class="input-xlarge uneditable-input">Այստեղ որոշ արժեքներ</span>

Ձևավորել գործողություններ

Վերջացրեք ձևը մի խումբ գործողություններով (կոճակներով): Երբ տեղադրվում են a- .form-horizontalի մեջ, կոճակներն ավտոմատ կերպով կնճռոտվեն՝ համապատասխանեցնելով ձևի կառավարիչներին:

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Պահպանել փոփոխությունները</button>
  <button type="button" class="btn">Չեղարկել</button>
</div>

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

Ներկառուցված և արգելափակման մակարդակի աջակցություն օգնության տեքստի համար, որը հայտնվում է ձևի վերահսկման շուրջ:

Ներքին օգնություն

Ներկառուցված օգնության տեքստ 
<input type="text"><span class="help-inline">Ներքին օգնության տեքստ</span>

Արգելափակել օգնությունը

Օգնության տեքստի ավելի երկար բլոկ, որը կոտրվում է նոր տողով և կարող է տարածվել մեկ տողից դուրս: 
<input type="text"><span class="help-block">Օգնության տեքստի ավելի երկար բլոկ, որը անցնում է նոր տողով և կարող է տարածվել մեկ տողից դուրս:</span>

Ձևերի վերահսկման վիճակներ

Օգտագործողներին կամ այցելուներին հետադարձ կապ տրամադրեք ձևերի վերահսկման և պիտակների վերաբերյալ հետադարձ կապի հիմնական վիճակների վերաբերյալ:

Ներածման ֆոկուս

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

<input class="input-xlarge" id="focusedInput" type="text" value="Սա կենտրոնացած է...">

Անջատված մուտքեր

Ավելացրեք disabledհատկանիշը մուտքագրման վրա՝ օգտատիրոջ մուտքագրումը կանխելու և մի փոքր այլ տեսք ստեղծելու համար:

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Անջատված մուտքագրումն այստեղ..." անջատված>

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

Bootstrap-ը ներառում է սխալի, նախազգուշացման, տեղեկատվության և հաջողության հաղորդագրությունների վավերացման ոճեր: Օգտագործելու համար ավելացրեք համապատասխան դասը շրջապատին .control-group:

Հնարավոր է՝ ինչ-որ բան սխալ է տեղի ունեցել
Խնդրում ենք ուղղել սխալը
Օգտվողի անունը վերցված է
Վա՜յ 
<div class="control-group warning">
  <label class="control-label" for="inputWarning">Մուտքագրում նախազգուշացումով</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Հնարավոր է, որ ինչ-որ բան սխալ է տեղի ունեցել</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label" for="inputError">Մուտք սխալմամբ</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Խնդրում ենք ուղղել սխալը</span>
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Հաջողությամբ մուտքագրում</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Վա՜յ:</span>
  </div>
</div>

Կոճակներ

Կանխադրված կոճակներ

Կոճակների ոճերը կարող են կիրառվել ցանկացած բանի վրա, երբ .btnկիրառվում է դասը: Այնուամենայնիվ, սովորաբար դուք կցանկանաք կիրառել դրանք միայն <a>և <button>տարրերի վրա՝ լավագույն մատուցման համար:

Կոճակ դասի = "" Նկարագրություն
btn Ստանդարտ մոխրագույն կոճակ՝ գրադիենտով
btn btn-primary Ապահովում է լրացուցիչ տեսողական քաշ և բացահայտում է հիմնական գործողությունը կոճակների մի շարքում
btn btn-info Օգտագործվում է որպես լռելյայն ոճերի այլընտրանք
btn btn-success Ցույց է տալիս հաջող կամ դրական գործողություն
btn btn-warning Նշում է, որ այս գործողությունը պետք է զգույշ լինի
btn btn-danger Ցույց է տալիս վտանգավոր կամ պոտենցիալ բացասական գործողություն
btn btn-inverse Այլընտրանքային մուգ մոխրագույն կոճակ, որը կապված չէ իմաստային գործողության կամ օգտագործման հետ
btn btn-link Շեշտադրեք կոճակը՝ այն դարձնելով հղումի տեսք՝ պահպանելով կոճակի վարքագիծը

Խաչաձև բրաուզերի համատեղելիություն

IE9-ը չի կտրում ֆոնային գրադիենտները կլորացված անկյուններում, ուստի մենք այն հեռացնում ենք: Նմանապես, IE9-ը ջնջում է հաշմանդամ buttonտարրերը՝ տեքստը մոխրագույն դարձնելով տհաճ տեքստի ստվերով, որը մենք չենք կարող ուղղել:

Կոճակների չափսերը

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

<p>
  <button class="btn btn-large btn-primary" type="button">Մեծ կոճակ</button>
  <button class="btn btn-large" type="button">Մեծ կոճակ</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Լռելյայն կոճակ</button>
  <button class="btn" type="button">Լռելյայն կոճակ</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Փոքր կոճակ</button>
  <button class="btn btn-small" type="button">Փոքր կոճակ</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Մինի կոճակ</button>
  <button class="btn btn-mini" type="button">Մինի կոճակ</button>
</p>

Ստեղծեք բլոկի մակարդակի կոճակներ, որոնք ընդգրկում են ծնողի ամբողջ լայնությունը՝ ավելացնելով .btn-block:

<button class="btn btn-large btn-block btn-primary" type="button">Արգելափակման մակարդակի կոճակ</button>
<button class="btn btn-large btn-block" type="button">Արգելափակման մակարդակի կոճակ</button>

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

Դարձրեք կոճակներին չսեղմելու տեսք՝ դրանք 50%-ով ետ թողնելով:

Խարիսխի տարր

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

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

<a href="#" class="btn btn-large btn-primary disabled">Հիմնական հղում</a>
<a href="#" class="btn btn-large disabled">Հղում</a>

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

Կոճակի տարր

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

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Հիմնական կոճակ</button>
<button type="button" class="btn btn-large" disabled>Կոճակ</button>

Մեկ դաս, բազմաթիվ պիտակներ

Օգտագործեք .btnդասը <a>, <button>, կամ <input>տարրի վրա:

Հղում 
<a class="btn" href="">Հղում</a>
<button class="btn" type="submit">Կոճակ</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Որպես լավագույն պրակտիկա, փորձեք տարրը համապատասխանեցնել ձեր համատեքստին, որպեսզի ապահովեք համընկնող բրաուզերների ցուցադրում: Եթե ​​ունեք input, օգտագործեք <input type="submit">ձեր կոճակի համար:

Պատկերներ

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

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Գլուխը վեր .img-roundedև .img-circleչեն աշխատում IE7-8-ում border-radiusաջակցության բացակայության պատճառով:

Սրբապատկերներ Glyphicons- ի կողմից

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

140 սրբապատկերներ սփրայթ ձևով, հասանելի մուգ մոխրագույն (կանխադրված) և սպիտակ գույներով, տրամադրված Glyphicons- ի կողմից :

  • պատկերակ-ապակ
  • պատկերակ-երաժշտություն
  • պատկերակների որոնում
  • պատկերակ-ծրար
  • պատկերակ-սիրտ
  • պատկերակ-աստղ
  • պատկերակ-աստղ-դատարկ
  • պատկերակ-օգտատեր
  • պատկերակ-ֆիլմ
  • պատկերակ-մեծ
  • պատկերակ-րդ
  • պատկերակ-րդ ցուցակ
  • պատկերակ-ok
  • պատկերակը հեռացնել
  • icon-zoom-in
  • icon-zoom-out
  • պատկերակի անջատում
  • պատկերակ-ազդանշան
  • պատկերակ-ծամ
  • պատկերակ-աղբ
  • պատկերակ-տուն
  • պատկերակ-ֆայլ
  • պատկերակի ժամանակ
  • պատկերակ-ճանապարհ
  • icon-download-alt
  • պատկերակ-ներբեռնում
  • պատկերակի վերբեռնում
  • պատկերակ-մուտքի արկղ
  • պատկերակ-խաղ-շրջանակ
  • պատկերակ-կրկնել
  • պատկերակի թարմացում
  • icon-list-alt
  • պատկերակ-կողպեք
  • պատկերակ-դրոշ
  • պատկերակ-ականջակալներ
  • պատկերակի ծավալի անջատում
  • պատկերակի ծավալի իջեցում
  • պատկերակի ծավալի բարձրացում
  • պատկերակ-qcode
  • պատկերակ-շտրիխ կոդ
  • պատկերակ-պիտակ
  • պատկերակ-պիտակներ
  • պատկերագիրք
  • պատկերակ-էջանիշ
  • պատկերակ-տպագիր
  • պատկերակ-տեսախցիկ
  • պատկերակ-տառատեսակ
  • պատկերակ-համարձակ
  • պատկերակ-շեղ
  • պատկերակ-տեքստ-բարձրություն
  • պատկերակ-տեքստ-լայնություն
  • պատկերակ-հավասարեցնել-ձախ
  • icon-align-centre
  • պատկերակ-հավասարեցնել-աջ
  • պատկերակ-հավասարեցնել-հիմնավորել
  • պատկերակ-ցուցակ
  • icon-indent-left
  • icon-indent-right
  • պատկերակ-facetime-տեսանյութ
  • պատկերակ-պատկեր
  • պատկերակ-մատիտ
  • պատկերակ-քարտեզ-մարկեր
  • պատկերակ-կարգավորել
  • պատկերակ-երանգ
  • պատկերակ-խմբագրել
  • պատկերակ-կիսվել
  • պատկերակի ստուգում
  • պատկերակ-շարժում
  • պատկերակ-քայլ-հետ
  • icon-fast-backward
  • պատկերակ-հետամնաց
  • պատկերակ-խաղ
  • պատկերակ-դադար
  • icon-stop
  • պատկերակ-առաջ
  • icon-fast-forward
  • պատկերակ-քայլ առաջ
  • պատկերակ-հանել
  • պատկերակ-շևրոն-ձախ
  • պատկերակ-շևրոն-աջ
  • պատկերակ-պլյուս-նշան
  • պատկերակ-մինուս-նշան
  • պատկերակ-հեռացնել-նշան
  • պատկերակ-ok-նշան
  • պատկերակ-հարց-նշան
  • պատկերակ-տեղեկատվական նշան
  • պատկերակ-սքրինշոթ
  • icon-remove-circle
  • պատկերակ-ok-շրջանակ
  • icon-ban-circle
  • պատկերակ-սլաք-ձախ
  • պատկերակ-սլաք-աջ
  • պատկերակ-սլաքը վեր
  • պատկերակ-սլաք-ներքև
  • icon-share-alt
  • icon-resize-full
  • icon-size-small
  • պատկերակ-պլյուս
  • պատկերակ-մինուս
  • պատկերակ-աստղանիշ
  • պատկերակ-բացականչական-նշան
  • պատկերակ-նվեր
  • պատկերակ-տերև
  • պատկերակ-կրակ
  • պատկերակ-աչքը բաց
  • պատկերակ-աչք փակել
  • պատկերակ-նախազգուշական նշան
  • պատկերակ-ինքնաթիռ
  • պատկերակ-օրացույց
  • պատկերակ-պատահական
  • պատկերակ-մեկնաբանություն
  • պատկերակ-մագնիս
  • պատկերակ-շևրոն-up
  • պատկերակ-շևրոն-ներքև
  • պատկերակ-retweet
  • icon-shopping-cart
  • պատկերակ-թղթապանակ-փակել
  • պատկերակ-թղթապանակ-բաց
  • պատկերակ-չափափոխել-ուղղահայաց
  • icon-size-horizontal
  • պատկերակ-hdd
  • icon-bullhorn
  • պատկերակ-զանգ
  • պատկերակ-վկայական
  • պատկերակ-բութ-վեր
  • պատկերակ-բութ-ներքև
  • պատկերակ-ձեռքի-աջ
  • պատկերակ-ձախ-ձախ
  • պատկերակ-ձեռքի վեր
  • պատկերակ-ձեռքի ներքեւ
  • պատկերակ-շրջանակ-սլաք-աջ
  • պատկերակ-շրջանակ-սլաք-ձախ
  • icon-circle-arrow-up
  • պատկերակ-շրջանակ-սլաք-ներքև
  • պատկերակ-գլոբուս
  • պատկերակ-բանալին
  • պատկերակ-առաջադրանքներ
  • պատկերակ-ֆիլտր
  • պատկերակ-պայուսակ
  • պատկերակ ամբողջ էկրանով

Գլիֆիկոնների վերագրում

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

Ինչպես օգտագործել

Բոլոր պատկերակները պահանջում են <i>հատուկ դասի պիտակ՝ նախածանցով icon-: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում.

<i class="icon-search"></i>

Կան նաև շրջված (սպիտակ) պատկերակների ոճեր, որոնք պատրաստված են մեկ լրացուցիչ դասի հետ: Մենք հատուկ կկիրառենք այս դասը սավառնող և ակտիվ վիճակների վրա՝ նավի և բացվող հղումների համար:

<i class="icon-search icon-white"></i>

Գլուխը վեր Տեքստի տողերի կողքին օգտագործելիս, ինչպես կոճակների կամ նավարկության հղումներում, համոզվեք, որ <i>պիտակից հետո բացատ թողեք՝ համապատասխան տարածության համար:

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

Օգտագործեք դրանք կոճակներում, կոճակների խմբերում՝ գործիքագոտու, նավիգացիայի կամ նախապես տեղադրված ձևի մուտքագրման համար:

Կոճակներ

Կոճակների խումբ կոճակների գործիքագոտում
<div class="btn-toolbar">
  <div class="btn-group">

    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
Բացվող կոճակների խմբում
Օգտատեր 
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Օգտագործող</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Խմբագրել</a></li>
    <li><a href="#"><i class="icon-trash"></i> Ջնջել</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> արգելել</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Դարձնել ադմինիստրատոր</a></li>
  </ul>
</div>
Փոքր կոճակ
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Նավիգացիա

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Գլխավոր էջ</a></li>
  <li><a href="#"><i class="icon-book"></i> Գրադարան</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Ծրագրեր</a></li>
  <li><a href="#"><i class="i"></i> Տարբեր</a></li>
</ul>

Ձևավորել դաշտերը

<div class="control-group">
  <label class="control-label" for="inputIcon">Էլփոստի հասցե</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>