Навигацияны, эскертүүлөрдү, поповерлерди жана башка көптөгөн нерселерди камсыз кылуу үчүн Bootstrap ичинде ондогон көп жолу колдонулуучу компоненттер орнотулган.
Rdio аркылуу шыктандырган өтө жөнөкөй жана минималдуу стилдеги баракчалар, колдонмолор жана издөө натыйжалары үчүн эң сонун. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.
Шилтемелер ыңгайлаштырылган жана туура класс менен бир катар шарттарда иштейт. .disabled
басылбаган шилтемелер жана .active
учурдагы барактар үчүн.
Барактоо шилтемелеринин тегиздөөсүн өзгөртүү үчүн эки кошумча класстын бирин кошуңуз: .pagination-centered
жана .pagination-right
.
Демейки пагинация компоненти ийкемдүү жана бир катар вариацияларда иштейт.
Оролгон <div>
, барактоо жөн гана <ul>
.
- <div класс = "беттөө" >
- <ul>
- <li><a href = "#" > Мурунку </a></li>
- <li класс = "активдүү" >
- <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 = "пейжер" >
- <li>
- <a href = "#" > Мурунку </a>
- </li>
- <li>
- <a href = "#" > Кийинки </a>
- </li>
- </ul>
Же болбосо, ар бир шилтемени тараптарга тегиздей аласыз:
- <ul class = "пейжер" >
- <li класс = "мурунку" >
- <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 класс = "баатыр-бирдик" >
- <h1> рубрика </h1>
- <p> Теги </p>
- <p>
- < а класс = "btn btn-primary btn-large" >
- Көбүрөөк билүү
- </a>
- </p>
- </div>
Бул жөнөкөй баатыр бирдиги, өзгөчөлөнгөн мазмунга же маалыматка кошумча көңүл буруу үчүн жөнөкөй jumbotron стилиндеги компонент.
h1
Барактагы мазмундун бөлүктөрүн туура бөлүштүрүү үчүн жөнөкөй кабык . h1
Ал демейки small
, элементин жана башка көптөгөн компоненттерди (кошумча стилдер менен) колдоно алат .
- <div class = "page-haeder" >
- <h1> Мисал беттин аталышы </h1>
- </div>
Демейки боюнча, Bootstrap эскиздери минималдуу талап кылынган белгилөө менен байланышкан сүрөттөрдү көрсөтүү үчүн иштелип чыккан.
Бир аз кошумча белгилөө менен, эскиздерге аталыштар, абзацтар же баскычтар сыяктуу каалаган HTML мазмунун кошууга болот.
Эскиз (мурун .media-grid
v1.4 чейин) сүрөттөр же видеолор торчолору, сүрөт издөө натыйжалары, чекене өнүмдөр, портфолио жана башка көптөгөн нерселер үчүн эң сонун. Алар шилтемелер же статикалык мазмун болушу мүмкүн.
Эскизди белгилөө жөнөкөй — ul
каалаган сандагы li
элементтер менен гана талап кылынат. Ал ошондой эле өтө ийкемдүү, мазмунуңузду ороп коюу үчүн бир аз көбүрөөк белгилөө менен мазмундун каалаган түрүнө мүмкүнчүлүк берет.
Акырында, эскиздер компоненти эскиз өлчөмдөрүн көзөмөлдөө үчүн учурдагы тор тутумунун класстарын колдонот — .span2
же — сыяктуу..span3
Мурда айтылгандай, эскиздер үчүн талап кылынган белги жеңил жана жөнөкөй. Шилтемеленген сүрөттөр үчүн демейки жөндөөнү карап көрүңүз :
- <ul class = "эскиз сүрөттөр" >
- <li класс = "span3" >
- <a href = "#" класс = "эскиз" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Эскиздеги ыңгайлаштырылган HTML мазмуну үчүн белгилөө бир аз өзгөрөт. Блок деңгээлиндеги мазмунга каалаган жерде уруксат берүү үчүн, биз окшошту <a>
алмаштырабыз <div>
:
- <ul class = "эскиз сүрөттөр" >
- <li класс = "span3" >
- <div класс = "эскиз" >
- <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 класс = "эскертүү" >
- <a класс = "жабуу" data-dississ = "эскертүү" > × </a>
- <strong> Эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз.
- </div>
Стандарттык эскертүү билдирүүсүн эки кошумча класс менен оңой кеңейтиңиз: .alert-block
көбүрөөк толтуруу жана тексттик башкаруу .alert-heading
үчүн жана дал келген аталыш үчүн.
Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et.
- <div класс = "эскертүүчү эскертүү-блок" >
- <a класс = "жабуу" data-dississ = "эскертүү" > × </a>
- <h4 class = "alert-heading" > Эскертүү! </h4>
- Өзүңдү текшерип көр, сен андай эмессиң...
- </div>
- <div класс = "эсгертме-ката" >
- ...
- </div>
- <div класс = "эскертүүчү эскертүү-ийгилик" >
- ...
- </div>
- <div класс = "эскертүүчү эскертүү маалыматы" >
- ...
- </div>
Вертикалдуу градиент менен демейки прогресс тилкеси.
- <div класс = "прогресс" >
- <div класс = "бар"
- style = " width : 60 %; " ></div>
- </div>
Чаардуу эффект түзүү үчүн градиент колдонот.
- <div class = "прогресс-информация
- прогресс-тин» >
- <div класс = "бар"
- style = " width : 20 %; " ></div>
- </div>
Чаардуу мисалды алып, аны жандандырат.
- <div класс = "прогресс-коркунуч
- прогресс-тин активдуу» >
- <div класс = "бар"
- style = " width : 40 %; " ></div>
- </div>
Прогресс тилкелери окшош стилдештирүү үчүн баскычтар жана эскертүүлөр сыяктуу эле класстардын кээ бир аттарын колдонот.
.progress-info
.progress-success
.progress-danger
Же болбосо, сиз LESS файлдарын ыңгайлаштыра аласыз жана өзүңүздүн түстөрүңүздү жана өлчөмдөрүңүздү өзгөртө аласыз.
Прогресс тилкелери CSS3 өткөөлдөрүн колдонушат, андыктан кеңдигин javascript аркылуу динамикалык түрдө туураласаңыз, анын өлчөмү акырындап өзгөрөт.
Эгер сиз .active
классты колдонсоңуз, .progress-striped
прогресс тилкелериңиз солдон оңго сызыктарды жандандырат.
Прогресс тилкелери бардык эффекттерге жетүү үчүн CSS3 градиенттерин, өтүүлөрдү жана анимацияларды колдонушат. Бул функциялар IE7-8 же Firefoxтун эски версияларында колдоого алынбайт.
Opera учурда анимацияларды колдобойт.
Кудукту элементке жөнөкөй эффект катары колдонуңуз, ага кошумча эффект берүү.
- <div класс = "жакшылык" >
- ...
- </div>
Модаль жана эскертүүлөр сыяктуу мазмунду четке кагуу үчүн жалпы жабуу сөлөкөтүн колдонуңуз.
- <a class = "жабуу" > × </a>