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

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

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

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

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Дуис моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Донec sed odio dui.

Истифодаи таъкид

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>истифодаи тег:

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

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

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

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

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

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо пеш аз ҳама. </p>
  <small> Шахси машҳур </small>
</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 ва дар вақти дилхоҳ.

Порта Малесуада

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

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

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

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

Блоки асосӣ

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

<p>Матни намунавӣ дар ин ҷо...</p>

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

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

Google Prettify

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

<p> Намунаи матн дар ин ҷо... </p>

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

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

<ҷадвал>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ҷадвал>

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

< синфи ҷадвал = "миз" > 
  …
</ҷадвал>

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

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

< синфи ҷадвал = "мизи рахи ҷадвал" > 
  …
</ҷадвал>

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

< синфи ҷадвал = "миз бо ҷадвали сарҳадӣ" > 
  …
</ҷадвал>

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

< синфи ҷадвал = "мизи конденсатсионӣ ҷадвал" > 
  …
</ҷадвал>

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

< синфи ҷадвал = "мизи рахи ҷадвали ҷадвали сарҳаддор ҷадвали конденсатсионӣ" > 
  ...
</ҷадвал>

HTML ва CSS чандир

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

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

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

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

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

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

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

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

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

Бо v2.0, мо барои сабкҳои шакл пешфарзҳои сабуктар ва оқилтар дорем. Нишондиҳии иловагӣ нест, танҳо идоракунии шакл.

Инъикоси сабкҳои пешфарз WebKit, танҳо .form-searchбарои майдонҳои ҷустуҷӯи ҳамаҷонибаи иловагӣ илова кунед.

Вурудҳо барои оғоз кардани сатҳи блок мебошанд. Барои .form-inlineва .form-horizontal, мо блоки inline-ро истифода мебарем.

Чӣ дохил карда шудааст

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

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

Пешфарзҳои нав бо v2.0

То v1.4, сабкҳои шакли пешфарзии Bootstrap тарҳбандии уфуқӣ истифода мекарданд. Бо Bootstrap 2, мо ин маҳдудиятро бартараф кардем, то пешфарзҳои оқилонатар ва миқёспазир барои ҳама гуна шакл дошта бошанд.

Ҳолатҳои браузери аз нав тарҳрезӣшуда

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

Санҷиши шакл

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

<маҷмӯаи майдонҳо
  class = "хатои гурӯҳи назоратӣ" >
  …
</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">пас аз унсури вуруд дохил кунед.

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

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

Барои лангарҳо ва шаклҳо

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

Эзоҳ: Ҳама тугмаҳо бояд .btnсинфро дар бар гиранд. Сабкҳои тугмаҳо бояд ба унсурҳо <button>ва барои мувофиқат татбиқ карда шаванд.<a>

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

Тугмаҳои калонтар ё хурдтарро мехоҳед? Бигиред!

Амали ибтидоӣ Амал

Амали ибтидоӣ Амал

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

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

Амали ибтидоӣ Амал

Амали ибтидоӣ Амал

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

Дар IE9, мо градиентро дар ҳама тугмаҳо ба манфиати кунҷҳои мудавваршуда мепартоем, зеро IE9 градиентҳои заминаро ба кунҷҳо намебурад.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Навсозӣ Тафтиш Нобуд кунед

Шарҳ Танзимотҳо Маълумоти бештар