Дар Bootstrap даҳҳо ҷузъҳои дубора истифодашаванда сохта шудаанд, то паймоиш, огоҳиҳо, поповҳо ва ғайраҳоро таъмин кунанд.
Саҳифабандии ултра содда ва ҳадди ақал услубӣ, ки аз ҷониби Rdio илҳом гирифта шудааст, барои барномаҳо ва натиҷаҳои ҷустуҷӯ олӣ аст. Блоки калонро аз даст додан душвор аст, ба осонӣ миқёспазир аст ва минтақаҳои калони кликро таъмин мекунад.
Истинодҳо танзимшавандаанд ва дар як қатор ҳолатҳо бо синфи дуруст кор мекунанд. .disabled
барои истинодҳои кликнашаванда ва .active
саҳифаи ҷорӣ.
Барои тағир додани ҳамбастагии пайвандҳои саҳифабандӣ яке аз ду синфи ихтиёриро илова кунед: .pagination-centered
ва .pagination-right
.
Ҷузъи пешфарзии саҳифагузорӣ чандир аст ва дар як қатор вариантҳо кор мекунад.
Парпечшуда дар як <div>
, саҳифагузорӣ танҳо як <ul>
аст.
- <div class="pagination"> class = "саҳифабандӣ" >
- <ul>
- <li><a href = "#" > Пешина </a></li>
- <li class = "фаъол" >
- <a href = "#" > 1 </a>
- </li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Оянда </a></li>
- </ul>
- </div>
Ҷузъи пейҷер маҷмӯи истинодҳо барои татбиқи оддии саҳифагузорӣ бо аломатгузории сабук ва услубҳои ҳатто сабуктар аст. Ин барои сайтҳои оддӣ ба монанди блогҳо ё маҷаллаҳо хеле хуб аст.
Бо нобаёнӣ, пейджер истинодҳоро марказ мекунад.
- <ul class="pager"> class = "пейжер" >
- <li>
- <a href = "#" > Пешина </a>
- </li>
- <li>
- <a href = "#" > Оянда </a>
- </li>
- </ul>
Интихобан, шумо метавонед ҳар як пайвандро ба паҳлӯҳо мувофиқ созед:
- <ul class="pager"> class = "пейжер" >
- <li class = "пешина" >
- <a href = "#" > ← калонсол </a>
- </li>
- <li синфи = "оянда" >
- <a href = "#" > Навтар → </a>
- </li>
- </ul>
Тамғакоғазҳо | Нишондиҳӣ |
---|---|
Пешфарз | <span class="label">Default</span> |
Муваффакият | <span class="label label-success">Success</span> |
Огоҳӣ | <span class="label label-warning">Warning</span> |
Муҳим | <span class="label label-important">Important</span> |
Маълумот | <span class="label label-info">Info</span> |
Bootstrap як ҷузъи сабук ва чандирро таъмин мекунад, ки барои намоиш додани мундариҷа дар сайти шумо воҳиди қаҳрамон номида мешавад. Он дар сайтҳои маркетинг ва мундариҷаи вазнин хуб кор мекунад.
Мундариҷаи худро ба div
монанди монанд гузоред:
- <div class="qhramon-unit"> синф = "қаҳрамон-воҳид" >
- <h1> Сарлавҳа </h1>
- <p> Тасвир </p>
- <p>
- <a class = "btn btn-primary btn-lage" >
- Бисёр омӯхтан
- </a>
- </p>
- </div>
Ин як воҳиди оддии қаҳрамон, як ҷузъи оддии ҷамботрон барои ҷалби таваҷҷӯҳи иловагӣ ба мундариҷа ё иттилооти мушаххас аст.
Як қабати оддӣ барои h1
ҷойгиркунии мувофиқ ва тақсим кардани қисмҳои мундариҷа дар саҳифа. Он метавонад h1
пешфарз small
, элемент ва инчунин аксари ҷузъҳои дигарро (бо сабкҳои иловагӣ) истифода барад.
- <div class="page-haeder"> class = "page-haeder" >
- <h1> Намунаи сарлавҳаи саҳифа </h1>
- </div>
Бо нобаёнӣ, ангораҳои Bootstrap барои намоиш додани тасвирҳои алоқаманд бо аломати ҳадди ақали зарурӣ тарҳрезӣ шудаанд.
Бо каме аломатгузории иловагӣ, мумкин аст, ки ҳама гуна мундариҷаи HTML-ро ба монанди сарлавҳаҳо, параграфҳо ё тугмаҳо ба эскизҳо илова кунед.
Эскизҳо (қаблан .media-grid
то v1.4) барои шабакаҳои аксҳо ё видеоҳо, натиҷаҳои ҷустуҷӯи тасвирҳо, маҳсулоти чакана, портфелҳо ва ғайра бузурганд. Онҳо метавонанд истинодҳо ё мундариҷаи статикӣ бошанд.
Нишон додани тасвири ангора оддӣ аст - ul
бо ҳама гуна шумораи li
элементҳо танҳо лозим аст. Он инчунин хеле чандир аст ва имкон медиҳад, ки ҳама гуна мундариҷа бо каме бештар аломатгузорӣ карда шавад, то мундариҷаи шуморо фаро гирад.
Ниҳоят, ҷузъи эскизҳо синфҳои мавҷудаи системаи шабакавиро истифода мебарад - ба монанди .span2
ё .span3
- барои назорати андозаҳои эскиз.
Тавре ки қаблан зикр гардид, аломатгузории зарурӣ барои эскизҳо сабук ва осон аст. Дар ин ҷо ба танзимоти пешфарз барои тасвирҳои алоқаманд нигаред :
- <ul class="thumbnails"> class = "анғазҳо" >
- <li class = "span3" >
- <a href = "#" class = "анғаз" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Барои мундариҷаи HTML-и фармоишӣ дар эскизҳо, аломатгузорӣ каме тағир меёбад. Барои иҷозат додан ба мундариҷаи сатҳи блок дар ҳама ҷо, мо онро <a>
ба <div>
монанди ин иваз мекунем:
- <ul class="thumbnails"> class = "анғазҳо" >
- <li class = "span3" >
- <div class = "анғаз" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Нишони ангораи </h5>
- <p> Сарлавҳаи хурд дар ин ҷо... </p>
- </div>
- </li>
- ...
- </ul>
Бо Bootstrap 2, мо синфи асосиро содда кардем: .alert
ба ҷои .alert-message
. Мо инчунин ҳадди ақали тамғаи заруриро кам кардем <p>
- ба таври нобаёнӣ ҳеҷ талаб карда намешавад, танҳо берунии <div>
.
Барои як ҷузъи устувортар бо рамзи камтар, мо намуди фарқкунандаи огоҳиҳои блок, паёмҳоеро, ки бо пуркунии бештар ва маъмулан матни бештар меоянд, хориҷ кардем. Синф низ ба .alert-block
.
Bootstrap бо як плагини бузурги jQuery меояд, ки паёмҳои огоҳкуниро дастгирӣ мекунад ва онҳоро зуд ва осон нест мекунад.
Паёми худ ва тасвири пӯшидаи ихтиёриро дар div бо синфи оддӣ печонед.
- <div class="alert"> синф = "огоҳӣ" >
- <a class = "close" data-dississ = "alert" > × </a>
- <strong> Огоҳӣ! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед.
- </div>
Паёми огоҳии стандартиро бо ду синфи ихтиёрӣ ба осонӣ васеъ кунед: .alert-block
барои пуркунии бештар ва назорати матн ва .alert-heading
барои сарлавҳаи мувофиқ.
Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед. Nulla vitae elit libero, a augue pharetra. Тамошо кунед, ки шумо метавонед ба таври васеъ истифода баред.
- <div class="alert alert-block"> class = "alert alert-block" >
- <a class = "close" data-dississ = "alert" > × </a>
- <h4 class = "alert-heading" > Огоҳӣ! </h4>
- Беҳтараш худатро санҷед, шумо не...
- </div>
- <div class="alert alert-error"> class = "alert alert-error" >
- ...
- </div>
- <div class="alert alert-success"> class = "alert alert-success" >
- ...
- </div>
- <div class="alert alert-info"> class = "alert alert-info" >
- ...
- </div>
Сатри пешфарз бо градиенти амудӣ.
- <div class="progress"> синф = "пешрафт" >
- <div class = "бар"
- style = " паҳнои : 60 %; " ></div>
- </div>
Барои эҷод кардани эффекти рахдор градиентро истифода мебарад.
- <div class="пешрафт-маълумот class = "пешрафти маълумот
- пешравй-рах» >
- <div class = "бар"
- style = " паҳнои : 20 %; " ></div>
- </div>
Намунаи рахро мегирад ва онро аниме мекунад.
- <div class = пешрафт-хатар синф = "пешрафт-хатар
- пешрави-хатти фаъол» >
- <div class = "бар"
- style = " паҳнои : 40 %; " ></div>
- </div>
Барҳои пешрафт баъзе аз ҳамон номҳои синфро ҳамчун тугмаҳо ва огоҳиҳо барои ороиши шабеҳ истифода мебаранд.
.progress-info
.progress-success
.progress-danger
Интихобан, шумо метавонед файлҳои LESS-ро танзим кунед ва рангҳо ва андозаҳои худро тағир диҳед.
Барҳои пешравӣ гузаришҳои CSS3-ро истифода мебаранд, аз ин рӯ, агар шумо паҳниро тавассути javascript ба таври динамикӣ танзим кунед, он ба таври осон андоза тағйир меёбад.
Агар шумо .active
синфро истифода баред, .progress-striped
панҷараҳои пешрафти шумо рахҳои чап ба ростро аниматсионӣ хоҳанд кард.
Барҳои пешрафт градиентҳо, гузаришҳо ва аниматсияҳои CSS3-ро барои ноил шудан ба ҳама эффектҳои худ истифода мебаранд. Ин хусусиятҳо дар IE7-8 ё версияҳои кӯҳнаи Firefox дастгирӣ намешаванд.
Opera дар айни замон аниматсияҳоро дастгирӣ намекунад.
Чӯҷаро ҳамчун эффекти оддӣ ба элемент истифода баред, то ба он эффекти дохилӣ диҳад.
- <div class="хуб"> синф = "хуб" >
- ...
- </div>
Барои рад кардани мундариҷа ба монанди модальҳо ва огоҳиҳо, нишонаи пӯшидаи умумиро истифода баред.
- <a class="close">×</a> class = "наздик" > × </a>