Компоненттер

Навигацияны, эскертүүлөрдү, поповерлерди жана башкаларды камсыз кылуу үчүн курулган ондогон көп жолу колдонулуучу компоненттер.

Мисалдар

Эки негизги варианттары менен бирге дагы эки конкреттүү вариациялар.

Жалгыз баскыч тобу

менен бир катар баскычтарды ороп .btnалыңыз .btn-group.

  1. <div класс = "btn-group" >
  2. <button class = "btn" > Сол </button>
  3. <button class = "btn" > Орто </button>
  4. <button class = "btn" > Оң </button>
  5. </div>

Бир нече баскыч топтору

<div class="btn-group">А <div class="btn-toolbar">комплекстерин татаалыраак компоненттер үчүн бириктириңиз .

  1. <div класс = "btn-куралдар тилкеси" >
  2. <div класс = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Вертикалдуу баскыч топтору

Баскычтар топтомун горизонталдуу эмес, тигинен тизилгендей кылып көрсөтүңүз.

  1. <div класс = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Белгилөө кутучасы жана радио даамдары

Баскыч топтору бир гана баскыч активдүү болушу мүмкүн болгон радиолор же каалаган сандагы баскычтар активдүү болушу мүмкүн болгон белгилөө кутучалары катары да иштеши мүмкүн. Бул үчүн JavaScript документтерин көрүңүз .

Баскыч топторундагы ылдый түшүүлөр

Көңүл бургула!Туура рендеринг үчүн ачылуучу баскычтары .btn-groupбар баскычтар өз алдынча оролушу керек ..btn-toolbar

Обзор жана мисалдар

Каалаган баскычты колдонуп, ылдый түшүүчү менюну а ичине жайгаштырып, .btn-groupменюнун туура белгилөөсүн камсыз кылыңыз.

  1. <div класс = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" 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 класс = "btn-group" >
  2. <button class = "btn" > Аракет </button>
  3. <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ылдый түшүүчү меню" >
  7. <!-- ачылуучу меню шилтемелери -->
  8. </ul>
  9. </div>

Өлчөмдөрү

Кошумча баскыч класстарын .btn-mini, .btn-small, же .btn-largeөлчөм үчүн колдонуңуз.

  1. <div класс = "btn-group" >
  2. <button class = "btn btn-mini" > Аракет </button>
  3. <баскыч класс = "btn btn-mini ачылуучу-которуу" маалымат-кото��уу = "ашылма" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ылдый түшүүчү меню" >
  7. <!-- ачылуучу меню шилтемелери -->
  8. </ul>
  9. </div>

Ашылма менюлар

Ашылма менюларды ылдыйдан өйдөгө которуштурууга болот .dropdown-menu. .caretАл жогорудан ылдый эмес, ылдыйдан өйдө жылдыруу үчүн менюнун багытын буруп, ордун өзгөртөт.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <баскыч класс = "btn ачылуучу-которуу" маалымат-которуу = "ашылма" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ылдый түшүүчү меню" >
  7. <!-- ачылуучу меню шилтемелери -->
  8. </ul>
  9. </div>

Стандарттык пагинация

Rdio тарабынан шыктандырылган жөнөкөй баракчалар, колдонмолор жана издөө натыйжалары үчүн эң сонун. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.

  1. <div класс = "беттөө" >
  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 класс = "беттөө" >
  2. <ul>
  3. <li класс = "өчүрүлгөн" ><a href = "#" > « </a></li>
  4. <li класс = "активдүү" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Сиз каалаган стилдерди сактап, чыкылдатуу функциясын алып салуу үчүн жигердүү же өчүрүлгөн анкерлерди аралыктарга алмаштыра аласыз.

  1. <div класс = "беттөө" >
  2. <ul>
  3. <li класс = "өчүрүлгөн" ><span> « </span></li>
  4. <li класс = "активдүү" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Өлчөмдөрү

Чоңураак же кичирээк беттештирүүнү каалайсызбы? Кошумча өлчөмдөр үчүн .pagination-large, .pagination-small, же кошуңуз ..pagination-mini

  1. <div class = "pageation pagination-lorge" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div класс = "беттөө" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div класс = "баракчаларды пагинациялоо-мини" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Тегиздөө

Барактоо шилтемелеринин тегиздөөсүн өзгөртүү үчүн эки кошумча класстын бирин кошуңуз: .pagination-centeredжана .pagination-right.

  1. <div класс = "баракчаларды барактоо борборлоштурулган" >
  2. ...
  3. </div>
  1. <div класс = "баракчаларды беттөө-оң" >
  2. ...
  3. </div>

Пейжер

Жарык белгилөө жана стилдер менен жөнөкөй баракчаларды ишке ашыруу үчүн мурунку жана кийинки тез шилтемелер. Бул блогдор же журналдар сыяктуу жөнөкөй сайттар үчүн сонун.

Демейки мисал

Демейки боюнча, пейджер шилтемелерди борборлойт.

  1. <ul class = "пейжер" >
  2. <li><a href = "#" > Мурунку </a></li>
  3. <li><a href = "#" > Кийинки </a></li>
  4. </ul>

Тегизделген шилтемелер

Же болбосо, ар бир шилтемени тараптарга тегиздей аласыз:

  1. <ul class = "пейжер" >
  2. <li класс = "мурунку" >
  3. <a href = "#" > Эски </a>
  4. </li>
  5. <li класс = "кийинки" >
  6. <a href = "#" > Жаңыраак → </a>
  7. </li>
  8. </ul>

Кошумча өчүрүлгөн абал

Пейжердик шилтемелер, ошондой эле пагинациядан жалпы .disabledпайдалуу классты колдонушат.

  1. <ul class = "пейжер" >
  2. <li класс = "мурунку өчүрүлгөн" >
  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>

Оңой жыгылат

Жөнөкөй ишке ашыруу үчүн энбелгилер жана бейджиктер (CSS'тин :emptyселектору аркылуу) ичинде эч кандай мазмун жок болгондо жөн эле кулап калат.

Баатыр бирдиги

Сайтыңыздагы негизги мазмунду көрсөтүү үчүн жеңил, ийкемдүү компонент. Бул маркетинг жана мазмуну оор сайттарда жакшы иштейт.

Салам дүйнө!

Бул жөнөкөй баатыр бирдиги, өзгөчөлөнгөн мазмунга же маалыматка кошумча көңүл буруу үчүн жөнөкөй jumbotron стилиндеги компонент.

Көбүрөөк билүү

  1. <div класс = "баатыр-бирдик" >
  2. <h1> рубрика </h1>
  3. <p> Теги </p>
  4. <p>
  5. < а класс = "btn btn-primary btn-large" >
  6. Көбүрөөк билүү
  7. </a>
  8. </p>
  9. </div>

Барактын аталышы

h1Барактагы мазмундун бөлүктөрүн туура бөлүштүрүү жана бөлүү үчүн жөнөкөй кабык . h1Ал демейки small, элементин жана башка көптөгөн компоненттерди (кошумча стилдер менен) колдоно алат .

  1. <div class = "page-header" >
  2. <h1> Үлгү беттин аталышы <кичинекей> Баш аты үчүн субтекст </small></h1>
  3. </div>

Демейки эскиздер

Демейки боюнча, Bootstrap эскиздери минималдуу талап кылынган белгилөө менен байланышкан сүрөттөрдү көрсөтүү үчүн иштелип чыккан.

Жогорку ылайыкташтырылган

Бир аз кошумча белгилөө менен, эскиздерге аталыштар, абзацтар же баскычтар сыяктуу каалаган HTML мазмунун кошууга болот.

  • 300x200

    Эскиз энбелгиси

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Акция Акция

  • 300x200

    Эскиз энбелгиси

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Акция Акция

  • 300x200

    Эскиз энбелгиси

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Акция Акция

Эмне үчүн эскиздерди колдонуу керек

Эскиз (мурун .media-gridv1.4 чейин) сүрөттөр же видеолор торчолору, сүрөт издөө натыйжалары, чекене өнүмдөр, портфолио жана башка көптөгөн нерселер үчүн эң сонун. Алар шилтемелер же статикалык мазмун болушу мүмкүн.

Жөнөкөй, ийкемдүү белгилөө

Эскизди белгилөө жөнөкөй — ulкаалаган сандагы ali элементтер менен гана талап кылынат. Ал ошондой эле өтө ийкемдүү, мазмунуңузду ороп коюу үчүн бир аз көбүрөөк белгилөө менен мазмундун каалаган түрүнө мүмкүнчүлүк берет.

Тор мамычасынын өлчөмдөрүн колдонот

Акырында, эскиздер компоненти эскиз өлчөмдөрүн көзөмөлдөө үчүн учурдагы тор тутумунун класстарын колдонот — .span2же — сыяктуу..span3

Белгилөө

Мурда айтылгандай, эскиздер үчүн талап кылынган белги жеңил жана жөнөкөй. Шилтемеленген сүрөттөр үчүн демейки жөндөөнү карап көрүңүз :

  1. <ul class = "эскиз сүрөттөр" >
  2. <li класс = "span4" >
  3. <a href = "#" класс = "эскиз" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Эскиздеги ыңгайлаштырылган HTML мазмуну үчүн белгилөө бир аз өзгөрөт. Блок деңгээлиндеги мазмунга каалаган жерде уруксат берүү үчүн, биз окшошту <a>алмаштырабыз <div>:

  1. <ul class = "эскиз сүрөттөр" >
  2. <li класс = "span4" >
  3. <div класс = "эскиз" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Эскиз энбелгиси </h3>
  6. <p> Эскиздин коштомо жазуусу... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Дагы мисалдар

Сизге жеткиликтүү болгон ар кандай тор класстары менен бардык варианттарыңызды изилдеңиз. Ошондой эле ар кандай өлчөмдөрдү аралаштырып, дал келтире аласыз.

Демейки эскертүү

.alertНегизги эскертүү билдирүүсү үчүн каалаган текстти жана кошумча четке кагуу баскычын ороп алыңыз .

Эскертүү! Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң.
  1. <div класс = "эскертүү" >
  2. <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "эскертүү" > × </button>
  3. <strong> Эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз.
  4. </div>

Баш тартуу баскычтары

Мобилдик Safari жана Mobile Opera браузерлери атрибуттан тышкары , тегди колдонууда эскертүүлөрдү жокко data-dismiss="alert"чыгарууну талап кылат .href="#"<a>

  1. <a href = "#" class = "жабуу" data-dississ = "alert" > × </a>

Же болбосо, <button>маалымат атрибуту бар элементти колдонсоңуз болот, аны биз документтерибиз үчүн тандап алганбыз. Колдонуп жатканда <button>, сиз камтышыңыз керек, type="button"болбосо формаларыңыз тапшырбашы мүмкүн.

  1. <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "эскертүү" > × </button>

JavaScript аркылуу эскертүүлөрдү четке кагуу

Эскертүүлөрдү тез жана оңой алып салуу үчүн alerts jQuery плагинин колдонуңуз .


Параметрлер

Узунураак билдирүүлөр үчүн эскертме ораманын үстүнкү жана астындагы толтурууну кошуу менен көбөйтүңүз .alert-block.

Эскертүү!

Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div класс = "эскертүүчү эскертүү-блок" >
  2. <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "эскертүү" > × </button>
  3. <h4> Эскертүү! </h4>
  4. Өзүңдү текшерип көр, сен андай эмессиң...
  5. </div>

Контексттик альтернативалар

Эскертүүнүн коннотациясын өзгөртүү үчүн кошумча класстарды кошуңуз.

Ката же коркунуч

О, шак! Бир нече нерсени өзгөртүп, кайра тапшырып көрүңүз.
  1. <div класс = "эсгертме-ката" >
  2. ...
  3. </div>

Ийгилик

Мыкты жасалды! Сиз бул маанилүү эскертүү билдирүүсүн ийгиликтүү окудуңуз.
  1. <div класс = "эскертүүчү эскертүү-ийгилик" >
  2. ...
  3. </div>

Маалымат

Көңүл бургула! Бул эскертүүгө көңүл буруңуз, бирок бул өтө маанилүү эмес.
  1. <div класс = "эскертүүчү эскертүү маалыматы" >
  2. ...
  3. </div>

Мисалдар жана белгилөө

Негизги

Вертикалдуу градиент менен демейки прогресс тилкеси.

  1. <div класс = "прогресс" >
  2. <div class = "bar" style = " туурасы : 60 %; " ></div>
  3. </div>

Striped

Чаардуу эффект түзүү үчүн градиент колдонот. IE7-8де жеткиликтүү эмес.

  1. <div класс = "прогресс-сызык" >
  2. <div class = "bar" style = " туурасы : 20 %; " ></div>
  3. </div>

Анимацияланган

Оңдон солго сызыктарды жандандыруу үчүн .activeкошуу . .progress-stripedIE бардык версияларында жеткиликтүү эмес.

  1. <div класс = "прогресс прогресс-сызык активдүү" >
  2. <div class = "bar" style = " туурасы : 40 %; " ></div>
  3. </div>

Үйүлгөн

.progressАларды тизүү үчүн бир нече тилкеге ​​салыңыз.

  1. <div класс = "прогресс" >
  2. <div class = "бар-ийгилик" style = " туурасы : 35 %; " ></div>
  3. <div class = "бар-эскертүү" style = " туурасы : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " туурасы : 10 %; " ></div>
  5. </div>

Параметрлер

Кошумча түстөр

Прогресс тилкелери бирдей баскычтардын айрымдарын жана ырааттуу стилдер үчүн эскертүү класстарын колдонот.

  1. <div класс = "прогресс маалыматы" >
  2. <div class = "bar" style = " туурасы : 20 % " ></div>
  3. </div>
  4. <div класс = "прогресс прогресс-ийгилик" >
  5. <div class = "bar" style = " туурасы : 40 % " ></div>
  6. </div>
  7. <div class = "прогресс-эскертүү" >
  8. <div class = "bar" style = " туурасы : 60 % " ></div>
  9. </div>
  10. <div класс = "прогресс-коркунуч" >
  11. <div class = "bar" style = " туурасы : 80 % " ></div>
  12. </div>

Сызык барлар

Катуу түстөр сыяктуу, бизде ар кандай сызыкча прогресс тилкелери бар.

  1. <div класс = "прогресс прогресс-маалымат прогресс-сызык" >
  2. <div class = "bar" style = " туурасы : 20 % " ></div>
  3. </div>
  4. <div класс = "прогресс прогресс-ийгилик прогресс-сызык" >
  5. <div class = "bar" style = " туурасы : 40 % " ></div>
  6. </div>
  7. <div класс = "прогресс-эскертүү прогресс-сызык" >
  8. <div class = "bar" style = " туурасы : 60 % " ></div>
  9. </div>
  10. <div класс = "прогресс прогресс-коркунучтуу прогресс-сызык" >
  11. <div class = "bar" style = " туурасы : 80 % " ></div>
  12. </div>

Браузерди колдоо

Прогресс тилкелери бардык эффекттерге жетүү үчүн CSS3 градиенттерин, өтүүлөрдү жана анимацияларды колдонушат. Бул функциялар IE7-9 же Firefoxтун эски версияларында колдоого алынбайт.

Internet Explorer 10 жана Opera 12ден мурунку версиялар анимацияларды колдоого албайт.

Тексттик мазмун менен бирге солго же оңго тегизделген сүрөттү камтыган ар кандай типтеги компоненттерди (мисалы, блог комментарийлери, твиттер ж.б.) куруу үчүн абстракттуу объект стилдери.

Демейки мисал

Демейки медиа медиа объектти (сүрөттөр, видео, аудио) мазмун блогунун сол же оң жагына сүзүүгө мүмкүндүк берет.

64x64

Медиа аталышы

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Медиа аталышы

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Медиа аталышы

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div класс = "медиа" >
  2. <a class = "pull-left" href = "#" >
  3. <img класс = "медиа-объект" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Медиа аталышы </h4>
  7. ...
  8.  
  9. <!-- Уюшкан медиа объект -->
  10. <div класс = "медиа" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Медиа тизмеси

Бир аз кошумча белгилөө менен сиз тизменин ичиндеги медианы колдоно аласыз (комментарий жиптери же макала тизмелери үчүн пайдалуу).

  • 64x64

    Медиа аталышы

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Кыстарылган медиа аталышы

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Кыстарылган медиа аталышы

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Кыстарылган медиа аталышы

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Медиа аталышы

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li класс = "медиа" >
  3. <a class = "pull-left" href = "#" >
  4. <img класс = "медиа-объект" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Медиа аталышы </h4>
  8. ...
  9.  
  10. <!-- Уюшкан медиа объект -->
  11. <div класс = "медиа" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Кудукту элементке жөнөкөй эффект катары колдонуңуз, ага кошумча эффект берүү.

Карачы, мен кудуктун ичиндемин!
  1. <div класс = "жакшылык" >
  2. ...
  3. </div>

Кошумча класстар

Толтургучтарды жана тегеректелген бурчтарды эки кошумча өзгөрткүч класстары менен башкаруу.

Карачы, мен кудуктун ичиндемин!
  1. <div class = "жакшы жакшы чоң" >
  2. ...
  3. </div>
Карачы, мен кудуктун ичиндемин!
  1. <div class = "жакшы-кичинекей" >
  2. ...
  3. </div>

Жабуу сөлөкөтү

Модаль жана эскертүүлөр сыяктуу мазмунду четке кагуу үчүн жалпы жабуу сөлөкөтүн колдонуңуз.

  1. <button class = "жабуу" > × </button>

href="#"Эгер сиз анкерди колдонгуңуз келсе, iOS түзмөктөрү үчүн чыкылдатуу окуялары талап кылынат .

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

Жардамчы класстар

Чакан дисплей же жүрүм-турумду өзгөртүү үчүн жөнөкөй, багытталган класстар.

.pull-left

Элементти солго сүзүү

  1. класс = "солго тартуу"
  1. . солго тартуу { _
  2. float : left ;
  3. }

.pull-right

Элементти оңго сүзүү

  1. класс = "оңго тартуу"
  1. . оңго тартуу { _
  2. float : right ;
  3. }

.үнсүз

Элементтин түсүн өзгөртүү#999

  1. класс = "үнсүз"
  1. . үнсүз {
  2. түс : #999;
  3. }

.clearfix

floatКаалаган элементти тазалаңыз

  1. класс = "тазалоо"
  1. . тазалоо {
  2. * чоңойтуу : 1 ;
  3. &: мурун ,
  4. &: кийин {
  5. дисплей : стол ;
  6. мазмун : "" ;
  7. }
  8. &: кийин {
  9. ачык : экөө тең ;
  10. }
  11. }