Гарчиг

Бүх HTML гарчгууд, <h1>дамжуулан <h6>авах боломжтой.

h1. Гарчиг 1

h2. Гарчиг 2

h3. Гарчиг 3

h4. Гарчиг 4

h5. Гарчиг 5

h6. Гарчиг 6

Биеийн хуулбар

Bootstrap- ийн дэлхийн өгөгдмөл font-sizeнь 14px бөгөөд 20px байна. Энэ нь болон бүх догол мөрөнд хамаарна. Нэмж дурдахад (догол мөрүүд) мөрний өндрийн хагасын доод ирмэгийг (анхдагчаар 10px) авдаг.line-height<body><p>

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

Cum sociis natoque penatibus and magnis dis aparturient 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 анги = "тэргүүлэх" > ... </p>

Бага зардлаар барьсан

Типографийн хуваарь нь хувьсагчийн хоёр LESS хувьсагч дээр суурилдаг.less : @baseFontSizeболон @baseLineHeight. Эхнийх нь үндсэн үсгийн хэмжээ, хоёр дахь нь үндсэн мөрийн өндөр юм. Бид эдгээр хувьсагч болон энгийн математикийг ашиглан бүх төрлийн захын зай, дэвсгэр, шугамын өндрийг болон бусад зүйлийг үүсгэдэг. Тэдгээрийг тохируулж, Bootstrap тохируулна.

Онцлох

Хөнгөн загвартай HTML-ийн өгөгдмөл онцлох тэмдэглэгээг ашиглана уу.

`<small>`

Текстийн доторлогоо эсвэл блокуудыг онцлон тэмдэглэхийн тулд жижиг шошгыг ашиглана уу.

Энэ текстийн мөрийг нарийн хэвлэмэл хэлбэрээр авч үзэх зорилготой.

<p> <жижиг> Энэ текстийн мөрийг нарийн хэвлэмэл байдлаар авч үзэх зорилготой. </small> </p>

Зоригтой

Илүү хүнд үсгийн жинтэй текстийн хэсгийг онцлон тэмдэглэхэд зориулагдсан.

Дараах текстийн хэсэг нь тод текст хэлбэрээр бичигдсэн байна.

<strong> тод үсгээр бичсэн </strong>

Налуу

Текстийн хэсэгчилсэн хэсгийг налуу үсгээр онцлон тэмдэглэхийн тулд.

Дараах текстийн хэсэг нь налуу бичээстэй байна.

<em> налуу бичээсээр буулгасан </em>

Анхаараарай!HTML5 дээр <b>чөлөөтэй ашиглах боломжтой . Энэ нь ихэвчлэн дуу хоолой, техникийн нэр томъёо гэх мэт нэмэлт ач холбогдол өгөхгүйгээр үг, хэллэгийг тодруулах зорилготой юм .<i><b><i>

Тохируулгын ангиуд

Текстийг зэрэгцүүлэх анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хялбархан тохируулаарай.

Зүүн зэрэгцүүлсэн текст.

Төвд зэрэгцүүлсэн текст.

Баруун зэрэгцүүлсэн текст.

<p анги = "текст-зүүн" > Зүүн зэрэгцүүлсэн текст. </p> 
<p class = "text-center" > Төвд зэрэгцүүлсэн текст. </p> 
<p анги = "текст-баруун" > Баруун зэрэгцүүлсэн текст. </p>

Онцлох хичээлүүд

Цөөн хэдэн онцлох хэрэглээний ангиудын тусламжтайгаар өнгөөр дамжуулан утгыг илэрхийлэх.

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 анги = "дуугүй" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p анги = "текст анхааруулга" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p анги = "текст алдаа" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p анги = "текст-мэдээлэл" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p анги = "текст-амжилт" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Товчлол

<abbr>Товчлол болон товчилсон үгэнд зориулсан HTML-ийн элементийн загварчлагдсан хэрэгжилт нь хулган дээр өргөжсөн хувилбарыг харуулах. Атрибут бүхий товчилсон үгсийн 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 = "Утас" > 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. Бүхэл тоо нь ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante. </p>
</blockquote>

Blockquote сонголтууд

Стандарт блок ишлэл дээрх энгийн хувилбаруудад зориулж хэв маяг, контентыг өөрчилнө.

Эх сурвалжийг нэрлэх

<small>Эх сурвалжийг тодорхойлох шошго нэмнэ үү . Эх сурвалжийн нэрийг дотор нь боож өгнө <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.
Эх сурвалжийн гарчигт алдартай нэгэн

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante. </p>
  <small> Алдартай хэн нэгэн <cite title = "Эх сурвалжийн гарчиг" > Эх сурвалжийн гарчиг </cite></small> 
</blockquote>

Өөр дэлгэцүүд

.pull-rightХөвөгч, баруун тийш зэрэгцүүлсэн блок ишлэлд ашиглаарай .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.
Эх сурвалжийн гарчигт алдартай нэгэн

<blockquote class = "баруун татах" > 
  ...
</blockquote>

Жагсаалтууд

Захиалгагүй

Захиалга нь тодорхой хамааралгүй зүйлсийн жагсаалт .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Идээний идээт ундаа
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutp at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Захиалсан

Захиалга нь тодорхой хамааралтай зүйлсийн жагсаалт .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Загваргүй

Жагсаалтын зүйлсийн үндсэн list-styleболон зүүн дэвсгэрийг устгана уу (зөвхөн хүүхдэд зориулсан).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Идээний идээт ундаа
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutp at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<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.
Малесуада порта: 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.
Малесуада порта: 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 анги = "dl-хэвтээ" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Анхаараарай!Хэвтээ тайлбарын жагсаалтууд нь зүүн баганын засварт багтахгүй хэт урт нэр томъёог таслах болно text-overflow. Нарийхан харагдах цонхонд тэдгээр нь өгөгдмөл овоолсон байрлал руу өөрчлөгдөнө.

Шугаманд

Кодын доторлогооны хэсгүүдийг -ээр боож <code>өгнө.

Жишээлбэл, <section>шугамаар ороосон байх ёстой.

Жишээ нь < code> & lt ; хэсэг & gt ;</ code > мөр доторх хэлбэрээр ороосон байх ёстой .

Үндсэн блок

<pre>Олон мөр кодын хувьд ашиглах . Зөв дүрслэхийн тулд кодын өнцөгт хаалтаас зайлсхийхээ мартуузай.

<p>Жишээ текст энд байна...</p>

<pre>
  <p>Жишээ текстийг эндээс...</p>
</pre>

Анхаараарай!<pre>Кодыг шошгон доторх зүүн талд аль болох ойр байлгахаа мартуузай ; энэ нь бүх табуудыг харуулах болно.

Та сонголтоор .pre-scrollableдээд тал нь 350px өндөрт тохируулж, у тэнхлэгийн гүйлгэх самбар өгөх анги нэмж болно.

Өгөгдмөл хэв маяг

Үндсэн хэв маягийн хувьд - хөнгөн дэвсгэр ба зөвхөн хэвтээ хуваагч - үндсэн ангиллыг .tableдурын <table>.

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

<хүснэгт анги = "хүснэгт" > 
  …
</хүснэгт>

Нэмэлт ангиуд

Дараах ангиудын аль нэгийг .tableүндсэн ангид нэмнэ үү.

`.table-striped`

<tbody>CSS сонгогчоор дамжуулан ямар ч хүснэгтийн мөрөнд тахө :nth-childзураасыг нэмнэ (IE7-8-д байхгүй).

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

<хүснэгт анги = "хүснэгт хүснэгт судалтай" > 
  …
</хүснэгт>

`.table-bordered`

Хүснэгтэнд хүрээ болон дугуйрсан булангуудыг нэмнэ.

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
1	Марк	Отто	@getbootstrap
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

<хүснэгт анги = "хүснэгт хүснэгтээр хүрээлэгдсэн" > 
  …
</хүснэгт>

`.table-hover`

Хүснэгтийн мөрөнд хулганын төлөвийг идэвхжүүлэх <tbody>.

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

<хүснэгтийн анги = "хүснэгтийн хүснэгтийг чиглүүлэх" > 
  …
</хүснэгт>

`.table-condensed`

Эсийн дэвсгэрийг хагасаар нь огтолж хүснэгтийг илүү авсаархан болгоно.

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

<хүснэгт анги = "хүснэгтийн хураангуй хүснэгт" > 
  …
</хүснэгт>

Нэмэлт эгнээний ангиуд

Хүснэгтийн мөрүүдийг будахын тулд контекст ангиллыг ашиглана уу.

Анги	Тодорхойлолт
`.success`	Амжилттай эсвэл эерэг үйлдлийг илэрхийлдэг.
`.error`	Аюултай эсвэл сөрөг байж болзошгүй үйлдлийг илэрхийлнэ.
`.warning`	Анхаарал хандуулах шаардлагатай байж болзошгүй анхааруулгыг илэрхийлнэ.
`.info`	Анхдагч хэв маягийн өөр хувилбар болгон ашигладаг.

#	Бүтээгдэхүүн	Төлбөрийг авсан	Статус
1	Сүрьеэ - Сар бүр	2012.01.04	Зөвшөөрсөн
2	Сүрьеэ - Сар бүр	2012.02.04	Татгалзсан
3	Сүрьеэ - Сар бүр	2012.03.04	Хүлээгдэж байна
4	Сүрьеэ - Сар бүр	2012.04.04	Баталгаажуулахын тулд залгана уу

...
  < tr анги = "амжилт" >
    <td> 1 < /td>
    <td>Сүрьеэ - Сар бүр</ td >
    <td> 2012 оны 01/04 < / td >
    <td>Зөвшөөрсөн</ td >
  </ tr >
...

Хүснэгтийн тэмдэглэгээг дэмждэг

Дэмжигдсэн хүснэгтийн HTML элементүүдийн жагсаалт ба тэдгээрийг хэрхэн ашиглах талаар.

Tag	Тодорхойлолт
`<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>
</хүснэгт>

Өгөгдмөл хэв маяг

Бие даасан маягтын хяналтууд нь хэв маягийг хүлээн авдаг боловч үндсэн ангилалд шаардлагагүй<form> эсвэл тэмдэглэгээнд их хэмжээний өөрчлөлт оруулдаггүй. Маягтын хяналтын дээд талд давхарласан, зүүн тийш зэрэгцүүлсэн шошго гарч ирнэ.

<маягт>
  <талбарын багц>
    <legend> Домог </legend>
    <label> Шошгоны нэр </label>
    <оролтын төрөл = "текст" орлуулагч = "Ямар нэгэн зүйл бичнэ үү..." >  
    <span class = "help-block" > Блок түвшний тусламжийн текстийг эндээс үзнэ үү. </span> 
    <шошго анги = "checkbox" > 
      <оролтын төрөл = "checkbox" > Намайг шалгаарай 
    </label>
    <button type = "submit" class = "btn" > Илгээх </button>  
  </fieldset>
</form>

Нэмэлт зохион байгуулалт

Bootstrap-д нийтлэг хэрэглээний тохиолдлуудад гурван нэмэлт маягтын байршлыг багтаасан болно.

Хайлтын маягт

Илүү дугуйрсан текст оруулахын тулд .form-searchмаягт болон дээр нэмнэ үү ..search-query<input>

<form class = "form-search" > 
  <оролтын төрөл = "текст" анги = "оролтын дунд хайлтын асуулга" >  
  <button type = "submit" class = "btn" > Хайх </button>  
</form>

Дотор хэлбэр

.form-inlineЗүүн талд зэрэгцүүлсэн шошго болон inline-block удирдлагад нэмээд авсаархан байрлалтай болно.

<form class = "form-inline" > 
  <оролтын төрөл = "текст" анги = "оролт-жижиг" орлуулагч = "И-мэйл" >   
  <оролтын төрөл = "нууц үг" анги = "оролт-жижиг" орлуулагч = "Нууц үг" >   
  <шошго анги = "checkbox" > 
    <оролтын төрөл = "checkbox" > Намайг санаарай 
  </label>
  <button type = "submit" class = "btn" > Нэвтрэх </button>  
</form>

Хэвтээ хэлбэр

Шошгуудыг баруун тийш зэрэгцүүлэн зүүн тийш нь эргүүлж, хяналттай нэг мөрөнд харагдуулна. Өгөгдмөл маягтаас хамгийн их тэмдэглэгээний өөрчлөлтийг шаарддаг:

.form-horizontalМаягт руу нэмнэ үү
Шошго болон хяналтыг дотор нь боож өгнө.control-group
.control-labelШошгон дээр нэмнэ үү
Холбогдох хяналтыг .controlsзөв тохируулахын тулд дотор нь боож өгнө

<хэлбэрийн анги = "хэвтээ маягт" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Имэйл </label>  
    <div class = "controls" > 
      <оролтын төрөл = "текст" id = "inputEmail" орлуулагч = " И- мэйл" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Нууц үг </label>  
    <div class = "controls" > 
      <оролтын төрөл = "нууц үг" id = "inputPassword" орлуулагч = " Нууц үг" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <шошго анги = "checkbox" > 
        <оролтын төрөл = "checkbox" > Намайг санаарай 
      </label>
      <button type = "submit" class = "btn" > Нэвтрэх </button>  
    </div>
  </div>
</form>

Дэмжигдсэн маягтын удирдлага

Стандарт маягтын хяналтын жишээ маягтын байршлын жишээнд дэмжигдсэн.

Оролтууд

Хамгийн түгээмэл хэлбэрийн хяналт, текст дээр суурилсан оролтын талбарууд. Текст, нууц үг, огноо цаг, огноо, цаг, огноо, сар, цаг, долоо хоног, дугаар, имэйл, url, хайлт, утас, өнгө зэрэг бүх HTML5 төрлийн дэмжлэгийг багтаасан болно.

Ямар ч үед заасан хэрэглээг шаарддаг type.

<оролтын төрөл = "текст" орлуулагч = "Текст оруулах" >

Текстареа

Текстийн олон мөрийг дэмждэг маягтын удирдлага. rowsШаардлагатай бол атрибутыг өөрчлөх .

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

Шалгах хайрцаг ба радио

Сонголтууд нь жагсаалтаас нэг буюу хэд хэдэн сонголтыг сонгоход зориулагдсан бол радио нь олон сонголтоос нэг сонголтыг сонгоход зориулагдсан.

Өгөгдмөл (овоолсон)

<шошго анги = "checkbox" > 
  <оролтын төрөл = "checkbox" утга = "" >  
  Нэгдүгээр сонголт бол энэ, тэр нь - энэ нь яагаад гайхалтай болохыг заавал оруулаарай
</label>
 
<шошго анги = "радио" > 
  <оролтын төрөл = "радио" нэр = "optionsRadios" id = "optionsRadios1" утга = "option1"-г шалгасан >     
  Нэгдүгээр сонголт бол энэ, тэр нь - энэ нь яагаад гайхалтай болохыг заавал оруулаарай
</label>
<шошго анги = "радио" > 
  <оролтын төрөл = "радио" нэр = "optionsRadios" id = "optionsRadios2" утга = "option2" >    
  Хоёрдахь сонголт нь өөр байж болох бөгөөд үүнийг сонгосноор нэг дэх сонголтыг цуцлах болно
</label>

Inline checkboxes

.inlineНэг мөрөнд гарч ирэх хяналтын нүднүүдэд ангиудыг нэмэх юм уу радионууд.

<label class = "checkbox inline" > 
  <оролтын төрөл = "checkbox" id = "inlineCheckbox1" утга = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <оролтын төрөл = "checkbox" id = "inlineCheckbox2" утга = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <оролтын төрөл = "checkbox" id = "inlineCheckbox3" утга = "option3" > 3   
</label>

Сонгодог

multiple="multiple"Олон сонголтыг нэгэн зэрэг харуулахын тулд өгөгдмөл сонголтыг ашиглана уу эсвэл a-г зааж өгнө үү.

<сонгох>
  <option> 1 </ option>
  <option> 2 </ option>
  <option> 3 </ option>
  <option> 4 </ option>
  <option> 5 </ option>
</сонгох>
 
<олоныг сонгох = " олон " > 
  <option> 1 </ option>
  <option> 2 </ option>
  <option> 3 </ option>
  <option> 4 </ option>
  <option> 5 </ option>
</сонгох>

Маягтын хяналтыг өргөтгөж байна

Одоо байгаа хөтчийн хяналт дээр нэмсэн Bootstrap нь бусад хэрэгцээт хэлбэрийн бүрэлдэхүүн хэсгүүдийг агуулдаг.

Урьдчилсан болон хавсаргасан оролтууд

Текст дээр суурилсан оролтын өмнө эсвэл дараа нь текст эсвэл товчлуур нэмнэ үү. selectЭлементүүдийг энд дэмждэггүйг анхаарна уу .

Өгөгдмөл сонголтууд

Оролтод текст нэмэх эсвэл бичихийн тулд хоёр ангийн аль нэгээр нь an .add-onболон an -г боож өгнө.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <оролтын анги = "span2" id = " prependedInput " type = "текст" орлуулагч = "Хэрэглэгчийн нэр" >    
</div>
<div class = "input-append" > 
  <оролтын анги = "span2" id = "appendedInput " type = "текст" >   
  <span class = "add-on" > .00 </span> 
</div>

Нэгтгэсэн

.add-onОролтын урд болон хавсаргахын тулд класс болон хоёр тохиолдлыг хоёуланг нь ашиглана уу.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <оролтын анги = "span2" id = "appendedPrependedInput " төрөл = "текст" >   
  <span class = "add-on" > .00 </span> 
</div>

Текстийн оронд товчлуурууд

Оролтод товчлуур (эсвэл хоёр) хавсаргахын тулд <span>текстийн оронд a ашиглана уу..btn

<div class = "input-append" > 
  <оролтын анги = "span2" id = "appendedInputButton " төрөл = "текст" >   
  <button class = "btn" type = "button" > Яв! </button>  
</div>

<div class = "input-append" > 
  <оролтын анги = "span2" id = "appendedInputButtons " төрөл = "текст" >   
  <button class = "btn" type = "button" > Хайх </button>  
  <button class = "btn" type = "button" > Сонголтууд </button>  
</div>

Унтраах товчлуурууд

<div class = "input-append" > 
  <оролтын анги = "span2" id = "appendedDropdownButton " төрөл = "текст" >   
  <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>
  <оролтын анги = "span2" id = "prependedDropdownButton " төрөл = "текст" >   
</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>
  <оролтын анги = "span2" id = "appendedPrependedDropdownButton " төрөл = "текст" >   
  <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" > ... </div> 
    <оролтын төрөл = "текст" > 
  </div>
  <div class = "input-append" > 
    <оролтын төрөл = "текст" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Хайлтын маягт

<form class = "form-search" > 
  <div class = "input-append" > 
    <оролтын төрөл = "текст" анги = "span2 хайлтын асуулга" >  
    <button type = "submit" class = "btn" > Хайх </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Хайх </button>  
    <оролтын төрөл = "текст" анги = "span2 хайлтын асуулга" >  
  </div>
</form>

Хэмжээг хянах

.input-largeАнгиудыг ашиглан сүлжээний баганын хэмжээтэй өөрийн оролтыг тааруулах эсвэл харьцангуй хэмжээтэй ангиллыг ашиглана уу .span*.

Түвшингийн оролтыг блоклох

Аливаа <input>эсвэл <textarea>элементийг блокийн түвшний элемент шиг ажиллуулах.

<оролтын анги = "оролтын блок-түвшин" төрөл = "текст" орлуулагч = " .оролтын блокийн түвшин" >

Харьцангуй хэмжээ

<оролтын анги = "оролтын мини" төрөл = "текст" орлуулагч = " .оролтын мини" >   
<оролтын анги = "оролт-жижиг" төрөл = "текст" орлуулагч = " .оролт -жижиг" >   
<оролтын анги = "оролтын дунд" төрөл = "текст" орлуулагч = " .оролтын дунд" >   
<оролтын анги = "оролт-том" төрөл = "текст" орлуулагч = " .оролт -том" >   
<оролтын анги = "input-xlarge" төрөл = "текст" орлуулагч = " .input -xlarge" >   
<оролтын анги = "input-xxlarge" төрөл = "текст" орлуулагч = " .input -xxlarge" >

Анхаараарай!Ирээдүйн хувилбаруудад бид товчлуурын хэмжээтэй тааруулахын тулд эдгээр харьцангуй оролтын ангиудын хэрэглээг өөрчлөх болно. Жишээлбэл, .input-largeоролтын дэвсгэр болон үсгийн хэмжээг нэмэгдүүлнэ.

Сүлжээний хэмжээ

Сүлжээний баганын ижил хэмжээтэй таарч байгаа оролтын хувьд .span1to ашиглана уу..span12

<оролтын анги = "span1" төрөл = "текст" орлуулагч = " .span1 " >   
<оролтын анги = "span2" төрөл = "текст" орлуулагч = " .span2 " >   
<оролтын анги = "span3" төрөл = "текст" орлуулагч = " .span3 " >   
< анги сонгох = "span1" > 
  ...
</сонгох>
< анги сонгох = "span2" > 
  ...
</сонгох>
< анги сонгох = "span3" > 
  ...
</сонгох>

Нэг мөрөнд олон тооны сүлжээний оролтын хувьд тохируулагчийн .controls-rowангиллыг тохирох зайнд ашиглана уу . Энэ нь хоосон зайг буулгахын тулд оролтуудыг хөвөгч, зохих захын зайг тогтоож, хөвөх хэсгийг арилгадаг.

<div class = "controls" > 
  <оролтын анги = "span5" төрөл = "текст" орлуулагч = " .span5 " >   
</div>
<div class = "controls controls-rows" > 
  <оролтын анги = "span4" төрөл = "текст" орлуулагч = " .span4 " >   
  <оролтын анги = "span1" төрөл = "текст" орлуулагч = " .span1 " >   
</div>
...

Засварлах боломжгүй оролтууд

Бодит маягтын тэмдэглэгээг ашиглахгүйгээр өгөгдлийг засварлах боломжгүй хэлбэрээр харуулах.

<span class = "input-xlarge uneditable-input" > Энд зарим утга байна </span>

Үйлдлүүдийг хэлбэржүүлэх

Маягтыг бүлэг үйлдлээр төгсгөх (товчлуур). a дотор байрлуулах үед .form-actionsтовчлуурууд автоматаар маягтын удирдлагатай зэрэгцэн орох болно.

<div class = "form-action" > 
  <button type = "submit" class = "btn btn-primary" > Өөрчлөлтүүдийг хадгалах </button>  
  <button type = "button" class = "btn" > Цуцлах </button>  
</div>

Тусламжийн текст

Маягтын удирдлагын эргэн тойронд гарч ирэх тусламжийн текстийн шугамын болон блокийн түвшний дэмжлэг.

Inline тусламж

<оролтын төрөл = "текст" ><span class = "help-inline" > Inline тусламжийн текст </span>

Тусламжийг блоклох

<оролтын төрөл = "текст" ><span анги = "help-block" > Шинэ мөрөнд хуваагддаг, нэг мөрөөс цааш үргэлжлэх тусламжийн текстийн урт блок. </span>

Маягтын хяналтын төлөвүүд

Хэрэглэгчид эсвэл зочдод маягтын удирдлага болон шошгон дээрх үндсэн санал хүсэлтийн талаар санал хүсэлтээ өгнө үү.

Фокус оруулах

outlineБид зарим маягтын удирдлага дээрх өгөгдмөл хэв маягийг устгаад box-shadowоронд нь a хэрэглэнэ :focus.

<оролтын анги = "input-xlarge" id = "focusedInput" type = "текст" утга = "Энэ нь төвлөрсөн..." >

Буруу оролт

-тэй хөтчийн өгөгдмөл функцээр хэв маяг оруулах :invalid. a-г зааж type, талбар нь нэмэлт биш бол шинж чанарыг нэмж required, (хэрэв байгаа бол) -г зааж өгнө pattern.

CSS псевдо сонгогчийг дэмждэггүй учир Internet Explorer 7-9-ийн хувилбаруудад үүнийг ашиглах боломжгүй.

<оролтын анги = "span3" төрөл = "имэйл" шаардлагатай >

Оролтыг идэвхгүй болгосон

disabledХэрэглэгчийн оруулахаас сэргийлж, арай өөр харагдуулахын тулд оролт дээр атрибут нэмээрэй .

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Энд оруулахыг идэвхгүй болгосон..." идэвхгүй >

Баталгаажуулалтын төлөвүүд

Bootstrap нь алдаа, анхааруулга, мэдээлэл, амжилтын мессежийн баталгаажуулалтын хэв маягийг агуулдаг. Ашиглахын тулд хүрээлэн буй орчинд тохирох ангиллыг нэмнэ үү .control-group.

<div class = "хяналтын бүлгийн анхааруулга" > 
  <label class = "control-label" for = "inputWarning" > Анхааруулга бүхий оролт </label>  
  <div class = "controls" > 
    <оролтын төрөл = "текст" id = "inputWarning" >  
    <span class = "help-inline" > Ямар нэг зүйл буруу болсон байж магадгүй </span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > Алдаатай оролт </label>  
  <div class = "controls" > 
    <оролтын төрөл = "текст" id = "inputError" >  
    <span class = "help-inline" > Алдааг засна уу </span> 
  </div>
</div>
 
<div class = "хяналтын бүлгийн мэдээлэл" > 
  <label class = "control-label" for = "inputInfo" > Мэдээлэлтэй оруулах </label>  
  <div class = "controls" > 
    <оролтын төрөл = "текст" id = "inputInfo" >  
    <span class = "help-inline" > Хэрэглэгчийн нэрийг аль хэдийн авсан байна </span> 
  </div>
</div>
 
<div class = "хяналтын бүлгийн амжилт" > 
  <label class = "control-label" for = "inputSuccess" > Амжилттай оролт </label>  
  <div class = "controls" > 
    <оролтын төрөл = "текст" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </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 = "idabled" > Үндсэн товчлуур </button>   
<button type = "button" class = "btn btn-large" идэвхгүй > Товчлуур </button>

Нэг анги, олон шошго

Ангиа , , эсвэл элемент .btnдээр ашиглаарай .<a><button><input>

<a class = "btn" href = "" > Холбоос </a>  
<button class = "btn" type = "submit" > Товч </button>  
<оролтын анги = "btn" төрөл = "товчлуур" утга = "Оролт" >   
<оролтын анги = "btn" төрөл = "илгээх" утга = "Илгээх" >

Шилдэг туршлагын хувьд хөтчөөр хөтчөөр хөрвүүлэхэд тохирох элементийг контекстээ тааруулж үзээрэй. Хэрэв танд байгаа бол товчлуураа ашиглана inputуу .<input type="submit">

<img>Аливаа төсөлд дүрсийг хялбархан загварчлахын тулд элементэд анги нэмнэ үү .

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." анги = "img-polaroid" >

Анхаараарай! .img-roundedмөн дэмжлэг .img-circleбайхгүйн улмаас IE7-8-д ажиллахгүй border-radius.

Дүрс дүрсүүд

Спрайт хэлбэрийн 140 дүрс, хар саарал (өгөгдмөл) болон цагаан өнгөтэй, Glyphicons -аас хангагдсан байдаг .

дүрс-шил
дүрс-хөгжим
дүрс хайлт
дүрс дугтуй
дүрс-зүрх
дүрс-од
дүрс-од-хоосон
дүрс хэрэглэгч
дүрс-кино
том дүрс
дүрс-th
жагсаалтын дүрс
дүрс - зүгээр
дүрс-устгах
дүрс-томруулах
дүрсийг жижигрүүлэх
дүрс унтарсан
дүрс дохио
дүрс араа
дүрс-хогийн сав
дүрс-гэр
дүрс файл
дүрс цаг
дүрс-зам
icon-download-alt
дүрс-татаж авах
дүрс байршуулах
Ирсэн имэйл хайрцаг
дүрс-тоглох-тойрог
дүрс-давталт
дүрс-шинэчлэх
icon-list-alt
дүрс түгжээ
дүрс-туг
дүрс-чихэвч
дүрс-дуус-унтраах
дүрс-дууг багасгах
дүрсийн дууг нэмэгдүүлэх
icon-qrcode
дүрс-баркод
дүрс тэмдэг
дүрс тэмдэг
дүрс-ном
хавчуургын тэмдэг
дүрс хэвлэх
дүрс камер
дүрс-фонт
дүрс тод
дүрс-налуу
дүрс-текст-өндөр
дүрс-текст-өргөн
дүрсийг зүүн тийш зэрэгцүүлнэ
icon-align-center
дүрсийг баруун тийш зэрэгцүүлэх
дүрсийг тэгшлэх-зохих
дүрс жагсаалт
дүрс-догол-зүүн
дүрс-догол-баруун
icon-facetime-video
дүрс-зураг
дүрс харандаа
дүрс-газрын тэмдэг-тэмдэглэгээ
дүрс-тохируулга
дүрсний өнгө
дүрс засварлах
дүрс хуваалцах
дүрс шалгах
дүрс-хөдөлгөөн
дүрс-алхам-буцах
дүрс-хурдан-буцах
дүрс - хойшоо
дүрс тоглох
дүрс-түр зогсоох
дүрс зогсолт
дүрсийг урагшлуулах
дүрс-хурдан урагшлуулах
дүрс-алхам урагшлах
дүрс гаргах
дүрс-chevron-зүүн
дүрс-chevron-баруун
дүрс нэмэх тэмдэг
дүрс хасах тэмдэг
дүрс арилгах-тэмдэг
тэмдэг-ок-тэмдэг
дүрс асуултын тэмдэг
дүрс мэдээлэл тэмдэг
дүрс-дэлгэцийн агшин
дүрс арилгах-тойрог
дүрс-ок-тойрог
дүрсийг хориглох тойрог
дүрс-сум-зүүн
дүрс-сум-баруун
дүрс-дээш
дүрс-сум-доош
icon-share-alt
дүрс-хэмжээг-өөрчлөх-бүрэн
дүрс-хэмжээг-жижиг
icon-нэмэх
дүрс-хасах
дүрс-од
дүрс тэмдэг
бэлэг тэмдэг
дүрс навч
дүрс-гал
дүрс нүд нээлттэй
нүд ойртсон дүрс
анхааруулах тэмдэг
дүрс-онгоц
дүрс-хуанли
дүрс санамсаргүй
дүрс-тайлбар
дүрс соронз
icon-chevron up
icon-chevron-down
icon-retweet
дүрс-сагс
дүрс хавтас-хаах
icon-хавтас-нээлттэй
дүрс-хэмжээг-босоо
дүрс-хэмжээг-хэвтээ
дүрс-hdd
дүрс-бухын эвэр
дүрс-хонх
дүрс гэрчилгээ
эрхий хурууны дүрс
эрхий хурууны дүрс
дүрс-гар-баруун
дүрс-зүүн гар
дүрс гар дээш
дүрс-гар доош
дүрс-тойрог-сум-баруун
дүрс-тойрог-сум-зүүн
дүрс-тойрог-дээш
дүрс-тойрог-сум-доош
дүрс-бөмбөрцөг
дүрс эрэг чангалах түлхүүр
дүрс даалгавар
дүрс шүүлтүүр
дүрс - цүнх
дүрс-бүтэн дэлгэц

Глифоны хамаарал

Glyphicons Halflings нь ихэвчлэн үнэ төлбөргүй байдаггүй, гэхдээ Bootstrap болон Glyphicons бүтээгчдийн хооронд хийсэн тохиролцоо нь хөгжүүлэгчийн хувьд танд ямар ч зардалгүйгээр үүнийг хийх боломжтой болгосон. Баярлалаа гэж бид танаас Glyphicons руу нэмэлт холбоос оруулахыг хүсэж байна.

Яаж хэрэглэх вэ

<i>Бүх дүрс нь өвөрмөц ангитай, угтвартай шошго шаарддаг icon-. Ашиглахын тулд дараах кодыг хаана ч байрлуулна уу:

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

Мөн урвуу (цагаан) дүрсэнд зориулсан загварууд байдаг бөгөөд нэг нэмэлт ангид бэлэн болсон. Бид Navigation болон унадаг линкүүдэд зориулсан хулгана болон идэвхтэй төлөвт энэ ангиллыг тусгайлан хэрэгжүүлэх болно.

<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-харандаа" ></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 анги = "хуваагч" ></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 анги = "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>  
      <оролтын анги = "span2" id = "inputIcon" төрөл = "текст" >   
    </div>
  </div>
</div>

Типографи

Гарчиг

h1. Гарчиг 1

h2. Гарчиг 2

h3. Гарчиг 3

h4. Гарчиг 4

h5. Гарчиг 5

h6. Гарчиг 6

Биеийн хуулбар

Үндсэн биеийн хуулбар

Бага зардлаар барьсан

Онцлох

<small>

Зоригтой

Налуу

Тохируулгын ангиуд

Онцлох хичээлүүд

Товчлол

<abbr>

<abbr class="initialism">

Хаяг

<address>

Хаалттай ишлэл

Өгөгдмөл блок ишлэл

Blockquote сонголтууд

Эх сурвалжийг нэрлэх

Өөр дэлгэцүүд

Жагсаалтууд

Захиалгагүй

Захиалсан

Загваргүй

Шугаманд

Тодорхойлолт

Хэвтээ тайлбар

Код

Шугаманд

Үндсэн блок

Хүснэгтүүд

Өгөгдмөл хэв маяг

Нэмэлт ангиуд

.table-striped

.table-bordered

.table-hover

.table-condensed

Нэмэлт эгнээний ангиуд

Хүснэгтийн тэмдэглэгээг дэмждэг

Маягтууд

Өгөгдмөл хэв маяг

Нэмэлт зохион байгуулалт

Хайлтын маягт

Дотор хэлбэр

Хэвтээ хэлбэр

Дэмжигдсэн маягтын удирдлага

Оролтууд

Текстареа

Шалгах хайрцаг ба радио

Өгөгдмөл (овоолсон)

Inline checkboxes

Сонгодог

Маягтын хяналтыг өргөтгөж байна

Урьдчилсан болон хавсаргасан оролтууд

Өгөгдмөл сонголтууд

Нэгтгэсэн

Текстийн оронд товчлуурууд

Унтраах товчлуурууд

Хэсэгчилсэн унадаг бүлгүүд

Хайлтын маягт

Хэмжээг хянах

Түвшингийн оролтыг блоклох

Харьцангуй хэмжээ

Сүлжээний хэмжээ

Засварлах боломжгүй оролтууд

Үйлдлүүдийг хэлбэржүүлэх

Тусламжийн текст

Inline тусламж

Тусламжийг блоклох

Маягтын хяналтын төлөвүүд

Фокус оруулах

Буруу оролт

Оролтыг идэвхгүй болгосон

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`