Bootstrap

Asosiy CSS

Asosiy HTML elementlari kengaytiriladigan sinflar bilan jihozlangan va takomillashtirilgan.

Tipografiya

Sarlavhalar

Barcha HTML sarlavhalari mavjud <h1>.<h6>

h1. Sarlavha 1

h2. Sarlavha 2

h3. Sarlavha 3

h4. Sarlavha 4

h5. Sarlavha 5
h6. Sarlavha 6

Tana nusxasi

Bootstrapning global font-sizestandarti 14px , 20pxline-height bilan . Bu va barcha paragraflarga nisbatan qo'llaniladi. Bundan tashqari, (paragraflar) yarim satr balandligining pastki chetini oladi (sukut bo'yicha 10px).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Sociis natoque penatibus va magnis disparturient Montes, nascetur ridiculus mus. Nollam id dolor id nibh ultricies vehicula.

Sociis natoque penatibus va 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 va eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Asosiy korpus nusxasi

Qo'shish orqali xatboshini ajratib ko'rsatish .lead.

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

<p sinf = "qo'rg'oshin" > ... </p>

Kamroq bilan qurilgan

Tipografik shkala o'zgaruvchilardagi ikkita LESS o'zgaruvchiga asoslangan.less : @baseFontSizeva @baseLineHeight. Birinchisi, butun ishlatiladigan asosiy shrift o'lchami, ikkinchisi esa asosiy satr balandligi. Biz ushbu o'zgaruvchilardan va oddiy matematikadan barcha turdagi va boshqalarning chekkalari, to'ldirishlari va chiziq balandligini yaratish uchun foydalanamiz. Ularni sozlang va Bootstrap moslashadi.

Ta'kidlash

Engil uslublar bilan HTMLning standart urg'u teglaridan foydalaning.

<small>

Inline yoki matn bloklarini ta'kidlashni olib tashlash uchun kichik tegdan foydalaning.

Matnning ushbu qatori nozik nashr sifatida ko'rib chiqilishi kerak.

<p> <kichik> Ushbu matn qatori nozik nashr sifatida ko'rib chiqilishi kerak. </kichik> </p>

Qalin

Shrift og'irligi og'irroq bo'lgan matn parchasini ta'kidlash uchun.

Quyidagi matn parchasi qalin matn sifatida berilgan .

<strong> qalin matn sifatida berilgan </strong>

Kursiv

Matn parchasini kursiv bilan ta'kidlash uchun.

Quyidagi matn parchasi kursivli matn sifatida berilgan .

<em> kursivli matn sifatida ko'rsatilgan </em>

Oldindan qisqa ma'lumot berish!Bemalol foydalaning <b>va <i>HTML5 da. <b>qo'shimcha ahamiyatga ega bo'lmasdan so'z yoki iboralarni ajratib ko'rsatish uchun mo'ljallangan <i>, asosan ovoz, texnik atamalar va boshqalar uchun.

Hizalama sinflari

Matnni tekislash sinflari bilan matnni komponentlarga osongina moslashtiring.

Chapga tekislangan matn.

Oʻrtaga tekislangan matn.

Oʻngga tekislangan matn.

  1. <p class = "text-left" > Chapga tekislangan matn. </p> 
  2. <p class = "text-center" > Markazga tekislangan matn. </p> 
  3. <p class = "matn-o'ng" > O'ngga tekislangan matn. </p>

Diqqat darslari

Bir nechta urg'u foydali sinflar bilan rang orqali ma'noni etkazish.

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. Pelentesque ornare sem lacinia quam venenatis.

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

  1. <p class = "o'chirilgan" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "matn-ogohlantirish" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Qisqartmalar

<abbr>Hoverda kengaytirilgan versiyani ko'rsatish uchun qisqartmalar va qisqartmalar uchun HTML elementining stilize qilingan ilovasi. Atributli qisqartmalar titleochilgan nuqtali pastki chegaraga va kursor ustidagi yordam kursoriga ega boʻlib, kursor ustiga qoʻshimcha kontekstni taqdim etadi.

<abbr>

Qisqartmaning uzun kursoridagi kengaytirilgan matn uchun atributni kiriting title.

Atribut so'zining qisqartmasi attr hisoblanadi .

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

<abbr class="initialism">

.initialismBiroz kichikroq shrift o'lchami uchun qisqartma qo'shing .

HTML tilim kesilgan nondan beri eng yaxshi narsadir.

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

Manzillar

Eng yaqin ajdod yoki butun ish uchun aloqa ma'lumotlarini taqdim eting.

<address>

Barcha qatorlarni bilan tugatish orqali formatlashni saqlang <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San-Fransisko, CA 94107
P: (123) 456-7890
Toʻliq ism
[email protected] 
  1. <adres>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   Folsom prospekti 795, Suite 600 <br>
  4.   San-Fransisko, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <adres>
  9.   <strong> To'liq ism </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blok tirnoq

Hujjatingizdagi boshqa manbadan kontent bloklarini keltirish uchun.

Birlamchi blok tirnoq

Iqtibos<blockquote> sifatida har qanday HTMLni aylantiring . To'g'ri tirnoq uchun biz tavsiya qilamiz .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

Blok tirnoq variantlari

Standart blok tirnoqdagi oddiy o'zgarishlar uchun uslub va tarkib o'zgaradi.

Manbaga nom berish

<small>Manbani aniqlash uchun teg qo'shing . Manba ishining nomini o'rang <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Manba sarlavhasida mashhur kimdir 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Kimdir mashhur <cite title = "Manba sarlavhasi" > Manba sarlavhasi </cite></small> 
  4. </blockquote>

Muqobil displeylar

.pull-rightSuzuvchi, oʻngga tekislangan blok tirnoq uchun foydalaning .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Manba sarlavhasida mashhur kimdir 
  1. <blockquote class = "o'ngga tortish" > 
  2.   ...
  3. </blockquote>

Ro'yxatlar

Tartibsiz

Buyurtma aniq ahamiyatga ega bo'lmagan narsalar ro'yxati.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Massada butun son molestie lorem
  • Pretium nisl aliquetdagi facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • To'g'ri keling
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Buyurtma qilingan

Buyurtma aniq ahamiyatga ega bo'lgan narsalar ro'yxati .

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Massada butun son molestie lorem
  4. Pretium nisl aliquetdagi facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Uslubsiz

Ro'yxatdagi standart list-styleva chap to'ldirishni olib tashlang (faqat darhol bolalar uchun).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Massada butun son molestie lorem
  • Pretium nisl aliquetdagi facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • To'g'ri keling
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "uslubsiz" > 
  2.   <li> ... </li>
  3. </ul>

Mos ravishda

Barcha roʻyxat elementlarini bir inline-blockqator yorugʻlik bilan toʻldiring.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Tavsif

Ular bilan bog'liq tavsiflari bilan atamalar ro'yxati.

Tavsif ro'yxatlari
Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida va eget metus.
Malesuada porti
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Gorizontal tavsif

Shartlar va tavsiflarni bir <dl>qatorda yonma-yon tuzing.

Tavsif ro'yxatlari
Ta'riflar ro'yxati atamalarni aniqlash uchun juda mos keladi.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida va eget metus.
Malesuada porti
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. 
  1. <dl sinf = "dl-gorizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Oldindan qisqa ma'lumot berish!Gorizontal tavsif ro'yxatlari chap ustunni tuzatish uchun juda uzun bo'lgan atamalarni qisqartiradi text-overflow. Torroq ko'rish oynalarida ular birlamchi stacked maketga o'zgaradi.

Kod

Mos ravishda

Kodning ichki qismlarini bilan o'rab oling <code>.

Misol uchun, <section>inline sifatida o'ralgan bo'lishi kerak. 
  1. Masalan , <kod > & lt ; bo'limi & gt ;</ code > qatorga o'ralgan bo'lishi kerak .

Asosiy blok

<pre>Kodning bir nechta satri uchun foydalaning . To'g'ri ko'rsatish uchun koddagi har qanday burchakli qavslardan qochishingizga ishonch hosil qiling.

<p>Matn namunasi bu yerda...</p>
  1. <pre>
  2.   <p>Matn namunasi bu yerda...</p>
  3. </pre>

Oldindan qisqa ma'lumot berish!Kodni <pre>teglar ichida iloji boricha chapga yaqin tutganingizga ishonch hosil qiling; u barcha yorliqlarni ko'rsatadi.

Siz ixtiyoriy ravishda .pre-scrollable350px maksimal balandlikni o'rnatadigan va Y o'qi aylantirish panelini ta'minlaydigan sinfni qo'shishingiz mumkin.

Jadvallar

Standart uslublar

.tableAsosiy uslublar uchun - engil to'ldirish va faqat gorizontal ajratgichlar - har qanday ga asosiy sinfni qo'shing <table>.

# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
  1. <jadval sinfi = "jadval" > 
  2.   …
  3. </jadval>

Majburiy emas darslar

Asosiy sinfga quyidagi sinflardan birini qo'shing .table.

.table-striped

<tbody>CSS selektori orqali istalgan jadval qatoriga zebra chizig'ini qo'shadi :nth-child(IE7-8 da mavjud emas).

# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Larri qush @twitter 
  1. <stol sinfi = "stol jadvali chiziqli" > 
  2.   …
  3. </jadval>

.table-bordered

Jadvalga chegaralar va yumaloq burchaklar qo'shing.

# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
  1. <jadval sinfi = "jadval bilan chegaralangan" > 
  2.   …
  3. </jadval>

.table-hover

a ichida jadval qatorlarida kursor holatini yoqish <tbody>.

# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
  1. <jadval sinfi = "jadval stolini ko'tarish" > 
  2.   …
  3. </jadval>

.table-condensed

Hujayra qoplamasini yarmiga kesib, jadvallarni yanada ixcham qiladi.

# Ism Familiya Foydalanuvchi nomi
1 Mark Otto @mdo
2 Yoqub Tornton @yog'
3 Qush Larri @twitter 
  1. <stol klassi = "jadval-kondensatlangan jadval" > 
  2.   …
  3. </jadval>

Ixtiyoriy qator sinflari

Jadval satrlarini ranglash uchun kontekstli sinflardan foydalaning.

Sinf Tavsif
.success Muvaffaqiyatli yoki ijobiy harakatni bildiradi.
.error Xavfli yoki potentsial salbiy harakatni bildiradi.
.warning E'tibor talab qilishi mumkin bo'lgan ogohlantirishni bildiradi.
.info Standart uslublarga muqobil sifatida ishlatiladi.
# Mahsulot To'lov olindi Holat
1 TB - Oylik 01/04/2012 Tasdiqlangan
2 TB - Oylik 02/04/2012 Rad etildi
3 TB - Oylik 03/04/2012 Kutilmoqda
4 TB - Oylik 04/04/2012 Tasdiqlash uchun qo'ng'iroq qiling 
  1. ...
  2.   < tr class = "muvaffaqiyat" >
  3.     <td> 1 < /td>
  4.     <td>TB - Oylik</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Tasdiqlangan</ td >
  7.   </ tr >
  8. ...

Qo'llab-quvvatlanadigan jadval belgilari

Qo'llab-quvvatlanadigan HTML jadval elementlari ro'yxati va ulardan qanday foydalanish kerak.

teg Tavsif
<table> Ma'lumotlarni jadval ko'rinishida ko'rsatish uchun o'rash elementi
<thead> <tr>Jadval ustunlarini belgilash uchun jadval sarlavhasi satrlari uchun konteyner elementi ( ).
<tbody> <tr>Jadval tanasidagi jadval satrlari uchun konteyner elementi ( ).
<tr> Bitta qatorda ko'rinadigan jadval katakchalari to'plami ( <td>yoki ) uchun konteyner elementi<th>
<td> Birlamchi jadval katakchasi
<th> Ustun (yoki satr, qamrovi va joylashuviga qarab) teglar uchun maxsus jadval katakchasi
<caption> Jadvalning tavsifi yoki xulosasi, ayniqsa ekranni o'qiydiganlar uchun foydalidir 
  1. <jadval>
  2.   <caption> ... </caption>
  3.   <bosh>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </jadval>

Shakllar

Standart uslublar

Shaklning individual boshqaruvlari uslublarni qabul qiladi, lekin hech qanday talab qilinadigan asosiy sinf <form>yoki belgilashda katta o'zgarishlarsiz. Natijalar shakl boshqaruvlari tepasida joylashgan, chapga hizalangan yorliqlarni beradi.

Afsona Blok darajasidagi yordam matni bu yerda. 
  1. <form>
  2.   <maydon to'plami>
  3.     <legend> Afsona </legend>
  4.     <label> Yorliq nomi </label>
  5.     <kiritish turi = "matn" to'ldiruvchisi = "Biror narsa yozing..." >  
  6.     <span class = "help-block" > Bu yerda blok darajasidagi yordam matniga misol. </span> 
  7.     <label class = "checkbox" > 
  8.       <kiritish turi = "checkbox" > Meni tekshiring 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Submit </button>  
  11.   </fieldset>
  12. </form>

Ixtiyoriy tartiblar

Bootstrap bilan umumiy foydalanish holatlari uchun uchta ixtiyoriy shakl sxemasi mavjud.

Qidiruv shakli

Qo'shimcha dumaloq matn kiritish uchun shaklga .form-searchva shaklga qo'shing ..search-query<input>

  1. <forma sinfi = "shakl-qidiruv" > 
  2.   <kirish turi = "matn" klassi = "kirish-o'rta qidiruv so'rovi" >  
  3.   <button type = "submit" class = "btn" > Qidirish </button>  
  4. </form>

Inline shakl

.form-inlineChapga tekislangan teglar va ixcham tartib uchun inline-blok boshqaruvlari uchun qo'shing .

  1. <forma sinfi = "inline-forma" > 
  2.   <kiritish turi = "matn" sinfi = "kirish-kichik" to'ldiruvchisi = "Elektron pochta" >   
  3.   <kiritish turi = "parol" klassi = "kirish-kichik" to'ldiruvchisi = "Parol" >   
  4.   <label class = "checkbox" > 
  5.     <kiritish turi = "checkbox" > Meni eslab qoling 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Kirish </button>  
  8. </form>

Gorizontal shakl

Yorliqlarni o‘ngga tekislang va boshqaruv elementlari bilan bir qatorda ko‘rinishi uchun ularni chapga surib qo‘ying. Standart shakldan eng koʻp belgilash oʻzgarishlarini talab qiladi:

  • .form-horizontalShaklga qo'shing
  • Yorliqlar va boshqaruv elementlarini o‘rab oling.control-group
  • .control-labelYorliqga qo'shing
  • .controlsTo'g'ri tekislash uchun barcha bog'langan boshqaruv elementlarini o'rab oling
  1. <forma sinfi = "form-gorizontal" > 
  2.   <div class = "nazorat guruhi" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "nazorat" > 
  5.       <kiritish turi = "matn" id = "inputEmail" to'ldiruvchisi = "Elektron pochta" >   
  6.     </div>
  7.   </div>
  8.   <div class = "nazorat guruhi" > 
  9.     <label class = "control-label" for = "inputPassword" > Parol </label>  
  10.     <div class = "nazorat" > 
  11.       <kiritish turi = "parol" id = "inputPassword" to'ldiruvchisi = "Parol" >   
  12.     </div>
  13.   </div>
  14.   <div class = "nazorat guruhi" > 
  15.     <div class = "nazorat" > 
  16.       <label class = "checkbox" > 
  17.         <kiritish turi = "checkbox" > Meni eslab qoling 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Kirish </button>  
  20.     </div>
  21.   </div>
  22. </form>

Qo'llab-quvvatlanadigan shakl boshqaruvlari

Shakl tartibi namunasida qo'llab-quvvatlanadigan standart shakl boshqaruvlarining misollari.

Kirishlar

Eng keng tarqalgan shakl boshqaruvi, matnga asoslangan kiritish maydonlari. Barcha HTML5 turlarini qoʻllab-quvvatlashni oʻz ichiga oladi: matn, parol, sana va vaqt, sana-mahalliy, sana, oy, vaqt, hafta, raqam, elektron pochta, url, qidiruv, telefon va rang.

typeHar doim belgilangan foydalanishni talab qiladi .

  1. <kirish turi = "matn" to'ldiruvchisi = "Matn kiritish" >

Textarea

Bir nechta matn qatorlarini qo'llab-quvvatlaydigan shakl boshqaruvi. Agar kerak bo'lsa, atributni o'zgartiring rows.

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

Belgilash qutilari va radiolar

Belgilash katakchalari ro'yxatdagi bir yoki bir nechta variantni tanlash uchun, radiolar esa ko'pchilikdan bittasini tanlash uchun.

Birlamchi (stacked)


  1. <label class = "checkbox" > 
  2.   <kiritish turi = "checkbox" qiymati = "" >  
  3.   Birinchi variant - bu va boshqa - bu nima uchun ajoyib ekanligini qo'shishni unutmang
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <kirish turi = "radio" nomi = "optionsRadios" id = "optionsRadios1" qiymati = "option1" belgilandi >     
  8.   Birinchi variant - bu va boshqa - bu nima uchun ajoyib ekanligini qo'shishni unutmang
  9. </label>
  10. <label class = "radio" > 
  11.   <kirish turi = "radio" nomi = "optionsRadios" id = "optionsRadios2" qiymati = "option2" >    
  12.   Ikkinchi variant boshqa narsa bo'lishi mumkin va uni tanlash birinchi variantni bekor qiladi
  13. </label>

Inline belgilash katakchalari

Sinfni bir qator katakchalarga qo'shing .inlineyoki boshqaruv elementlari bir xil satrda paydo bo'ladi.

  1. <label class = "checkbox inline" > 
  2.   <kiritish turi = "checkbox" id = "inlineCheckbox1" qiymati = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <kiritish turi = "checkbox" id = "inlineCheckbox2" qiymati = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <kiritish turi = "checkbox" id = "inlineCheckbox3" qiymati = "option3" > 3   
  9. </label>

Tanlaydi

multiple="multiple"Bir vaqtning o'zida bir nechta variantni ko'rsatish uchun standart opsiyadan foydalaning yoki a belgilang .


  1. <tanlash>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. < bir nechta = "bir nechta" > tanlang 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Shakl boshqaruvlarini kengaytirish

Mavjud brauzer boshqaruvlari ustiga qo'shib, Bootstrap boshqa foydali shakl komponentlarini o'z ichiga oladi.

Oldindan va qo'shilgan kirishlar

Har qanday matnga asoslangan kiritishdan oldin yoki keyin matn yoki tugmalarni qo'shing. E'tibor bering, selectbu erda elementlar qo'llab-quvvatlanmaydi.

Standart variantlar

Kiritilgan matnga matn qo‘shish yoki qo‘shish uchun ikkita sinfdan biri bilan an .add-onva an belgilarini o‘rab oling.input

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <kiritish sinfi = "span2" id = "prependedInput " turi = "matn" to'ldiruvchisi = "Foydalanuvchi nomi" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <kiritish sinfi = "span2" id = "appendedInput " type = "matn" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Birlashtirilgan

.add-onKiritilgan matnni old va qo'shish uchun ikkala sinf va ikkita misoldan foydalaning.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <kiritish sinfi = "span2" id = "appendedPrependedInput " turi = "matn" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Matn o'rniga tugmalar

<span>Matnli o'rniga, .btnkirishga tugmani (yoki ikkitasini) biriktirish uchun a foydalaning.

  1. <div class = "input-append" > 
  2.   <kiritish sinfi = "span2" id = "appendedInputButton " turi = "matn" >   
  3.   <button class = "btn" type = "button" > Go! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <kiritish sinfi = "span2" id = "appendedInputButtons " turi = "matn" >   
  3.   <button class = "btn" type = "button" > Qidiruv </button>  
  4.   <button class = "btn" type = "button" > Variantlar </button>  
  5. </div>

Ochiladigan tugmalar

  1. <div class = "input-append" > 
  2.   <kiritish sinfi = "span2" id = "appendedDropdownButton " turi = "matn" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >  
  5.       Harakat
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "ochiladigan menyu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >  
  4.       Harakat
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "ochiladigan menyu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <kiritish sinfi = "span2" id = "prependedDropdownButton " turi = "matn" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >  
  4.       Harakat
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "ochiladigan menyu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <kiritish sinfi = "span2" id = "appendedPrependedDropdownButton " turi = "matn" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "ochiladigan pastga" >  
  14.       Harakat
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "ochiladigan menyu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmentli ochiladigan guruhlar

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <kiritish turi = "matn" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <kiritish turi = "matn" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Qidiruv shakli

  1. <forma sinfi = "shakl-qidiruv" > 
  2.   <div class = "input-append" > 
  3.     <kiritish turi = "matn" sinf = "span2 qidiruv so'rovi" >  
  4.     <button type = "submit" class = "btn" > Qidirish </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Qidirish </button>  
  8.     <kiritish turi = "matn" sinf = "span2 qidiruv so'rovi" >  
  9.   </div>
  10. </form>

O'lchamlarni nazorat qilish

.input-largeSinflardan foydalanib , kirishlaringizni panjara ustunlari o'lchamlariga o'xshash nisbiy o'lcham .span*sinflaridan foydalaning.

Blok darajasidagi kirishlar

Har qanday <input>yoki <textarea>elementni blok darajasidagi element kabi harakatga keltiring.

  1. <kirish klassi = "kirish-blok darajasi" turi = "matn" o'rnini egallovchi = ".kirish-blok darajasi" >

Nisbiy o'lcham

  1. <kiritish klassi = "kirish-mini" turi = "matn" to'ldiruvchisi = ".input-mini" >   
  2. <kiritish klassi = "kirish-kichik" turi = "matn" to'ldiruvchisi = ".kirish-kichik" >   
  3. <kirish klassi = "kirish-medium" turi = "matn" to'ldiruvchisi = ".input-medium" >   
  4. <kiritish klassi = "kirish-katta" turi = "matn" to'ldiruvchisi = ".kirish-katta" >   
  5. <kiritish klassi = "input-xlarge" turi = "matn" to'ldiruvchisi = ".input-xlarge" >   
  6. <kiritish klassi = "input-xxlarge" turi = "matn" to'ldiruvchisi = ".input-xxlarge" >

Oldindan qisqa ma'lumot berish!Kelgusi versiyalarda biz tugma o'lchamlariga mos keladigan ushbu nisbiy kirish sinflaridan foydalanishni o'zgartiramiz. Misol uchun, .input-largekiritishning to'ldirish va shrift hajmini oshiradi.

To'r o'lchamlari

To'r ustunlarining bir xil o'lchamlariga mos keladigan kirishlar uchun to'dan .span1foydalaning ..span12

  1. <kiritish sinfi = "span1" turi = "matn" to'ldiruvchisi = ".span1" >   
  2. <kiritish sinfi = "span2" turi = "matn" to'ldiruvchisi = ".span2" >   
  3. <kiritish sinfi = "span3" turi = "matn" to'ldiruvchisi = ".span3" >   
  4. < sinfni tanlang = "span1" > 
  5.   ...
  6. </select>
  7. < sinfni tanlang = "span2" > 
  8.   ...
  9. </select>
  10. < sinfni tanlang = "span3" > 
  11.   ...
  12. </select>

Har bir satrda bir nechta grid kiritish uchun to'g'ri interval uchun modifikator sinfidan foydalaning.controls-row . U bo'sh joyni yopish uchun kirishlarni suzadi, kerakli chekkalarni o'rnatadi va floatni tozalaydi.

  1. <div class = "nazorat" > 
  2.   <kiritish sinfi = "span5" turi = "matn" to'ldiruvchisi = ".span5" >   
  3. </div>
  4. <div class = "nazorat elementlari-qator" > 
  5.   <kiritish sinfi = "span4" turi = "matn" to'ldiruvchisi = ".span4" >   
  6.   <kiritish sinfi = "span1" turi = "matn" to'ldiruvchisi = ".span1" >   
  7. </div>
  8. ...

Tahrirlanmaydigan kirishlar

Haqiqiy shakl belgilaridan foydalanmasdan tahrir qilib bo'lmaydigan shaklda ma'lumotlarni taqdim eting.

Bu erda ba'zi qiymat 
  1. <span class = "input-xlarge uneditable-input" > Bu yerda bir qancha qiymat </span>

Shakl harakatlar

Shaklni harakatlar guruhi (tugmalari) bilan yakunlang. a ichida joylashganda .form-actions, tugmalar avtomatik ravishda shakl boshqaruvlari bilan bir qatorda chekinadi.

  1. <div class = "form-amallar" > 
  2.   <button type = "submit" class = "btn btn-primary" > O‘zgarishlarni saqlash </button>  
  3.   <button type = "button" class = "btn" > Bekor qilish </button>  
  4. </div>

Yordam matni

Shakl boshqaruvlari atrofida paydo bo'ladigan yordam matni uchun inline va blok darajasidagi yordam.

Inline yordam

Inline yordam matni 
  1. <kiritish turi = "matn" ><span class = "help-inline" > Inline yordam matni </span>

Yordamni bloklash

Yordam matnining uzunroq bloki, u yangi satrga o'tadi va bir qatordan tashqariga cho'zilishi mumkin. 
  1. <kiritish turi = "matn" ><span class = "help-block" > Yangi qatorga bo'lingan va bir qatordan tashqariga cho'zilishi mumkin bo'lgan uzunroq yordam matni bloki. </span>

Shaklni boshqarish holatlari

Shakl boshqaruvlari va yorliqlari bo'yicha asosiy fikr-mulohaza holatlari bilan foydalanuvchilar yoki tashrif buyuruvchilarga fikr-mulohaza bildiring.

Fokus kiritish

Biz ba'zi forma boshqaruvlaridagi standart outlineuslublarni olib tashlaymiz va box-shadowuning o'rniga a qo'llaymiz :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "matn" qiymati = "Bu diqqat markazida..." >

Yaroqsiz kirishlar

bilan standart brauzer funksiyasi orqali uslub kiritish :invalid. ni belgilang, agar maydon ixtiyoriy bo'lmasa, atributni typeqo'shing va (agar mavjud bo'lsa) ni belgilang .requiredpattern

Bu Internet Explorer 7-9 versiyalarida mavjud emas, chunki CSS psevdoselektorlari qo'llab-quvvatlanmaydi.

  1. <kiritish sinfi = "span3" turi = "elektron pochta" kerak >

O'chirilgan kirishlar

disabledFoydalanuvchi kiritishiga yo‘l qo‘ymaslik va biroz boshqacha ko‘rinishni ishga tushirish uchun kirishga atribut qo‘shing .

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Bu erda kiritish o'chirilgan..." o'chirilgan >

Tasdiqlash holatlari

Bootstrap xato, ogohlantirish, ma'lumot va muvaffaqiyat xabarlari uchun tekshirish uslublarini o'z ichiga oladi. Foydalanish uchun atrof-muhitga tegishli sinfni qo'shing .control-group.

Nimadir noto‘g‘ri ketgan bo‘lishi mumkin
Iltimos, xatoni tuzating
Foydalanuvchi nomi olinadi
Voy! 
  1. <div class = "boshqaruv guruhi ogohlantirishi" > 
  2.   <label class = "control-label" for = "inputWarning" > Ogohlantirish bilan kiritish </label>  
  3.   <div class = "nazorat" > 
  4.     <kirish turi = "matn" id = "inputWarning" >  
  5.     <span class = "help-inline" > Nimadir noto‘g‘ri ketgan bo‘lishi mumkin </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "boshqaruv guruhi xatosi" > 
  10.   <label class = "control-label" for = "inputError" > Xato bilan kiritish </label>  
  11.   <div class = "nazorat" > 
  12.     <kiritish turi = "matn" id = "inputError" >  
  13.     <span class = "help-inline" > Xatoni tuzating </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "nazorat guruhi haqida ma'lumot" > 
  18.   <label class = "control-label" for = "inputInfo" > Ma'lumot bilan kiritish </label>  
  19.   <div class = "nazorat" > 
  20.     <kiritish turi = "matn" id = "inputInfo" >  
  21.     <span class = "help-inline" > Foydalanuvchi nomi allaqachon olingan </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "nazorat guruhi muvaffaqiyati" > 
  26.   <label class = "control-label" for = "inputSuccess" > Kirish muvaffaqiyatli </label>  
  27.   <div class = "nazorat" > 
  28.     <kiritish turi = "matn" id = "inputSuccess" >  
  29.     <span class = "inline yordam" > Voy! </span> 
  30.   </div>
  31. </div>

Tugmalar

Standart tugmalar

.btnTugma uslublari sinf qo'llanilgan har qanday narsaga qo'llanilishi mumkin . <a>Biroq, odatda, eng yaxshi renderlash uchun ularni faqat va <button>elementlarga qo'llashni xohlaysiz .

Tugma class="" Tavsif
btn Gradientli standart kulrang tugma
btn btn-primary Qo'shimcha vizual og'irlikni ta'minlaydi va tugmalar to'plamidagi asosiy harakatni aniqlaydi
btn btn-info Standart uslublarga muqobil sifatida ishlatiladi
btn btn-success Muvaffaqiyatli yoki ijobiy harakatni bildiradi
btn btn-warning Ushbu harakat bilan ehtiyot bo'lish kerakligini ko'rsatadi
btn btn-danger Xavfli yoki potentsial salbiy harakatni bildiradi
btn btn-inverse Semantik harakat yoki foydalanish bilan bog'lanmagan muqobil quyuq kulrang tugma
btn btn-link Tugma harakatini saqlab, uni havolaga o'xshatib, uning ahamiyatini yo'qoting

O'zaro brauzer muvofiqligi

IE9 yumaloq burchaklardagi fon gradientlarini kesmaydi, shuning uchun biz uni olib tashlaymiz. Tegishli, IE9 o'chirilgan buttonelementlarni jankifikatsiya qiladi va biz tuzatib bo'lmaydigan yomon matn soyasi bilan matnni kulrang qiladi.

Tugma o'lchamlari

Kattaroq yoki kichikroq tugmalarni xohlaysizmi? Qo'shimcha o'lchamlar uchun .btn-large, .btn-small, yoki qo'shing ..btn-mini

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Katta tugma </button>  
  3.   <button class = "btn btn-large" type = "button" > Katta tugma </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standart tugma </button>  
  7.   <button class = "btn" type = "button" > Standart tugma </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Kichik tugma </button>  
  11.   <button class = "btn btn-small" type = "button" > Kichik tugma </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini tugma </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini tugma </button>  
  16. </p>

Qo'shish orqali blok darajasidagi tugmalarni yarating - ota-onaning to'liq kengligini qamrab oladiganlar .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Bloklash darajasi tugmasi </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Bloklash darajasi tugmasi </button>

O'chirilgan holat

Tugmalarni 50% orqaga o'chirish orqali ularni bosilmaydigan qilib ko'ring.

Ankraj elementi

.disabledSinfni <a>tugmalarga qo'shing .

Asosiy havola Havola 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Asosiy havola </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Havola </a>

Oldindan qisqa ma'lumot berish!Biz .disabledbu erda umumiy sinfga o'xshash yordamchi sinf sifatida foydalanamiz .active, shuning uchun hech qanday prefiks talab qilinmaydi. Bundan tashqari, bu sinf faqat estetik uchun; bu yerda havolalarni o'chirish uchun maxsus JavaScript dan foydalanishingiz kerak.

Tugma elementi

Tugmalarga disabledatribut qo'shing .<button>

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "diabled" > Asosiy tugma </button>   
  2. <button type = "button" class = "btn btn-large" o'chirilgan > Tugma </tugmasi>

Bitta sinf, bir nechta teglar

Sinfdan .btn, <a>, <button>yoki <input>elementda foydalaning.

Havola 
  1. <a class = "btn" href = "" > Havola </a>  
  2. <button class = "btn" type = "yuborish" > Tugma </tugmasi>  
  3. <kiritish klassi = "btn" turi = "tugma" qiymati = "Kirish" >   
  4. <kiritish sinfi = "btn" turi = "yuborish" qiymati = "yuborish " >

Eng yaxshi amaliyot sifatida, brauzerlararo renderlash mos kelishini taʼminlash uchun kontekstingiz uchun elementni moslashtirishga harakat qiling. Agar sizda bo'lsa input, tugmangiz uchun dan foydalaning <input type="submit">.

Tasvirlar

<img>Har qanday loyihada tasvirlarni osongina uslublash uchun elementga sinflar qo'shing .

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Oldindan qisqa ma'lumot berish! .img-roundedva qo'llab-quvvatlash .img-circleyo'qligi sababli IE7-8 da ishlamang border-radius.

Gliflar tomonidan piktogramma

Belgilar gliflari

Sprite shaklida 140 ta piktogramma, quyuq kulrang (standart) va oq rangda mavjud, Glyphicons tomonidan taqdim etilgan .

  • ikonkali oyna
  • ikonka-musiqa
  • piktogramma-qidiruv
  • piktogramma-konvert
  • piktogramma-yurak
  • ikona-yulduz
  • belgi-yulduz-bo'sh
  • ikonka foydalanuvchisi
  • piktogramma
  • katta piktogramma
  • ikonka-th
  • piktogramma ro'yxati
  • belgi-ok
  • belgisini olib tashlash
  • piktogramma-kattalashtirish
  • ikonka-kichraytirish
  • belgisini o'chirish
  • belgi-signal
  • piktogramma tishli
  • ikonka-axlat
  • ikona-uy
  • piktogramma fayli
  • piktogramma vaqti
  • belgi-yo'l
  • icon-yuklab olish-alt
  • piktogramma-yuklab olish
  • piktogramma-yuklash
  • belgisi-kiruvchi
  • piktogramma-o'yin-doira
  • ikonka-takrorlash
  • belgini yangilash
  • icon-list-alt
  • ikona qulfi
  • piktogramma-bayroq
  • icon-naushniklar
  • piktogramma ovoz balandligini o'chirish
  • piktogramma-tovushni pasaytirish
  • piktogramma ovoz balandligi
  • icon-qrkod
  • piktogramma-shtrix-kod
  • piktogramma belgisi
  • piktogramma teglari
  • ikona kitobi
  • belgi-xatcho‘p
  • piktogramma chop etish
  • piktogramma-kamera
  • ikonka-shrift
  • piktogramma qalin
  • belgi-kursiv
  • piktogramma-matn balandligi
  • piktogramma-matn-kengligi
  • piktogramma-chapga tekislash
  • piktogramma markazga tekislash
  • belgini tekislash-o'ngga
  • ikonkani tekislash-tozalash
  • piktogramma ro'yxati
  • ikonka-chekinti-chap
  • belgi-chiziq-o'ng
  • icon-facetime-video
  • ikonka-rasm
  • piktogramma-qalam
  • belgi-xarita-marker
  • belgini sozlash
  • piktogramma rangi
  • belgini tahrirlash
  • ikonka almashish
  • ikonka-tekshirish
  • piktogramma-harakat
  • orqaga qadam belgisi
  • ikonka-tez-orqaga
  • piktogramma - orqaga
  • piktogramma o'ynash
  • piktogramma-pauza
  • belgisi-stop
  • piktogramma oldinga
  • piktogramma-tezkor oldinga
  • oldinga qadam belgisi
  • belgini chiqarish
  • piktogramma-chevron-chap
  • piktogramma-chevron-o'ng
  • belgisi-plyus-belgisi
  • minus belgisi
  • belgini olib tashlash belgisi
  • belgisi-ok-belgisi
  • ikonka-savol belgisi
  • ikonka-ma'lumot belgisi
  • icon-skrinshot
  • belgi-o'chirish-doira
  • belgisi-ok-doira
  • ikonka-ban-doira
  • ikonka-strelka-chapga
  • ikonka-strelka-o'ngga
  • piktogramma-yuqoriga
  • piktogramma-pastga
  • icon-share-alt
  • ikonka o'lchamini o'zgartirish-to'liq
  • ikonka o'lchamini o'zgartirish-kichik
  • icon-plyus
  • piktogramma-minus
  • piktogramma yulduzcha
  • belgi-undov belgisi
  • ikonka-sovg'a
  • piktogramma-barg
  • ikona-olov
  • ikonka-ko'z ochiq
  • ikonka-ko'z-yopish
  • belgi-ogohlantirish belgisi
  • piktogramma-samolyot
  • piktogramma-taqvim
  • ikonka-tasodifiy
  • ikonka-sharh
  • piktogramma magnit
  • piktogramma-chevron
  • piktogramma-chevron-pastga
  • icon-retvit
  • ikonka-savdo
  • piktogramma-papka-yopish
  • piktogramma-papka-ochish
  • belgi o'lchamini o'zgartirish-vertikal
  • piktogramma o'lchamini o'zgartirish-gorizontal
  • belgi-hdd
  • ikona - buqa
  • belgi-qo'ng'iroq
  • belgi-sertifikat
  • piktogramma bosh barmog'i
  • piktogramma-bosh barmog'i-pastga
  • belgi-qo'l-o'ng
  • ikonka - chap qo'l
  • piktogramma-qo'l yuqoriga
  • piktogramma-pastga
  • ikonka-doira-strelka-o'ngga
  • piktogramma-aylana-strelka-chapga
  • piktogramma-aylana-yuqoriga
  • piktogramma-aylana-o'q-pastga
  • ikona-globus
  • piktogramma kaliti
  • piktogramma vazifalari
  • ikona filtri
  • ikonka-portfel
  • ikonka - to'liq ekran

Glifiklarning atributi

Glyphicons Halflings odatda bepul mavjud emas, lekin Bootstrap va Glyphicons yaratuvchilari o'rtasidagi kelishuv buni sizga ishlab chiquvchilar sifatida hech qanday to'lovsiz amalga oshirdi. Minnatdorchilik sifatida, iloji bo'lsa, Glyphicons -ga ixtiyoriy havolani qo'shishingizni so'raymiz .

Qanday ishlatish

Barcha piktogrammalar uchun <i>prefiksli noyob sinfga ega teg kerak icon-. Foydalanish uchun quyidagi kodni deyarli istalgan joyga joylashtiring:

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

Bundan tashqari, teskari (oq) piktogramma uchun uslublar mavjud bo'lib, ular bitta qo'shimcha sinf bilan tayyor. Biz ushbu klassni navbat va ochiladigan havolalar uchun hover va faol holatlarga qo'llaymiz.

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

Oldindan qisqa ma'lumot berish!Matn satrlari yonida, masalan, tugmalar yoki navbat havolalarida foydalanilganda, <i>tegdan keyin bo'sh joy qoldirishni unutmang.

Ikonka misollar

Ulardan tugmalar, asboblar panelidagi tugmalar guruhlari, navigatsiya yoki oldindan oʻrnatilgan shakl kiritishlarida foydalaning.

Tugmalar

Tugma asboblar panelidagi tugmalar guruhi
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Tugmalar guruhida ochiladigan menyu
Foydalanuvchi 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" >> </i> Foydalanuvchi </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "ochiladigan menyu" > 
  5.     <li><a href = "#" ><i class = "icon-qalam" >></i> Tahrirlash </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> O‘chirish </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" >></i> Taqiqlash </a></li>  
  8.     <li class = "bo'luvchi" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Administrator qilish </a></li>  
  10.   </ul>
  11. </div>
Tugma o'lchamlari
Yulduz Yulduz Yulduz 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-yulduz" ></i> Yulduz </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-yulduz" ></i> Yulduzcha </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-yulduz" ></i> Yulduzcha </a>

Navigatsiya

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" >></i> Bosh sahifa </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" >></i> Kutubxona </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" >></i> Ilovalar </a></li>  
  5.   <li><a href = "#" ><i class = "i" >> </i> Boshqa </a></li>  
  6. </ul>

Shakl maydonlari

  1. <div class = "nazorat guruhi" > 
  2.   <label class = "control-label" for = "inputIcon" > Elektron pochta manzili </label>  
  3.   <div class = "nazorat" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-convelope" >></i></span>  
  6.       <kiritish sinfi = "span2" id = "inputIcon" turi = "matn" >   
  7.     </div>
  8.   </div>
  9. </div>