CSS
Танзимоти глобалии CSS, унсурҳои асосии HTML, ки бо синфҳои васеъшаванда тарҳрезӣ ва такмил дода шудаанд ва системаи пешрафтаи шабакавӣ.
Барраси
Дар бораи қисмҳои калидии инфрасохтори Bootstrap, аз ҷумла равиши мо ба рушди беҳтар, тезтар ва қавитар веб маълумот гиред.
Ҳуҷҷати HTML5
Bootstrap унсурҳои муайяни HTML ва хосиятҳои CSS-ро истифода мебарад, ки истифодаи ҳуҷҷати HTML5-ро талаб мекунанд. Онро дар оғози ҳамаи лоиҳаҳои худ дохил кунед.
<!DOCTYPE html>
<html lang="en">
...
</html>Мобилӣ аввал
Бо Bootstrap 2, мо барои ҷанбаҳои асосии чаҳорчӯба сабкҳои ихтиёрии дӯстона мобилиро илова кардем. Бо Bootstrap 3, мо лоиҳаро аз нав навиштем, то аз аввал ба мобилӣ мувофиқ бошад. Ба ҷои илова кардани сабкҳои ихтиёрии мобилӣ, онҳо дар асл пухта мешаванд. Дар асл, Bootstrap аввал мобилӣ аст . Сабкҳои аввалини мобилиро метавон дар тамоми китобхона пайдо кард, на дар файлҳои алоҳида.
Барои таъмин намудани намоиши дуруст ва масштабкунии ламс, мета теги намоишро ба <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Шумо метавонед қобилияти васеъкуниро дар дастгоҳҳои мобилӣ тавассути илова user-scalable=noба мета теги намоишгоҳ хомӯш кунед. Ин васеъкуниро ғайрифаъол мекунад, яъне корбарон танҳо метавонанд ҳаракат кунанд ва дар натиҷа сайти шумо худро каме бештар ба барномаи маҳаллӣ монанд мекунад. Умуман, мо инро дар ҳама сайтҳо тавсия намедиҳем, аз ин рӯ эҳтиёт шавед!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Типография ва истинодҳо
Bootstrap намоиши асосии глобалӣ, типография ва услубҳои истинодро муқаррар мекунад. Махсусан, мо:
- Дар
background-color: #fff;_body @font-family-base,@font-size-base, ва@line-height-baseатрибутҳоро ҳамчун пойгоҳи типографии мо истифода баред- Ранги истиноди глобалиро тавассути
@link-colorтанзим кунед ва танҳо дар зер хатти истинодро татбиқ кунед:hover
Ин услубҳоро дар дохили scaffolding.less.
Normalize.css
Барои беҳтар кардани намоиши байнибраузерҳо, мо Normalize.css -ро истифода мебарем , ки лоиҳаи Николас Галлагер ва Ҷонатан Нил мебошад.
Контейнерҳо
Bootstrap як унсури дорои мундариҷаи сайтро талаб мекунад ва системаи шабакаи моро ҷойгир мекунад. Шумо метавонед яке аз ду контейнерро барои истифода дар лоиҳаҳои худ интихоб кунед. Дар хотир доред, ки бо сабаби paddingва бештар, ҳеҷ як контейнер лона нест.
Истифода .containerбарои як контейнер паҳнои собит ҷавобгӯ.
<div class="container">
...
</div>Барои як контейнери васеъ истифода баред .container-fluid, ки тамоми паҳнои намоишгоҳи худро фаро мегирад.
<div class="container-fluid">
...
</div>Системаи шабакавӣ
Bootstrap системаи шабакаи моеъи аввалини мобилиро дар бар мегирад, ки ба таври мувофиқ то 12 сутун бо зиёд шудани андозаи дастгоҳ ё намоишгоҳ миқёс мекунад. Он синфҳои пешакӣ муайяншударо барои имконоти тарҳбандии осон ва инчунин омехтаҳои пурқувват барои тавлиди тарҳҳои семантикии бештар дар бар мегирад .
Муқаддима
Системаҳои шабакавӣ барои эҷоди тарҳҳои саҳифа тавассути як қатор сатрҳо ва сутунҳо, ки мундариҷаи шуморо ҷойгир мекунанд, истифода мешаванд. Ин аст, ки чӣ тавр системаи шабакаи Bootstrap кор мекунад:
- Сатрҳо бояд дар доираи як
.container(паҳнои собит) ё.container-fluid(пурраи паҳнои) барои ҳамоҳангсозии дуруст ва пуркунӣ ҷойгир карда шаванд. - Барои сохтани гурӯҳҳои уфуқии сутунҳо сатрҳоро истифода баред.
- Мундариҷа бояд дар дохили сутунҳо ҷойгир карда шавад ва танҳо сутунҳо метавонанд кӯдакони бевоситаи сатрҳо бошанд.
- Синфҳои шабакаҳои пешакӣ муайяншуда ба монанди
.rowва.col-xs-4барои зуд сохтани тарҳҳои шабака дастрасанд. Миксинҳои камтарро инчунин барои тарҳбандиҳои семантикӣ истифода бурдан мумкин аст. - Сутунҳо тавассути
padding. Ин пуркунӣ дар сатрҳои сутуни якум ва охирин тавассути маржаи манфӣ дар.rows ҷуброн карда мешавад. - Маржаи манфӣ ин аст, ки чаро мисолҳои дар поён овардашуда аз ҳад зиёданд. Ин ба он сабаб аст, ки мундариҷа дар сутунҳои шабака бо мундариҷаи шабакавӣ мувофиқат карда шавад.
- Сутунҳои шабакавӣ тавассути муайян кардани шумораи дувоздаҳ сутунҳои дастрас, ки шумо мехоҳед паҳн кунед, сохта мешаванд. Масалан, се сутуни баробар се
.col-xs-4. - Агар зиёда аз 12 сутун дар як сатр ҷойгир карда шуда бошад, ҳар як гурӯҳи сутунҳои иловагӣ ҳамчун як воҳид ба хати нав печонида мешаванд.
- Синфҳои шабакавӣ ба дастгоҳҳое татбиқ мешаванд, ки паҳнои экран аз андозаи нуқта бузургтар ё баробар аст ва синфҳои шабакаро, ки ба дастгоҳҳои хурдтар нигаронида шудаанд, бекор мекунанд. Аз ин рӯ, масалан, татбиқи ҳама гуна
.col-md-*синф ба элемент на танҳо ба услуби он дар дастгоҳҳои миёна, балки дар дастгоҳҳои калон низ таъсир мерасонад, агар.col-lg-*синф мавҷуд набошад.
Ба мисолҳо барои татбиқи ин принсипҳо дар кодекси худ нигаред.
Саволҳои ВАО
Мо дархостҳои ВАО-и зеринро дар файлҳои камтари худ истифода мебарем, то нуқтаҳои калидӣ дар системаи шабакаи мо эҷод кунем.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Мо баъзан ин дархостҳои ВАО-ро васеъ мекунем, max-widthто CSS-ро бо маҷмӯи тангтари дастгоҳҳо маҳдуд созем.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Имконоти шабака
Бубинед, ки ҷанбаҳои системаи шабакаи Bootstrap дар байни дастгоҳҳои гуногун бо ҷадвали қулай чӣ гуна кор мекунанд.
| Дастгоҳҳои хурди иловагӣ Телефонҳо (<768px) | Планшетҳои дастгоҳҳои хурд (≥768px) | Дастгоҳҳои миёна (≥992px) | Дастгоҳҳои калон Мизи кории (≥1200px) | |
|---|---|---|---|---|
| Рафтори тор | Дар ҳама вақт уфуқӣ | Барои оғоз, уфуқӣ дар болои нуқтаҳои кандашуда | ||
| Бари контейнер | Ҳеҷ (авто) | 750px | 970px | 1170px |
| Префикси синф | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # сутунҳо | 12 | |||
| Паҳнои сутун | Авто | ~62px | ~ 81px | ~ 97px |
| Бари ҷӯйбор | 30px (15px дар ҳар як тарафи сутун) | |||
| Ҷойгир | Бале | |||
| Офсетҳо | Бале | |||
| Тартиби сутун | Бале | |||
Мисол: Скак-ба-уфуқӣ
Бо истифода аз маҷмӯи ягонаи .col-md-*синфҳои шабака, шумо метавонед як системаи асосии шабакаро эҷод кунед, ки дар дастгоҳҳои мобилӣ ва дастгоҳҳои планшетӣ (диапазони иловагӣ аз хурд то хурд) пеш аз уфуқӣ шудан дар дастгоҳҳои мизи корӣ (миёна) оғоз меёбад. Сутунҳои шабакаро дар ҳама гуна ҷойгир кунед .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Мисол: контейнери моеъ
Ҳама гуна тарҳбандии шабакаи собит-паҳноро ба тарҳбандии пурра табдил диҳед , ки берунии худро .containerба .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Мисол: Мобилӣ ва мизи корӣ
Оё намехоҳед, ки сутунҳои шумо дар дастгоҳҳои хурдтар ҷамъ шаванд? .col-xs-* .col-md-*Бо илова кардани сутунҳои худ синфҳои иловагии шабакаи хурд ва миёнаи дастгоҳро истифода баред. Барои тасаввуроти беҳтар дар бораи он ки ҳама кор мекунад, ба мисоли зер нигаред.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Мисол: Мобилӣ, планшет, мизи корӣ
Дар мисоли қаблӣ тавассути сохтани тарҳҳои боз ҳам динамикӣ ва пурқувват бо .col-sm-*синфҳои планшетҳо бунёд кунед.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Мисол: печонидани сутун
Агар зиёда аз 12 сутун дар як сатр ҷойгир карда шуда бошад, ҳар як гурӯҳи сутунҳои иловагӣ ҳамчун як воҳид ба хати нав печонида мешаванд.
.col-xs-9
.col-xs-4
Азбаски 9 + 4 = 13 > 12, ин div-и 4-сутуни васеъ ба хати нав ҳамчун як воҳиди ҳамсоя печонида мешавад.
Азбаски 9 + 4 = 13 > 12, ин div-и 4-сутуни васеъ ба хати нав ҳамчун як воҳиди ҳамсоя печонида мешавад.
.col-xs-6
Сутунҳои минбаъда дар хати нав идома медиҳанд.
Сутунҳои минбаъда дар хати нав идома медиҳанд.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Сутуни ҷавобӣ аз нав барқарор карда мешавад
Бо чаҳор қабати шабакаҳои дастрас шумо ҳатман ба мушкилот дучор мешавед, ки дар нуқтаҳои муайян сутунҳои шумо дуруст тоза намешаванд, зеро яке аз дигараш баландтар аст. Барои ислоҳи он, маҷмӯи a .clearfixва синфҳои хидматрасонии моро истифода баред .
.col-xs-6 .col-sm-3 Андозаи намоиши
худро тағир ди��ед ё онро дар телефони худ санҷед.
худро тағир ди��ед ё онро дар телефони худ санҷед.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Илова ба тозакунии сутун дар нуқтаҳои ҷавобгар, шояд ба шумо лозим ояд, ки ҷубронҳо, телаҳо ё кашиданҳоро аз нав танзим кунед . Инро дар мисоли шабака бубинед .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Баҳисобгирии сутунҳо
.col-md-offset-*Бо истифода аз синфҳо сутунҳоро ба рост гузаронед. Ин синфҳо маржаи чапи сутунро ба *сутунҳо зиёд мекунанд. Масалан, ба чор сутун .col-md-offset-4ҳаракат мекунад ..col-md-4
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Шумо инчунин метавонед ҷубронҳоро аз сатҳҳои шабакаи поёнӣ бо .col-*-offset-0синфҳо бекор кунед.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Сутунҳои лона
Барои ҷойгир кардани мундариҷаи худ бо шабакаи пешфарз, дар дохили сутуни мавҷуда сутунҳои нав .rowва маҷмӯи сутунҳоро илова кунед . Сатрҳои ҷойгиршуда бояд маҷмӯи сутунҳоро дар бар гиранд, ки то 12 ё камтар аз он илова мекунанд (аз шумо истифода бурдани ҳамаи 12 сутуни дастрас талаб карда намешавад)..col-sm-*.col-sm-*
Сатҳи 1: .col-sm-9
Сатҳи 2: .col-xs-8 .col-sm-6
Сатҳи 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Тартиби сутун
Тартиби сутунҳои шабакаи дарунсохтаи моро бо синфҳо .col-md-push-*ва тағирдиҳандаҳо ба осонӣ тағир диҳед..col-md-pull-*
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Миксинҳо ва тағирёбандаҳои камтар
Илова ба синфҳои шабакаҳои қаблан сохташуда барои тарҳбандиҳои зуд, Bootstrap дорои тағирёбандаҳои камтар ва омехтаҳо барои зуд тавлид кардани тарҳҳои содда ва семантикии шахсии шумост.
Тағйирёбандаҳо
Тағйирёбандаҳо шумораи сутунҳо, паҳнои ҷӯйбор ва нуқтаи дархости медиаро, ки дар он сутунҳои шинокунанда оғоз мешавад, муайян мекунанд. Мо онҳоро барои тавлиди синфҳои қаблан муайяншудаи шабакаҳои дар боло ҳуҷҷатшуда ва инчунин барои омехтаҳои фармоишии дар зер номбаршуда истифода мебарем.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Миксинҳо
Миксинҳо дар якҷоягӣ бо тағирёбандаҳои шабакавӣ барои тавлиди CSS семантикӣ барои сутунҳои шабакаи алоҳида истифода мешаванд.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Намунаи истифода
Шумо метавонед тағирёбандаҳоро ба арзишҳои фармоишии худ тағир диҳед ё танҳо омехтаҳоро бо арзишҳои пешфарзии худ истифода баред. Ин аст мисоли истифодаи танзимоти пешфарз барои сохтани тарҳбандии ду сутун бо фосила байни.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Типография
Сарлавҳаҳо
Ҳама сарлавҳаҳои HTML <h1>тавассути <h6>, дастрасанд. .h1тавассути .h6синфҳо низ дастрасанд, зеро вақте ки шумо мехоҳед ба услуби шрифти сарлавҳа мувофиқат кунед, аммо ба ҳар ҳол мехоҳед, ки матни шумо дар сатр нишон дода шавад.
h1. Сарлавҳаи bootstrap |
нимболд 36px |
h2. Сарлавҳаи bootstrap |
нимболд 30px |
h3. Сарлавҳаи bootstrap |
нимболд 24px |
h4. Сарлавҳаи bootstrap |
нимболд 18px |
h5. Сарлавҳаи bootstrap |
нимболд 14px |
h6. Сарлавҳаи bootstrap |
нимболд 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Дар ҳама гуна сарлавҳа бо <small>барчасп ё .smallсинф матни сабуктар ва дуюмдараҷа эҷод кунед.
h1. Сарлавҳаи bootstrap Матни дуюмдараҷа |
h2. Сарлавҳаи bootstrap Матни дуюмдараҷа |
h3. Сарлавҳаи bootstrap Матни дуюмдараҷа |
h4. Сарлавҳаи bootstrap Матни дуюмдараҷа |
h5. Сарлавҳаи bootstrap Матни дуюмдараҷа |
h6. Сарлавҳаи bootstrap Матни дуюмдараҷа |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Нусхаи бадан
Пешфарзи глобалии Bootstrap 14px , бо 1.428 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 class="lead">...</p>Бо камтар сохта шудааст
Миқёси типографӣ ба ду тағирёбандаи Less дар тағирёбандаҳо асос ёфтааст.less : @font-size-baseва @line-height-base. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад. Мо ин тағирёбандаҳо ва баъзе математикаи оддиро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем. Онҳоро танзим кунед ва Bootstrap мутобиқ мешавад.
Унсурҳои матни дохилӣ
Матни қайдшуда
Барои таъкид кардани як матн аз сабаби аҳамияти он дар контексти дигар, тегро истифода баред <mark>.
Шумо метавонед барчаспро истифода баредтаъкид карданматн.
You can use the mark tag to <mark>highlight</mark> text.Матни ҳазфшуда
Барои нишон додани блокҳои матни тозашуда тегро истифода баред <del>.
Ин сатри матн ҳамчун матни ҳазфшуда баррасӣ карда мешавад.
<del>This line of text is meant to be treated as deleted text.</del>Матни хаткашӣ
Барои нишон додани блокҳои матн, ки дигар мувофиқ нестанд, тегро истифода баред <s>.
Ин сатри матн барои дигар дақиқ нест.
<s>This line of text is meant to be treated as no longer accurate.</s>Матни воридшуда
Барои нишон додани иловаҳо ба ҳуҷҷат тегро истифода баред <ins>.
Ин сатри матн бояд ҳамчун илова ба ҳуҷҷат баррасӣ карда шавад.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Матни зери хат кашидашуда
Барои зеркашии матн тегро истифода баред <u>.
Ин сатри матн ҳамчун зери хат кашида мешавад
<u>This line of text will render as underlined</u>Тегҳои таъкиди пешфарзии HTML-ро бо сабкҳои сабук истифода баред.
Матни хурд
Барои бартараф кардани таък��ди сатрӣ ё блокҳои матн, тегро истифода баред, <small>то матнро ба андозаи 85% андозаи волидайн муқаррар кунед. font-sizeУнсурҳои сарлавҳа барои унсурҳои лонашуда худашонро <small>мегиранд.
Шумо ба таври алтернативӣ метавонед унсури дохилиро бо .smallҷои ҳар як <small>.
Ин сатри матн бояд ҳамчун чопи хуб баррасӣ карда шавад.
<small>This line of text is meant to be treated as fine print.</small>Далер
Барои таъкид кардани порчаи матн бо вазни ҳарфҳои вазнинтар.
Порчаи зерини матн ҳамчун матни ғафс оварда шудааст .
<strong>rendered as bold text</strong>Курсив
Барои таъкид кардани порчаи матн бо курсив.
Порчаи зерини матн ҳамчун матни курсив дода мешавад .
<em>rendered as italicized text</em>Унсурҳои алтернативӣ
Озод ҳис кунед <b>ва <i>дар HTML5 истифода баред. <b>Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.
Синфҳои ҳамоҳангсозӣ
Матнро ба ҷузъҳо бо синфҳои ҳамоҳангсозии матн ба осонӣ мутобиқ кунед.
Матни ба чап ҳамоҳангшуда.
Матни ба марказ мутобиқшуда.
Матни рости рост.
Матни асоснок.
Матн нест.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Синфҳои трансформатсия
Матнро дар ҷузъҳо бо синфҳои капитализатсияи матн табдил диҳед.
Матни хурд.
Матни калон.
Матни калон.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Ихтисорот
Татбиқи услубии <abbr>унсури HTML барои ихтисорот ва ихтисоротҳо барои нишон додани версияи васеъшуда дар болои нишона. Ихтисороти дорои titleатрибутҳо дорои сарҳади равшани нуқта ва курсори ёрирасон дар мавқеъ буда, контексти иловагиро дар ҳовер ва ба корбарони технологияҳои ёрирасон таъмин мекунанд.
Ихтисороти асосӣ
Ихтисораи калимаи аттрибутӣ attr мебошад.
<abbr title="attribute">attr</abbr>Инциализм
Ба .initialismихтисорот барои андозаи шрифти каме хурдтар илова кунед.
HTML беҳтарин чизест, ки пас аз нони буридашуда.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Суроғаҳо
Маълумоти тамосро барои аҷдодони наздиктарин ё тамоми кори кор пешниҳод кунед. Форматро бо тамом кардани ҳамаи сатрҳо бо <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Номи пурраи
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Номи пурраи
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Нохунакҳо
Барои иқтибос кардани блокҳои мундариҷа аз манбаи дигар дар ҳуҷҷати шумо.
Блоки иқтибоси пешфарз
<blockquote>Дар атрофи ҳама гуна HTML ҳамчун иқтибос печонед . Барои иқтибосҳои рост, мо тавсия медиҳем, ки <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Имконоти блоки иқтибос
Тағироти услуб ва мундариҷа барои вариантҳои оддӣ дар стандарт <blockquote>.
Номгузории манбаъ
Барои <footer>муайян кардани манбаъ, илова кунед. Номи кори сарчашмаро дар <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Намоишҳои алтернативӣ
Барои .blockquote-reverseблоки иқтибос бо мундариҷаи ба рост ҳамоҳангшуда илова кунед.
<blockquote class="blockquote-reverse">
...
</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
<ul>
<li>...</li>
</ul>Фармоиш дод
Рӯйхати ашёе, ки дар онҳо фармоиш ба таври возеҳ аҳамият дорад.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Молести бутуни дар масса
- Facilisis дар aliquet nisl pretium
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor loem
<ol>
<li>...</li>
</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
<ul class="list-unstyled">
<li>...</li>
</ul>Дар мувофиқат
Ҳама ҷузъҳои рӯйхатро дар як сатр ҷойгир кунед display: inline-block;ва бо каме пуркунии равшанӣ.
- Lorem ipsum
- Phasellus iaculis
- Бехтарин
<ul class="list-inline">
<li>...</li>
</ul>Тавсифи
Рӯйхати истилоҳот бо тавсифи алоқаманди онҳо.
- Рӯйхати тавсиф
- Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.
- Эусмод
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida ва дар вақти дилхоҳ.
- Порта Малесуада
- Этиам порта семина любовь любвие.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Тавсифи уфуқӣ
Шартҳо ва тавсифҳоро дар <dl>як саф паҳлӯ ба паҳлӯ созед. Ба мисли пешфарз s stacked оғоз меёбад <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.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Худкор буридан
Рӯйхати тавсифи уфуқӣ истилоҳотеро, ки барои мувофиқат кардан дар сутуни чап бо text-overflow. Дар намоишгоҳҳои тангтар, онҳо ба тарҳбандии пешфарзии stacked иваз мешаванд.
Кодекс
Дар мувофиқат
Порчаҳои кодро бо <code>.
Масалан,
<section>бояд ҳамчун сатр печонида шавад.
For example, <code><section></code> should be wrapped as inline.Вуруди корбар
<kbd>Барои нишон додани вуруд, ки одатан тавассути клавиатура ворид карда мешавад, -ро истифода баред .
Барои иваз кардани директорияҳо,
cdпас номи директорияро нависед.
Барои таҳрир кардани танзимот, пахш кунед ctrl + ,
Барои таҳрир кардани танзимот, пахш кунед ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Блоки асосӣ
<pre>Барои якчанд сатрҳои код истифода баред . Боварӣ ҳосил кунед, ки аз ҳама гуна қавсҳои кунҷӣ дар код барои намоиши дуруст раҳо шавед.
<p>Намунаи матн дар ин ҷо...</p>
<pre><p>Sample text here...</p></pre>Шумо метавонед ба таври ихтиёрӣ .pre-scrollableсинфро илова кунед, ки баландии максимум 350px муқаррар мекунад ва лавҳаи гардиши меҳвари y-ро таъмин мекунад.
Тағйирёбандаҳо
Барои нишон додани тағирёбанда тегро истифода баред <var>.
у = м х + б
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Намунаи баромад
Барои нишон додани блокҳои намунаи баромади барнома тегро истифода баред <samp>.
Ин матн барои намунаи баромади барномаи компютерӣ пешбинӣ шудааст.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Ҷадвалҳо
Намунаи асосӣ
Барои ороиши асосӣ - пӯшиши сабук ва танҳо тақсимкунандагони уфуқӣ - синфи асосиро .tableба ҳама гуна <table>. Ин метавонад хеле зиёдатӣ ба назар расад, аммо бо назардошти истифодаи густурдаи ҷадвалҳо барои плагинҳои дигар, ба монанди тақвимҳо ва интихобкунандагони сана, мо интихоб кардем, ки услубҳои ҷадвали фармоишии худро ҷудо кунем.
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
<table class="table">
...
</table>Қаторҳои рахдор
Барои илова кардани зебра .table-striped-рахи ба ягон сатри ҷадвал дар дохили <tbody>.
Мутобиқати кросс-браузер
Ҷадвалҳои рахдор тавассути :nth-childселектори CSS, ки дар Internet Explorer 8 мавҷуд нест, услуб карда мешаванд.
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
<table class="table table-striped">
...
</table>Ҷадвали сарҳадӣ
Барои .table-borderedсарҳадҳо дар ҳама паҳлӯҳои ҷадвал ва чашмакҳо илова кунед.
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
<table class="table table-bordered">
...
</table>Сатрҳоро гузаронед
Илова .table-hoverбарои фаъол кардани ҳолати овезон дар сатрҳои ҷадвал дар дохили <tbody>.
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри | парранда |
<table class="table table-hover">
...
</table>Ҷадвали конденсатсионӣ
Илова кунед .table-condensed, то ҷадвалҳоро паймонтар созед, бо буридани қабати ҳуҷайраҳо дар нимсолаи худ.
| # | Ном | Насаб | Номи корбар |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Яъқуб | Торнтон | @фарбеҳ |
| 3 | Ларри парранда | ||
<table class="table table-condensed">
...
</table>Синфҳои контекстӣ
Барои ранг кардани сатрҳои ҷадвал ё чашмакҳои алоҳида аз синфҳои контекстӣ истифода баред.
| Синф | Тавсифи |
|---|---|
.active |
Рангро ба сатр ё чашмаки мушаххас татбиқ мекунад |
.success |
Як амали муваффақ ё мусбатро нишон медиҳад |
.info |
Тағйироти иттилоотии бетараф ё амалро нишон медиҳад |
.warning |
Огоҳӣеро нишон медиҳад, ки метавонад ба таваҷҷӯҳ ниёз дошта бошад |
.danger |
Амалҳои хатарнок ё эҳтимолан манфиро нишон медиҳад |
| # | Сарлавҳаи сутун | Сарлавҳаи сутун | Сарлавҳаи сутун |
|---|---|---|---|
| 1 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 2 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 3 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 4 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 5 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 6 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 7 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 8 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
| 9 | Мазмуни сутун | Мазмуни сутун | Мазмуни сутун |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно ба сатри ҷадвал ё ячейкаи инфиродӣ танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экранхонҳои экран интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа равшан аст (матни намоён дар сатри ҷадвал/ячейка) ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.
Ҷадвалҳои ҷавобӣ
Ҷадвалҳои ҷавобгӯро тавассути печонидани ҳамаашон созед, то онҳо .tableдар .table-responsiveдастгоҳҳои хурд ба таври уфуқӣ ҳаракат кунанд (дар зери 768 пиксел). Ҳангоми дидани чизҳои калонтар аз 768 пиксел, шумо дар ин ҷадвалҳо ҳеҷ фарқияте намебинед.
Буридани амудӣ/буридан
Ҷадвалҳои ҷавобӣ аз -ро истифода мебаранд overflow-y: hidden, ки ҳама мундариҷаеро, ки аз канори поён ё болои ҷадвал берун аст, хориҷ мекунад. Махсусан, ин метавонад менюҳои афтанда ва дигар виджетҳои тарафи сеюмро буред.
Firefox ва маҷмӯи майдонҳо
Firefox дорои якчанд услуби саҳроии заҳматталабе мебошад, widthки ба ҷадвали ҷавобгӯ халал мерасонад. Инро бе хакки махсуси Firefox, ки мо дар Bootstrap таъмин намекунем , бекор кардан мумкин нест:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Барои маълумоти иловагӣ, ин ҷавоби Stack Overflow -ро хонед .
| # | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал |
|---|---|---|---|---|---|---|
| 1 | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал |
| 2 | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал |
| 3 | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал |
| # | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал | Сарлавҳаи ҷадвал |
|---|---|---|---|---|---|---|
| 1 | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал |
| 2 | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал |
| 3 | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал | Ячейкаи ҷадвал |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Шаклҳо
Намунаи асосӣ
Назорати шаклҳои инфиродӣ ба таври худкор баъзе услубҳои глобалиро мегиранд. Ҳама матни <input>, <textarea>, ва <select>унсурҳои бо нобаёнӣ муқаррар карда мешаванд .form-control. Тамғакоғазҳо ва назоратҳоро барои фосилаи беҳтарин width: 100%;печонед ..form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Гурӯҳҳои шаклро бо гурӯҳҳои воридотӣ омехта накунед
Гурӯҳҳои шаклро мустақиман бо гурӯҳҳои воридот омехта накунед . Ба ҷои ин, гурӯҳи вурудро дар дохили гурӯҳи форма ҷойгир кунед.
Шакли дохили
Ба .form-inlineшакли худ илова кунед (ки набояд бошад <form>) барои идоракунии ба чап мувофиқшуда ва дар дохили блок. Ин танҳо ба шаклҳое дахл дорад, ки паҳнои на камтар аз 768 пиксел доранд.
Метавонад паҳнои фармоиширо талаб кунад
Воридот ва интихобҳо ба width: 100%;таври нобаёнӣ дар Bootstrap татбиқ карда шудаанд. Дар дохили шаклҳои дарунсохт, мо онро аз нав танзим мекунем, width: auto;то идораҳои сершумор дар як сатр ҷойгир шаванд. Вобаста аз тарҳбандии шумо, метавонад паҳнои фармоишии иловагӣ талаб карда шавад.
Ҳамеша тамғакоғазҳоро илова кунед
Хонандагони экран бо варақаҳои шумо мушкилот хоҳанд дошт, агар шумо барои ҳар як вуруд тамға нагузоред. Барои ин шаклҳои сатрӣ, шумо метавонед тамғаҳоро бо истифода аз .sr-onlyсинф пинҳон кунед. Усулҳои дигари алтернативии пешниҳоди тамға барои технологияҳои ёрирасон мавҷуданд, ба монанди aria-label, aria-labelledbyё titleатрибут. Агар ҳеҷ яке аз инҳо мавҷуд набошад, хонандагони экран метавонанд ба истифодаи placeholderатрибут муроҷиат кунанд, агар мавҷуд бошад, аммо қайд кунед, ки истифодаи он placeholderҳамчун ивази усулҳои тамғагузорӣ тавсия дода намешавад.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Шакли уфуқӣ
Синфҳои шабакаи қаблан муайяншудаи Bootstrap-ро барои мувофиқ кардани тамғакоғазҳо ва гурӯҳҳои идоракунии форма дар тарҳбандии уфуқӣ тавассути илова .form-horizontalба форма (ки набояд <form>) истифода баред. Ин .form-groupамал ҳамчун сатрҳои шабакавӣ тағир меёбад, бинобар ин лозим нест .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Назорати дастгирӣ
Намунаҳои идоракунии шаклҳои стандартӣ, ки дар тарҳбандии намунавӣ дастгирӣ мешаванд.
Вурудҳо
Назорати маъмултарини шакл, майдонҳои вуруди матнӣ. Дастгирии ҳама намудҳои HTML5-ро дар бар мегирад: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ва color.
Намуди эъломия талаб карда мешавад
Вурудҳо танҳо дар сурати typeдуруст эълон кардани онҳо услубӣ карда мешаванд.
<input type="text" class="form-control" placeholder="Text input">Гурӯҳҳои воридотӣ
Барои илова кардани матн ё тугмаҳои ҳамгирошуда пеш ва/ё баъд аз ҳама гуна матн дар асоси <input>, ҷузъи гурӯҳи вурудро санҷед .
Текстареа
Назорати форма, ки сатрҳои зиёди матнро дастгирӣ мекунад. Агар лозим бошад, атрибутро тағир rowsдиҳед.
<textarea class="form-control" rows="3"></textarea>Санҷишҳо ва радиоҳо
Қуттиҳои қайдҳо барои интихоби як ё якчанд вариант дар рӯйхат мебошанд, дар ҳоле ки радиоҳо барои интихоби як вариант аз бисёриҳо мебошанд.
Қуттиҳои ғайрифаъол ва радиоҳо дастгирӣ карда мешаванд, аммо барои таъмин кардани курсори "иҷозат дода намешавад" дар болои болои волидайн <label>, шумо бояд .disabledсинфро ба волидайн .radio, .radio-inline, .checkbox, ё .checkbox-inline.
Пешфарз (сӯхташуда)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Қуттиҳои дарунсохт ва радиоҳо
.checkbox-inlineБарои идораҳое, ки дар як сатр пайдо мешаванд, ё .radio-inlineсинфҳоро дар як қатор қуттиҳо ё радиоҳо истифода баред .
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Қуттиҳои қайд ва радиоҳо бе матни нишона
Агар шумо дар дохили матн ягон матн надошта бошед <label>, вуруд тавре ҷойгир карда мешавад, ки шумо интизор будед. Дар айни замон танҳо дар қуттиҳои ғайрихаттӣ ва радиоҳо кор мекунад. Дар хотир доред, ки то ҳол барои технологияҳои ёрирасон (масалан, бо истифода аз aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>Интихоб мекунад
Дар хотир доред, ки бисёре аз менюҳои интихобшудаи маҳаллӣ, аз ҷумла дар Safari ва Chrome, гӯшаҳои мудаввар доранд, ки онҳоро тавассути border-radiusхосиятҳо тағир додан мумкин нест.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Барои <select>идоракунӣ бо multipleаттрибутӣ, имконоти сершумор бо нобаёнӣ нишон дода мешаванд.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Назорати статикӣ
Вақте ки ба шумо лозим аст, ки матни оддиро дар паҳлӯи нишони форма дар дохили форма ҷойгир кунед, .form-control-staticсинфро дар <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Ҳолати фокус
Мо услубҳои пешфарзро outlineдар баъзе идораҳои форма хориҷ мекунем ва box-shadowдар ҷои он барои :focus.
:focusҲолати намоишӣ
Вуруди мисоли дар боло овардашуда дар ҳуҷҷатҳои мо сабкҳои фармоиширо барои нишон додани :focusҳолат дар .form-control.
Ҳолати ғайрифаъол
Барои disabledпешгирӣ кардани муоширати корбарон аттрибутҳои логикиро ба вуруд илова кунед. Вурудҳои ғайрифаъол сабуктар пайдо мешаванд ва not-allowedкурсор илова мекунанд.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Маҷмӯаҳои майдонҳои ғайрифаъол
Аттрибутро disabledба a илова кунед, <fieldset>то ҳама идораҳоро дар дохили он <fieldset>якбора хомӯш кунед.
Огоҳӣ дар бораи функсияи истинод<a>
Ба таври нобаёнӣ, браузерҳо ҳама идоракунии шаклҳои модариро ( <input>, <select>ва <button>унсурҳоро) дар дохили a <fieldset disabled>ҳамчун ғайрифаъол ҳисоб мекунанд ва ҳамкории клавиатура ва мушро бо онҳо пешгирӣ мекунанд. Аммо, агар шакли шумо инчунин <a ... class="btn btn-*">унсурҳоро дар бар гирад, ба онҳо танҳо услуби pointer-events: none. Тавре ки дар бахш дар бораи ҳолати ғайрифаъол барои тугмаҳо (ва махсусан дар зербахш барои унсурҳои лангар) қайд карда шуд, ин амволи CSS ҳанӯз стандартизатсия нашудааст ва дар Opera 18 ва поёнтар ё дар Internet Explorer 11 пурра дастгирӣ намешавад ва ғолиб шуд 'ба корбарони клавиатура имкон надиҳад, ки ин истинодҳоро мутамарказ кунанд ё фаъол кунанд. Пас, барои бехатар будан, JavaScript-и фармоиширо барои хомӯш кардани чунин истинодҳо истифода баред.
Мутобиқати кросс-браузер
Гарчанде ки Bootstrap ин услубҳоро дар ҳама браузерҳо татбиқ мекунад, Internet Explorer 11 ва поёнтар ин disabledатрибутро дар <fieldset>. Барои хомӯш кардани маҷмӯи майдонҳо дар ин браузерҳо JavaScript-и фармоиширо истифода баред.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Ҳолати танҳо барои хондан
Барои readonlyпешгирӣ кардани тағирёбии арзиши вуруд аттрибути логикиро ба вуруд илова кунед. Вурудҳои танҳо барои хондан сабуктар ба назар мерасанд (мисли вурудҳои ғайрифаъол), аммо курсори стандартиро нигоҳ медоранд.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Матни кӯмак
Матни кӯмаки сатҳи блок барои идоракунии форма.
Алоқаи матни кӯмак бо идоракунии форма
Матни кӯмак бояд ба таври возеҳ бо идоракунии форма, ки ба истифодаи атрибут алоқаманд аст, aria-describedbyалоқаманд бошад. Ин кафолат медиҳад, ки технологияҳои ёрирасон, ба монанди хонандагони экран, ин матни ёриро ҳангоми тамаркуз ё ворид шудани корбар ба идора эълон мекунанд.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Ҳолати тасдиқкунӣ
Bootstrap услубҳои тасдиқи хатогӣ, огоҳӣ ва ҳолати муваффақиятро дар идоракунии форма дар бар мегирад. Барои истифода, .has-warning, .has-error, ё .has-successба унсури волидайн илова кунед. Ҳама гуна .control-label, .form-control, ва .help-blockдар дохили он унсур сабкҳои тасдиқро қабул мекунанд.
Интиқоли ҳолати тасдиқкунӣ ба технологияҳои ёрирасон ва корбарони нобиноёни ранг
Истифодаи ин сабкҳои тасдиқкунӣ барои нишон додани ҳолати идоракунии форма танҳо нишонаи визуалӣ ва рангро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон - ё ба корбарони нобинои ранг интиқол дода намешавад.
Боварӣ ҳосил кунед, ки аломати алтернативии давлат низ пешниҳод карда мешавад. Масалан, шумо метавонед як ишораро дар бораи ҳолат дар <label>худи матни идоракунии форма дохил кунед (чунон ки дар мисоли рамзи зерин аст), Glyphicon дохил кунед (бо матни алтернативии мувофиқ бо истифода аз .sr-onlyсинф - ба мисолҳои Glyphicon нигаред ) ё бо пешниҳоди блоки матнии кӯмаки иловагӣ . Махсусан барои технологияҳои ёрирасон, назорати шаклҳои беэътибор низ метавонанд атрибут таъин карда шаванд aria-invalid="true".
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>Бо нишонаҳои ихтиёрӣ
Шумо инчунин метавонед нишонаҳои ихтиёрии фикру мулоҳизаҳоро бо илова .has-feedbackва нишонаи рост илова кунед.
Нишонаҳои бозгашт танҳо бо <input class="form-control">унсурҳои матнӣ кор мекунанд.
Нишонаҳо, нишонаҳо ва гурӯҳҳои воридотӣ
Ҷойгиркунии дастии нишонаҳои фикру мулоҳизаҳо барои вурудоти бидуни нишона ва барои гурӯҳҳои вуруд бо изофа дар тарафи рост талаб карда мешавад. Шумо ба таври ҷиддӣ ташвиқ карда мешавад, ки барои ҳама вурудот бо сабабҳои дастрасӣ нишонаҳо пешниҳод кунед. Агар шумо хоҳед, ки нишонаҳоро пешгирӣ кунед, онҳоро бо .sr-onlyсинф пинҳон кунед. Агар шумо бояд бе тамғакоғазҳо кор кунед, topарзиши тасвири бозгаштро танзим кунед. Барои гурӯҳҳои воридотӣ, rightвобаста ба паҳнои иловагии шумо арзишро ба арзиши мувофиқи пиксел танзим кунед.
Интиқоли маънои нишона ба технологияҳои ёрирасон
Барои таъмини он, ки технологияҳои ёрирасон, ба монанди хонандагони экран, маънои нишонаро дуруст интиқол медиҳанд, матни иловагии пинҳонӣ бояд ба .sr-onlyсинф дохил карда шавад ва ба таври возеҳ бо идоракунии форма, ки ба истифодаи aria-describedby. Интихобан, боварӣ ҳосил кунед, ки маъно (масалан, он аст, ки огоҳӣ барои майдони вуруди матни мушаххас мавҷуд аст) бо ягон шакли дигар интиқол дода мешавад, ба монанди тағир додани матни воқеии <label>бо назорати форма.
Гарчанде ки мисолҳои зерин аллакай ҳолати тасдиқи танзимоти шакли мувофиқи онҳоро дар <label>худи матн зикр кардаанд, техникаи дар боло зикршуда (бо истифода аз .sr-onlyматн ва aria-describedby) барои мақсадҳои тасвирӣ дохил карда шудааст.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Нишонаҳои ихтиёрӣ дар шаклҳои уфуқӣ ва дарунсохт
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Нишонаҳои ихтиёрӣ бо .sr-onlyтамғакоғазҳои пинҳон
Агар шумо .sr-onlyсинфро барои пинҳон кардани идоракунии форма истифода баред <label>(ба ҷои истифодаи дигар имконоти тамғагузорӣ, ба монанди aria-labelатрибут), Bootstrap ҳангоми илова кардани он мавқеи нишонаро ба таври худкор танзим мекунад.
(муваффақият)
@
(муваффақият)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Назорати андоза
Бо истифода аз синфҳои монанди , баландӣ .input-lgтаъин кунед ва паҳноиро бо истифода аз синфҳои сутуни шабакавӣ ба монанди .col-lg-*.
Андозаи баландии
Назорати шаклҳои баландтар ё кӯтоҳтареро созед, ки ба андозаи тугмаҳо мувофиқат мекунанд.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Андозаи гурӯҳи шакли уфуқӣ
Тавассути .form-horizontalилова .form-group-lgкардан ё .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Андозаи сутун
Воридҳоро дар сутунҳои шабакавӣ ё ягон унсури волидайни фармоишӣ печонед, то паҳнои дилхоҳро ба осонӣ татбиқ кунед.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Тугмаҳо
Тегҳои тугмаҳо
Синфҳои тугмаҳоро дар <a>, <button>, ё <input>элемент истифода баред.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Истифодаи контекст мушаххас
Дар ҳоле ки синфҳои тугмаҳо метавонанд дар <a>ва <button>унсурҳо истифода шаванд, дар дохили ҷузъҳои navbar ва navbar мо танҳо <button>унсурҳо дастгирӣ карда мешаванд.
Пайвандҳо ҳамчун тугмаҳо амал мекунанд
Агар <a>унсурҳо ҳамчун тугмаҳо истифода шаванд - ба ҷои гузаштан ба ҳуҷҷат ё қисмати дигар дар саҳифаи ҷорӣ - ангеза додани функсияҳои дохили саҳифа - ба онҳо инчунин бояд role="button".
Намоиши кросс-браузер
Ҳамчун як таҷрибаи беҳтарин, мо тавсия медиҳем, ки <button>унсурро то ҳадди имкон истифода барем, то мувофиқати визуалии байни браузерҳо таъмин карда шавад.
Дар байни чизҳои дигар, дар Firefox <30 хатогӣ мавҷуд аст , ки ба мо имкон намедиҳад, ки line-heightтугмаҳои <input>асосиро гузорем ва ба баландии тугмаҳои дигар дар Firefox комилан мувофиқат накунанд.
Имконот
Барои зуд сохтани тугмаи услубӣ ягон синфҳои дастрасро истифода баред.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно ба тугма танҳо нишонаи визуалиеро фароҳам меорад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (матни намоёни тугма) аён аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.
Андозаҳо
Тугмаҳои калонтар ё хурдтарро мехоҳед? .btn-lg, .btn-sm, ё .btn-xsбарои андозаҳои иловагӣ илова кунед .
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Тугмаҳои сатҳи блокро эҷод кунед - онҳое, ки паҳнои пурраи волидайнро дар бар мегиранд - бо илова кардани .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Ҳолати фаъол
Ҳангоми фаъол тугмаҳо пахш карда мешаванд (бо замина ториктар, сарҳади ториктар ва сояи дохилшуда). Барои <button>элементҳо, ин тавассути :active. Барои <a>элементҳо он бо анҷом дода мешавад .active. Аммо, агар шумо бояд ҳолати фаъолро ба таври барномавӣ такрор кунед, шумо метавонед .activeon <button>s -ро истифода баред (ва атрибутро дар бар гиред).aria-pressed="true"
Элементи тугма
Илова кардан лозим нест, :activeзеро он синфи псевдо-класс аст, аммо агар ба шумо лозим ояд, ки ҳамон намуди зоҳириро маҷбур кунед, идома диҳед ва илова кунед .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Унсури лангар
.activeСинфро ба <a>тугмаҳо илова кунед .
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Ҳолати ғайрифаъол
Тугмаҳоро бо пажмурда кардани онҳо бо opacity.
Элементи тугма
Аттрибутро disabledба <button>тугмаҳо илова кунед.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Мутобиқати кросс-браузер
Агар шумо ин disabledатрибутро ба <button>, Internet Explorer 9 ва поёнтар илова кунед, матни хокистарӣ бо сояи матнии бад, ки мо онро ислоҳ карда наметавонем.
Унсури лангар
.disabledСинфро ба <a>тугмаҳо илова кунед .
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Мо .disabledдар ин ҷо ҳамчун синфи коммуналӣ истифода мебарем, ки ба .activeсинфи умумӣ монанд аст, аз ин рӯ префикс талаб карда намешавад.
Огоҳӣ дар бораи функсияи пайванд
Ин синф pointer-events: noneбарои кӯшиши ғайрифаъол кардани функсияи истиноди <a>s истифода мебарад, аммо он амволи CSS ҳанӯз стандартизатсия нашудааст ва дар Opera 18 ва поёнтар ё дар Internet Explorer 11 пурра дастгирӣ намешавад. Илова бар ин, ҳатто дар браузерҳое, ки pointer-events: none, клавиатураро дастгирӣ мекунанд новбари бетаъсир мемонад, яъне корбарони клавиатураи бинодор ва корбарони технологияҳои ёрирасон метавонанд ин истинодҳоро фаъол созанд. Пас, барои бехатар будан, JavaScript-и фармоиширо барои хомӯш кардани чунин истинодҳо истифода баред.
Тасвирҳо
Тасвирҳои ҷавобӣ
Тасвирҳо дар Bootstrap 3 метавонанд тавассути илова кардани .img-responsiveсинфҳо ҷавобгӯ бошанд. Ин max-width: 100%;, height: auto;ва display: block;ба тасвир дахл дорад, то ки он ба унсури волидайн ба таври хуб андозагирӣ кунад.
Барои маркази тасвирҳое, ки .img-responsiveсинфро истифода мебаранд, .center-blockба ҷои .text-center. Барои тафсилоти бештар дар бораи истифода , ба бахши синфҳои ёрирасон нигаред..center-block
Тасвирҳои SVG ва IE 8-10
Дар Internet Explorer 8-10, тасвирҳои SVG бо .img-responsiveандозаи номутаносиб доранд. Барои ислоҳ кардани ин, width: 100% \9;дар ҷои зарурӣ илова кунед. Bootstrap инро ба таври худкор татбиқ намекунад, зеро он боиси мушкилот дар форматҳои дигари тасвир мегардад.
<img src="..." class="img-responsive" alt="Responsive image">Шаклҳои тасвир
Ба <img>элемент синфҳо илова кунед, то тасвирҳоро дар ҳама гуна лоиҳа ба осонӣ сабк кунед.
Мутобиқати кросс-браузер
Дар хотир доред, ки Internet Explorer 8 барои кунҷҳои мудавваршуда дастгирӣ намекунад.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Синфҳои ёрирасон
Рангҳои контекстӣ
Мафҳуми рангро бо як қатор дарсҳои муфиди диққат интиқол диҳед. Инҳо инчунин метавонанд ба истинодҳо татбиқ карда шаванд ва ба мисли услубҳои истинодҳои пешфарзии мо торик мешаванд.
Fusce dapibus, tellus ac cursus commodo, Tortor Mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Дуис моллис, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Этиам порта семина любовь любвие.
Donec ullamcorper nulla ғайримуқаррарӣ auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Муносибат бо мушаххасот
Баъзан синфҳои таъкидро аз сабаби хосияти интихобкунандаи дигар татбиқ кардан мумкин нест. Дар аксари мавридҳо, як роҳи ҳалли кофӣ ин аст, ки матни худро <span>бо синф печонед.
Интиқоли маъно ба технологияҳои ёрирасон
Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст ё аз худи мундариҷа возеҳ аст (рангҳои контекстӣ танҳо барои мустаҳкам кардани маънои дар матн/тамаркуз мавҷудбуда истифода мешаванд) ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешаванд. .
Заминаҳои контекстӣ
Монанди синфҳои рангҳои матнии контекстӣ, заминаи элементро ба ҳама гуна синфи контекстӣ ба осонӣ таъин кунед. Ҷузъҳои лангар, ба монанди синфҳои матн, дар вақти нишона торик мешаванд.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Дуис моллис, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Этиам порта семина любовь любвие.
Donec ullamcorper nulla ғайримуқаррарӣ auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Муносибат бо мушаххасот
Баъзан синфҳои заминавии контекстӣ бинобар хусусияти интихобкунандаи дигар татбиқ карда намешаванд. Дар баъзе мавридҳо, роҳи ҳалли кофӣ ин аст, ки мундариҷаи элементи худро дар a <div>бо синф печонед.
Интиқоли маъно ба технологияҳои ёрирасон
Мисли рангҳои контекстӣ , боварӣ ҳосил кунед, ки ҳама маънои тавассути ранг интиқолёфта низ дар формате интиқол дода мешавад, ки сирф муаррифӣ нест.
Нишонаи пӯшида
Барои рад кардани мундариҷа ба монанди модальҳо ва огоҳиҳо, нишонаи пӯшидаи умумиро истифода баред.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Карет
Барои нишон додани функсия ва самти афтанда каретҳоро истифода баред. Дар хотир доред, ки кареткаи пешфарз дар менюҳои афтанда ба таври худкор баръакс мешавад .
<span class="caret"></span>Парвозҳои зуд
Элементро бо синф ба тарафи чап ё рост шино кунед. !importantбарои пешгирии мушкилоти мушаххас дохил карда шудааст. Синфҳо инчунин метавонанд ҳамчун омехта истифода шаванд.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Блокҳои мундариҷаи марказӣ
Элементро ба display: blockвоситаи margin. Ҳамчун омехта ва синф дастрас аст.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
floatБо илова кардани .clearfix элементи волидайн s-ро ба осонӣ тоза кунед . Microclearfix -ро , ки аз ҷониби Николас Галлахер маъмул шудааст, истифода мебарад. Инчунин метавонад ҳамчун омехта истифода шавад.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Намоиш ва пинҳон кардани мундариҷа
Маҷбур кунед, ки унсурро бо истифода аз синфҳо нишон диҳед ё пинҳон кунед ( аз ҷумла барои хонандагони экран ). Ин синфҳо барои пешгирӣ кардани ихтилофоти мушаххас истифода мебаранд, ба монанди шинокунандаи зуд . Онҳо танҳо барои иваз кардани сатҳи блок дастрасанд. Онҳо инчунин метавонанд ҳамчун омехта истифода шаванд..show.hidden!important
.hideдастрас аст, аммо он на ҳамеша ба хонандагони экран таъсир мерасонад ва аз v3.0.1 бекор карда шудааст. Истифода .hiddenё .sr-onlyба ҷои.
Ғайр аз он, .invisibleметавонад танҳо барои иваз кардани намуди зоҳирии элемент истифода шавад, яъне он displayтағир дода нашудааст ва унсур то ҳол метавонад ба ҷараёни ҳуҷҷат таъсир расонад.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}Хонандаи экран ва мундариҷаи паймоиши клавиатура
Элементро дар ҳама дастгоҳҳо, ба истиснои хонандагони экран бо .sr-only. .sr-onlyБо якҷоя кунед, то элементро .sr-only-focusableҳангоми тамаркуз дубора нишон диҳед (масалан, аз ҷониби корбари танҳо клавиатура). Барои риояи таҷрибаҳои беҳтарини дастрасӣ зарур аст . Инчунин метавонад ҳамчун омехта истифода шавад.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Иваз кардани тасвир
.text-hideБарои иваз кардани мундариҷаи матни элемент бо тасвири замина аз синф ё омехта истифода баред.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Утилитаҳои ҷавобгӯ
Барои рушди зудтари мобилӣ, аз ин синфҳои хидматрасонӣ барои намоиш ва пинҳон кардани мундариҷа тавассути дастгоҳ тавассути дархости медиа истифода баред. Инчунин синфҳои утилитӣ барои иваз кардани мундариҷа ҳангоми чоп дохил карда шудаанд.
Кӯшиш кунед, ки онҳоро дар асоси маҳдуд истифода баред ва аз эҷоди версияҳои комилан гуногуни як сайт худдорӣ кунед. Ба ҷои ин, онҳоро барои пурра кардани ҳар як намоиши дастгоҳ истифода баред.
Синфҳои дастрас
Як ё омезиши синфҳои дастрасро барои иваз кардани мундариҷа дар байни нуқтаҳои кандашавии намоиш истифода баред.
| Дастгоҳҳои хурди иловагӣТелефонҳо (<768px) | Дастгоҳҳои хурдТаблетҳо (≥768px) | Дастгоҳҳои миёнаМизи кории (≥992px) | Дастгоҳҳои калонМизи кории (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
намоён | Пинҳон | Пинҳон | Пинҳон |
.visible-sm-* |
Пинҳон | намоён | Пинҳон | Пинҳон |
.visible-md-* |
Пинҳон | Пинҳон | намоён | Пинҳон |
.visible-lg-* |
Пинҳон | Пинҳон | Пинҳон | намоён |
.hidden-xs |
Пинҳон | намоён | намоён | намоён |
.hidden-sm |
намоён | Пинҳон | намоён | намоён |
.hidden-md |
намоён | намоён | Пинҳон | намоён |
.hidden-lg |
намоён | намоён | намоён | Пинҳон |
Аз v3.2.0, .visible-*-*синфҳо барои ҳар як нуқтаи қатъшавӣ дар се вариант меоянд, яке барои ҳар як displayарзиши моликияти CSS дар зер оварда шудааст.
| Гурӯҳи синфҳо | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
xsМасалан, барои экранҳои хурди иловагӣ ( ) .visible-*-*синфҳои дастрас инҳоянд: .visible-xs-block, .visible-xs-inline, ва .visible-xs-inline-block.
Синфҳои .visible-xs, .visible-sm, .visible-md, ва .visible-lgинчунин мавҷуданд, аммо аз v3.2.0 бекор карда шудаанд . Онҳо тақрибан ба - баробаранд .visible-*-block, ба истиснои ҳолатҳои махсуси иловагӣ барои иваз кардани <table>унсурҳои марбут.
Дарсҳои чопӣ
Монанди синфҳои муқаррарии ҷавобгӯ, онҳоро барои иваз кардани мундариҷа барои чоп истифода баред.
| Синфҳо | Браузер | Чоп кардан |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Пинҳон | намоён |
.hidden-print |
намоён | Пинҳон |
Синф .visible-printниз вуҷуд дорад, аммо аз v3.2.0 бекор карда шудааст. Он тақрибан ба - баробар аст .visible-print-block, ба истиснои ҳолатҳои махсуси иловагӣ барои <table>унсурҳои марбут.
Ҳолатҳои санҷишӣ
Андозаи браузери худро тағир диҳед ё ба дастгоҳҳои гуногун бор кунед, то синфҳои хидматрасонии ҷавобгӯро санҷед.
Дар...
Аломатҳои сабз нишон медиҳанд, ки элемент дар намоишгоҳи ҳозираи шумо намоён аст .
Хеле хурд
✔ Дар x-small намоён аст
Хурд
✔ Дар хурд намоён аст
Миёна
✔ Дар миёна намоён аст
Калон
✔ Дар калон намоён аст
✔ Дар x-хурд ва хурд намоён аст
✔ Дар миёна ва калон намоён аст
✔ Дар x-хурд ва миёна намоён аст
✔ Дар хурд ва калон намоён аст
✔ Дар x-хурд ва калон намоён аст
✔ Дар хурд ва миёна намоён аст
Пинҳон дар...
Дар ин ҷо, аломатҳои сабз инчунин нишон медиҳанд, ки элемент дар намоишгоҳи ҷории шумо пинҳон аст .
Истифодаи камтар
CSS-и Bootstrap дар Less сохта шудааст, як протсессори пешакӣ бо функсияҳои иловагӣ ба монанди тағирёбандаҳо, миксинҳо ва функсияҳо барои тартиб додани CSS. Онҳое, ки мехоҳанд ба ҷои файлҳои CSS-и тартибдодаи мо файлҳои манбаи Less-ро истифода баранд, метавонанд аз тағирёбандаҳо ва омехтаҳои сершумори мо дар тамоми чаҳорчӯба истифода баранд.
Тағйирёбандаҳои шабакавӣ ва омехтаҳо дар қисми системаи Grid фаро гирифта шудаанд .
Тартиб додани Bootstrap
Bootstrap-ро ҳадди аққал бо ду роҳ истифода бурдан мумкин аст: бо CSS-и тартибдодашуда ё бо файлҳои манбаи Less. Барои тартиб додани файлҳои камтар, ба бахши Оғози кор муроҷиат кунед, то ки чӣ гуна муҳити таҳияи худро барои иҷро кардани фармонҳои зарурӣ танзим кунед.
Воситаҳои таҳияи тарафи сеюм метавонанд бо Bootstrap кор кунанд, аммо онҳо аз ҷониби дастаи асосии мо дастгирӣ намешаванд.
Тағйирёбандаҳо
Тағйирёбандаҳо дар тамоми лоиҳа ҳамчун як роҳи мутамарказ ва мубодилаи арзишҳои маъмулан истифодашаванда ба монанди рангҳо, фосила ё стекҳои шрифт истифода мешаванд. Барои тақсимоти пурра, лутфан ба Фармоишгар нигаред .
Рангҳо
Ду схемаи рангро ба осонӣ истифода баред: хокистарранг ва семантикӣ. Рангҳои хокистарӣ дастрасии зудро ба сояҳои маъмулан истифодашавандаи сиёҳ таъмин мекунанд, дар ҳоле ки семантикӣ рангҳои гуногунеро, ки ба арзишҳои контекстиии пурмазмун таъин шудаанд, дар бар мегирад.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Ҳар яке аз ин тағирёбандаҳои рангро ҳамон тавре ки ҳастанд, истифода баред ё онҳоро ба тағирёбандаҳои муҳимтар барои лоиҳаи худ таъин кунед.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Исҳоқсозӣ
Якчанд тағирёбандаҳо барои зуд танзим кардани унсурҳои асосии скелети сайти шумо.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Пайвандҳо
Истинодҳои худро бо ранги дуруст танҳо бо як арзиш ба осонӣ услуб кунед.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Аҳамият диҳед, ки он @link-hover-colorфунксия, як абзори олиҷаноби Less -ро барои ба таври худкор эҷод кардани ранги рости рост истифода мебарад. Шумо метавонед darken, lighten, saturate, ва -ро истифода баред desaturate.
Типография
Бо чанд тағирёбандаи зуд шакли шрифт, андозаи матн, пешбаранда ва ғайраро ба осонӣ танзим кунед. Bootstrap аз инҳо низ истифода мебарад, то омехтаҳои типографии осонро таъмин кунад.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Нишонаҳо
Ду тағирёбандаи зуд барои танзими ҷойгиршавӣ ва номи файли нишонаҳо.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Компонентхо
Компонентҳо дар тамоми Bootstrap барои муқаррар кардани арзишҳои умумӣ баъзе тағирёбандаҳои пешфарзро истифода мебаранд. Дар ин ҷо маъмултарин истифода мешаванд.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Миксҳои фурӯшанда
Миксинҳои фурӯшанда омехтаҳо мебошанд, ки барои дастгирии браузерҳои сершумор тавассути дохил кардани ҳама префиксҳои дахлдори фурӯшанда дар CSS-и тартибдодаатон кӯмак мерасонанд.
Андозаи қуттӣ
Модели қуттии ҷузъҳои худро бо як омехта барқарор кунед. Барои контекст, ба ин мақолаи муфид аз Mozilla нигаред .
Миксин аз v3.2.0 бо ҷорӣ намудани Autoprefixer бекор карда шудааст. Барои нигоҳ доштани мутобиқат ба ақиб, Bootstrap то Bootstrap v4 истифода бурдани миксинро дар дохили худ идома медиҳад.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Гӯшаҳои мудавваршуда
Имрӯз ҳама браузерҳои муосир border-radiusмоликияти префиксиро дастгирӣ мекунанд. Ҳамин тавр, омехта вуҷуд надорад .border-radius(), аммо Bootstrap миёнабурҳоро барои зуд мудаввар кардани ду кунҷ дар як тарафи мушаххаси объект дар бар мегирад.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Сояҳои қуттӣ (тарки).
Агар шунавандагони мақсадноки шумо браузерҳо ва дастгоҳҳои навтарин ва беҳтаринро истифода баранд, боварӣ ҳосил кунед, ки box-shadowамволро танҳо худаш истифода баред. Агар ба шумо барои дастгоҳҳои кӯҳнаи Android (пеш аз v4) ва iOS (пеш аз iOS 5) дастгирӣ эҳтиёҷ дошта бошед, барои гирифтани префикси зарурӣ омехтаи бекоршударо истифода баред.-webkit
Миксин аз v3.1.0 бекор карда шудааст, зеро Bootstrap платформаҳои кӯҳнаро, ки моликияти стандартиро дастгирӣ намекунанд, расман дастгирӣ намекунад. Барои нигоҳ доштани мутобиқат ба ақиб, Bootstrap то Bootstrap v4 истифода бурдани миксинро дар дохили худ идома медиҳад.
Боварӣ ҳосил кунед, ки rgba()рангҳоро дар сояҳои қуттии худ истифода баред, то онҳо бо замина то ҳадди имкон бефосила омехта шаванд.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Гузаришҳо
Омехтаҳои сершумор барои чандирӣ. Ҳама маълумоти гузаришро бо як насб кунед ё агар лозим бошад, таъхир ва давомнокии алоҳидаро муайян кунед.
Миксинҳо аз v3.2.0 бо ҷорӣ намудани Autoprefixer бекор карда шудаанд. Барои нигоҳ доштани мутобиқат ба ақиб, Bootstrap то Bootstrap v4 истифодаи омехтаҳоро дар дохили худ идома медиҳад.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Трансформатсияҳо
Ҳар як объектро гардиш кунед, миқёс кунед, тарҷума кунед (кӯчонед) ё каҷ кунед.
Миксинҳо аз v3.2.0 бо ҷорӣ намудани Autoprefixer бекор карда шудаанд. Барои нигоҳ доштани мутобиқат ба ақиб, Bootstrap то Bootstrap v4 истифодаи омехтаҳоро дар дохили худ идома медиҳад.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Аниматсияҳо
Миксин ягона барои истифодаи тамоми хосиятҳои аниматсияи CSS3 дар як эъломия ва дигар омехтаҳо барои хосиятҳои инфиродӣ.
Миксинҳо аз v3.2.0 бо ҷорӣ намудани Autoprefixer бекор карда шудаанд. Барои нигоҳ доштани мутобиқат ба ақиб, Bootstrap то Bootstrap v4 истифодаи омехтаҳоро дар дохили худ идома медиҳад.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Шаффофият
Шаффофиятро барои ҳама браузерҳо муқаррар кунед ва filterбарои IE8 бозгашт таъмин кунед.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Матни ҷойнишин
Барои идоракунии форма дар ҳар як майдон контекст пешниҳод кунед.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Сутунҳо
Тавассути CSS дар дохили як элемент сутунҳо эҷод кунед.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Градиентҳо
Ҳар ду рангро ба осонӣ ба градиенти замина табдил диҳед. Мукаммалтар шавед ва самт таъин кунед, се рангро истифода баред ё градиенти радиалиро истифода баред. Бо як миксин шумо тамоми синтаксисҳои префиксиро, ки ба шумо лозим аст, мегиред.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Шумо инчунин метавонед кунҷи градиенти дурангии стандартиро муайян кунед:
#gradient > .directional(#333; #000; 45deg);Агар ба шумо градиенти рахи сартарош лозим бошад, ин ҳам осон аст. Танҳо як рангро муайян кунед ва мо рахи сафеди шаффофро дар бар мегирем.
#gradient > .striped(#333; 45deg);Антеро боло кунед ва ба ҷои он се рангро истифода баред. Ранги якум, ранги дуюм, қатъи ранги дуюм (қимати фоиз ба монанди 25%) ва ранги сеюмро бо ин омехтаҳо насб кунед:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Сарҳо боло! Агар ба шумо ягон бор лозим шавад, ки градиентро нест кунед, боварӣ ҳосил кунед, ки ҳама гуна IE-ро, ки filterшумо илова кардаед, нест кунед. Шумо метавонед ин корро бо истифода аз .reset-filter()омехта дар баробари background-image: none;.
Омехтаҳои коммуналӣ
Миксинҳои утилитӣ омехтаҳое мебошанд, ки хосиятҳои ба таври дигар ба ҳам алоқаманди CSS-ро барои ноил шудан ба ҳадаф ё вазифаи мушаххас муттаҳид мекунанд.
Clearfix
class="clearfix"Илова кардани ягон элементро фаромӯш кунед ва ба ҷои он, .clearfix()ки мувофиқ бошад, омехтаро илова кунед. Microclearfix аз Николас Галлахерро истифода мебарад .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Марказгузории уфуқӣ
Ҳама гуна элементро дар дохили волидайни худ зуд марказ кунед. Талаб мекунад widthё max-widthмуқаррар карда мешавад.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Ёрдамчиёни андозагирӣ
Андозаи объектро осонтар муайян кунед.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Майдонҳои матнии тағирёбанда
Имконоти тағир додани андозаро барои ҳар як майдони матн ё ягон унсури дигар ба осонӣ танзим кунед. Пешфарз ба рафтори муқаррарии браузер ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Кӯр кардани матн
Матнро бо эллипс бо як миксин ба осонӣ буред. Элемент blockё inline-blockсатҳро талаб мекунад.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Тасвирҳои ретина
Ду роҳи тасвир ва андозаи @1x тасвирро муайян кунед ва Bootstrap дархости медиаи @2x-ро таъмин мекунад. Агар шумо барои хидмат тасвирҳои зиёде дошта бошед, фикр кунед, ки тасвири ретинавии CSS-и худро ба таври дастӣ дар як дархости медиавӣ нависед.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Истифодаи Sass
Дар ҳоле ки Bootstrap дар Less сохта шудааст, он инчунин порти расмии Sass дорад. Мо онро дар як анбори алоҳидаи GitHub нигоҳ медорем ва навсозиро бо скрипти табдилдиҳӣ идора мекунем.
Чӣ дохил карда шудааст
Азбаски бандари Sass репои алоҳида дорад ва ба аудиторияи каме дигар хизмат мерасонад, мундариҷаи лоиҳа аз лоиҳаи асосии Bootstrap хеле фарқ мекунад. Ин кафолат медиҳад, ки бандари Sass ба қадри имкон бо бисёр системаҳои Sass асос ёфтааст.
| Роҳ | Тавсифи |
|---|---|
lib/ |
Рамзи ганҷҳои Ruby (конфигуратсияи Sass, ҳамгироии Rails ва Compass) |
tasks/ |
Скриптҳои конвертерӣ (табдил додани Less ба Sass) |
test/ |
Санҷишҳои компиляция |
templates/ |
Манифести бастаи компас |
vendor/assets/ |
Sass, JavaScript ва файлҳои шрифт |
Rakefile |
Вазифаҳои дохилӣ, ба монанди рейк ва табдил |
Барои дидани ин файлҳо ба анбори GitHub порти Sass муроҷиат кунед.
Насбкунӣ
Барои маълумот дар бораи чӣ гуна насб кардан ва истифода бурдани Bootstrap for Sass, ба хондани анбори GitHub муроҷиат кунед . Ин сарчашмаи муосиртарин буда, маълумотро барои истифода бо лоиҳаҳои Rails, Compass ва стандарти Sass дар бар мегирад.