Компонентхо

Даҳҳо ҷузъҳои аз нав истифодашаванда барои таъмини навигатсия, огоҳиҳо, поповҳо ва ғайра сохта шудаанд.

Мисолхо

Ду варианти асосӣ, дар якҷоягӣ бо ду варианти мушаххас.

Гурӯҳи тугмаи ягона

Як қатор тугмаҳоро бо .btnдар .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Чап </тугма>
  3. <button class = "btn" > Миёна </button>
  4. <button class = "btn" > Рост </button>
  5. </div>

Гурӯҳҳои сершумори тугмаҳо

Маҷмӯаҳои <div class="btn-group">a- <div class="btn-toolbar">ро барои ҷузъҳои мураккабтар муттаҳид кунед.

  1. <div class = "btn-panel" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Гурӯҳҳои тугмаҳои амудӣ

Маҷмӯи тугмаҳоро на ба таври уфуқӣ амудӣ ҷойгир кунед.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Қуттии қайд ва маззаҳои радио

Гурӯҳҳои тугмаҳо инчунин метавонанд ҳамчун радио амал кунанд, ки дар он танҳо як тугма фаъол бошад ё қуттиҳои қайдкуние, ки дар он шумораи дилхоҳ тугмаҳо метавонанд фаъол бошанд. Барои ин ҳуҷҷатҳои JavaScript-ро бинед .

Намоишҳои афтанда дар гурӯҳҳои тугмаҳо

Сарҳо боло!.btn-groupТугмаҳои дорои афтандаҳо бояд ба таври инфиродӣ дар дохили худ печонида шаванд .btn-toolbar.

Барраси ва мисолҳо

Ҳар гуна тугмаро истифода баред, то менюи афтандаро тавассути ҷойгир кардани он дар дохили a .btn-groupва таъмин кардани аломати дурусти меню эҷод кунед.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "download" href = "#" >
  3. Амал
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

Бо ҳама андозаи тугмаҳо кор мекунад

Тугмаҳои афтанда дар ҳама гуна андоза кор мекунанд: .btn-large, .btn-small, ё .btn-mini.

JavaScript-ро талаб мекунад

Тугмаҳои афтанда барои кор кардани плагини афтанда Bootstrap талаб мекунанд .

Дар баъзе мавридҳо, ба монанди мобилӣ, менюҳои афтанда берун аз намоишгоҳ васеъ мешаванд. Шумо бояд ҳамоҳангсозиро дастӣ ё бо JavaScript фармоишӣ ҳал кунед.


Тугмаҳои афтанда тақсим кунед

Бар асоси услубҳои гурӯҳи тугмаҳо ва аломатгузорӣ, мо метавонем ба осонӣ тугмаи тақсимкунӣ эҷод кунем. Тугмаҳои тақсимкунӣ амали стандартиро дар тарафи чап ва гузариши афтанда дар тарафи рост бо истинодҳои контекстӣ доранд.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Амалиёт </button>
  3. < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >
  4. <span class = "caret" ></span>
  5. </ тугма >
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

Андозаҳо

Аз синфҳои иловагӣ тугмаҳои .btn-mini, .btn-small, ё .btn-largeбарои андозагирӣ истифода баред.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Амалиёт </button>
  3. < класси тугма = "btn btn-mini dropdown-toggle" data-toggle = " афтанда " >
  4. <span class = "caret" ></span>
  5. </ тугма >
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

Менюҳои афтанда

Менюҳои афтанда инчунин метавонанд бо илова кардани як синф ба волидайни фаврии .dropdown-menu. Он самти .caretменюро тағир медиҳад ва худи менюро иваз мекунад, то аз поён боло ба ҷои боло ба поён ҳаракат кунад.

  1. <div class = "btn-group drop" >
  2. <button class = "btn" > Тарки </button>
  3. < синфи тугма = "btn dropdown-toggle" data-toggle = " афтанда " >
  4. <span class = "caret" ></span>
  5. </ тугма >
  6. <ul class = "менюи афтанда" >
  7. <!-- пайвандҳои менюи афтанда -->
  8. </ul>
  9. </div>

Саҳифабандии стандартӣ

Саҳифабандии оддӣ, ки аз ҷониби Rdio илҳом гирифта шудааст, барои барномаҳо ва натиҷаҳои ҷустуҷӯ олӣ аст. Блоки калонро аз даст додан душвор аст, ба осонӣ миқёспазир аст ва минтақаҳои калони кликро таъмин мекунад.

  1. <div class = "саҳифагузорӣ" >
  2. <ul>
  3. <li><a href = "#" > Пешина </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Оянда </a></li>
  10. </ul>
  11. </div>

Имконот

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

Истинодҳо барои ҳолатҳои гуногун танзим карда мешаванд. .disabledБарои истинодҳои кликнашаванда ва .activeнишон додани саҳифаи ҷорӣ истифода баред .

  1. <div class = "саҳифагузорӣ" >
  2. <ul>
  3. <li class = "фаъол" ><a href = "#" > « </a></li>
  4. <li class = "фаъол" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "саҳифагузорӣ" >
  2. <ul>
  3. <li class = "фаъол" ><span> « </span></li>
  4. <li class = "фаъол" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Андозаҳо

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

  1. <div class = "pagination pagination-lage" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "саҳифагузорӣ" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Ҳамоҳангсозӣ

Яке аз ду синфи ихтиёриро барои тағир додани ҳамоҳангии пайвандҳои саҳифагузорӣ илова кунед: .pagination-centeredва .pagination-right.

  1. <div class = "саҳифакунонӣ-маркази саҳифагузорӣ" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Пейжер

Истинодҳои фаврии қаблӣ ва оянда барои татбиқи оддии саҳифагузорӣ бо аломатгузории равшан ва услубҳо. Ин барои сайтҳои оддӣ ба монанди блогҳо ё маҷаллаҳо хеле хуб аст.

Намунаи пешфарз

Бо нобаёнӣ, пейджер истинодҳоро марказ мекунад.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Пешина </a></li>
  3. <li><a href = "#" > Оянда </a></li>
  4. </ul>

Пайвандҳои ҳамоҳангшуда

Интихобан, шумо метавонед ҳар як пайвандро ба паҳлӯҳо мувофиқ созед:

  1. <ul class = "pager" >
  2. <li class = "пешина" >
  3. <a href = "#" > калонсол </a>
  4. </li>
  5. <li синфи = "оянда" >
  6. <a href = "#" > Навтар → </a>
  7. </li>
  8. </ul>

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

Истинодҳои пейжерӣ инчунин .disabledсинфи умумии утилитаро аз саҳифабандӣ истифода мебаранд.

  1. <ul class = "pager" >
  2. <li class = "маъюбони қаблӣ" >
  3. <a href = "#" > калонсол </a>
  4. </li>
  5. ...
  6. </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>
Баръакс <span class="label label-inverse">Inverse</span>

Нишонҳо

Ном Мисол Нишондиҳӣ
Пешфарз 1 <span class="badge">1</span>
Муваффакият 2 <span class="badge badge-success">2</span>
Огоҳӣ 4 <span class="badge badge-warning">4</span>
Муҳим 6 <span class="badge badge-important">6</span>
Маълумот 8 <span class="badge badge-info">8</span>
Баръакс 10 <span class="badge badge-inverse">10</span>

Ба осонӣ пӯшидашаванда

Барои татбиқи осон, тамғакоғазҳо ва нишонҳо танҳо фурӯ хоҳанд рафт (тавассути :emptyселектори CSS), вақте ки дар дохили он мундариҷа мавҷуд нест.

Воҳиди қаҳрамон

Ҷузъи сабук ва фасеҳ барои намоиш додани мундариҷаи калидӣ дар сайти шумо. Он дар сайтҳои маркетинг ва мундариҷаи вазнин хуб кор мекунад.

Салом Ҷаҳон!

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

Бисёр омӯхтан

  1. <div class = "қаҳрамон-воҳид" >
  2. <h1> Сарлавҳа </h1>
  3. <p> Тасвир </p>
  4. <p>
  5. <a class = "btn btn-primary btn-lage" >
  6. Бисёр омӯхтан
  7. </a>
  8. </p>
  9. </div>

Сарлавҳаи саҳифа

Як қабати оддӣ барои h1ҷойгиркунии мувофиқ ва тақсим кардани қисмҳои мундариҷа дар саҳифа. Он метавонад h1пешфарз small, элемент ва инчунин аксари ҷузъҳои дигарро (бо сабкҳои иловагӣ) истифода барад.

  1. <div class = "сарлавҳаи саҳифа" >
  2. <h1> Намунаи сарлавҳаи саҳифа <small> Зерматн барои сарлавҳа </small></h1>
  3. </div>

Суратҳои пешфарз

Бо нобаёнӣ, ангораҳои Bootstrap барои намоиш додани тасвирҳои алоқаманд бо аломати ҳадди ақали зарурӣ тарҳрезӣ шудаанд.

Хеле танзимшаванда

Бо каме аломатгузории иловагӣ, мумкин аст, ки ҳама гуна мундариҷаи HTML-ро ба монанди сарлавҳаҳо, параграфҳо ё тугмаҳо ба эскизҳо илова кунед.

  • 300x200

    Нишони ангора

    Дар ин ҷо хеле осон аст, дар он ҷо осонтар мешавад. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Амал Амал

  • 300x200

    Нишони ангора

    Дар ин ҷо хеле осон аст, дар он ҷо осонтар мешавад. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Амал Амал

  • 300x200

    Нишони ангора

    Дар ин ҷо хеле осон аст, дар он ҷо осонтар мешавад. Donec id elit non mi porta gravida ва дар вақти дилхоҳ. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Амал Амал

Чаро эскизҳоро истифода баред

Эскизҳо (қаблан .media-gridто v1.4) барои шабакаҳои аксҳо ё видеоҳо, натиҷаҳои ҷустуҷӯи тасвирҳо, маҳсулоти чакана, портфелҳо ва ғайра бузурганд. Онҳо метавонанд истинодҳо ё мундариҷаи статикӣ бошанд.

Нишондиҳии оддӣ, чандир

Нишон додани тасвири ангора оддӣ аст - ulбо ҳама гуна шумораи liэлементҳо танҳо лозим аст. Он инчунин хеле чандир аст ва имкон медиҳад, ки ҳама гуна мундариҷа бо каме бештар аломатгузорӣ карда шавад, то мундариҷаи шуморо фаро гирад.

Андозаи сутуни шабакаро истифода мебарад

Ниҳоят, ҷузъи эскизҳо синфҳои мавҷудаи системаи шабакавиро истифода мебарад - ба монанди .span2ё .span3- барои назорати андозаҳои эскиз.

Нишондиҳӣ

Тавре ки қаблан зикр гардид, аломатгузории зарурӣ барои эскизҳо сабук ва осон аст. Дар ин ҷо ба танзимоти пешфарз барои тасвирҳои алоқаманд нигаред :

  1. <ul class = "анҷараҳо" >
  2. <li class = "span4" >
  3. <a href = "#" class = "анғаз" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Барои мундариҷаи HTML-и фармоишӣ дар эскизҳо, аломатгузорӣ каме тағир меёбад. Барои иҷозат додан ба мундариҷаи сатҳи блок дар ҳама ҷо, мо онро <a>ба <div>монанди ин иваз мекунем:

  1. <ul class = "анҷараҳо" >
  2. <li class = "span4" >
  3. <div class = "анғаз" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Нишони ангораи </h3>
  6. <p> Сарлавҳаи эскиз... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Мисолҳои бештар

Ҳама имконоти худро бо синфҳои гуногуни шабака, ки ба шумо дастрасанд, омӯзед. Шумо инчунин метавонед андозаҳои гуногунро омехта кунед ва мувофиқат кунед.

Огоҳии пешфарз

.alertБарои паёми ҳушдори асосии огоҳӣ ҳама гуна матн ва тугмаи радкунии ихтиёриро печонед .

Огоҳӣ! Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед.
  1. <div class = "огоҳӣ" >
  2. < навъи тугма = "тугма" синф = "пушидани" data-disiss = "огоҳӣ" > × </ тугма >
  3. <strong> Огоҳӣ! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед.
  4. </div>

Бекор кардани тугмаҳо

Браузерҳои Mobile Safari ва Mobile Opera, ба ғайр аз data-dismiss="alert"атрибут, href="#"барои бекор кардани огоҳиҳо ҳангоми истифодаи <a>тег талаб мекунанд.

  1. <a href = "#" class = "close" data-dississ = "alert" > × </a>

Интихобан, шумо метавонед <button>унсуреро бо атрибути додаҳо истифода баред, ки мо онро барои ҳуҷҷатҳои худ интихоб кардаем. Ҳангоми истифодаи <button>, шумо бояд дохил type="button"кунед ё варақаҳои шумо пешниҳод карда намешаванд.

  1. < навъи тугма = "тугма" синф = "пушидани" data-disiss = "огоҳӣ" > × </ тугма >

Огоҳиҳоро тавассути JavaScript рад кунед

Васлкунаки jQuery огоҳиҳоро барои зуд ва осон бекор кардани огоҳиҳо истифода баред .


Имконот

Барои паёмҳои дарозтар, бо илова кардани замима дар боло ва поёни бастабандии огоҳкунанда зиёд .alert-blockкунед.

Огоҳӣ!

Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед. Nulla vitae elit libero, a augue pharetra. Тамошо кунед, ки шумо метавонед ба таври васеъ истифода баред.

  1. <div class = "alert alert-block" >
  2. < навъи тугма = "тугма" синф = "пушидани" data-disiss = "огоҳӣ" > × </ тугма >
  3. <h4> Огоҳӣ! </h4>
  4. Беҳтараш худатро санҷед, шумо не...
  5. </div>

Алтернативаҳои контекстӣ

Барои тағир додани коннотацияи огоҳӣ синфҳои ихтиёриро илова кунед.

Хатогӣ ё хатар

Оҳ афсӯс! Якчанд чизро тағир диҳед ва дубора пешниҳод кунед.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Муваффакият

Офарин! Шумо ин паёми огоҳкунандаи муҳимро бомуваффақият хонед.
  1. <div class = "alert alert-sccess" >
  2. ...
  3. </div>

Маълумот

Сарҳо боло! Ин огоҳӣ ба таваҷҷӯҳи шумо ниёз дорад, аммо ин хеле муҳим нест.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Намунаҳо ва нишонаҳо

Асосӣ

Сатри пешфарз бо градиенти амудӣ.

  1. <div class = "пешрафт" >
  2. <div class = "bar" style = " бари : 60 %; " ></div>
  3. </div>

рахдор

Барои эҷод кардани эффекти рахдор градиентро истифода мебарад. Дар IE7-8 дастрас нест.

  1. <div class = "пешрафти пешравӣ" >
  2. <div class = "bar" style = " бари : 20 %; " ></div>
  3. </div>

Аниматсия

Барои аниматсия кардани рахҳои рост ба чап ба .activeилова кунед. .progress-stripedДар ҳама версияҳои IE дастрас нест.

  1. <div class = "пешрафти пешравӣ-хатти фаъол" >
  2. <div class = "bar" style = " бари : 40 %; " ></div>
  3. </div>

Чуста

Якчанд панҷараҳоро дар як ҷо ҷойгир .progressкунед, то онҳоро ҷамъ кунед.

  1. <div class = "пешрафт" >
  2. <div class = "bar bar-success" style = " бари : 35 %; " ></div>
  3. <div class = "bar-warning" style = " бари : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " бари : 10 %; " ></div>
  5. </div>

Имконот

Рангҳои иловагӣ

Барҳои пешрафт баъзе аз ҳамон тугмаҳо ва синфҳои ҳушдорро барои сабкҳои мувофиқ истифода мебаранд.

  1. <div class = "пешрафт-маълумот" >
  2. <div class = "bar" style = " бари : 20 % " ></div>
  3. </div>
  4. <div class = "пешрафт-муваффақият" >
  5. <div class = "bar" style = " бари : 40 % " ></div>
  6. </div>
  7. <div class = "пешрафт-огоҳӣ" >
  8. <div class = "bar" style = " бар : 60 % " ></div>
  9. </div>
  10. <div class = "пешрафт-хатар" >
  11. <div class = "bar" style = " бари : 80 % " ></div>
  12. </div>

Барҳои рахдор

Ба монанди рангҳои сахт, мо барҳои пешрафти рахҳои гуногун дорем.

  1. <div class = "пешрафти пешравӣ-маълумоти пешрафт-рахи" >
  2. <div class = "bar" style = " бари : 20 % " ></div>
  3. </div>
  4. <div class = "пешрафти пешрафт-муваффақият пешрафт-рахи" >
  5. <div class = "bar" style = " бари : 40 % " ></div>
  6. </div>
  7. <div class = "пешрафти пешравӣ-огоҳии пешравӣ-рахи" >
  8. <div class = "bar" style = " бар : 60 % " ></div>
  9. </div>
  10. <div class = "пешрафти пешрафт-хатар пешрафт-рахи" >
  11. <div class = "bar" style = " бари : 80 % " ></div>
  12. </div>

Дастгирии браузер

Барҳои пешрафт градиентҳо, гузаришҳо ва аниматсияҳои CSS3-ро барои ноил шудан ба ҳама эффектҳои худ истифода мебаранд. Ин хусусиятҳо дар IE7-9 ё версияҳои кӯҳнаи Firefox дастгирӣ намешаванд.

Версияҳои қабл аз Internet Explorer 10 ва Opera 12 аниматсияҳоро дастгирӣ намекунанд.

Услубҳои объекти абстрактӣ барои сохтани намудҳои гуногуни ҷузъҳо (ба монанди шарҳҳои блог, твитҳо ва ғайра), ки дар баробари мундариҷаи матнӣ тасвири ба чап ё рост ҳамоҳангшуда доранд.

Намунаи пешфарз

Медиа пешфарз имкон медиҳад, ки объекти медиавӣ (тасвирҳо, видео, аудио) ба чап ё рости блоки мундариҷа шино кунанд.

64х64

Сарлавҳаи ВАО

Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
64х64

Сарлавҳаи ВАО

Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
64х64

Сарлавҳаи ВАО

Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis дар faucibus.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Сарлавҳаи медиа </h4>
  7. ...
  8.  
  9. <!-- Объекти медиавӣ -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Рӯйхати ВАО

Бо каме аломатгузории иловагӣ, шумо метавонед дар дохили рӯйхат медиаро истифода баред (барои риштаҳои шарҳ ё рӯйхати мақолаҳо муфид аст).

  • 64х64

    Сарлавҳаи ВАО

    Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.

    64х64

    Сарлавҳаи васоити ахбори омма

    Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
    64х64

    Сарлавҳаи васоити ахбори омма

    Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
    64х64

    Сарлавҳаи васоити ахбори омма

    Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
  • 64х64

    Сарлавҳаи ВАО

    Cras нишаста amet nibh libero, дар gravida nulla. Нулла ва ё метус scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum дар vulputate, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Сарлавҳаи медиа </h4>
  8. ...
  9.  
  10. <!-- Объекти медиавӣ -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Уэллс

Чӯҷаро ҳамчун эффекти оддӣ ба элемент истифода баред, то ба он эффекти дохилӣ диҳад.

Ана, ман дар чоҳ ҳастам!
  1. <div class = "хуб" >
  2. ...
  3. </div>

Дарсҳои ихтиёрӣ

Ҷойгиркунии назорат ва кунҷҳои мудавваршуда бо ду синфи тағирдиҳандаи ихтиёрӣ.

Ана, ман дар чоҳ ҳастам!
  1. <div class = "хуб-калон" >
  2. ...
  3. </div>
Ана, ман дар чоҳ ҳастам!
  1. <div class = "хуб-хурд" >
  2. ...
  3. </div>

Нишонаи пӯшида

Барои рад кардани мундариҷа ба монанди модальҳо ва огоҳиҳо, нишонаи пӯшидаи умумиро истифода баред.

  1. <button class = "close" > × </ тугма >

Дастгоҳҳои iOS href="#"рӯйдодҳои кликро талаб мекунанд, агар шумо мехоҳед лангарро истифода баред.

  1. <a class = "close" href = "#" > × </a>

Синфҳои ёрирасон

Дарсҳои оддӣ ва мутамарказ барои намоиши хурд ё тағир додани рафтор.

.чап кашед

Элементро ба чап шино кунед

  1. синф = "кашидани чап"
  1. . кашидан - чап {
  2. шинокунанда : чап ;
  3. }

.рост кашед

Элементро ба рост шино кунед

  1. синф = "кашидани рост"
  1. . кашидан - рост {
  2. шинокунанда : рост ;
  3. }

.хомуш

Ранги элементро ба#999

  1. синф = "хомушшуда"
  1. . хомӯш {
  2. ранг : #999;
  3. }

.clearfix

floatДар ҳама гуна элемент тоза кунед

  1. синф = "тозакунӣ"
  1. . тоза кардан {
  2. * масштаб : 1 ;
  3. &: пеш аз ,
  4. &: баъд аз {
  5. намоиш : ҷадвал ;
  6. мундариҷа : "" ;
  7. }
  8. &: баъд аз {
  9. равшан : ҳарду ;
  10. }
  11. }