Базаи CSS

Дар болои девор, унсурҳои асосии HTML бо синфҳои васеъ тарҳрезӣ ва такмил дода шудаанд, то намуди тару тоза, пайваста ва эҳсосро таъмин кунанд.

Сарлавҳаҳо ва нусхаи асосӣ

Миқёси типографӣ

Тамоми шабакаи типографӣ ба ду тағирёбандаи Less дар файли variables.less мо асос ёфтааст: @baseFontSizeва @baseLineHeight. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад.

Мо ин тағирёбандаҳо ва баъзе аз математикаро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем.

Намунаи матни асосӣ

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

Нусхаи бадани пешбар

Параграфро бо илова кардани .lead.

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

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

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

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

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

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

Таъкид, суроға ва ихтисорот

Элемент Истифода Ихтиёрӣ
<strong> Барои таъкид кардани порчаи матн бо муҳим Ҳеҷ
<em> Барои таъкид кардани порчаи матн бо фишор Ҳеҷ
<abbr> Ихтисорот ва ихтисоротҳоро мепӯшонад, то версияи васеъшударо дар болои нишона нишон диҳад

Аттрибути ихтиёриро titleбарои матни васеъшуда дохил кунед

.initialismБарои ихтисороти калон синфро истифода баред .
<address> Барои маълумоти тамос барои аҷдодони наздиктарини он ё тамоми бадани кор Форматро бо тамом кардани ҳамаи сатрҳо бо<br>

Бо истифода аз таъкид

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a augue pharetra.

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

Намунаҳои суроғаҳо

Инҳоянд ду мисоли <address>истифодаи тег:

Twitter, Inc.
795 Folsom Ave, Suite 600
Сан-Франсиско, CA 94107
P: (123) 456-7890
Номи пурраи
[email protected]

Намунаҳои ихтисорот

Ихтисороти дорои titleатрибутҳо дорои сарҳади равшани нуқта ва курсори ёрирасон дар мавқеъ мебошанд. Ин ба корбарон нишонаи иловагӣ медиҳад, ки чизе дар кунҷ нишон дода мешавад.

Синфро ба ихтисорот илова кунед, initialismто ҳамоҳангии типографиро тавассути додани андозаи матни каме хурдтар афзоиш диҳед.

HTML беҳтарин чизест, ки пас аз нони буридашуда.

Ихтисораи калимаи аттрибутӣ attr мебошад.

Нохунакҳо

Элемент Истифода Ихтиёрӣ
<blockquote> Унсури сатҳи блок барои иқтибос овардани мундариҷа аз манбаи дигар

Иловаи citeатрибут барои URL манбаъ

Истифода .pull-leftва .pull-rightсинфҳо барои имконоти шинокунанда
<small> Унсури ихтиёрӣ барои илова кардани иқтибос ба корбар, маъмулан муаллиф бо унвони кор Дар <cite>атрофи унвон ё номи манбаъ ҷойгир кунед

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

Барои истинод ба манбаи худ як унсури ихтиёриро <small>дохил кунед ва шумо &mdash;пеш аз он тире барои ороиши ороиш хоҳед гирифт.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама. </p>
  3. <small> Шахси машҳур </small>
  4. </blockquote>

Намунаи иқтибосҳо

Блоки иқтибосҳои пешфарз чунин тарҳрезӣ шудаанд:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама.

Шахси машҳур дар Бадани кор

Барои ба тарафи рост шино кардани иқтибоси блоки худ, илова кунед class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама.

Шахси машҳур дар Бадани кор

Рӯйхатҳо

Бетартиб

<ul>

  • 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

Бесабз

<ul class="unstyled">

  • 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

Фармоиш дод

<ol>

  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

Тавсифи

<dl>

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

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

<dl class="dl-horizontal">

Рӯйхати тавсиф
Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.
Эусмод
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.

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

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

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

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

Блоки асосӣ

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

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

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

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

Google Prettify

Як <pre>унсурро гиред ва ду синфи ихтиёриро барои намоиши мукаммал илова кунед.

  1. <p> Намунаи матн дар ин ҷо... </p>
  1. < preclass = "prettyprint
  2. linenums" >
  3. <p>Матни намунавӣ дар ин ҷо...</p>
  4. </pre>

Google-code-prettify -ро зеркашӣ кунед ва хондани хондаро барои истифодаи он бубинед.

Нишондиҳии ҷадвал

тег Тавсифи
<table> Унсури парпечкунӣ барои намоиши маълумот дар формати ҷадвал
<thead> Унсури контейнер барои сатрҳои сарлавҳаи ҷадвал ( <tr>) барои нишон додани сутунҳои ҷадвал
<tbody> Унсури контейнер барои сатрҳои ҷадвал ( <tr>) дар бадани ҷадвал
<tr> Унсури контейнер барои маҷмӯи чашмакҳои ҷадвал ( <td>ё <th>), ки дар як сатр пайдо мешавад
<td> Ячейкаи ҷадвали пешфарз
<th> Ячейкаи махсуси ҷадвал барои тамғакоғазҳои сутун (ё сатр, вобаста ба миқёс ва ҷойгиршавӣ)
Бояд дар доираи як<thead>
<caption> Тавсиф ё мухтасари он чизе, ки ҷадвал дорад, махсусан барои хонандагони экран муфид аст
  1. <ҷадвал>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ҷадвал>

Вариантҳои ҷадвал

Ном Синф Тавсифи
Пешфарз Ҳеҷ Бе услуб, танҳо сутунҳо ва сатрҳо
Асосӣ .table Танҳо хатҳои уфуқӣ байни қаторҳо
Сарҳадӣ .table-bordered Кунҷҳоро давр мезанад ва сарҳади беруниро илова мекунад
Зебра-рах .table-striped Ба сатрҳои тоқ (1, 3, 5, ва ғайра) ранги заминаи хокистарии сабукро илова мекунад.
Конденсатсионӣ .table-condensed Ҷойгиркунии амудиро аз 8px то 4px, дар дохили ҳама tdва thэлементҳо дар ду ним бур мекунад

Ҷадвалҳои намунавӣ

1. Сабкҳои ҷадвали пешфарз

Ҷадвалҳо ба таври худкор танҳо бо чанд сарҳад тарҳрезӣ мешаванд, то хондан ва нигоҳ доштани сохторро таъмин кунанд. Бо 2.0, .tableсинф талаб карда мешавад.

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

2. Мизи сатрдор

Бо илова кардани зебра-стрипинг бо ҷадвалҳои худ каме зебо шавед - танҳо .table-stripedсинфро илова кунед.

Эзоҳ: Ҷадвалҳои хатӣ :nth-childселектори CSS-ро истифода мебаранд ва дар IE7-IE8 дастрас нестанд.

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

3. Ҷадвали марзӣ

Барои мақсадҳои эстетикӣ сарҳадҳоро дар атрофи тамоми миз ва кунҷҳои мудаввар илова кунед.

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

4. Ҷадвали ҷамъшуда

Ҷадвалҳои худро бо илова кардани .table-condensedсинф барои буридани қабати ҳуҷайраҳои ҷадвал ба ду баробар (аз 8px то 4px) мизҳои худро зичтар кунед.

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

5. Ҳамаи онҳоро якҷоя кунед!

Озод ҳис кунед, ки ҳама гуна синфҳои ҷадвалро якҷоя кунед, то намуди зоҳирии гуногунро бо истифода аз ҳама гуна синфҳои дастрас ба даст оред.

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

HTML ва CSS чандир

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

Тарҳҳои мураккабтар бо синфҳои мухтасар ва миқёспазир барои ороиши осон ва ҳатмии рӯйдодҳо меоянд, аз ин рӯ шумо дар ҳар қадам фаро гирифта мешавед.

Чор тарҳ дохил карда шудаанд

Bootstrap бо дастгирии чор намуди тарҳбандии форма меояд:

  • Амудӣ (пешфарз)
  • Ҷустуҷӯ
  • Дар мувофиқат
  • Уфуқӣ

Намудҳои гуногуни тарҳбандии формаҳо барои аломатгузорӣ баъзе тағиротро талаб мекунанд, аммо худи идоракунӣ боқӣ мемонад ва ҳамон тавр рафтор мекунанд.

Ҳолатҳои назорат ва ғайра

Шаклҳои Bootstrap дорои сабкҳо барои ҳама идоракунии шаклҳои асосӣ ба монанди вуруд, матн ва интихобе, ки шумо интизор будед. Аммо он инчунин бо як қатор ҷузъҳои фармоишӣ, ба монанди вурудоти замимашуда ва пешакӣ ва дастгирии рӯйхати қуттиҳои қайдҳо меояд.

Ҳолатҳо ба монанди хатогӣ, огоҳӣ ва муваффақият барои ҳар як намуди назорати форма дохил карда шудаанд. Ҳамчунин сабкҳо барои назорати маъюбон дохил карда шудаанд.

Чор намуди шакл

Bootstrap аломатгузории оддӣ ва услубҳоро барои чаҳор услуби шаклҳои маъмули веб таъмин мекунад.

Ном Синф Тавсифи
Амудӣ (пешфарз) .form-vertical (талаб нест) Тамғакоғазҳои ҷамъшуда ва ба чап мувофиқшуда дар болои назорат
Дар мувофиқат .form-inline Тамғаи ба чап мувофиқшуда ва назорати блоки дохилӣ барои сабки паймон
Ҷустуҷӯ .form-search Вуруди ҳамаҷонибаи матн барои эстетикаи маъмулии ҷустуҷӯ
Уфуқӣ .form-horizontal Тамғакоғазҳои ба чап ва рост ҳамоҳангшуда дар як сатр бо контролҳо шино кунед

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

Шакли асосӣ

Пешфарзҳои оқилона ва сабук бидуни аломатгузории иловагӣ.

Намунаи матни кӯмаки сатҳи блок дар ин ҷо.

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

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

Ба .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>

Шаклҳои уфуқӣ

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

  • вуруди матн (матн, парол, почтаи электронӣ ва ғайра)
  • қуттии қайд
  • радио
  • интихоб кунед
  • интихоби сершумор
  • вуруди файл
  • майдони матн

Илова ба матни озод, ҳама гуна вуруди HTML5 дар асоси матн чунин ба назар мерасад.

Намунаи аломатгузорӣ

Бо дарназардошти тарҳбандии шакли намунаи дар боло зикршуда, дар ин ҷо аломатгузорӣ бо гурӯҳи аввалини вуруд ва назорат алоқаманд аст. , .control-group, .control-labelва .controlsсинфҳо ҳама барои ороиш лозиманд.

  1. < синфи шакл = "форма-уфуқӣ" >
  2. <маҷмӯаи майдон>
  3. <legend> Матни афсона </ legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Вуруди матн </label>
  6. <div class = "назоратҳо" >
  7. < навъи вуруд = "матн" синфи = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Матни кӯмаки дастгирӣ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

Bootstrap услубҳо барои нигаронидашуда ва иёлатҳои аз ҷониби браузер дастгирӣшавандаро disabledфароҳам меорад. Мо Webkit-и пешфарзро нест мекунем outlineва box-shadowдар ҷои он барои :focus.


Санҷиши шакл

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

  1. <маҷмӯаи майдонҳо
  2. class = "хатои гурӯҳи назоратӣ" >
  3. </fieldset>
Баъзе арзишҳо дар ин ҷо
Мумкин аст чизе хато кардааст
Лутфан хатогиро ислоҳ кунед
Воҳу!
Воҳу!

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

Вурудҳоро пеш ва илова кунед

Гурӯҳҳои воридотӣ - бо матни замимашуда ё пешакӣ - роҳи осони додани контексти бештарро барои вурудоти худ таъмин мекунанд. Намунаҳои олӣ аломати @ барои номи корбарони Twitter ё $ барои молия мебошанд.


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

То v1.4, Bootstrap барои гузоштани онҳо дар атрофи қуттиҳои қайд ва радиоҳо аломатгузории иловагӣ талаб мекард. Акнун, ин як масъалаи оддии такрор кардани он аст <label class="checkbox">, ки <input type="checkbox">.

Қуттиҳои дарунсохт ва радиоҳо низ дастгирӣ карда мешаванд. Танҳо .inlineба ягон .checkboxё илова кунед .radioва шумо тамом шудед.


Шаклҳои дарунсохт ва замима/пайванд

Барои истифодаи пешоянд ё замимаи воридот дар шакли хаттӣ, ҳатман .add-onва inputдар як сатр бе фосила ҷойгир кунед.


Матни кӯмаки шакл

Барои илова кардани матни кӯмак барои воридоти шакли худ, матни ёрирасонро бо <span class="help-inline">ё блоки матнии кӯмакро бо <p class="help-block">пас аз унсури вуруд дохил кунед.

Барои андозаҳои вуруд ҳамон .span*синфҳоро аз системаи шабака истифода баред.

Шумо инчунин метавонед синфҳои статикиро истифода баред, ки ба шабака харита намекунанд, ба услубҳои ҷавобгӯи CSS мутобиқ нестанд ё намудҳои гуногуни назоратро ҳисоб мекунанд (масалан, нисбат inputба select).

@

Дар ин ҷо як матни кӯмак

.00
Ин ҷо матни кӯмаки бештар аст
$ .00

Эзоҳ: Тамғакоғазҳо ҳама имконотро барои минтақаҳои калонтари клик ва шакли истифодашаванда иҳота мекунанд.

Тугма class="" Тавсифи
btn Тугмаи хокистарии стандартӣ бо градиент
btn btn-primary Вазни иловагии визуалиро таъмин мекунад ва амали ибтидоиро дар маҷмӯи тугмаҳо муайян мекунад
btn btn-info Ҳамчун алтернатива ба услубҳои пешфарз истифода мешавад
btn btn-success Як амали муваффақ ё мусбатро нишон медиҳад
btn btn-warning Нишон медиҳад, ки бо ин амал бояд эҳтиёткор бошад
btn btn-danger Амалҳои хатарнок ё эҳтимолан манфиро нишон медиҳад
btn btn-inverse Тугмаи алтернативии хокистарии торик, ки ба амал ё истифодаи семантикӣ вобаста нест

Тугмаҳо барои амалҳо

Чун қоида, тугмаҳо бояд танҳо барои амалҳо истифода шаванд, дар ҳоле ки истинодҳо барои объектҳо истифода мешаванд. Масалан, "Зеркашӣ" бояд тугма бошад, дар ҳоле ки "фаъолияти охирин" бояд пайванд бошад.

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

Мутобиқати байни браузер

IE9 градиентҳои заминаро дар кунҷҳои мудавваршуда намебурад, аз ин рӯ мо онро нест мекунем. Вобаста ба ин, IE9 buttonунсурҳои ғайрифаъолро ҷанҷол мекунад ва матни хокистариро бо сояи матнии бад, ки мо онро ислоҳ карда наметавонем.

Якчанд андоза

Тугмаҳои калонтар ё хурдтарро мехоҳед? .btn-large, .btn-small, ё .btn-miniбарои ду андозаи иловагӣ илова кунед .


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

Барои тугмаҳои ғайрифаъол, .disabledсинфро ба истинодҳо ва disabledатрибут барои <button>элементҳо илова кунед.

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

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

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

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

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

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

  • икон-шиша
  • икон-мусикй
  • ҷустуҷӯи нишона
  • нишона-лифофа
  • нишона-дил
  • икон-ситора
  • нишона-ситора-холӣ
  • нишона-истифодабаранда
  • икон-филм
  • нишонаи калон
  • нишона-ум
  • Рӯйхати нишона
  • нишона - хуб
  • нишона - хориҷ кунед
  • тасвири-масъала
  • кифоя кардани нишона
  • нишона хомӯш
  • нишона-сигнал
  • нишона-ког
  • нишона-партов
  • нишона-хона
  • тасвири файл
  • вақти нишона
  • икон-роҳ
  • 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
  • занги икон
  • икон-шаҳодатнома
  • тасвири ангушти боло
  • нишона-ангушти поён
  • нишона-даст-рост
  • нишона-дасти чап
  • тасвири даст боло
  • нишона-даст-поён
  • нишона-дода-тирчаи-рост
  • нишона-дода-тирчаи-чап
  • нишона-давра-тира-боло
  • нишона-дода-тирчаи-поён
  • икон-глобус
  • калиди икон
  • икон-вазифаҳо
  • тасвири филтр
  • портфели икон
  • нишона-экрани пурра

Ҳамчун спрайт сохта шудааст

Ба ҷои он ки ҳар як нишона дархости иловагӣ гардонем, мо онҳоро ба спрайт - як даста тасвирҳо дар як файл, ки CSS-ро барои ҷойгир кардани тасвирҳо бо background-position. Ин ҳамон усулест, ки мо дар Twitter.com истифода мебарем ва он барои мо хуб кор кардааст.

Ҳама синфҳои нишонаҳо .icon-барои ҷойгиркунии дурусти номҳо ва миқёс ба мисли ҷузъҳои дигари мо бо префикс гузошта шудаанд. Ин барои пешгирӣ кардани ихтилофҳо бо дигар асбобҳо кӯмак мекунад.

Glyphicons ба мо имкон дод, ки Халфлингҳо дар маҷмӯаи кушодаи мо истифода баранд, то даме ки мо дар ҳуҷҷатҳо истинод ва кредитро пешниҳод кунем. Лутфан дар лоиҳаҳои худ низ ҳамин тавр кунед.

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

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

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

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

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

140 синф вуҷуд дорад, ки барои нишонаҳои шумо интихоб кунед. Танҳо як <i>барчаспро бо синфҳои мувофиқ илова кунед ва шумо омодаед. Шумо метавонед рӯйхати пурраро дар sprites.less ё худи инҷо дар ин ҳуҷҷат пайдо кунед.

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

Ҳолатҳоро истифода баред

Нишонаҳо бузурганд, аммо онҳоро дар куҷо истифода бурдан мумкин аст? Инҳоянд чанд идея:

  • Ҳамчун визуалӣ барои паймоиши панели паҳлӯии шумо
  • Барои паймоиши сирф бо нишонаҳо асосёфта
  • Барои тугмаҳо барои расонидани маънои амал
  • Бо истинодҳо барои мубодилаи контекст дар макони таъиноти корбар

Аслан, дар ҳама ҷое, ки шумо метавонед <i>тег гузоред, шумо метавонед нишона гузоред.

Мисолхо

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