Bootstrap

Базаи CSS

Унсурҳои асосии HTML бо синфҳои васеъшаванда тарҳрезӣ ва такмил дода шудаанд.

Типография

Сарлавҳаҳо

Ҳама сарлавҳаҳои HTML, <h1>тавассути <h6>дастрас мебошанд.

h1. Сарлавҳаи 1

h2. Сарлавҳаи 2

h3. Сарлавҳаи 3

h4. Сарлавҳаи 4

h5. Сарлавҳаи 5
h6. Сарлавҳаи 6

Нусхаи бадан

Пешфарзи глобалии Bootstrap 14px , бо 20px font-sizeаст . Ин ба ҳамаи параграфҳо татбиқ карда мешавад. Илова бар ин, (параграфҳо) маржаи поёнии нисфи баландии сатрро мегиранд (бо пешфарз 10px).line-height<body><p>

Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. Нуллам ид dolor id nibh ultricies vehicula.

Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. Donec ullamcorper nulla ғайримуқаррарӣ auctor fringilla. Дуис моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla ғайримуқаррарӣ auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Дуис моллис, 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 comodo luctus.

<p синфи = "лид" > ... </p>

Бо камтар сохта шудааст

Миқёси типографӣ ба ду тағирёбандаи LESS дар тағирёбандаҳо асос ёфтааст.less : @baseFontSizeва @baseLineHeight. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад. Мо ин тағирёбандаҳо ва баъзе математикаи оддиро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем. Онҳоро танзим кунед ва Bootstrap мутобиқ мешавад.

Таъкид

Тегҳои таъкиди пешфарзии HTML-ро бо сабкҳои сабук истифода баред.

<small>

Барои бартараф кардани таъкиди сатр ё блокҳои матн, теги хурдро истифода баред.

Ин сатри матн бояд ҳамчун чопи хуб баррасӣ карда шавад.

<p> <хурд> Ин сатри матн барои чопи хубе пешбинӣ шудааст. </ хурд> </p>

Далер

Барои таъкид кардани порчаи матн бо вазни ҳарфҳои вазнинтар.

Порчаи зерини матн ҳамчун матни ғафс оварда шудааст .

<strong> ҳамчун матни ғафс </strong> дода шудааст

Курсив

Барои таъкид кардани порчаи матн бо курсив.

Порчаи зерини матн ҳамчун матни курсив дода мешавад .

<em> ҳамчун матни курсив </em> дода шудааст

Сарҳо боло!Озод ҳис кунед <b>ва <i>дар HTML5 истифода баред. <b>Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.

Синфҳои ҳамоҳангсозӣ

Матнро ба ҷузъҳо бо синфҳои ҳамоҳангсозии матн ба осонӣ мутобиқ кунед.

Матни ба чап ҳамоҳангшуда.

Матни ба марказ мутобиқ кардашуда.

Матни рости рост.

  1. <p class = "text-left" > Матни ба чап мутобиқшуда. </p> 
  2. <p class = "text-center" > Матни ба марказ мутобиқшуда. </p> 
  3. <p class = "text-right" > Матни рости рост. </p>

Дарсҳои таъкид

Мафҳуми рангро бо як қатор дарсҳои муфиди диққат интиқол диҳед.

Fusce dapibus, tellus ac cursus commodo, Tortor Mauris nibh.

Этиам порта семина любовь любвие.

Donec ullamcorper nulla ғайримуқаррарӣ auctor fringilla.

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

Дуис моллис, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "хомушшуда" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > 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" > Дуис моллис, 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 = "Забони аломатгузории гиперматн" class = "интиализм" > HTML </abbr>

Суроғаҳо

Маълумоти тамосро барои аҷдодони наздиктарин ё тамоми кори кор пешниҳод кунед.

<address>

Форматро бо тамом кардани ҳамаи сатрҳо бо <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
Сан-Франсиско, CA 94107
P: (123) 456-7890
Номи пурраи
[email protected] 
  1. <адрес>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 хиёбони Фолсом, Suite 600 <br>
  4.   Сан-Франсиско, CA 94107 <br>
  5.   <abbr title = "Телефон" > P: </abbr> (123) 456-7890 
  6. </адрес>
  7.  
  8. <адрес>
  9.   <strong> Номи пурра </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </адрес>

Нохунакҳо

Барои иқтибос кардани блокҳои мундариҷа аз манбаи дигар дар ҳуҷҷати шумо.

Блоки иқтибоси пешфарз

<blockquote>Дар атрофи ҳама гуна HTML ҳамчун иқтибос печонед . Барои иқтибосҳои рост мо тавсия медиҳем, ки <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад. </p>
  3. </blockquote>

Имконоти блоки иқтибос

Тағир додани услуб ва мундариҷа барои вариантҳои оддӣ дар блоки стандартӣ.

Номгузории манбаъ

<small>Барои муайян кардани манбаъ барчасп илова кунед . Номи кори сарчашмаро дар <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад. </p>
  3.   <small> Шахси машҳур <cite title = "Сарчашмаи Сарчашма" > Сарчашмаи Сарчашма </cite></small> 
  4. </blockquote>

Намоишҳои алтернативӣ

.pull-rightБарои блоки иқтибоси шинокунанда ва ба рост ҳамоҳангшуда истифода баред .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Рӯйхатҳо

Бетартиб

Рӯйхати ашёе, ки дар онҳо фармоиш ба таври возеҳ аҳамият надорад.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Молести бутуни дар масса
  • Facilisis дар aliquet nisl pretium
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ба таври ройгон озодона возеҳ кунед
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor loem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Фармоиш дод

Рӯйхати ашёе, ки дар онҳо фармоиш ба таври возеҳ аҳамият дорад.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Молести бутуни дар масса
  4. Facilisis дар aliquet nisl pretium
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor loem
  1. <ол>
  2.   <li> ... </li>
  3. </ol>

Бесабз

Ҷойгиркунии пешфарз list-styleва чапи ҷузъҳои рӯйхатро хориҷ кунед (танҳо кӯдакони фаврӣ).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Молести бутуни дар масса
  • Facilisis дар aliquet nisl pretium
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ба таври ройгон озодона возеҳ кунед
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor loem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Дар мувофиқат

Ҳама ҷузъҳои рӯйхатро дар як сатр ҷойгир кунед inline-blockва бо каме пуркунии равшанӣ.

  • Lorem ipsum
  • Phasellus iaculis
  • Бехтарин
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Тавсифи

Рӯйхати истилоҳот бо тавсифи алоқаманди онҳо.

Рӯйхати тавсиф
Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.
Эусмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ва дар вақти дилхоҳ.
Порта Малесуада
Этиам порта семина любовь любвие. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Тавсифи уфуқӣ

Шартҳо ва тавсифҳоро дар <dl>як саф паҳлӯ ба паҳлӯ созед.

Рӯйхати тавсиф
Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.
Эусмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ва дар вақти дилхоҳ.
Порта Малесуада
Этиам порта семина любовь любвие.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass justo sit amet risus. 
  1. <dl class = "dl-горизонтал" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Сарҳо боло!Рӯйхати тавсифи уфуқӣ истилоҳотеро, ки барои мувофиқат кардан дар сутуни чап хеле дарозанд, ихтисор text-overflowмекунанд. Дар намоишгоҳҳои тангтар, онҳо ба тарҳбандии пешфарзии stacked иваз мешаванд.

Кодекс

Дар мувофиқат

Порчаҳои кодро бо <code>.

Масалан, <section>бояд ҳамчун сатр печонида шавад. 
  1. Масалан , < code> & lt ; фасли & gt ;</ code > бояд ҳамчун сатр печонида шавад .

Блоки асосӣ

<pre>Барои якчанд сатрҳои код истифода баред . Боварӣ ҳосил кунед, ки аз ҳама гуна қавсҳои кунҷӣ дар код барои намоиши дуруст раҳо шавед.

<p>Намунаи матн дар ин ҷо...</p>
  1. <пеш>
  2.   <p>Матни намунавӣ дар ин ҷо...</p>
  3. </pre>

Сарҳо боло!Боварӣ ҳосил кунед, ки кодро дар дохили <pre>тегҳо то ҳадди имкон ба чап наздик нигоҳ доред; он ҳама ҷадвалҳоро пешкаш мекунад.

Шумо метавонед ба таври ихтиёрӣ синферо илова кунед, .pre-scrollableки баландии максимум 350px муқаррар мекунад ва лавҳаи гардиши меҳвари y-ро таъмин мекунад.

Ҷадвалҳо

Услубҳои пешфарз

Барои ороиши асосӣ - пуркунии сабук ва танҳо тақсимкунандагони уфуқӣ - синфи асосиро .tableба ҳама гуна <table>.

# Ном Насаб Номи корбар
1 Марк Отто @mdo
2 Яъқуб Торнтон @фарбеҳ
3 Ларри парранда @twitter 
  1. < синфи ҷадвал = "миз" > 
  2.   …
  3. </ҷадвал>

Дарсҳои ихтиёрӣ

Ҳар яке аз синфҳои зеринро ба .tableсинфи асосӣ илова кунед.

.table-striped

Ба ҳама сатри ҷадвал дар дохили <tbody>тавассути :nth-childселектори CSS зебра-рахро илова мекунад (дар IE7-8 дастрас нест).

# Ном Насаб Номи корбар
1 Марк Отто @mdo
2 Яъқуб Торнтон @фарбеҳ
3 Ларри парранда @twitter 
  1. < синфи ҷадвал = "мизи рахи ҷадвал" > 
  2.   …
  3. </ҷадвал>

.table-bordered

Ба ҷадвал сарҳадҳо ва кунҷҳои мудавваршуда илова кунед.

# Ном Насаб Номи корбар
1 Марк Отто @mdo
Марк Отто @getbootstrap
2 Яъқуб Торнтон @фарбеҳ
3 Ларри парранда @twitter 
  1. < синфи ҷадвал = "ҷадвал-сарҳаддор" > 
  2.   …
  3. </ҷадвал>

.table-hover

Ҳолати овезонро дар сатрҳои ҷадвал дар дохили <tbody>.

# Ном Насаб Номи корбар
1 Марк Отто @mdo
2 Яъқуб Торнтон @фарбеҳ
3 Ларри парранда @twitter 
  1. < синфи ҷадвал = "мизи мизро пахш кардан" > 
  2.   …
  3. </ҷадвал>

.table-condensed

Бо буридани қабати ҳуҷайра мизҳоро зичтар мекунад.

# Ном Насаб Номи корбар
1 Марк Отто @mdo
2 Яъқуб Торнтон @фарбеҳ
3 Ларри парранда @twitter 
  1. < синфи ҷадвал = "мизи конденсатсионӣ ҷадвал" > 
  2.   …
  3. </ҷадвал>

Синфҳои сатри ихтиёрӣ

Барои ранг кардани сатрҳои ҷадвал аз синфҳои контекстӣ истифода баред.

Синф Тавсифи
.success Як амали муваффақ ё мусбатро нишон медиҳад.
.error Амалҳои хатарнок ё эҳтимолан манфиро нишон медиҳад.
.warning Огоҳӣеро нишон медиҳад, ки метавонад ба таваҷҷӯҳ ниёз дошта бошад.
.info Ҳамчун алтернатива ба услубҳои пешфарз истифода мешавад.
# Маҳсулот Пардохт гирифта шудааст Статус
1 сил - ҳармоҳа 01/04/2012 тасдик карда шуд
2 сил - ҳармоҳа 02/04/2012 Рад карда шуд
3 сил - ҳармоҳа 03/04/2012 Дар интизорӣ
4 сил - ҳармоҳа 04/04/2012 Барои тасдиқ занг занед 
  1. ...
  2.   < tr class = "муваффақият" >
  3.     <td> 1 < /td>
  4.     <td>Сил - Ҳар моҳ</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Тасдиқ карда шуд</ td >
  7.   </ tr >
  8. ...

Нишондиҳии ҷадвали дастгирӣшаванда

Рӯйхати унсурҳои HTML-и ҷадвали дастгирӣшаванда ва чӣ гуна истифода бурдани онҳо.

тег Тавсифи
<table> Унсури парпечкунӣ барои намоиши маълумот дар формати ҷадвал
<thead> Унсури контейнер барои сатрҳои сарлавҳаи ҷадвал ( <tr>) барои нишон додани сутунҳои ҷадвал
<tbody> Унсури контейнер барои сатрҳои ҷадвал ( <tr>) дар бадани ҷадвал
<tr> Унсури контейнер барои маҷмӯи чашмакҳои ҷадвал ( <td>ё <th>), ки дар як сатр пайдо мешавад
<td> Ячейкаи ҷадвали пешфарз
<th> Ячейкаи махсуси ҷадвал барои тамғакоғазҳои сутун (ё сатр, вобаста ба миқёс ва ҷойгиршавӣ).
<caption> Тавсиф ё мухтасари он чизе, ки ҷадвал дорад, махсусан барои хонандагони экран муфид аст 
  1. <ҷадвал>
  2.   <caption> ... </caption>
  3.   <thead>
  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. </ҷадвал>

Шаклҳо

Услубҳои пешфарз

Назорати шаклҳои инфиродӣ услубро қабул мекунанд, аммо бидуни ягон синфи асосии зарурӣ <form>ё тағироти калон дар аломатгузорӣ. Дар натиҷа тамғакоғазҳои ҷамъшуда ва ба чап ҳамоҳангшуда дар болои контролҳои форма пайдо мешаванд.

Афсона Намунаи матни кӯмаки сатҳи блок дар ин ҷо. 
  1. <шакл>
  2.   <маҷмӯаи майдон>
  3.     < legend> Афсона </ legend>
  4.     <label> Номи барчасп </label>
  5.     < навъи вуруд = "матн" ҷойнишин = "Чизро нависед..." >  
  6.     <span class = "help-block" > Намунаи матни кӯмак дар сатҳи блок дар ин ҷо. </span> 
  7.     < синфи барчасп = "қуттии қайд" > 
  8.       < навъи вуруд = "қуттии қайд" > Маро санҷед 
  9.     </label>
  10.     <button type = " submit" class = "btn" > Ирсол < /button>  
  11.   </fieldset>
  12. </form>

Тарҳҳои ихтиёрӣ

Ба Bootstrap се тарҳбандии шакли ихтиёрӣ барои ҳолатҳои истифодаи умумӣ дохил карда шудаанд.

Шакли ҷустуҷӯ

Ба .form-searchшакл ва .search-queryбарои <input>вуруди матни иловагӣ мудаввар илова кунед.

  1. < синфи форма = "форма-ҷустуҷӯ" > 
  2.   < навъи вуруд = "матн" синфи = "дархости ҷустуҷӯи миёна" >  
  3.   <button type = " submit" class = "btn" > Ҷустуҷӯ </button>  
  4. </form>

Шакли дохили

Барои .form-inlineтамғакоғазҳои ба чап ҳамоҳангшуда ва назорати блоки дохили барои тарҳбандии паймон илова кунед.

  1. < синфи форма = "form-inline" > 
  2.   < навъи вуруд = "матн" синфи = "ворид-хурд" ҷойнишин = "почтаи электронӣ" >   
  3.   < навъи вуруд = "парол" синфи = "ворид-хурд" ҷойнишин = "парол" >   
  4.   < синфи барчасп = "қуттии қайд" > 
  5.     < навъи вуруд = "тафтишот" > Маро дар хотир доред 
  6.   </label>
  7.   <button type = " submit" class = "btn" > Ворид шавед </button>  
  8. </form>

Шакли уфуқӣ

Тамғакоғазҳоро ба рост ҳамоҳанг созед ва онҳоро ба тарафи чап шино кунед, то онҳо дар як сатр бо контролҳо пайдо шаванд. Тағйироти бештари аломатҳоро аз шакли пешфарз талаб мекунад:

  • Ба .form-horizontalформа илова кунед
  • Тамғакоғазҳо ва назоратҳоро дар дохили он печонед.control-group
  • Ба .control-labelлавҳа илова кунед
  • Ҳама гуна идоракунии алоқамандро .controlsбарои ҳамоҳангсозии дуруст печонед
  1. < синфи шакл = "форма-уфуқӣ" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Почтаи электронӣ </label>  
  4.     <div class = "назоратҳо" > 
  5.       < навъи вуруд = "матн" id = "inputEmail" ҷойнишин = "почтаи электронӣ" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Рамз </label>  
  10.     <div class = "назоратҳо" > 
  11.       < навъи вуруд = "парол" id = "inputPassword" ҷойнишин = "Парол" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "назоратҳо" > 
  16.       < синфи барчасп = "қуттии қайд" > 
  17.         < навъи вуруд = "тафтишот" > Маро дар хотир доред 
  18.       </label>
  19.       <button type = " submit" class = "btn" > Ворид шавед </button>  
  20.     </div>
  21.   </div>
  22. </form>

Назорати шаклҳои дастгирӣшаванда

Намунаҳои идоракунии шаклҳои стандартӣ, ки дар тарҳбандии намунавӣ дастгирӣ мешаванд.

Вурудҳо

Назорати маъмултарини шакл, майдонҳои вуруди матнӣ. Дастгирии ҳама намудҳои HTML5-ро дар бар мегирад: матн, парол, сана, санаи вақт-маҳаллӣ, сана, моҳ, вақт, ҳафта, рақам, почтаи электронӣ, url, ҷустуҷӯ, телефон ва ранг.

Ҳамеша истифодаи муайянро талаб мекунад type.

  1. < навъи вуруд = ҷойгузини "матн" = " Вориди матн" >

Текстареа

Назорати форма, ки сатрҳои зиёди матнро дастгирӣ мекунад. Агар лозим бошад, атрибутро тағир rowsдиҳед.

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

Санҷишҳо ва радиоҳо

Қуттиҳои қайдҳо барои интихоби як ё якчанд вариант дар рӯйхат мебошанд, дар ҳоле ки радиоҳо барои интихоби як вариант аз бисёриҳо мебошанд.

Пешфарз (сӯхташуда)


  1. < синфи барчасп = "қуттии қайд" > 
  2.   < навъи вуруд = "қуттии чек" арзиши = "" >  
  3.   Варианти якум ин ва он аст - боварӣ ҳосил кунед, ки чаро он бузург аст
  4. </label>
  5.  
  6. < синфи тамғакоғаз = "радио" > 
  7.   < навъи вуруд = "радио" ном = "optionsRadios" id = "optionsRadios1" арзиши = "option1" тафтиш карда шуд >     
  8.   Варианти якум ин ва он аст - боварӣ ҳосил кунед, ки чаро он бузург аст
  9. </label>
  10. < синфи тамғакоғаз = "радио" > 
  11.   < навъи вуруд = "радио" ном = "optionsRadios" id = "optionsRadios2" арзиши = "option2" >    
  12.   Варианти дуюм метавонад чизи дигаре бошад ва интихоби он интихоби якумро бекор мекунад
  13. </label>

Қуттиҳои дарунсохт

Синфро .inlineба як қатор қуттиҳо илова кунед ё радиоҳо барои назорат дар як сатр пайдо шаванд.

  1. <label class = "checkbox inline" > 
  2.   < навъи вуруд = "қуттии чек" id = "inlineCheckbox1" қимат = "Option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   < навъи вуруд = "қуттии чек" id = "inlineCheckbox2" қимат = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   < навъи вуруд = "қуттии чек" id = "inlineCheckbox3" қимат = "option3" > 3   
  9. </label>

Интихоб мекунад

Интихоби пешфарзро истифода баред ё a-ро муайян кунед, multiple="multiple"то дар як вақт якчанд вариантҳоро нишон диҳед.


  1. <интихоб>
  2.   <option> 1 </Option>
  3.   <option> 2 </Option>
  4.   <option> 3 </Option>
  5.   <option> 4 </Option>
  6.   <option> 5 </Option>
  7. </-ро интихоб кунед>
  8.  
  9. <якчандро интихоб кунед = " якчанд" > 
  10.   <option> 1 </Option>
  11.   <option> 2 </Option>
  12.   <option> 3 </Option>
  13.   <option> 4 </Option>
  14.   <option> 5 </Option>
  15. </-ро интихоб кунед>

Васеъ кардани идоракунии форма

Илова бар болои контролҳои мавҷудаи браузер, Bootstrap дигар ҷузъҳои муфиди формаро дар бар мегирад.

Воридоти пешакӣ ва замимашуда

Пеш аз ё баъд аз ҳама гуна вуруди матнӣ матн ё тугмаҳоро илова кунед. Дар хотир доред, ки selectунсурҳо дар ин ҷо дастгирӣ намешаванд.

Имконоти пешфарз

Як .add-onва inputякро бо яке аз ду синф печонед, то матн ба воридот пешванд ё илова кунед.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   < синфи вуруд = "span2" id = "prependedInput" type = "матн" ҷойнишин = "Номи корбар" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   < синфи вуруд = "span2" id = "appendedInput " type = "матн" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Якҷоя

Ҳарду синф ва ду мисоли .add-on-ро барои пешнавис ва илова кардани вуруд истифода баред.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   < синфи вуруд = "span2" id = "appendedPrependedInput " type = "матн" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Тугмаҳо ба ҷои матн

Ба ҷои <span>матн бо .btnяк тугмаро (ё ду) ба вуруд пайваст кунед.

  1. <div class = "input-append" > 
  2.   < синфи вуруд = "span2" id = "appendedInputButton " type = "матн" >   
  3.   <button class = "btn" type = "тугма" > Бирав! </ тугма >  
  4. </div>
  1. <div class = "input-append" > 
  2.   < синфи вуруд = "span2" id = "appendedInputButtons " type = "матн" >   
  3.   <button class = "btn" type = "button" > Ҷустуҷӯ </button>  
  4.   <button class = "btn" type = "button" > Интихобҳо </button>  
  5. </div>

Тугмаҳои афтанда

  1. <div class = "input-append" > 
  2.   < синфи вуруд = "span2" id = "appendedDropdownButton " навъи = "матн" >   
  3.   <div class = "btn-group" > 
  4.     < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >  
  5.       Амал
  6.       <span class = "caret" ></span> 
  7.     </ тугма >
  8.     <ul class = "менюи афтанда" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >  
  4.       Амал
  5.       <span class = "caret" ></span> 
  6.     </ тугма >
  7.     <ul class = "менюи афтанда" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < синфи вуруд = "span2" id = "prependedDropdownButton" навъи = "матн" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >  
  4.       Амал
  5.       <span class = "caret" ></span> 
  6.     </ тугма >
  7.     <ul class = "менюи афтанда" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < синфи вуруд = "span2" id = "appendedPrependedDropdownButton " навъи = "матн" >   
  12.   <div class = "btn-group" > 
  13.     < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >  
  14.       Амал
  15.       <span class = "caret" ></span> 
  16.     </ тугма >
  17.     <ul class = "менюи афтанда" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Гурӯҳҳои тақсимшудаи афтанда

  1. <шакл>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < навъи вуруд = "матн" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < навъи вуруд = "матн" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Шакли ҷустуҷӯ

  1. < синфи форма = "форма-ҷустуҷӯ" > 
  2.   <div class = "input-append" > 
  3.     < навъи вуруд = "матн" синфи = "span2 ҷустуҷӯи дархост" >  
  4.     <button type = " submit" class = "btn" > Ҷустуҷӯ </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = " submit" class = "btn" > Ҷустуҷӯ </button>  
  8.     < навъи вуруд = "матн" синфи = "span2 ҷустуҷӯи дархост" >  
  9.   </div>
  10. </form>

Назорати андоза

Бо истифода аз синфҳо, синфҳои нисбии андозагириро истифода баред .input-largeё воридоти худро ба андозаи сутуни шабака мувофиқ кунед .span*.

Вурудҳои сатҳи блок

Ягон <input>ё <textarea>элементро ҳамчун унсури сатҳи блок рафтор кунед.

  1. < синфи вуруд = "даромад-блок-сатҳи" навъи = "матн" ҷойнишин = ".input-block-level" >

Андозаи нисбӣ

  1. < синфи вуруд = " навъи вуруд-мини" = ҷойнишини "матн" = ".input-mini" >   
  2. < синфи вуруд = " навъи вуруд-хурд" = ҷойнишини "матн" = ".input-small" >   
  3. < синфи вуруд = " навъи вуруди миёна" = ҷойгузини "матн" = " .input -medium" >   
  4. < синфи вуруд = " навъи вуруд-калон" = ҷойнишини "матн" = ".ворид-калон" >   
  5. < синфи вуруд = "input-xlarge" навъи = "матн" ҷойнишин = ".input-xlarge" >   
  6. < синфи вуруд = "input-xxlarge" навъи = "матн" ҷойнишин = ".input-xxlarge" >

Сарҳо боло!Дар версияҳои оянда, мо истифодаи ин синфҳои нисбии вурудро барои мувофиқ кардани андозаи тугмаҳои мо тағир медиҳем. Масалан, .input-largeпуркунӣ ва андозаи шрифти вурудро зиёд мекунад.

Андозаи шабака

.span1Барои .span12воридоте, ки ба андозаи якхелаи сутунҳои шабака мувофиқат мекунанд, истифода баред .

  1. < синфи вуруд = "span1" type = "матн" ҷойнишин = ".span1" >   
  2. < синфи вуруд = "span2" type = "матн" ҷойнишин = ".span2" >   
  3. < синфи вуруд = "span3" type = "матн" ҷойнишин = ".span3" >   
  4. < синфро интихоб кунед = "span1" > 
  5.   ...
  6. </-ро интихоб кунед>
  7. < синфро интихоб кунед = "span2" > 
  8.   ...
  9. </-ро интихоб кунед>
  10. < синфро интихоб кунед = "span3" > 
  11.   ...
  12. </-ро интихоб кунед>

Барои ворид кардани шабакаҳои сершумор дар як сатр, синфи тағирдиҳандаро барои фосилаи дуруст истифода баред.controls-row . Он вурудҳоро барои фурӯпошии фазои сафед шино мекунад, ҳошияҳои дурустро муқаррар мекунад ва шинокуниро тоза мекунад.

  1. <div class = "назоратҳо" > 
  2.   < синфи вуруд = "span5" type = "матн" ҷойнишин = ".span5" >   
  3. </div>
  4. <div class = "controls controls-satr" > 
  5.   < синфи вуруд = "span4" type = "матн" ҷойнишин = ".span4" >   
  6.   < синфи вуруд = "span1" type = "матн" ҷойнишин = ".span1" >   
  7. </div>
  8. ...

Вурудҳои таҳрирнашаванда

Маълумотро дар шакле пешниҳод кунед, ки бидуни истифодаи аломатгузории воқеии шакл таҳриршаванда нест.

Баъзе арзишҳо дар ин ҷо 
  1. <span class = "input-xlarge uneditable-input" > Баъзе арзишҳо дар ин ҷо </span>

Амалҳои шакл

Формаро бо як гурӯҳи амалҳо (тугмаҳо) анҷом диҳед. Вақте ки дар дохили a ҷойгир карда мешавад .form-actions, тугмаҳо ба таври худкор дар як саф бо идоракунии форма ҷойгир мешаванд.

  1. <div class = "форма-амалҳо" > 
  2.   <button type = "submit " class = "btn btn-primary" > Захираи тағирот </тугма>  
  3.   <button type = "button" class = "btn" > Бекор кардан </button>  
  4. </div>

Матни кӯмак

Дастгирии сатҳи дохилӣ ва блок барои матни кӯмак, ки дар атрофи назорати форма пайдо мешавад.

Кӯмаки дохилӣ

Матни кӯмаки дохилӣ 
  1. < навъи вуруд = "матн" ><span class = "help-inline" > Матни кӯмаки дохилӣ </span>

Кӯмаки блок

Блоки дарозтари матни кӯмак, ки ба хати нав мешиканад ва метавонад аз як сатр фаротар бошад. 
  1. < навъи вуруд = "матн" ><span class = "help-block" > Блоки дарозтари матни кӯмак, ки ба хати нав мешиканад ва метавонад аз як сатр берунтар бошад. </span>

Ҳолатҳои назорати шакл

Ба корбарон ё меҳмонон бо ҳолати асосии фикру мулоҳизаҳо оид ба назорати шакл ва тамғакоғазҳо фикру мулоҳиза пешниҳод кунед.

Фокуси вуруд

Мо услубҳои пешфарзро outlineдар баъзе идораҳои форма хориҷ мекунем ва box-shadowдар ҷои он барои :focus.

  1. < синфи вуруд = "input-xlarge" id = "focusedInput" type = "text" value = "Ин тамаркуз шудааст..." >

Вурудҳои нодуруст

Воридоти услуб тавассути функсияи пешфарз браузер бо :invalid. -ро муайян кунед , агар майдон ихтиёрӣ набошад, аттрибутро typeилова кунед ва (агар лозим бошад) -ро муайян кунед .requiredpattern

Ин дар версияҳои Internet Explorer 7-9 аз сабаби набудани дастгирӣ барои интихоби псевдо CSS дастрас нест.

  1. < синфи вуруд = "span3" type = "почтаи электронӣ" лозим аст >

Вурудҳои ғайрифаъол

Аттрибутро ба вуруд илова кунед disabled, то вуруди корбарро пешгирӣ кунад ва намуди каме дигарро ба вуҷуд орад.

  1. < синфи вуруд = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ворид дар ин ҷо ғайрифаъол аст..." ғайрифаъол >

Ҳолати тасдиқкунӣ

Bootstrap услубҳои тасдиқи хато, огоҳӣ, иттилоот ва паёмҳои муваффақиятро дар бар мегирад. Барои истифода, синфи мувофиқро ба гирду атроф илова кунед .control-group.

Мумкин аст чизе хато кардааст
Лутфан хатогиро ислоҳ кунед
Номи корбар гирифта шудааст
Воҳу! 
  1. <div class = "огоҳии гурӯҳи назоратӣ" > 
  2.   <label class = "control-label" for = "inputWarning" > Вуруд бо огоҳӣ </label>  
  3.   <div class = "назоратҳо" > 
  4.     < навъи вуруд = "матн" id = "inputWarning" >  
  5.     <span class = "help-inline" > Мумкин аст чизе хато кардааст </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "хатои гурӯҳи назоратӣ" > 
  10.   <label class = "control-label" for = "inputError" > Вуруд бо хато </label>  
  11.   <div class = "назоратҳо" > 
  12.     < навъи вуруд = "матн" id = "inputError" >  
  13.     <span class = "help-inline" > Лутфан хатогиро ислоҳ кунед </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "маълумоти гурӯҳи назоратӣ" > 
  18.   <label class = "control-label" for = "inputInfo" > Вуруд бо маълумот </label>  
  19.   <div class = "назоратҳо" > 
  20.     < навъи вуруд = "матн" id = "inputInfo" >  
  21.     <span class = "help-inline" > Номи корбар аллакай гирифта шудааст </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "муваффақияти гурӯҳи назоратӣ" > 
  26.   <label class = "control-label" for = "inputSuccess" > Вуруд бо муваффақият </label>  
  27.   <div class = "назоратҳо" > 
  28.     < навъи вуруд = "матн" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Тугмаҳо

Тугмаҳои пешфарз

Сабкҳои тугмаҳоро ба ҳама чиз бо .btnсинф истифода бурдан мумкин аст. Аммо, маъмулан шумо мехоҳед, ки онҳоро танҳо ба ҷузъҳо <a>ва <button>унсурҳо барои беҳтарин намоишдиҳӣ истифода баред.

Тугма class="" Тавсифи
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барои андозаҳои иловагӣ илова кунед .

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "тугма" > Тугмаи калон </тугма>  
  3.   <button class = "btn btn-large" type = "button" > Тугмаи калон </тугма>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Тугмаи пешфарз </button>  
  7.   <button class = "btn" type = "button" > Тугмаи пешфарз </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Тугмаи хурд </тугма>  
  11.   <button class = "btn btn-small" type = "button" > Тугмаи хурд </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "тугма" > Тугмаи хурд </тугма>  
  15.   <button class = "btn btn-mini" type = "тугма" > Тугмаи хурд </тугма>  
  16. </p>

Тугмаҳои сатҳи блокро эҷод кунед - онҳое, ки паҳнои пурраи волидайнро дар бар мегиранд - бо илова кардани .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Тугмаи сатҳи блок </тугма>  
  2. <button class = "btn btn-large btn-block" type = "button" > Тугмаи сатҳи блок </туг>>

Ҳолати ғайрифаъол

Тугмаҳоро 50% хомӯш карда, онҳоро кликнашаванда гардонед.

Унсури лангар

.disabledСинфро ба <a>тугмаҳо илова кунед .

Пайванди ибтидоӣ Пайванд 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Пайванди ибтидоӣ </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Пайванд </a>

Сарҳо боло!Мо .disabledдар ин ҷо ҳамчун синфи коммуналӣ истифода мебарем, ки ба .activeсинфи умумӣ монанд аст, аз ин рӯ префикс талаб карда намешавад. Инчунин, ин синф танҳо барои эстетикӣ аст; шумо бояд JavaScript-и фармоиширо барои хомӯш кардани истинодҳо дар ин ҷо истифода баред.

Элементи тугма

Аттрибутро disabledба <button>тугмаҳо илова кунед.

  1. < навъи тугма = "тугма" class = "btn btn-large btn-primary disabled" disabled = "diabled" > Тугмаи ибтидоӣ </тугма>   
  2. < навъи тугма = "button" class = "btn btn-large" ғайрифаъол > Тугма </-тугма>

Як синф, тегҳои сершумор

.btnСинфро дар <a>, <button>, ё <input>элемент истифода баред .

Пайванд 
  1. <a class = "btn" href = "" > Пайванд </a>  
  2. <button class = "btn" type = "submit " > Тугмаи </туг>  
  3. < синфи вуруд = "btn" навъи = "тугма" арзиши = "Ворид" >   
  4. < синфи дохилшавӣ = "btn" type = "submit " арзиши = "Ирсол " >

Ҳамчун таҷрибаи беҳтарин, кӯшиш кунед, ки унсурро барои контексти худ мувофиқ созед, то мувофиқати визуалии кросс-браузерро таъмин кунед. Агар шумо дошта бошед , тугмаи худро inputистифода баред .<input type="submit">

Тасвирҳо

Ба <img>элемент синфҳо илова кунед, то тасвирҳоро дар ҳама гуна лоиҳа ба осонӣ сабк кунед.

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

Сарҳо боло! .img-roundedва .img-circleдар IE7-8 аз сабаби набудани border-radiusдастгирӣ кор намекунанд.

Нишонаҳо аз ҷониби Glyphicons

Глифҳои нишонаҳо

140 нишона дар шакли спрайт, ки бо хокистарии торик (пешфарз) ва сафед дастрасанд, ки аз ҷониби Glyphicons пешниҳод шудаанд .

  • икон-шиша
  • икон-мусикй
  • ҷустуҷӯи нишона
  • нишона-лифофа
  • нишона-дил
  • икон-ситора
  • нишона-ситора-холӣ
  • нишона-истифодабаранда
  • икон-филм
  • нишонаи калон
  • нишона-ум
  • Рӯйхати нишона
  • нишона - хуб
  • нишона - хориҷ кунед
  • тасвири-масъала
  • кифоя кардани нишона
  • нишона хомӯш
  • нишона-сигнал
  • нишона-ког
  • нишона-партов
  • икон-хона
  • тасвири файл
  • вақти нишона
  • икон-роҳ
  • icon-download-alt
  • icon-зеркашӣ
  • нишона-боргузорӣ
  • тасвири паёмдони
  • icon-бозӣ-давраи
  • нишона-такрор
  • нишона-навсозӣ
  • icon-list-alt
  • икон-қулф
  • икон-парчам
  • икон-наушникҳо
  • тасвири-ҳаҷм-хомӯш
  • паст кардани овоз
  • баланд бардоштани овоз
  • icon-qrcode
  • нишона-штрих-код
  • нишона-тег
  • икон-тегҳо
  • икон-китоб
  • нишона-хатчӯб
  • нишо��а-чоп
  • тасвири камера
  • icon-фонт
  • тасвири ғафс
  • тасвири курсив
  • баландии тасвири матн
  • тасвири-матн-барои
  • нишона-ҳамоҳанг-чап
  • нишона-ҳамоҳанг-марказ
  • нишона-ҳамоҳанг-рост
  • нишона-мувофиқ- асоснок кардан
  • Рӯйхати нишонаҳо
  • нишона-барои-чап
  • icon-indent-right
  • icon-facetime-видео
  • тасвири икон
  • икон-қалам
  • нишона-харита-маркер
  • тасвири танзим
  • ранги нишона
  • тасвири таҳрир
  • тасвири мубодила
  • нишона-санҷиш
  • нишона ҳаракат кардан
  • нишона-қадам-ба ақиб
  • нишона-зуд-қафо
  • нишона ба ақиб
  • икон-бозй
  • нишона-танаффус
  • нишона-ист
  • нишона ба пеш
  • нишона-ба пеш
  • нишона-қадам-ба пеш
  • нишона-баровардани
  • нишона-шеврон-чап
  • icon-chevron-рост
  • аломати-плюс
  • аломати минус
  • нишона-нест-аломат
  • аломати-ок
  • аломати савол
  • аломати маълумот
  • тасвири скриншот
  • тасвири хориҷ кардани доира
  • icon-ok-dairca
  • нишона-манъ-доира
  • нишона-тир-чап
  • нишона-тир-рост
  • нишони тирчаи боло
  • нишона-тирчаи поён
  • icon-share-alt
  • тасвири андозааш пурра
  • тасвири-андозаи-хурд
  • icon-plus
  • нишона-минус
  • нишона-ситорача
  • аломати нидо
  • икон-тӯҳфа
  • нишона-барге
  • икон-оташ
  • икон-чашм кушода
  • тасвири чашми наздик
  • аломати огоҳкунанда
  • нишона-ҳавопаймо
  • нишона-тақвим
  • тасвири тасодуфӣ
  • тасвири шарҳ
  • нишона-магнит
  • icon-chevron-up
  • нишона-шеврон-поён
  • icon-retweet
  • аробаи харид
  • тасвири-папка-пӯшед
  • нишона-папка-кушода
  • тасвири андозагирии амудӣ
  • тасвири андозаи уфуқӣ
  • icon-hdd
  • icon-bullhorn
  • занги икон
  • икон-шаҳодатнома
  • тасвири ангушти боло
  • нишона-ангушти поён
  • нишона-даст-рост
  • нишона-дасти чап
  • тасвири даст боло
  • нишона-даст-поён
  • нишона-дода-тирчаи-рост
  • нишона-дода-тирчаи-чап
  • нишона-давра-тира-боло
  • нишона-дода-тирчаи-поён
  • икон-глобус
  • калиди икон
  • икон-вазифаҳо
  • тасвири филтр
  • портфели икон
  • нишона-экрани пурра

Аттрибутсияи глифонҳо

Glyphicons Halflings одатан ройгон дастрас нестанд, аммо созиш байни эҷодкорони Bootstrap ва Glyphicons ин корро ба шумо ҳамчун таҳиягарон имкон дод. Ҳамчун ташаккур, мо аз шумо хоҳиш мекунем, ки дар вақти амалӣ истиноди ихтиёриро ба Glyphicons дохил кунед .

Чӣ тавр истифода бурдан

Ҳама нишонаҳо <i>барчасп бо синфи беназирро талаб мекунанд, ки бо префикс гузошта icon-шудааст. Барои истифода, рамзи зеринро тақрибан дар ҳама ҷо ҷойгир кунед:

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

Инчунин сабкҳо барои нишонаҳои баръакс (сафед) мавҷуданд, ки бо як синфи иловагӣ омода карда шудаанд. Мо ин синфро ба таври махсус дар ҳолати боло ва фаъол барои истинодҳои нав ва афтанда татбиқ хоҳем кард.

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

Сарҳо боло!Ҳангоми истифода дар паҳлӯи сатрҳои матн, ба мисли тугмаҳо ё истинодҳои нав, ҳатман пас аз <i>тег барои фосилаи дуруст фосила гузоред.

Намунаҳои нишонаҳо

Онҳоро дар тугмаҳо, гурӯҳҳои тугмаҳо барои панели асбобҳо, паймоиш ё вуруди шакли пешакӣ истифода баред.

Тугмаҳо

Гурӯҳи тугмаҳо дар панели асбобҳои тугмаҳо
  1. <div class = "btn-panel" > 
  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>
афтанда дар гурӯҳи тугмаҳо
Истифодабаранда 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Корбар </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "менюи афтанда" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Таҳрир </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Нест кардан </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Манъи </a></li>  
  8.     <li class = "тақсимкунанда" ></li> 
  9.     <li><a href = "#" ><i class = "i" >> </i> Администратор кунед </a></li>  
  10.   </ul>
  11. </div>
Андозаи тугмаҳо
Ситора Ситора Ситора 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Ситора </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Ситора </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Ситора </a>

Навигатсия

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" >> </i> Хона </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Китобхона </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Барномаҳо </a></li>  
  5.   <li><a href = "#" ><i class = "i" >> </i> Дигар </a></li>  
  6. </ul>

Майдонҳои форма

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > Суроғаи почтаи электронӣ </label>  
  3.   <div class = "назоратҳо" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-convelope" ></i></span>  
  6.       < синфи вуруд = "span2" id = "inputIcon" type = "матн" >   
  7.     </div>
  8.   </div>
  9. </div>