სათაურები

ყველა HTML სათაური <h1>ხელმისაწვდომია <h6>.

h1. სათაური 1

h2. სათაური 2

h3. სათაური 3

h4. სათაური 4

h5. სათაური 5

h6. სათაური 6

სხეულის ასლი

Bootstrap-ის გლობალური ნაგულისხმევი font-sizeარის 14px , 20px- ით line-height. ეს ეხება ყველა პარაგრაფს. გარდა ამისა, (აბზაცები) იღებენ ქვედა ზღვარს მათი ხაზის სიმაღლის ნახევრის (ნაგულისხმევად 10 პიქსელი).<body><p>

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

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

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

<p> ... </p>

წამყვანი სხეულის ასლი

გააკეთეთ აბზაცის გამორჩევა დამატებით .lead.

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

<p class = "წამყვანი" > ... </p>

აშენებულია Less-ით

ტიპოგრაფიული მასშტაბი ეფუძნება ორ LESS ცვლადს ცვლადებში. less : @baseFontSizeდა @baseLineHeight. პირველი არის საბაზისო შრიფტის ზომა, რომელიც გამოიყენება მთელს ტერიტორიაზე და მეორე არის საბაზისო ხაზის სიმაღლე. ჩვენ ვიყენებთ ამ ცვლადებს და რამდენიმე მარტივ მათემატიკას, რათა შევქმნათ ყველა ჩვენი ტიპის მინდვრები, ბალიშები და ხაზის სიმაღლეები და სხვა. მოარგეთ ისინი და Bootstrap ადაპტირდება.

ხაზგასმა

გამოიყენეთ HTML-ის ნაგულისხმევი აქცენტის ტეგები მსუბუქი სტილებით.

`<small>`

ტექსტის ხაზის ან ბლოკების ხაზგასმის გასაუქმებლად გამოიყენეთ პატარა ტეგი.

ტექსტის ეს ხაზი განიხილება როგორც წვრილმანი.

<p> <small> ტექსტის ეს სტრიქონი განიხილება როგორც წვრილმანი. </small> </p>

თამამი

ტექსტის ფრაგმენტზე უფრო მძიმე შრიფტის წონით ხაზგასმისთვის.

ტექსტის შემდეგი ფრაგმენტი გამოტანილია როგორც თამამი ტექსტი .

<strong> გაფორმებულია როგორც თამამი ტექსტი </strong>

დახრილები

ტექსტის ფრაგმენტის დახრილი შრიფტით ხაზგასასმელად.

ტექსტის შემდეგი ფრაგმენტი გამოტანილია, როგორც დახრილი ტექსტი .

<em> გაფორმებულია დახრილი ტექსტის სახით </em>

Თავები მაღლა!მოგერიდებათ გამოიყენოთ <b>და <i>HTML5-ში. <b>მიზნად ისახავს სიტყვების ან ფრაზების ხაზგასმას დამატებითი მნიშვნელობის გადაცემის გარეშე, ხოლო <i>ძირითადად ხმისთვის, ტექნიკური ტერმინებისთვის და ა.შ.

გასწორების კლასები

ადვილად გადაასწორეთ ტექსტი კომპონენტებთან ტექსტის გასწორების კლასებით.

მარცხნივ გასწორებული ტექსტი.

ცენტრში გასწორებული ტექსტი.

მარჯვნივ გასწორებული ტექსტი.

<p class = "text-left" > მარცხნივ გასწორებული ტექსტი. </p> 
<p class = "text-center" > ცენტრში გასწორებული ტექსტი. </p> 
<p class = "text-right" > მარჯვნივ გასწორებული ტექსტი. </p>

აქცენტის კლასები

მნიშვნელობის გადმოცემა ფერის საშუალებით რამდენიმე აქცენტირებული სასარგებლო კლასებით.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis.

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

<p class = "მდუმარე" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "ტექსტური გაფრთხილება" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "ტექსტური შეცდომა" > 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 = "ტექსტი-წარმატება" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

აბრევიატურები

HTML <abbr>ელემენტის სტილიზებული იმპლემენტაცია აბრევიატურებისა და აკრონიმებისთვის გაფართოებული ვერსიის საჩვენებლად hover-ზე. ატრიბუტის მქონე აბრევიატურებს titleაქვთ მსუბუქი წერტილოვანი ქვედა საზღვრები და დამხმარე კურსორი ჰოვერის დროს, რაც უზრუნველყოფს დამატებით კონტექსტს გადაადგილებისას.

`<abbr>`

გაფართოებული ტექსტისთვის აბრევიატურაზე გრძელ სვირზე ჩართეთ titleატრიბუტი.

სიტყვის ატრიბუტის აბრევიატურა არის attr .

<abbr title = "ატრიბუტი" > attr </abbr>

`<abbr class="initialism">`

დაამატეთ .initialismაბრევიატურას ოდნავ მცირე ზომის შრიფტი.

HTML არის საუკეთესო რამ დაჭრილი პურის შემდეგ.

<abbr title = "ჰიპერტექსტის მარკირების ენა" class = "ინიციალიზმი" > 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 
</address>
 
<მისამართი>
  <strong> სრული სახელი </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. მთელი რიცხვი posuere erat a ante. </p>
</blockquote>

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. მთელი რიცხვი posuere erat a ante. </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 = "გადახვიდე მარჯვნივ" > 
  ...
</blockquote>

სიები

შეუკვეთელი

ნივთების სია, რომლებშიც შეკვეთას აშკარად არ აქვს მნიშვნელობა.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
მთელი რიცხვი molestie lorem at massa
გამარტივება პრეტიუმ ნისლ ალიკეტში
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
ენეან იჯდეს ამეთ ერატ ნუნც
ეგეთი პორტტიტორი ლორემი

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

უბრძანა

ნივთების სია, რომლებშიც შეკვეთას აშკარად აქვს მნიშვნელობა .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
მთელი რიცხვი molestie lorem at massa
გამარტივება პრეტიუმ ნისლ ალიკეტში
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
ენეან იჯდეს ამეთ ერატ ნუნც
ეგეთი პორტტიტორი ლორემი

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

უსტიილი

წაშალეთ ნაგულისხმევი list-styleდა მარცხენა ჩასმა სიის ელემენტებზე (მხოლოდ უშუალო ბავშვებისთვის).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
მთელი რიცხვი molestie lorem at massa
გამარტივება პრეტიუმ ნისლ ალიკეტში
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
ენეან იჯდეს ამეთ ერატ ნუნც
ეგეთი პორტტიტორი ლორემი

<ul class = "არასტილილი" > 
  <li> ... </li>
</ul>

Ხაზში

მოათავსეთ სიის ყველა ელემენტი ერთ ხაზზე inline-blockდა მსუბუქი ბალიშებით.

Lorem ipsum
Phasellus iaculis
ნულა ვოლუტპატი

<ul class = "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>გვერდით.

აღწერილობის სიები: აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
ევისმოდი: 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. ვიწრო ხედებში, ისინი შეიცვლება ნაგულისხმევ დაწყობილ განლაგებაზე.

Ხაზში

შეფუთეთ კოდის შიდა ნაწყვეტები <code>.

მაგალითად, <section>უნდა იყოს შეფუთული როგორც inline.

მაგალითად , <code > & lt ; განყოფილება & gt ;</ code > უნდა იყოს შეფუთული როგორც ხაზში .

ძირითადი ბლოკი

გამოიყენეთ <pre>კოდის მრავალი ხაზისთვის. დარწმუნდით, რომ გამორთეთ კოდში ნებისმიერი კუთხის ფრჩხილები სათანადო რენდერისთვის.

<p>ტექსტის ნიმუში აქ...</p>

<წინასწარ>
  <p>ტექსტის ნიმუში აქ...</p>
</pre>

Თავები მაღლა!დარწმუნდით, რომ შეინახეთ კოდი <pre>ტეგებში რაც შეიძლება ახლოს მარცხნივ; ის გამოიტანს ყველა ჩანართს.

სურვილისამებრ შეგიძლიათ დაამატოთ .pre-scrollableკლასი, რომელიც დააყენებს მაქსიმალურ სიმაღლეს 350 პიქსელს და უზრუნველყოფს y-ღერძის გადახვევის ზოლს.

ნაგულისხმევი სტილები

ძირითადი სტილისთვის - მსუბუქი ბალიშები და მხოლოდ ჰორიზონტალური გამყოფები - დაამატეთ საბაზისო კლასი .tableნებისმიერს <table>.

#	Სახელი	Გვარი	მომხმარებლის სახელი
1	მარკო	ოთო	@mdo
2	იაკობ	თორნტონი	@ fat
3	ლარი	ჩიტი	@twitter

<table class = "table" > 
  …
</table>

არჩევითი კლასები

დაამატეთ რომელიმე შემდეგი კლასი .tableსაბაზისო კლასს.

`.table-striped`

ამატებს ზებრის ზოლს ცხრილის ნებისმიერ მწკრივს CSS სელექტორის <tbody>მეშვეობით :nth-child(არ არის ხელმისაწვდომი IE7-8-ში).

#	Სახელი	Გვარი	მომხმარებლის სახელი
1	მარკო	ოთო	@mdo
2	იაკობ	თორნტონი	@ fat
3	ლარი	ჩიტი	@twitter

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

`.table-bordered`

მაგიდას დაამატეთ საზღვრები და მომრგვალებული კუთხეები.

#	Სახელი	Გვარი	მომხმარებლის სახელი
1	მარკო	ოთო	@mdo
1	მარკო	ოთო	@getbootstrap
2	იაკობ	თორნტონი	@ fat
3	ლარი ჩიტი		@twitter

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

`.table-hover`

ჩართეთ ჰოვერ მდგომარეობა ცხრილის რიგებში <tbody>.

#	Სახელი	Გვარი	მომხმარებლის სახელი
1	მარკო	ოთო	@mdo
2	იაკობ	თორნტონი	@ fat
3	ლარი ჩიტი		@twitter

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

`.table-condensed`

ცხრილებს უფრო კომპაქტურს ხდის უჯრედის ბალიშის შუაზე გაჭრით.

#	Სახელი	Გვარი	მომხმარებლის სახელი
1	მარკო	ოთო	@mdo
2	იაკობ	თორნტონი	@ fat
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 = "წარმატება" >
    <td> 1 < /td>
    <td>TB - ყოველთვიურად</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>დამტკიცებულია</ td >
  </ tr >
...

მხარდაჭერილი ცხრილის მარკირება

ცხრილის მხარდაჭერილი HTML ელემენტების სია და მათი გამოყენება.

მონიშნეთ	აღწერა
`<table>`	შეფუთვის ელემენტი მონაცემების ცხრილის ფორმატში ჩვენებისთვის
`<thead>`	კონტეინერის ელემენტი ცხრილის სათაურის რიგებისთვის ( `<tr>`) ცხრილის სვეტების ლეიბლისთვის
`<tbody>`	კონტეინერის ელემენტი ცხრილის რიგებისთვის ( `<tr>`) ცხრილის სხეულში
`<tr>`	კონტეინერის ელემენტი ცხრილის უჯრედების ნაკრებისთვის ( `<td>`ან `<th>`), რომელიც გამოჩნდება ერთ მწკრივზე
`<td>`	ცხრილის ნაგულისხმევი უჯრედი
`<th>`	ცხრილის სპეციალური უჯრედი სვეტის (ან მწკრივის, არეალის და განლაგების მიხედვით) ლეიბლებისთვის
`<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 = "ფორმის ძიება" > 
  <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 = "ელფოსტა" >   
  <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 = "ფორმა-ჰორიზონტალური" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > ელფოსტა </label>  
    <div class = "კონტროლები" > 
      <input type = "text" id = "inputEmail" placeholder = "email " >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > პაროლი </label>  
    <div class = "კონტროლები" > 
      <შეყვანის ტიპი = "პაროლი" id = "inputPassword" placeholder = "პაროლი" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "კონტროლები" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > დამიმახსოვრე 
      </label>
      <button type = "submit" class = "btn" > შედით </button>  
    </div>
  </div>
</form>

მხარდაჭერილი ფორმის კონტროლი

სტანდარტული ფორმის კონტროლის მაგალითები, რომლებიც მხარდაჭერილია ფორმის მაგალითის განლაგებაში.

შეყვანები

ყველაზე გავრცელებული ფორმის კონტროლი, ტექსტზე დაფუძნებული შეყვანის ველები. მოიცავს HTML5-ის ყველა ტიპის მხარდაჭერას: ტექსტი, პაროლი, თარიღის დრო, თარიღი-ადგილობრივი, თარიღი, თვე, დრო, კვირა, ნომერი, ელფოსტა, url, ძიება, ტელ და ფერი.

მოითხოვს განსაზღვრულის გამოყენებას typeნებისმიერ დროს.

<შეყვანის ტიპი = "ტექსტი" ჩანაცვლება = "ტექსტის შეყვანა" >

ტექსტარეა

ფორმის კონტროლი, რომელიც მხარს უჭერს ტექსტის მრავალ ხაზს. საჭიროებისამებრ შეცვალეთ rowsატრიბუტი.

<textarea rows = "3" </textarea>

ჩექმები და რადიოები

მოსანიშნი ველები არის სიაში ერთი ან რამდენიმე ვარიანტის ასარჩევად, ხოლო რადიოები მრავალი ვარიანტიდან ერთის ასარჩევად.

ნაგულისხმევი (დაწყობილი)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  პირველი ვარიანტი არის ეს და ეს - აუცილებლად მიუთითეთ, რატომ არის ეს შესანიშნავი
</label>
 
<label class = "რადიო" > 
  <შეყვანის ტიპი = "რადიო" სახელი = "optionsRadios" id = "optionsRadios1" value = "option1" შემოწმებულია >     
  პირველი ვარიანტი არის ეს და ეს - აუცილებლად მიუთითეთ, რატომ არის ეს შესანიშნავი
</label>
<label class = "რადიო" > 
  <შეყვანის ტიპი = "რადიო" სახელი = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  მეორე ვარიანტი შეიძლება იყოს რაღაც სხვა და მისი არჩევა გააუქმებს პირველ ვარიანტს
</label>

ჩამრთველი ველები

დაამატეთ .inlineკლასი ჩამრთველების სერიას ან რადიოები, რომ კონტროლი გამოჩნდეს იმავე ხაზზე.

<label class = "checkbox inline" > 
  <შეყვანის ტიპი = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <შეყვანის ტიპი = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <შეყვანის ტიპი = "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>
 
<sect 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ორიდან ერთ-ერთ კლასში, რათა შეიყვანოთ ტექსტი შეყვანისთვის.

<div class = "input-prepend" > 
  <span class = "დამატება" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "მომხმარებლის სახელი" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "ტექსტი" >   
  <span class = "add-on" > .00 </span> 
</div>

კომბინირებული

გამოიყენეთ ორივე კლასი და ორი მაგალითი .add-onშეყვანის დასამატებლად და დასამატებლად.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "ტექსტი" >   
  <span class = "add-on" > .00 </span> 
</div>

ღილაკები ტექსტის ნაცვლად

<span>ტექსტით a- ს ნაცვლად , გამოიყენეთ .btna ღილაკის (ან ორი) დასამაგრებლად შეყვანისთვის.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "ტექსტი" >   
  <button class = "btn" type = "button" > წადი! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "ტექსტი" >   
  <button class = "btn" type = "button" > ძიება </button>  
  <button class = "btn" type = "button" > ოფციები </button>  
</div>

ღილაკების ჩამოსაშლელები

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "ტექსტი" >   
  <div class = "btn-ჯგუფი" > 
    <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი" >  
      მოქმედება
      <span class = "caret" ></span> 
    </button>
    <ul class = "ჩამოშლილი მენიუ" > 
      ...
    </ul>
  </div>
</div>

<div კლასი = "input-prepend" >
  <div კლასი = "btn-ჯგუფი" >
    <button class = "btn dropdown-toggle"  data-toggle = "ჩამოშლილი" >
      მოქმედება
      <span class = "caret" ></span>
    </button>
    <ul კლასი = "ჩამოშლილი მენიუ" >
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" ტიპი =    "ტექსტი" >
</div>

<div class = "input-prepend input-append" >
  <div class = "btn-ჯგუფი" > 
    <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი"  >
      მოქმედება
      <span class = "caret" ></span> 
    </button>
    <ul class = "ჩამოშლილი მენიუ" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "ტექსტი" >   
  <div class = "btn-ჯგუფი" > 
    <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი" >  
      მოქმედება
      <span class = "caret" ></span> 
    </button>
    <ul class = "ჩამოშლილი მენიუ" > 
      ...
    </ul>
  </div>
</div>

სეგმენტირებული ჩამოსაშლელი ჯგუფები

<ფორმა>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <შეყვანის ტიპი = "ტექსტი" > 
  </div>
  <div class = "input-append" > 
    <შეყვანის ტიპი = "ტექსტი" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

საძიებო ფორმა

<form class = "ფორმის ძიება" > 
  <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 = "კონტროლები" > 
  <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-actions, ღილაკები ავტომატურად იწევს ჩაღრმავებას, რათა მოერგოს ფორმის კონტროლს.

<div class = "ფორმა-მოქმედებები" > 
  <button type = "submit" class = "btn btn-primary" > ცვლილებების შენახვა </button>  
  <button type = "button" class = "btn" > გაუქმება </button>  
</div>

დახმარების ტექსტი

ჩასმული და ბლოკის დონის მხარდაჭერა დახმარების ტექსტისთვის, რომელიც გამოჩნდება ფორმის კონტროლის გარშემო.

ინლაინ დახმარება

<შეყვანის ტიპი = "ტექსტი" ><span class = "help-inline" > დახმარების ტექსტი </span>

დახმარების დაბლოკვა

<input type = "text" ><span class = "help-block" > დახმარების ტექსტის უფრო გრძელი ბლოკი, რომელიც იშლება ახალ სტრიქონზე და შეიძლება გაგრძელდეს ერთი ხაზის მიღმა. </span>

ფორმის კონტროლის ქვეყნები

მიაწოდეთ უკუკავშირი მომხმარებლებს ან ვიზიტორებს ძირითადი უკუკავშირის მდგომარეობებით ფორმის კონტროლებსა და ეტიკეტებზე.

შეყვანის ფოკუსი

ჩვენ ვხსნით ნაგულისხმევ outlineსტილებს ზოგიერთი ფორმის კონტროლზე და ვიყენებთ box-shadowმის ადგილას :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "ეს არის ორიენტირებული..." >

არასწორი შენატანი

სტილის შეყვანა ბრაუზერის ნაგულისხმევი ფუნქციონალობით :invalid. მიუთითეთ a type, დაამატეთ requiredატრიბუტი, თუ ველი არ არის სურვილისამებრ და (თუ შესაძლებელია) მიუთითეთpattern .

ეს არ არის ხელმისაწვდომი Internet Explorer 7-9-ის ვერსიებში CSS ფსევდო სელექტორების მხარდაჭერის არარსებობის გამო.

<input class = "span3" type = "ელფოსტა" საჭიროა >

გამორთული შეყვანები

დაამატეთ disabledატრიბუტი შეყვანაზე, რათა თავიდან აიცილოთ მომხმარებლის შეყვანა და ოდნავ განსხვავებული იერსახის გაჩენა.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "აქ შეყვანა გამორთულია..." გამორთულია >

ვალიდაციის ქვეყნები

Bootstrap შეიცავს შეცდომის, გაფრთხილების, ინფორმაციის და წარმატების შეტყობინებების ვალიდაციის სტილებს. გამოსაყენებლად დაამატეთ შესაბამისი კლასი გარემომცველს .control-group.

<div class = "საკონტროლო ჯგუფის გაფრთხილება" > 
  <label class = "control-label" for = "inputWarning" > შეყვანა გაფრთხილებით </label>  
  <div class = "კონტროლები" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > შეიძლება რაღაც შეფერხდა </span> 
  </div>
</div>
 
<div class = "საკონტროლო ჯგუფის შეცდომა" > 
  <label class = "control-label" for = "inputError" > შეყვანა შეცდომით </label>  
  <div class = "კონტროლები" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > გთხოვთ, შეასწოროთ შეცდომა </span> 
  </div>
</div>
 
<div class = "საკონტროლო ჯგუფის ინფორმაცია" > 
  <label class = "control-label" for = "inputInfo" > ინფორმაციის შეყვანა </label>  
  <div class = "კონტროლები" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > მომხმარებლის სახელი უკვე მიღებულია </span> 
  </div>
</div>
 
<div class = "საკონტროლო ჯგუფის წარმატება" > 
  <label class = "control-label" for = "inputSuccess" > შეყვანა წარმატებით </label>  
  <div class = "კონტროლები" > 
    <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 გამორთულია" > ძირითადი ბმული </a>  
<a href = "#" class = "btn btn-large გამორთულია" > ბმული </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" გამორთულია > ღილაკი </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.

ხატის გლიფები

140 ხატულა sprite სახით, ხელმისაწვდომია მუქი ნაცრისფერი (ნაგულისხმევი) და თეთრი, მოწოდებული Glyphicons- ის მიერ .

ხატ-მინა
ხატი-მუსიკა
ხატის ძებნა
ხატი-კონვერტი
ხატი-გული
ხატ-ვარსკვლავი
ხატი-ვარსკვლავი-ცარიელი
ხატი-მომხმარებელი
ხატი-ფილმი
ხატი-დიდი
ხატი-ე
ხატის სია
ხატულა - კარგი
ხატის ამოღება
icon-zoom-in
icon-zoom-out
ხატის გამორთვა
ხატი-სიგნალი
ხატ-ღერძი
ხატი-ნაგავი
ხატი-სახლი
ხატი-ფაილი
ხატის დრო
ხატი-გზა
icon-download-alt
ხატის ჩამოტვირთვა
ხატის ატვირთვა
ხატულა-ინბოქსი
ხატი-თამაში-წრე
ხატი-გამეორება
ხატის განახლება
icon-list-alt
ხატის დაბლოკვა
ხატი-დროშა
ხატულა-ყურსასმენები
ხატულა-მოცულობის გამორთვა
ხატი-მოცულობის შემცირება
ხატი-მოცულობის გაზრდა
ხატი-qrcode
ხატი-შტრიხკოდი
ხატი-ტეგი
ხატულა-ტეგები
ხატ-წიგნი
ხატი-სანიშნე
ხატის ბეჭდვა
ხატი-კამერა
ხატი-შრიფტი
ხატ-გამბედავი
ხატი-დახრილი
ხატი-ტექსტი-სიმაღლე
ხატი-ტექსტი-სიგანე
ხატულა-გასწორება-მარცხნივ
icon-align-center
ხატულა-გასწორება-მარჯვნივ
ხატი-გასწორება-გამართლება
ხატების სია
ხატულა-შეწევა-მარცხნივ
ხატულა-შეწევა-მარჯვნივ
ხატი-facetime-ვიდეო
ხატი-სურათი
ხატი-ფანქარი
ხატი-რუქა-მარკერი
ხატულა-მორგება
ხატი-ელფერით
ხატი-რედაქტირება
ხატი-გაზიარება
ხატის შემოწმება
ხატი - გადაადგილება
ხატი-ნაბიჯი-უკან
ხატულა-სწრაფი-უკან
ხატი-უკან
ხატ-თამაში
ხატი-პაუზა
ხატი-გაჩერება
ხატი-წინ
icon-fast-forward
ხატი-ნაბიჯი-წინ
ხატის ამოღება
ხატი-შევრონი-მარცხნივ
ხატი-შევრონი-მარჯვნივ
ხატი-პლუს-ნიშანი
ხატი-მინუს-ნიშანი
icon-remove-sign
ხატულა-ok-ნიშანი
ხატი-კითხვა-ნიშანი
ხატი-ინფორმაცია-ნიშანი
ხატულა-სკრინშოტი
icon-remove-circle
ხატი-ok-წრე
ხატი-ბან-წრე
ხატულა-ისარი-მარცხნივ
ხატი-ისარი-მარჯვნივ
ხატი-ისარი-ზემოთ
ხატი-ისარი-ქვემო
icon-share-alt
icon-size-full
icon-size-small
ხატი-პლუს
ხატი-მინუს
ხატი-ვარსკვლავი
ხატი-ძახილის ნიშანი
ხატი-საჩუქარი
ხატ-ფოთოლი
ხატ-ცეცხლი
ხატი-თვალგახელილი
ხატი-თვალის დახუჭვა
ხატი-გამაფრთხილებელი ნიშანი
ხატი-თვითმფრინავი
ხატი-კალენდარი
ხატი - შემთხვევითი
ხატი-კომენტარი
ხატი-მაგნიტი
ხატი-შევრონი
ხატი-შევრონი-ქვემო
ხატი-რეტვიტი
ხატი-საყიდლების კალათა
ხატულა-საქაღალდე-დახურვა
ხატულა-საქაღალდე-გახსნა
icon-size-ვერტიკალური
icon-size-horizontal
ხატულა-hdd
ხატი-bullhorn
ხატი-ზარი
ხატი-სერთიფიკატი
ხატი-თითები
ხატი ცერა ქვევით
ხატი-ხელ-მარჯვნივ
ხატი-ხელ-მარცხნივ
ხატ-ხელი
ხატი-ხელ-ქვემო
ხატი-წრე-ისარი-მარჯვნივ
ხატი-წრე-ისარი-მარცხნივ
ხატი-წრე-ისარი-ზემოთ
ხატი-წრე-ისარი-ქვემო
ხატი-გლობუსი
ხატულას გასაღები
ხატი-დავალებები
ხატულა-ფილტრი
ხატი-პორტფელი
ხატი სრულ ეკრანზე

გლიფიკონების მიკუთვნება

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-ჯგუფი" > 
    <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-ჯგუფი" > 
  <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 = "ჩამოშლილი მენიუ" > 
    <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 = "გამყოფი" </li> 
    <li><a href = "#" ><i class = "i" ></i> შექმენით ადმინისტრატორი </a></li>  
  </ul>
</div>

ღილაკების ზომები

ვარსკვლავი ვარსკვლავი ვარსკვლავი

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> ვარსკვლავი </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> ვარსკვლავი </a>   
<a class = "btn btn-mini" 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 = "კონტროლები" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-convelope" </i></span>  
      <input class = "span2" id = "inputIcon" type = "ტექსტი" >   
    </div>
  </div>
</div>

ტიპოგრაფია

სათაურები

h1. სათაური 1

h2. სათაური 2

h3. სათაური 3

h4. სათაური 4

h5. სათაური 5

h6. სათაური 6

სხეულის ასლი

წამყვანი სხეულის ასლი

აშენებულია Less-ით

ხაზგასმა

<small>

თამამი

დახრილები

გასწორების კლასები

აქცენტის კლასები

აბრევიატურები

<abbr>

<abbr class="initialism">

მისამართები

<address>

ბლოკციტატები

ნაგულისხმევი ბლოკციტატი

Blockquote პარამეტრები

წყაროს დასახელება

ალტერნატიული ჩვენებები

სიები

შეუკვეთელი

უბრძანა

უსტიილი

Ხაზში

აღწერა

ჰორიზონტალური აღწერა

კოდი

Ხაზში

ძირითადი ბლოკი

მაგიდები

ნაგულისხმევი სტილები

არჩევითი კლასები

.table-striped

.table-bordered

.table-hover

.table-condensed

არჩევითი რიგის კლასები

მხარდაჭერილი ცხრილის მარკირება

ფორმები

ნაგულისხმევი სტილები

არჩევითი განლაგება

საძიებო ფორმა

ინლაინ ფორმა

ჰორიზონტალური ფორმა

მხარდაჭერილი ფორმის კონტროლი

შეყვანები

ტექსტარეა

ჩექმები და რადიოები

ნაგულისხმევი (დაწყობილი)

ჩამრთველი ველები

ირჩევს

ფორმის კონტროლის გაფართოება

წინასწარ დამატებული შეყვანები

ნაგულისხმევი პარამეტრები

კომბინირებული

ღილაკები ტექსტის ნაცვლად

ღილაკების ჩამოსაშლელები

სეგმენტირებული ჩამოსაშლელი ჯგუფები

საძიებო ფორმა

აკონტროლეთ ზომა

დონის შეყვანის დაბლოკვა

შედარებითი ზომა

ბადის ზომა

არარედაქტირებადი შეყვანები

ჩამოაყალიბეთ მოქმედებები

დახმარების ტექსტი

ინლაინ დახმარება

დახმარების დაბლოკვა

ფორმის კონტროლის ქვეყნები

შეყვანის ფოკუსი

არასწორი შენატანი

გამორთული შეყვანები

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`