Иконографияны, ачылуучу тизмелерди, киргизүү топторун, навигацияны, эскертүүлөрдү жана башка көптөгөн нерселерди камсыз кылуу үчүн курулган ондон ашык кайра колдонулуучу компоненттер.
Глификондор
Жеткиликтүү глифтер
Glyphicon Halflings топтомунан шрифт форматындагы 250дөн ашык глифтерди камтыйт. Glyphicons Halflings , адатта, акысыз жеткиликтүү эмес, бирок алардын жаратуучусу аларды Bootstrap үчүн бекер жеткиликтүү кылып койгон. Рахмат катары, биз сизден мүмкүн болушунча Glyphicons'ка кайра шилтемени кошууну суранабыз.
Өндүрүштүк себептерден улам бардык иконалар базалык классты жана жеке сүрөтчө классын талап кылат. Колдонуу үчүн, төмөнкү кодду каалаган жерге коюңуз. Туура толтуруу үчүн сөлөкөт менен тексттин ортосунда боштук калтырууну унутпаңыз.
Башка компоненттер менен аралаштырбаңыз
Белги класстарын башка компоненттер менен түздөн-түз айкалыштыруу мүмкүн эмес. Алар бир эле элементте башка класстар менен бирге колдонулбашы керек. Анын ордуна, уячаны кошуп <span>, иконка класстарын <span>.
Бош элементтерде гана колдонуу үчүн
Белги класстары текст мазмунун камтыбаган жана кошумча элементтери жок элементтерде гана колдонулушу керек.
Белги шрифтинин ордун өзгөртүү
../fonts/Bootstrap сөлөкөт шрифтинин файлдары түзүлгөн CSS файлдарына салыштырмалуу каталогдо жайгашат деп болжолдойт . Бул шрифт файлдарын жылдыруу же атын өзгөртүү CSSти үч жолдун бири менен жаңыртуу дегенди билдирет:
@icon-font-pathБулак Less файлдарындагы жана/же @icon-font-nameөзгөрмөлөрдү өзгөртүңүз .
Сиздин конкреттүү иштеп чыгуу жөндөөлөрүңүзгө ылайыктуу болгон вариантты колдонуңуз.
Жеткиликтүү иконалар
Жардам берүүчү технологиялардын заманбап версиялары CSS түзүлгөн мазмунду, ошондой эле Юникоддун белгилүү белгилерин жарыялайт. Экранды окугучтарда күтүлбөгөн жана чаташтырбоочу натыйжаларды болтурбоо үчүн (айрыкча, иконалар жасалгалоо үчүн гана колдонулганда), биз аларды aria-hidden="true"атрибут менен жашырабыз.
Эгер сиз маанини берүү үчүн сөлөкөттү колдонуп жатсаңыз (декоративдик элемент катары эмес), бул маани жардамчы технологияларга да жеткирилгенин текшериңиз – мисалы, .sr-onlyкласс менен визуалдык түрдө жашырылган кошумча мазмунду кошуңуз.
Башка текстсиз башкаруу элементтерин түзүп жатсаңыз (мисалы, <button>сөлөкөтү гана камтыган), башкаруунун максатын аныктоо үчүн ар дайым альтернативалуу мазмунду беришиңиз керек, бул жардамчы технологиялардын колдонуучуларына түшүнүктүү болот. Бул учурда, сиз aria-labelбашкаруунун өзүнө атрибут кошо аласыз.
Мисалдар
Аларды баскычтарда, куралдар тилкеси үчүн баскыч топторунда, навигацияда же алдын ала форма киргизүүлөрүндө колдонуңуз.
Жардамчы технологиялардын колдонуучуларына бул ишаратты жеткирүү үчүн кошумча текст менен ката кабары экенин билдирүү үчүн эскертүүдө колдонулган сөлөкөт ..sr-only
Ката:Жарактуу электрондук почта дарегин киргизиңиз
Ашылма тизмелер
Шилтемелердин тизмесин көрсөтүү үчүн которулуучу, контексттик меню. ачылуучу JavaScript плагини менен интерактивдүү кылынды .
Мисал
ылдый түшүүчү триггерди жана ачылуучу менюну .dropdown, же жарыялаган башка элементтин ичинде ороп алыңыз position: relative;. Андан кийин менюнун HTML кошуңуз.
Демейки боюнча, ылдый түшүүчү меню автоматтык түрдө ата-эненин жогору жагында жана сол жагында 100% жайгаштырылат. Түзүлүүчү менюну оңго тегиздөө .dropdown-menu-right..dropdown-menu
Кошумча жайгаштырууну талап кылышы мүмкүн
Ашылма тизмелер документтин кадимки агымынын ичинде CSS аркылуу автоматтык түрдө жайгаштырылат. Бул ачылуучу тизмелерди белгилүү бир касиеттери бар ата-энелер кесиши мүмкүн overflowже көрүү терезесинин чегинен тышкары көрүнүшү мүмкүн дегенди билдирет. Бул көйгөйлөр пайда болгондо өз алдынча чечиңиз.
Эскирген .pull-rightтегиздөө
v3.1.0 боюнча, биз ачылуучу .pull-rightменюларды колдонуудан баш тарттык. Менюну оңго тегиздөө үчүн колдонуңуз .dropdown-menu-right. Чабыт тилкесиндеги оңго тегизделген навигация компоненттери менюну автоматтык түрдө тегиздөө үчүн бул класстын аралаш версиясын колдонушат. Аны жокко чыгаруу үчүн колдонуңуз .dropdown-menu-left.
Баштар
Каалаган түшүүчү менюдагы аракеттердин бөлүмдөрүн белгилөө үчүн башты кошуңуз.
Бир катар баскычтарды баскычтар тобу менен бир сапта топтоңуз. Биздин баскычтар плагини менен кошумча JavaScript радиосун жана белгилөө кутучасынын стилин кошуңуз .
Баскыч топторундагы кеңештер жана поповерлер атайын жөндөөлөрдү талап кылат
А ичиндеги элементтерде куралдар кеңештерин же калкып чыкмаларды колдонууда .btn-group, сиз container: 'body'каалабаган терс таасирлерден (мисалы, элементтин кененирээк чоңоюшуна жана/же тегеректелген бурчтарын жоготушуна) жол бербөө үчүн параметрди көрсөтүшүңүз керек болот.
туура roleкамсыз кылуу жана энбелгисин камсыз кылуу
Көмөкчү технологиялар – мисалы, экранды окугучтар – бир катар баскычтар топтоштурулганын билдириши үчүн, тиешелүү roleатрибут берилиши керек. Баскыч топтору үчүн бул болот role="group", ал эми куралдар панелдеринде role="toolbar".
Бир гана башкарууну камтыган топтор (мисалы, элементтери бар акталган баскыч топтору<button> ) же ачылуучу тизмени камтыган топтор.
Кошумчалай кетсек, топторго жана инструменттер тилкелерине ачык белги берилиши керек, анткени көпчүлүк жардамчы технологиялар туура roleатрибут болгонуна карабастан, аларды жарыя кылбайт. Бул жерде келтирилген мисалдарда биз колдонобуз aria-label, бирок башка варианттар aria-labelledbyда колдонулушу мүмкүн.
Негизги мисал
менен бир катар баскычтарды ороп .btnалыңыз .btn-group.
Баскыч куралдар панели
<div class="btn-group">А <div class="btn-toolbar">комплекстерин татаалыраак компоненттер үчүн бириктириңиз .
Өлчөмү
Топтун ар бир баскычына баскычтарды өлчөө класстарын колдонуунун ордуна, жөн гана .btn-group-*ар бирине кошуңуз .btn-group, анын ичинде бир нече топту уялаганда.
Уя салуу
Бир катар баскычтар менен аралашып түшүүчү менюларды кааласаңыз, .btn-groupбашканын ичине коюңуз..btn-group
Баскычтар тобун ата-эненин бүт кеңдигине камтышы үчүн бирдей өлчөмдө чоюңуз. Ошондой эле баскычтар тобунун ичиндеги ачылуучу баскычтар менен иштейт.
Чек араларды башкаруу
Баскычтарды актоо үчүн колдонулган конкреттүү HTML жана CSSтин аркасында (атап айтканда display: table-cell), алардын ортосундагы чек аралар эки эселенген. Кадимки баскыч топторунда margin-left: -1pxчектерди алып салуунун ордуна, аларды тизүү үчүн колдонулат. Бирок, marginменен иштебейт display: table-cell. Натыйжада, Bootstrap үчүн ыңгайлаштырууларыңызга жараша, чектерди алып салгыңыз же кайра боёкту кааласаңыз болот.
IE8 жана чек аралары
Internet Explorer 8 акталган баскычтар тобунун баскычтарына чектерди көрсөтпөйт, ал күйгүзүлгөн <a>же <button>элементтер. Аны айланып өтүү үчүн, ар бир баскычты башкасына ороп алыңыз .btn-group.
Эгерде <a>элементтер учурдагы барактын ичиндеги башка документке же бөлүмгө өтүүнүн ордуна, барак ичиндеги функцияларды ишке киргизүү үчүн баскычтар катары колдонулса, аларга да тиешелүү role="button".
<button>Элементтер менен
Негизделген баскыч топторун <button>элементтери менен колдонуу үчүн ар бир баскычты баскычтар тобуна орошуңуз керек . Көпчүлүк браузерлер элементтерди негиздөө үчүн биздин CSS-ти туура колдонушпайт <button>, бирок биз баскычтардын ачылуучу ылдыйкыларын колдогондуктан, биз мунун тегерегинде иштей алабыз.
Түймөктүн ачылуучу тизмелери
Каалаган баскычты колдонуп, ылдый түшүүчү менюну а ичине жайгаштырып, .btn-groupменюнун туура белгилөөсүн камсыз кылыңыз.
Текстке негизделген каалаган тексттин алдына, кийин же эки жагына текстти же баскычтарды кошуу менен форманы башкарууну кеңейтиңиз <input>. же .input-groupменен колдонуңуз . _.input-group-addon.input-group-btn.form-control
Тексттик <input>гана
Бул жерде элементтерди колдонуудан <select>качыңыз, анткени аларды WebKit браузерлеринде толук стилдештирүү мүмкүн эмес.
<textarea>Бул жерде элементтерди колдонуудан качыңыз, анткени алардын rowsатрибуту кээ бир учурларда сакталбайт.
Киргизүү топторундагы кеңештер жана поповерлер атайын жөндөөлөрдү талап кылат
Курал кеңештерин же поповерди ичиндеги элементтерде колдонууда .input-group, сиз container: 'body'керексиз терс таасирлерден (мисалы, элементтин кененирээк чоңоюшу жана/же инструментарий же поповер иштетилгенде тегеректелген бурчтарын жоготуп алуу сыяктуу) болтурбоо үчүн параметрди көрсөтүшүңүз керек болот.
Башка компоненттер менен аралаштырбаңыз
Форма топторун же тор мамыча класстарын киргизүү топтору менен түз аралаштырбаңыз. Анын ордуна, форма тобунун же торго тиешелүү элементтин ичине киргизүү тобун уя салыңыз.
Ар дайым энбелгилерди кошуңуз
Ар бир киргизүү үчүн энбелги кошпосоңуз, экранды окугучтар формаларыңызда кыйынчылыктарга туш болушат. Бул киргизүү топтору үчүн кандайдыр бир кошумча энбелги же функциялар жардамчы технологияларга жеткирилгенин текшериңиз.
Колдонула турган так техника (көрүнүүчү <label>элементтер, класстын <label>жардамы менен жашырылган элементтер же , , , же атрибуттарды колдонуу) жана кандай кошумча маалымат берилиши керек болот, сиз ишке ашырып жаткан интерфейс виджетинин так түрүнө жараша өзгөрөт. Бул бөлүмдөгү мисалдар бир нече сунуш кылынган, конкреттүү конкреттүү ыкмаларды берет..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
Негизги мисал
Киргизүүнүн эки жагына бир кошумчаны же баскычты коюңуз. Сиз ошондой эле киргизүүнүн эки тарабына бирди жайгаштырсаңыз болот.
Биз бир тараптан бир нече кошумчаларды ( .input-group-addonже ) колдобойбуз ..input-group-btn
Биз бир киргизүү тобунда бир нече форманы башкарууну колдобойбуз.
Өлчөмү
Салыштырмалуу форма .input-groupөлчөм класстарын өзүнө кошуңуз жана ичиндеги мазмун автоматтык түрдө өлчөмүн өзгөртөт — ар бир элементте форманы башкаруу көлөмү класстарын кайталоонун кереги жок.
Белгилөө кутучалары жана радио кошумчалары
Тексттин ордуна киргизүү тобунун кошумчасына каалаган белги кутучасын же радио опциясын коюңуз.
Баскыч кошумчалары
Киргизүү топторундагы баскычтар бир аз башкача жана кошумча уянын бир деңгээлин талап кылат. Анын ордуна , баскычтарды таңуу .input-group-addonүчүн колдонушуңуз керек болот . .input-group-btnБул демейки серепчинин стилдеринен улам талап кылынат, аларды жокко чыгаруу мүмкүн эмес.
Ылдый түшүүчү баскычтар
Сегменттелген баскычтар
Бир нече баскычтар
Ар бир тарапта бир гана кошумча болушу мүмкүн болсо да, бирдин ичинде бир нече баскычтар болушу мүмкүн .input-group-btn.
Navs
Bootstrap'те жеткиликтүү болгон Navs негизги класстан баштап жалпы белгилөөлөргө, .navошондой эле жалпы мамлекеттерге ээ. Ар бир стилди алмаштыруу үчүн өзгөрткүч класстарын алмаштырыңыз.
Өтмөк панелдер үчүн navs колдонуу JavaScript өтмөктөр плагинин талап кылат
Табула турган аймактары бар өтмөктөр үчүн JavaScript плагин өтмөктөрүн колдонушуңуз керек . Белгилөө кошумча roleжана ARIA атрибуттарын талап кылат – кошумча маалымат алуу үчүн плагиндин үлгүсүн караңыз.
Навигация катары колдонулган навигацияларды жеткиликтүү кылыңыз
Эгерде сиз навигация тилкесин камсыз кылуу үчүн navs колдонуп жатсаңыз, анда role="navigation"нын эң логикалык ата-контейнерине кошууну <ul>же <nav>элементти бүт навигациянын тегерегине ороп коюуну унутпаңыз. Ролду <ul>өзүнө кошпоңуз, анткени бул анын жардамчы технологиялар аркылуу анык тизме катары жарыяланышына тоскоол болот.
768 пикселден чоңураак экрандарда өтмөктөрдү же таблеткаларды ата-энесинин эндигине барабар кылып оңой кылыңыз .nav-justified. Кичинекей экрандарда навигация шилтемелери тизилген.
Негизделген навигация шилтемелери учурда колдоого алынбайт.
Safari жана жооп берген акталган navs
v9.1.2 боюнча, Safari мүчүлүштүктөрдү көрсөтөт, анда браузериңиздин өлчөмүн горизонталдуу түрдө өзгөртүү жаңылангандан кийин тазаланган негизделген навигацияда рендеринг каталарын пайда кылат. Бул мүчүлүштүк да негизделген nav мисалында көрсөтүлгөн .
Ар кандай навигация компоненттери үчүн (өтмөктөр же таблеткалар), боз шилтемелер.disabled үчүн кошуңуз жана эч кандай hover эффекттери жок .
Шилтеменин иштөөсүнө таасир эткен жок
<a>Бул класс анын функционалдуулугун эмес, сырткы көрүнүшүн гана өзгөртөт . Бул жердеги шилтемелерди өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.
Navbars - бул колдонмоңуз же сайтыңыз үчүн навигация баштары катары кызмат кылган жооп берүүчү мета компоненттер. Алар мобилдик көрүнүштөрдө жыгыла баштайт (жана которуштурууга болот) жана жеткиликтүү көрүнүштүн кеңдиги өскөн сайын горизонталдуу болуп калат.
Негизделген навигация шилтемелери учурда колдоого алынбайт.
Толуп жаткан мазмун
Bootstrap навигация тилкеңиздеги мазмунга канча орун керек экенин билбегендиктен, мазмунду экинчи сапка ороп коюуда көйгөйлөргө туш болушуңуз мүмкүн. Муну чечүү үчүн, сиз:
Navbar элементтеринин санын же туурасын азайтыңыз.
Жооптуу утилита класстарын колдонуу менен белгилүү бир экран өлчөмүндөгү айрым навигация элементтерин жашырыңыз .
Navbarыңыз жыйылган жана горизонталдуу режимге которулган чекитти өзгөртүңүз. Өзгөрмөлөрдү ыңгайлаштырыңыз @grid-float-breakpointже өз медиа сурооңузду кошуңуз.
JavaScript плагинин талап кылат
Эгер JavaScript өчүрүлгөн болсо жана көрүү терезеси навигация тилкеси жыйылгандай тар болсо, анда навигация тилкесин кеңейтүү жана ичиндеги мазмунду көрүү мүмкүн болбой калат .navbar-collapse.
Жооптуу навигация кыйратуучу плагинди Bootstrap версияңызга кошууну талап кылат.
Көрүү терезеси караганда тар болгондо чабыт панели өзүнүн вертикалдуу мобилдик көрүнүшүнө жыгылат, ал эми @grid-float-breakpointкөрүү терезеси эң аз дегенде @grid-float-breakpointтуурасы болгондо горизонталдуу мобилдик эмес көрүнүшүнө кеңейет. Navbar кыйраганда/кеңейгенде көзөмөлдөө үчүн, бул өзгөрмөнү Less булагынан тууралаңыз. Демейки маани 768px(эң кичинекей "кичинекей" же "планшет" экраны).
Navbars жеткиликтүү кыл
Элементти колдонууну унутпаңыз <nav>же, мисалы, a сыяктуу жалпы элементти колдонсоңуз, аны жардамчы технологиялардын колдонуучулары үчүн белгилөө аймагы катары так аныктоо үчүн ар бир навигация тилкесине <div>a кошуңуз .role="navigation"
Бренд сүрөтү
Текстти алмаштырып, Navbar брендин өз сүрөтүңүз менен алмаштырыңыз <img>. Анын өзүнүн толтургучтары жана бийиктиги бар болгондуктан .navbar-brand, сүрөтүңүзгө жараша кээ бир CSSти жокко чыгарышыңыз керек болушу мүмкүн.
Формалар
.navbar-formТар көрүү терезелеринде туура вертикалдуу тегиздөө жана жыйылган жүрүм-турум үчүн форманын мазмунун ичине жайгаштырыңыз . Тегиздөө параметрлерин колдонуңуз, ал навигация тилкесинин мазмунунда жайгашкан жерди чечет.
Эскерте кетсек, .navbar-formкодунун көбүн .form-inlinemixin аркылуу бөлүшөт. Киргизүү топтору сыяктуу кээ бир форманы башкаруу элементтери навигация тилкесинде туура көрсөтүлүшүн талап кылышы мүмкүн.
Ар бир киргизүү үчүн энбелги кошпосоңуз, экранды окугучтар формаларыңызда кыйынчылыктарга туш болушат. Бул саптык формалар үчүн .sr-onlyкласстын жардамы менен энбелгилерди жашыра аласыз. aria-label, aria-labelledbyже titleатрибут сыяктуу жардамчы технологиялар үчүн энбелги берүүнүн дагы альтернативалуу ыкмалары бар. Эгерде булардын бири да жок болсо, экранды окугандар placeholderатрибутту колдонушу мүмкүн, эгерде бар болсо, бирок placeholderбашка этикеткалоо ыкмаларын алмаштыруу катары колдонуу сунушталбайт.
Стандарттык баскыч класстары сыяктуу эле , элементтерде .navbar-btnколдонулушу мүмкүн . Бирок, стандарттык баскыч класстары да, ичиндеги элементтерде колдонулбашы керек .<a><input>.navbar-btn<a>.navbar-nav
Текст
Тексттин саптарын элементке ороп алыңыз .navbar-text, адатта <p>туура жетектөө жана түс үчүн тегге.
Nav эмес шилтемелер
Кадимки навигациялоо компонентине кирбеген стандарттык шилтемелерди колдонгон адамдар үчүн .navbar-linkклассты демейки жана тескери навигация варианттары үчүн туура түстөрдү кошуу үчүн колдонуңуз.
Компонентти тегиздөө
.navbar-leftЖеткирүү шилтемелерин, формаларды, баскычтарды же текстти же .navbar-rightпайдалуу класстарды колдонуп тегиздеңиз . Эки класс тең көрсөтүлгөн багытта CSS флоатын кошот. Мисалы, навигация шилтемелерин тегиздөө үчүн, аларды <ul>тиешелүү пайдалуу класс колдонулган өзүнчө жайгаштырыңыз.
Бул класстар жана нын аралаштырылган версиялары .pull-left, .pull-rightбирок алар түзмөктүн өлчөмдөрүндө навигация панелинин компоненттерин оңой иштетүү үчүн медиа сурамдарына ылайыкташтырылган.
Бир нече компоненттерди туура тегиздөө
Навбарларда учурда бир нече .navbar-rightкласстар менен чектөөлөр бар. Мазмунду туура мейкиндик үчүн, биз акыркы .navbar-rightэлементте терс маржаны колдонобуз. Бул классты колдонгон бир нече элементтер болгондо, бул чектер ойдогудай иштебейт.
Биз бул компонентти v4 форматында кайра жаза алганыбызда кайра карап чыгабыз.
Үстүнө бекитилди
.navbar-fixed-topКошуп жана камтууга .containerже .container-fluidортосуна жана навигация тилкесинин мазмунуна кошуу .
Денеге толтуруу талап кылынат
Туруктуу навигация тилкеси башка мазмунуңузду каптап paddingтурат , эгер сиз <body>. Өзүңүздүн баалуулуктарыңызды сынап көрүңүз же төмөнкү биздин үзүндүнү колдонуңуз. Кеңеш: Демейки боюнча, навигация тилкесинин бийиктиги 50px.
Муну негизги Bootstrap CSS'тен кийин киргизиңиз.
Түбүнө чейин бекитилген
.navbar-fixed-bottomКошуп жана камтууга .containerже .container-fluidортосуна жана навигация тилкесинин мазмунуна кошуу .
Денеге толтуруу талап кылынат
paddingЭгер сиз ылдый жагына кошпосоңуз, туруктуу навигация башка мазмунуңузду каптап турат <body>. Өзүңүздүн баалуулуктарыңызды сынап көрүңүз же төмөнкү биздин үзүндүнү колдонуңуз. Кеңеш: Демейки боюнча, навигация тилкесинин бийиктиги 50px.
Муну негизги Bootstrap CSS'тен кийин киргизиңиз.
Статикалык үстү
Толук кеңдиктеги навигация тилкесин түзүңүз, ал барак менен бирге жылдырылат же ортосуна же тактасына мазмунун кошуу .navbar-static-topжана камтуу ..container.container-fluid
Класстардан айырмаланып .navbar-fixed-*, сиз body.
Тескери навигация тилкеси
кошуу менен навигация панелинин көрүнүшүн өзгөртүңүз .navbar-inverse.
Нан күкүмдөрү
Навигация иерархиясында учурдагы барактын жайгашкан жерин көрсөтүңүз.
:beforeСепараторлор жана аркылуу CSS автоматтык түрдө кошулат content.
Rdio тарабынан шыктандырылган жөнөкөй баракчалар, колдонмолор жана издөө натыйжалары үчүн эң сонун. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.
Барактоо компонентин белгилөө
Пагинация компоненти <nav>аны экрандагы окурмандарга жана башка жардамчы технологияларга багыттоо бөлүмү катары аныктоо үчүн элементке оролгон болушу керек. Кошумчалай кетсек, баракта буга чейин эле бир нече навигация бөлүмдөрү болушу мүмкүн болгондуктан (мисалы, баш тилкедеги негизги навигация же каптал тилкесинде навигация), анын максатын чагылдырган сыпаттаманы aria-labelберүү сунушталат . <nav>Мисалы, пагинация компоненти издөө натыйжаларынын топтому арасында өтүү үчүн колдонулса, тиешелүү энбелги болушу мүмкүн aria-label="Search results pages".
Өчүрүлгөн жана активдүү мамлекеттер
Шилтемелер ар кандай жагдайларга ылайыкташтырылган. .disabledЧыкылбаган шилтемелер үчүн жана .activeучурдагы баракты көрсөтүү үчүн колдонуңуз .
<span>Белгиленген стилдерди сактап, чыкылдатуу функциясын алып салуу үчүн жигердүү же өчүрүлгөн анкерлерди алмаштырууну же мурунку/кийинки жебелерде анкерди калтырууну сунуштайбыз.
Өлчөмү
Чоңураак же кичирээк беттештирүүнү каалайсызбы? Кошумча .pagination-lgже .pagination-smкошумча өлчөмдөр үчүн.
Пейжер
Жарык белгилөө жана стилдер менен жөнөкөй баракчаларды ишке ашыруу үчүн мурунку жана кийинки тез шилтемелер. Бул блогдор же журналдар сыяктуу жөнөкөй сайттар үчүн сонун.
Демейки мисал
Демейки боюнча, пейджер шилтемелерди борборлойт.
Тегизделген шилтемелер
Же болбосо, ар бир шилтемени тараптарга тегиздей аласыз:
Кошумча өчүрүлгөн абал
Пейжердик шилтемелер, ошондой эле пагинациядан жалпы .disabledпайдалуу классты колдонушат.
Энбелгилер
Мисал
Мисал аталышы Жаңы
Мисал аталышы Жаңы
Мисал аталышы Жаңы
Мисал аталышы Жаңы
Мисал аталышы Жаңы
Мисал аталышы Жаңы
Жеткиликтүү вариациялар
Энбелгинин көрүнүшүн өзгөртүү үчүн төмөндө айтылган өзгөрткүч класстардын каалаганын кошуңуз.
Демейки Негизги Ийгилик маалыматы эскертүү коркунучу
тонна этикеткалар барбы?
Тар контейнердин ичинде ар бири өзүнүн inline-blockэлементин камтыган ондогон сызык энбелгилери болгондо (сөлөкөт сыяктуу) рендеринг көйгөйлөрү келип чыгышы мүмкүн. Бул туура жол display: inline-block;. Контекст жана мисал үчүн #13219 караңыз .
Белгилер
<span class="badge">Шилтемелерге, Bootstrap навигацияларына жана башкаларга кошуу менен жаңы же окула элек нерселерди оңой бөлүп алыңыз.
Жумботронду толук туурасы жана тегеректелген бурчтары жок кылуу үчүн, аны бардык .containers сыртына коюп, анын ордуна .containerичине бирди кошуңуз.
Барактын аталышы
h1Барактагы мазмундун бөлүктөрүн туура бөлүштүрүү жана бөлүү үчүн жөнөкөй кабык . h1Ал демейки smallэлементти, ошондой эле башка көптөгөн компоненттерди (кошумча стилдер менен) колдоно алат .
Эгерде сиз Pinterest сыяктуу ар кандай бийиктиктеги жана/же кеңдиктеги эскиздердин презентациясын издеп жатсаңыз, Masonry , Isotope же Salvattore сыяктуу үчүнчү тараптын плагиндерин колдонушуңуз керек болот .
Демейки мисал
Демейки боюнча, Bootstrap эскиздери минималдуу талап кылынган белгилөө менен байланышкан сүрөттөрдү көрсөтүү үчүн иштелип чыккан.
Ыңгайлаштырылган мазмун
Бир аз кошумча белгилөө мене��, эскиздерге аталыштар, абзацтар же баскычтар сыяктуу каалаган HTML мазмунун кошууга болот.
Эскиз энбелгиси
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.
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.
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.
Колдонуучунун типтүү аракеттери үчүн контексттик пикир билдирүүлөрүн жеткиликтүү жана ийкемдүү эскертүү билдирүүлөрү менен камсыз кылыңыз.
Мисалдар
Каалаган текстти жана кошумча өчүрүү баскычын жана негизги эскертүү билдирүүлөрү үчүн .alertтөрт контексттик класстын бирине (мисалы, ) ороп алыңыз..alert-success
Демейки класс жок
Эскертүүлөрдө демейки класстар жок, болгону базалык жана өзгөрткүч класстар. Демейки боз эскертүү өтө эле мааниге ээ эмес, андыктан контексттик класс аркылуу түрүн көрсөтүшүңүз керек. Ийгилик, маалымат, эскертүү же коркунучтан тандаңыз.
Мыкты жасалды! Сиз бул маанилүү эскертүү билдирүүсүн ийгиликтүү окудуңуз.
Көңүл бургула! Бул эскертүүгө көңүл буруңуз, бирок бул өтө маанилүү эмес.
Эскертүү! Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң.
О, шак! Бир нече нерсени өзгөртүп, кайра тапшырып көрүңүз.
Кабыл алынбаган эскертүүлөр
Кошумча .alert-dismissibleжана жабуу баскычын кошуу менен ар кандай эскертүүлөрдү түзүңүз.
JavaScript эскертүү плагинин талап кылат
Толук иштеши үчүн, четке кагылчу эскертүүлөр үчүн JavaScript плагинди колдонушуңуз керек .
Эскертүү! Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң.
Бардык түзмөктөрдө туура жүрүм-турумду камсыз кылуу
Маалымат атрибуту <button>менен элементти колдонууну унутпаңыз .data-dismiss="alert"
Эскертүүлөрдөгү шилтемелер
.alert-linkАр кандай эскертүүнүн ичинде дал келген түстүү шилтемелерди тез камсыз кылуу үчүн пайдалуу классты колдонуңуз .
Жөнөкөй, бирок ийкемдүү прогресс тилкелери менен жумуш процессинин же иш-аракеттин жүрүшү жөнүндө акыркы пикирди бериңиз.
Браузердик шайкештик
Прогресс тилкелери кээ бир эффекттерине жетүү үчүн CSS3 өтүүлөрүн жана анимацияларын колдонушат. Бул функциялар Internet Explorer 9 жана андан төмөн же Firefoxтун эски версияларында колдоого алынбайт. Opera 12 анимацияларды колдобойт.
Мазмундун коопсуздук саясаты (CSP) шайкештиги
Эгер веб- сайтыңызда уруксат бербеген Контенттик Коопсуздук Саясаты (CSP) болсо, анда төмөнкү мисалдарыбызда көрсөтүлгөндөй прогресс тилкесинин туурасын коюу style-src 'unsafe-inline'үчүн саптык атрибуттарды колдоно албайсыз . styleКатуу CSP'лерге туура келген тууралыктарды орнотуунун альтернативалуу ыкмаларына бир аз ыңгайлаштырылган JavaScript (бул орнотулган element.style.width) же ыңгайлаштырылган CSS класстарын колдонуу кирет.
Негизги мисал
Демейки прогресс тилкеси.
60% бүттү
этикеткасы менен
Көрүнүүчү пайызды көрсөтүү үчүн прогресс тилкесинин ичинен классты <span>алып салыңыз ..sr-only
60%
min-widthЭнбелги тексти төмөн пайыздар үчүн да окумдуу болушу үчүн, прогресс тилкесине a кошууну карап көрүңүз .
0%
2%
Контексттик альтернативалар
Прогресс тилкелери бирдей баскычтардын айрымдарын жана ырааттуу стилдер үчүн эскертүү класстарын колдонот.
40% аяктады (ийгилик)
20% бүттү
60% аяктады (эскертүү)
80% аяктады (коркунуч)
Striped
Чаардуу эффект түзүү үчүн градиент колдонот. IE9 жана төмөндө жеткиликтүү эмес.
40% аяктады (ийгилик)
20% бүттү
60% аяктады (эскертүү)
80% аяктады (коркунуч)
Анимацияланган
Оңдон солго сызыктарды жандандыруу үчүн .activeкошуу . .progress-bar-stripedIE9 жана төмөндө жеткиликтүү эмес.
45% бүттү
Үйүлгөн
.progressАларды тизүү үчүн бир нече тилкеге салыңыз.
35% аяктады (ийгилик)
20% бүттү (эскертүү)
10% аяктады (коркунуч)
Медиа объект
Тексттик мазмун менен бирге солго же оңго тегизделген сүрөттү камтыган ар кандай типтеги компоненттерди (мисалы, блог комментарийлери, твиттер ж.б.) куруу үчүн абстракттуу объект стилдери.
Демейки медиа
Демейки медиа медиа объектти (сүрөттөр, видео, аудио) мазмун блогунун сол же оң жагында көрсөтөт.
Медиа аталышы
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.
Медиа аталышы
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.
Кыстарылган медиа аталышы
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.
Медиа аталышы
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.
Медиа аталышы
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.
Класстар .pull-leftжана .pull-rightошондой эле бар жана буга чейин медиа компонентинин бир бөлүгү катары колдонулган, бирок v3.3.0 боюнча ал колдонуу үчүн эскирген. Алар болжол менен .media-leftжана менен эквиваленттүү .media-right, бирок .media-righthtml'ден кийин жайгаштырылышы керек .media-body.
Медиа тегиздөө
Сүрөттөрдү же башка медианы өйдө, ортого же ылдый жагына тегиздөө мүмкүн. Демейки жогорку тегизделген.
Жогорку тегизделген медиа
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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.
Орто тегизделген медиа
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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.
Төмөндө тегизделген медиа
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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus.
Медиа тизмеси
Бир аз кошумча белгилөө менен сиз тизменин ичиндеги медианы колдоно аласыз (комментарий жиптери же макала тизмелери үчүн пайдалуу).
Медиа аталышы
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.
Кыстарылган медиа аталышы
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.
Кыстарылган медиа аталышы
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.
Кыстарылган медиа аталышы
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.
Тизме тобу
Тизме топтору элементтердин жөнөкөй тизмелерин гана эмес, ыңгайлаштырылган мазмуну менен татаалдарын көрсөтүү үчүн ийкемдүү жана күчтүү компонент.
Негизги мисал
Эң негизги тизме тобу бул жөн гана тизме элементтери жана тийиштүү класстары бар иретсиз тизме. Анын негизинде кийинки варианттар менен же керек болсо өзүңүздүн CSSңизди түзүңүз.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Белгилер
Тизме тобунун каалаган элементине бейджиктер компонентин кошуңуз жана ал автоматтык түрдө оң жакта жайгашат.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Байланышкан нерселер
Тизме элементтеринин ордуна анкер тегдерин колдонуу менен тизме тобунун элементтерин байланыштырыңыз (бул ошондой эле дын <div>ордуна ата-энени билдирет <ul>). Ар бир элементтин айланасында жеке ата-энелердин кереги жок.
Тизме тобунун элементтери тизме элементтеринин ордуна баскычтар болушу мүмкүн (бул ошондой эле дын <div>ордуна ата-энени билдирет <ul>). Ар бир элементтин айланасында жеке ата-энелердин кереги жок. Бул жерде стандарттуу класстарды колдонбоңуз ..btn
Өчүрүлгөн нерселер
.disabledӨчүк болуп көрүнүү үчүн .list-group-itemаны боз түскө кошуңуз .
Дайыма эле зарыл болбосо да, кээде сиз DOMуңузду кутуга салышыңыз керек. Мындай жагдайлар үчүн панелдин компонентин байкап көрүңүз.
Негизги мисал
Демейки боюнча, бардык .panelнерсе кээ бир мазмунду камтуу үчүн кээ бир негизги чектерди жана толтурууну колдонуу болуп саналат.
Негизги панелдин мисалы
Баш аты бар панель
менен панелиңизге рубрика контейнерин оңой кошуңуз .panel-heading. Алдын ала стилдеги аталышты кошуу үчүн класс менен каалаганын <h1>кошо аласыз . Бирок, шрифттин өлчөмү - менен жокко чыгарылат .<h6>.panel-title<h1><h6>.panel-heading
Шилтемелерди туура боёш үчүн, шилтемелерди ичиндеги аталыштарга жайгаштырууну унутпаңыз .panel-title.
Аталышы жок панелдин аталышы
Панелдин мазмуну
Панелдин аталышы
Панелдин мазмуну
Колонтитул менен панель
баскычтарды же кошумча текстти .panel-footer. Контексттик вариацияларды колдонууда панелдин колонтитулдары түстөрдү жана чектерди мурастабай турганын эске алыңыз, анткени алар алдыңкы планда болууга тийиш эмес.
Панелдин мазмуну
Контексттик альтернативалар
Башка компоненттер сыяктуу эле, контексттик абал класстарынын каалаганын кошуу менен панелди белгилүү бир контекстке оңой эле маңыздуураак кылыңыз.
Панелдин аталышы
Панелдин мазмуну
Панелдин аталышы
Панелдин мазмуну
Панелдин аталышы
Панелдин мазмуну
Панелдин аталышы
Панелдин мазмуну
Панелдин аталышы
Панелдин мазмуну
Столдор менен
.tableТынчтыксыз дизайн үчүн панелдин ичинде эч кандай чексиз кошуңуз . Эгерде бар болсо .panel-body, бөлүү үчүн үстөлдүн башына кошумча чекти кошобуз.
Панелдин аталышы
Демейки панелдин мазмуну бул жерде. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Биринчи аты
Акыркы аты
Колдонуучунун аты
1
Марк
Отто
@mdo
2
Жакып
Торнтон
@fat
3
Ларри
чымчык
@twitter
Эгерде панелдин корпусу жок болсо, компонент панелдин аталышынан үстөлгө үзгүлтүксүз жылат.
Демейки панелдин мазмуну бул жерде. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Жооптуу кыстаруу
Браузерлерге видео же слайдшоу өлчөмдөрүн аларды камтыган блоктун кеңдигине жараша аныктоого уруксат бериңиз, аны каалаган түзмөктө туура масштабдата турган ички катыш түзүңүз.
<iframe>Эрежелер , <embed>, <video>, жана <object>элементтерге түздөн- түз колдонулат ; .embed-responsive-itemбашка атрибуттар үчүн стилдештирүүнү кааласаңыз , ачык-айкын тукум классын колдонуңуз .
Про учу! Сизге киргизүүнүн кереги жок frameborder="0", <iframe>анткени биз аны сиз үчүн жокко чыгарабыз.
Wells
Демейки жакшы
Кудукту элементке жөнөкөй эффект катары колдонуңуз, ага кошумча эффект берүү.
Карачы, мен кудуктун ичиндемин!
Кошумча класстар
Толтургучтарды жана тегеректелген бурчтарды эки кошумча өзгөрткүч класстары менен башкаруу.