Дар болои девор, унсурҳои асосии HTML бо синфҳои васеъ тарҳрезӣ ва такмил дода шудаанд, то намуди тару тоза, пайваста ва эҳсосро таъмин кунанд.
Тамоми шабакаи типографӣ ба ду тағирёбандаи 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.
Элемент | Истифода | Ихтиёрӣ |
---|---|---|
<strong> |
Барои таъкид кардани порчаи матн бо муҳим | Ҳеҷ |
<em> |
Барои таъкид кардани порчаи матн бо фишор | Ҳеҷ |
<abbr> |
Ихтисорот ва ихтисоротҳоро мепӯшонад, то версияи васеъшударо дар болои нишона нишон диҳад | title Барои матни васеъ ихтиёрӣ дохил кунед |
<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>
истифодаи тег:
Ихтисоротҳо бо матни калон ва сарҳади поёнии нуқта равшан карда шудаанд. Онҳо инчунин курсори ёрирасонро дар боло нишон медиҳанд, то корбарон аломати иловагӣ дошта бошанд, ки чизе дар ҳовер нишон дода мешавад.
HTML беҳтарин чизест, ки пас аз нони буридашуда.
Ихтисораи калимаи аттрибутӣ attr мебошад.
Элемент | Истифода | Ихтиёрӣ |
---|---|---|
<blockquote> |
Унсури сатҳи блок барои иқтибос овардани мундариҷа аз манбаи дигар | Иловаи .pull-left ва .pull-right синфҳо барои имконоти шинокунанда |
<small> |
Унсури ихтиёрӣ барои илова кардани иқтибос ба корбар, маъмулан муаллиф бо унвони кор | Дар <cite> атрофи унвон ё номи манбаъ ҷойгир кунед |
Барои дохил кардани иқтибос блок, <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>
<ul class="unstyled">
<ol>
<dl>
Порчаҳои кодро бо <code>
.
- Масалан , фасли < code> </ code > бояд ҳамчун сатр печонида шавад .
<pre>
Барои якчанд сатрҳои код истифода баред . Боварӣ ҳосил кунед, ки аз ҳама гуна қавсҳои кунҷӣ дар код барои намоиши дуруст раҳо шавед.
<p>Намунаи матн дар ин ҷо...</p>
- <пеш>
- <p>Матни намунавӣ дар ин ҷо...</p>
- </pre>
Эзоҳ: Боварӣ ҳосил кунед, ки кодро дар дохили <pre>
тегҳо то ҳадди имкон ба чап наздик нигоҳ доред; он ҳама ҷадвалҳоро пешкаш мекунад.
Шумо метавонед ба таври ихтиёрӣ синферо илова кунед, .pre-scrollable
ки баландии максимум 350px муқаррар мекунад ва лавҳаи гардиши меҳвари y-ро таъмин мекунад.
Як <pre>
унсурро гиред ва ду синфи ихтиёриро барои намоиши мукаммал илова кунед.
- <p> Намунаи матн дар ин ҷо... </p>
- < preclass = "prettyprint
- linenums" >
- <p>Матни намунавӣ дар ин ҷо...</p>
- </pre>
Google-code-prettify -ро зеркашӣ кунед ва хондани хондаро барои истифодаи он бубинед.
тег | Тавсифи |
---|---|
<table> |
Унсури парпечкунӣ барои намоиши маълумот дар формати ҷадвал |
<thead> |
Унсури контейнер барои сатрҳои сарлавҳаи ҷадвал ( <tr> ) барои нишон додани сутунҳои ҷадвал |
<tbody> |
Унсури контейнер барои сатрҳои ҷадвал ( <tr> ) дар бадани ҷадвал |
<tr> |
Унсури контейнер барои маҷмӯи чашмакҳои ҷадвал ( <td> ё <th> ), ки дар як сатр пайдо мешавад |
<td> |
Ячейкаи ҷадвали пешфарз |
<th> |
Ячейкаи махсуси ҷадвал барои тамғакоғазҳои сутун (ё сатр, вобаста ба миқёс ва ҷойгиршавӣ) Бояд дар доираи як <thead> |
<caption> |
Тавсиф ё мухтасари он чизе, ки ҷадвал дорад, махсусан барои хонандагони экран муфид аст |
- <ҷадвал>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ҷадвал>
Ном | Синф | Тавсифи |
---|---|---|
Пешфарз | Ҳеҷ | Бе услуб, танҳо сутунҳо ва сатрҳо |
Асосӣ | .table |
Танҳо хатҳои уфуқӣ байни қаторҳо |
Сарҳадӣ | .table-bordered |
Кунҷҳоро давр мезанад ва сарҳади беруниро илова мекунад |
Зебра-рах | .table-striped |
Ба сатрҳои тоқ (1, 3, 5, ва ғайра) ранги заминаи хокистарии сабукро илова мекунад. |
Конденсатсионӣ | .table-condensed |
Ҷойгиркунии амудиро аз 8px то 4px, дар дохили ҳама td ва th элементҳо дар ду ним бур мекунад |
Ҷадвалҳо ба таври худкор танҳо бо чанд сарҳад тарҳрезӣ мешаванд, то хондан ва нигоҳ доштани сохторро таъмин кунанд. Бо 2.0, .table
синф талаб карда мешавад.
- < синфи ҷадвал = "миз" >
- …
- </ҷадвал>
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Марк | Отто | CSS |
2 | Яъқуб | Торнтон | Javascript |
3 | Stu | Дент | HTML |
Бо илова кардани зебра-стрипинг бо ҷадвалҳои худ каме зебо шавед - танҳо .table-striped
синфро илова кунед.
Эзоҳ: Ҷадвалҳои хатӣ :nth-child
селектори CSS-ро истифода мебаранд ва дар IE7-IE8 дастрас нестанд.
- < синфи ҷадвал = "мизи рахи ҷадвал" >
- …
- </ҷадвал>
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Марк | Отто | CSS |
2 | Яъқуб | Торнтон | Javascript |
3 | Stu | Дент | HTML |
Барои мақсадҳои эстетикӣ сарҳадҳоро дар атрофи тамоми миз ва кунҷҳои мудаввар илова кунед.
- < синфи ҷадвал = "ҷадвал-сарҳаддор" >
- …
- </ҷадвал>
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Марк Отто | CSS | |
2 | Яъқуб | Торнтон | Javascript |
3 | Stu | Дент | |
3 | Brosef | Сталин | HTML |
Ҷадвалҳои худро бо илова кардани .table-condensed
синф барои буридани қабати ҳуҷайраҳои ҷадвал ба ду баробар (аз 8px то 4px) мизҳои худро зичтар кунед.
- < синфи ҷадвал = "мизи конденсатсионӣ ҷадвал" >
- …
- </ҷадвал>
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Марк | Отто | CSS |
2 | Яъқуб | Торнтон | Javascript |
3 | Stu | Дент | HTML |
Озод ҳис кунед, ки ҳама гуна синфҳои ҷадвалро якҷоя кунед, то намуди зоҳирии гуногунро бо истифода аз ҳама гуна синфҳои дастрас ба даст оред.
- < синфи ҷадвал = "мизи рахи ҷадвали ҷадвали сарҳади ҷадвали конденсатсионӣ" >
- ...
- </ҷадвал>
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Марк | Отто | CSS |
2 | Яъқуб | Торнтон | Javascript |
3 | Stu | Дент | HTML |
4 | Brosef | Сталин | HTML |
Беҳтарин қисми шаклҳо дар Bootstrap дар он аст, ки ҳама вурудот ва назорати шумо новобаста аз он ки шумо онҳоро дар аломатгузории худ чӣ гуна эҷод мекунед, олиҷаноб мешаванд. Ҳеҷ HTMLи зиёдатӣ талаб карда намешавад, аммо мо намунаҳоро барои онҳое, ки ба он ниёз доранд, пешниҳод мекунем.
Тарҳҳои мураккабтар бо синфҳои мухтасар ва миқёспазир барои ороиши осон ва ҳатмии рӯйдодҳо меоянд, аз ин рӯ шумо дар ҳар қадам фаро гирифта мешавед.
Bootstrap бо дастгирии чор намуди тарҳбандии форма меояд:
Намудҳои гуногуни тарҳбандии формаҳо барои аломатгузорӣ баъзе тағиротро талаб мекунанд, аммо худи идоракунӣ боқӣ мемонад ва ҳамон тавр рафтор мекунанд.
Шаклҳои Bootstrap дорои сабкҳо барои ҳама идоракунии шаклҳои асосӣ ба монанди вуруд, матн ва интихобе, ки шумо интизор будед. Аммо он инчунин бо як қатор ҷузъҳои фармоишӣ, ба монанди вурудоти замимашуда ва пешакӣ ва дастгирии рӯйхати қуттиҳои қайдҳо меояд.
Ҳолатҳо ба монанди хатогӣ, огоҳӣ ва муваффақият барои ҳар як намуди назорати форма дохил карда шудаанд. Ҳамчунин сабкҳо барои назорати маъюбон дохил карда шудаанд.
Bootstrap аломатгузории оддӣ ва услубҳоро барои чаҳор услуби шаклҳои маъмули веб таъмин мекунад.
Ном | Синф | Тавсифи |
---|---|---|
Амудӣ (пешфарз) | .form-vertical (талаб нест) |
Тамғакоғазҳои ҷамъшуда ва ба чап мувофиқшуда дар болои назорат |
Дар мувофиқат | .form-inline |
Тамғаи ба чап мувофиқшуда ва назорати блоки дохилӣ барои сабки паймон |
Ҷустуҷӯ | .form-search |
Вуруди ҳамаҷонибаи матн барои эстетикаи маъмулии ҷустуҷӯ |
Уфуқӣ | .form-horizontal |
Тамғакоғазҳои ба чап ва рост ҳамоҳангшуда дар як сатр бо контролҳо шино кунед |
Бо v2.0, мо барои сабкҳои шакл пешфарзҳои сабуктар ва оқилтар дорем. Нишондиҳии иловагӣ нест, танҳо идоракунии шакл.
- < синфи шакл = "хуб" >
- <label> Номи барчасп </label>
- < навъи вуруд = "text" class = "span3" placeholder = "Чизро нависед..." >
- <span class = "help-inline" > Матни кӯмаки алоқаманд! </span>
- < синфи барчасп = "қуттии қайд" >
- < навъи вуруд = "қуттии қайд" > Маро санҷед
- </label>
- <button type = " submit" class = "btn" > Ирсол < /button>
- </form>
Инъикоси услубҳои пешфарзи WebKit, танҳо .form-search
барои майдонҳои ҷустуҷӯи ҳамаҷонибаи иловагӣ илова кунед.
- < синфи форма = "чустуҷӯи шакли хуб" >
- < навъи вуруд = "матн" синфи = "дархости ҷустуҷӯи миёна" >
- <button type = " submit" class = "btn" > Ҷустуҷӯ </button>
- </form>
Вурудҳо барои оғоз кардани сатҳи блок мебошанд. Барои .form-inline
ва .form-horizontal
, мо блоки inline-ро истифода мебарем.
- < синфи форма = "хуб form-inline" >
- < навъи вуруд = "матн" синфи = "ворид-хурд" ҷойнишин = "почтаи электронӣ" >
- < навъи вуруд = "парол" синфи = "ворид-хурд" ҷойнишин = "парол" >
- <button type = " submit" class = "btn" > Гузаштан </button>
- </form>
Бо дарназардошти тарҳбандии шакли намунаи дар боло зикршуда, дар ин ҷо аломатгузорӣ бо гурӯҳи аввалини вуруд ва назорат алоқаманд аст. , .control-group
, .control-label
ва .controls
синфҳо ҳама барои ороиш лозиманд.
- < синфи шакл = "форма-уфуқӣ" >
- <маҷмӯаи майдон>
- <legend> Матни афсона </ legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Вуруди матн </label>
- <div class = "назоратҳо" >
- < навъи вуруд = "матн" синфи = "input-xlarge" id = "input01" >
- <p class = "help-block" > Матни кӯмаки дастгирӣ </p>
- </div>
- </div>
- </fieldset>
- </form>
Дар тарафи чап нишон дода шудааст, ки ҳамаи идоракунии шакли пешфарз, ки мо дастгирӣ мекунем. Ин аст рӯйхати нишондодашуда:
То 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">
пас аз унсури вуруд дохил кунед.
:after
медиҳанд. Дар ҳуҷҷатҳо мо дар болои курсор ранги пасзаминаи сурхи сабукро нишон медиҳем, то андозаи нишонаро таъкид кунем.
Ба ҷои он ки ҳар як нишона дархости иловагӣ гардонем, мо онҳоро ба спрайт - як даста тасвирҳо дар як файл, ки CSS-ро барои ҷойгир кардани тасвирҳо бо background-position
. Ин ҳамон усулест, ки мо дар Twitter.com истифода мебарем ва он барои мо хуб кор кардааст.
Ҳама синфҳои нишонаҳо .icon-
барои ҷойгиркунии дурусти номҳо ва миқёс ба мисли ҷузъҳои дигари мо бо префикс гузошта шудаанд. Ин барои пешгирӣ кардани ихтилофҳо бо дигар асбобҳо кӯмак мекунад.
Glyphicons ба мо имкон дод, ки Халфлингҳо дар маҷмӯаи кушодаи мо истифода баранд, то даме ки мо дар ҳуҷҷатҳо истинод ва кредитро пешниҳод кунем. Лутфан дар лоиҳаҳои худ низ ҳамин тавр кунед.
Бо v2.0.1, мо барои ҳама нишонаҳоамон тегро истифода бурдем, <i>
аммо онҳо синфи парванда надоранд — танҳо префикси муштарак. Барои истифода, рамзи зеринро тақрибан дар ҳама ҷо ҷойгир кунед:
- <i class = "icon-search" ></i>
Инчунин сабкҳо барои нишонаҳои баръакс (сафед) мавҷуданд, ки бо як синфи иловагӣ омода шудаанд:
- <i class = "icon-search icon-white" ></i>
120 синф вуҷуд дорад, ки барои нишонаҳои шумо интихоб кунед. Танҳо як <i>
барчаспро бо синфҳои мувофиқ илова кунед ва шумо омодаед. Шумо метавонед рӯйхати пурраро дар sprites.less ё худи инҷо дар ин ҳуҷҷат пайдо кунед.
Нишонаҳо бузурганд, аммо онҳоро дар куҷо истифода бурдан мумкин аст? Инҳоянд чанд идея:
Аслан, дар ҳама ҷое, ки шумо метавонед <i>
тег гузоред, шумо метавонед нишона гузоред.
Онҳоро дар тугмаҳо, гурӯҳҳои тугмаҳо барои панели асбобҳо, паймоиш ё вуруди шакли пешакӣ истифода баред.