Над дузина компоненти за повеќекратна употреба изградени за да обезбедат иконографија, паѓачки мени, групи за внесување, навигација, предупредувања и многу повеќе.
Глификони
Достапни хиероглифи
Вклучува над 250 хиероглифи во формат на фонтови од сетот Glyphicon Halflings. Glyphicons Halflings вообичаено не се достапни бесплатно, но нивниот креатор ги направи достапни за Bootstrap бесплатно. Како благодарност, бараме само да вклучите врска назад до Glyphicons секогаш кога е можно.
глификон глификон-ѕвездичка
глификон глификон-плус
глификон глификон-евро
глификон глификон-еур
глификон глификон-минус
глификон глификон-облак
глификон глификон-плик
глификон глификон-молив
глификон глификон-стакло
глификон глификон-музика
glyphicon glyphicon-пребарување
глификон глификон-срце
глификон глификон-ѕвезда
глификон глификон-ѕвезда-празен
glyphicon glyphicon-корисник
глификон глификон-филм
глификон глификон-ти-голем
глификон глификон-ти
glyphicon glyphicon-th-list
глификон глификон-ок
glyphicon glyphicon-отстрани
glyphicon glyphicon-zoom-in
глификон глификон-зумирање
глификон глификон-исклучен
глификон глификон-сигнал
глификон глификон-запец
glyphicon glyphicon-ѓубре
глификон глификон-дом
glyphicon glyphicon-датотека
глификон глификон-време
глификон глификон-пат
glyphicon glyphicon-download-alt
glyphicon glyphicon-преземи
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
глификон глификон-игра-круг
глификон глификон-повтори
glyphicon glyphicon-освежи
глификон glyphicon-list-alt
глификон глификон-брава
глификон глификон-знаме
glyphicon glyphicon-слушалки
глификон глификон-исклучување на волуменот
глификон глификон-намалување на јачината на звукот
глификон глификон-волумен
glyphicon glyphicon-qrcode
глификон глификон-баркод
глификон глификон-ознака
глификон глификон-ознаки
глификон глификон-книга
глификон глификон-обележувач
глификон глификон-печатење
глификон глификон-камера
глификон глификон-фонт
глификон глификон-болд
глификон глификон-курзив
глификон глификон-текст-висина
глификон глификон-текст-ширина
глификон glyphicon-порамни-лево
глификон глификон-порамни-центар
глификон glyphicon-порамни-десно
глификон glyphicon-порамни-оправда
глификон глификон-листа
глификон глификон-вовлекување-лево
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-видео
глификон глификон-слика
глификон глификон-мапа-маркер
глификон глификон-прилагоди
глификон глификон-нијанса
glyphicon glyphicon-уреди
glyphicon glyphicon-дел
глификон глификон-проверка
глификон глификон-помести
глификон глификон-чекор-наназад
glyphicon glyphicon-брзо-назад
глификон глификон-назад
глификон глификон-игра
глификон глификон-пауза
глификон глификон-стоп
глификон глификон-напред
глификон глификон-брзо напред
глификон глификон-чекор-напред
глификон глификон-исфрли
глификон глификон-шеврон-лево
глификон глификон-шеврон-десно
глификон глификон-плус-знак
глификон глификон-минус-знак
glyphicon glyphicon-отстрани-знак
глификон глификон-ок-знак
глификон глификон-прашање-знак
глификон glyphicon-инфо-знак
glyphicon glyphicon-скриншот
glyphicon glyphicon-отстрани-круг
глификон глификон-ок-круг
глификон глификон-бан-круг
глификон глификон-стрелка-лево
глификон глификон-стрелка-десно
глификон глификон-стрелка-нагоре
глификон глификон-стрелка надолу
глификон glyphicon-сподели-алт
глификон glyphicon-промени големина-полн
глификон glyphicon-промени големина-мал
глификон глификон-извичник-знак
глификон глификон-подарок
глификон глификон-лист
глификон глификон-оган
глификон глификон-очи-отворени
глификон глификон-затвори очи
глификон глификон-предупредувачки знак
глификон глификон-рамнина
глификон глификон-календар
глификон глификон-случаен
глификон глификон-коментар
глификон глификон-магнет
глификон глификон-шеврон-ап
глификон глификон-шеврон-долу
glyphicon glyphicon-ретвит
глификон глификон-количка
глификон глификон-папка-затвори
glyphicon glyphicon-папка-отвори
glyphicon glyphicon-промени големина-вертикална
glyphicon glyphicon-промени големина-хоризонтален
глификон glyphicon-hdd
глификон glyphicon-bullhorn
глификон глификон-ѕвонче
glyphicon glyphicon-сертификат
глификон глификон-палци-нагоре
глификон глификон-палци-надолу
глификон глификон-рака-десно
глификон глификон-рака-лево
glyphicon glyphicon-рака-нагоре
глификон глификон-рака надолу
глификон глификон-круг-стрелка-десно
глификон глификон-круг-стрелка-лево
глификон глификон-круг-стрелка-нагоре
глификон глификон-круг-стрелка-надолу
глификон глификон-глобус
глификон глификон-клуч
глификон глификон-задачи
глификон глификон-филтер
глификон глификон-актовка
глификон глификон-цел екран
глификон глификон-табла
глификон глификон-клип
глификон глификон-срце-празна
глификон глификон-врска
глификон глификон-телефон
glyphicon глификон-pushpin
глификон глификон-усд
глификон glyphicon-gbp
глификон глификон-сорт
глификон глификон-подредување-по-азбука
глификон глификон-подреди-по-азбука-алт
глификон глификон-сорт-по-ред
глификон глификон-сорт-по-ред-алт
глификон глификон-сорт-по-атрибути
глификон глификон-сорт-по-атрибути-алт
глификон глификон-нештиклирано
глификон глификон-прошири
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-најави се
глификон глификон-флеш
glyphicon glyphicon-одјави
глификон глификон-нов-прозорец
глификон глификон-запис
glyphicon glyphicon-зачувај
глификон глификон-отворен
glyphicon glyphicon-зачуван
глификон глификон-увоз
глификон глификон-извоз
глификон глификон-испрати
глификон глификон-флопи-диск
glyphicon glyphicon-флопи-зачуван
glyphicon glyphicon-флопи-отстрани
glyphicon glyphicon-флопи-зачувај
глификон глификон-флопи-отворен
glyphicon glyphicon-кредитна-картичка
глификон глификон-пренос
glyphicon glyphicon-прибор за јадење
глификон глификон-заглавие
глификон глификон-компресиран
glyphicon glyphicon-слушалка
глификон глификон-телефон-алт
глификон глификон-кула
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-видео
glyphicon glyphicon-преводи
глификон глификон-звук-стерео
глификон глификон-звук-долби
глификон глификон-звук-5-1
глификон глификон-звук-6-1
глификон глификон-звук-7-1
glyphicon glyphicon-copyright-mark
глификон глификон-регистрација-ознака
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
глификон глификон-дрво-четинар
глификон глификон-дрво-листопаден
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
глификон глификон-ниво-нагоре
глификон глификон-копија
глификон глификон-паста
глификон глификон-алармирање
glyphicon glyphicon-еквалајзер
глификон глификон-крал
глификон глификон-кралица
глификон глификон-пешак
глификон глификон-епископ
глификон глификон-витез
глификон глификон-бебе-формула
глификон глификон-шатор
глификон глификон-табла
глификон глификон-кревет
глификон глификон-јаболко
glyphicon glyphicon-брише
глификон глификон-песочен часовник
глификон глификон-светилка
glyphicon glyphicon-дупликат
глификон глификон-свинче-банка
глификон глификон-ножици
глификон глификон-биткоин
glyphicon glyphicon-btc
глификон glyphicon-xbt
глификон глификон-јен
глификон glyphicon-jpy
глификон глификон-рубља
глификон глификон-руб
глификон глификон-скала
глификон глификон-ледено-лоли
glyphicon glyphicon-ледено-лол-вкус
глификон глификон-образование
глификон глификон-опција-хоризонтална
глификон глификон-опција-вертикална
glyphicon glyphicon-мени-хамбургер
глификон глификон-модален-прозорец
глификон глификон-масло
глификон глификон-зрно
glyphicon glyphicon-очила за сонце
глификон глификон-големина на текст
глификон глификон-текст-боја
глификон глификон-текст-позадина
глификон глификон-објект-порамни-врв
глификон глификон-објект-порамни-долу
глификон глификон-објект-порамни-хоризонтален
глификон глификон-објект-порамни-лево
глификон глификон-објект-порамни-вертикално
глификон глификон-објект-порамни-десно
глификон глификон-триаголник-право
глификон глификон-триаголник-лево
глификон глификон-триаголник-долу
глификон глификон-триаголник-врв
glyphicon glyphicon-конзола
глификон глификон-надреден
глификон глификон-претплата
глификон глификон-мени-лево
глификон глификон-мени-десно
глификон глификон-мени-долу
glyphicon glyphicon-мени-up
Како да се користи
Поради перформанси, сите икони бараат основна класа и индивидуална класа на икони. За да го користите, ставете го следниов код речиси насекаде. Погрижете се да оставите празно место помеѓу иконата и текстот за правилно полнење.
Не мешајте со други компоненти
Класите на икони не можат директно да се комбинираат со други компоненти. Тие не треба да се користат заедно со други класи на истиот елемент. Наместо тоа, додадете вгнездено <span>и применете ги класите на иконите на <span>.
Само за употреба на празни елементи
Класите на икони треба да се користат само на елементи што не содржат текстуална содржина и немаат детски елементи.
Промена на локацијата на фонтот на иконата
Bootstrap претпоставува дека датотеките со фонтови со икони ќе бидат лоцирани во ../fonts/директориумот, во однос на компајлираните CSS-датотеки. Преместувањето или преименувањето на тие датотеки со фонтови значи ажурирање на CSS на еден од трите начини:
Променете ги @icon-font-pathи/или @icon-font-nameпроменливите во изворните датотеки Less.
Користете која било опција што најмногу одговара на вашата специфична поставка за развој.
Достапни икони
Современите верзии на помошни технологии ќе објават CSS генерирана содржина, како и специфични знаци на Unicode. За да избегнеме ненамерен и збунувачки излез во читачите на екранот (особено кога иконите се користат исклучиво за украсување), ги криеме со aria-hidden="true"атрибутот.
Ако користите икона за да пренесете значење (наместо само како декоративен елемент), погрижете се ова значење да се пренесе и на помошните технологии - на пример, вклучете дополнителна содржина, визуелно скриена со .sr-onlyкласата.
Ако креирате контроли без друг текст (како што <button>содржи само икона), секогаш треба да обезбедите алтернативна содржина за да ја идентификувате целта на контролата, така што таа ќе има смисла за корисниците на помошните технологии. Во овој случај, можете да додадете aria-labelатрибут на самата контрола.
Примери
Користете ги во копчиња, групи на копчиња за лента со алатки, навигација или претходно поставени внесувања.
Икона што се користи во предупредувањето за да се пренесе дека е порака за грешка, со дополнителен .sr-onlyтекст за да се пренесе ова навестување до корисниците на помошни технологии.
Завиткајте го активирањето на паѓачкото мени и паѓачкото мени во .dropdown, или друг елемент што декларира position: relative;. Потоа додадете HTML на менито.
Стандардно, паѓачкото мени автоматски се позиционира 100% од врвот и долж левата страна на неговиот родител. Додај .dropdown-menu-rightво a .dropdown-menuнадесно порамни го паѓачкото мени.
Може да бара дополнително позиционирање
Паѓачките мени автоматски се позиционираат преку CSS во рамките на нормалниот тек на документот. Ова значи дека паѓачките списоци може да бидат исечени од родители со одредени overflowсвојства или да се појавуваат надвор од границите на приказот. Решавајте ги овие прашања сами кога ќе се појават.
Застарено .pull-rightпорамнување
Почнувајќи од верзијата 3.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-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>елементите, но бидејќи поддржуваме паѓачки копчиња, можеме да работиме околу тоа.
Спуштање на копчињата
Користете кое било копче за да активирате паѓачко мени со тоа што ќе го ставите во a .btn-groupи ќе обезбедите соодветна ознака на менито.
Зависност од приклучокот
Паѓачките копчиња бараат паѓачкиот приклучок да биде вклучен во вашата верзија на Bootstrap.
Паѓања со едно копче
Претворете го копче во паѓачкото копче со некои основни промени во обележувањето.
Проширете ги контролите на формата со додавање текст или копчиња пред, после или од двете страни на кој било текст базиран на <input>. Користете .input-groupго со .input-group-addonили .input-group-btnза прикачување или додавање елементи на сингл .form-control.
<input>Само текстуални
Избегнувајте користење на <select>елементи овде бидејќи тие не можат целосно да се стилизираат во прелистувачите на WebKit.
Избегнувајте да користите <textarea>елементи овде бидејќи нивниот rowsатрибут нема да се почитува во некои случаи.
Советите за алатки и поповерите во групите за внес бараат посебно поставување
Кога користите совети за алатки или поповери на елементи во .input-group, ќе мора да ја наведете опцијата container: 'body'за да се избегнат несаканите несакани ефекти (како што е елементот да расте пошироко и/или да ги изгуби заоблените агли кога ќе се активира советот за алатка или пукањето).
Не мешајте со други компоненти
Не мешајте групи од форми или класи на колони во мрежа директно со влезни групи. Наместо тоа, вгнездувајте ја влезната група во внатрешноста на групата форми или елементот поврзан со мрежата.
Секогаш додавајте етикети
Читателите на екранот ќе имаат проблем со вашите формулари ако не вклучите етикета за секој влез. За овие влезни групи, погрижете се секоја дополнителна ознака или функционалност да се пренесе на помошните технологии.
Точната техника што треба да се користи (видливи <label>елементи, <label>елементи скриени со користење на класата или .sr-onlyупотреба на aria-label, aria-labelledby, aria-describedbyили атрибут) и кои дополнителни информации ќе треба да се пренесат ќе се разликуваат во зависност од точниот тип на графичка контрола за интерфејс што ја имплементирате. Примерите во овој дел даваат неколку предложени пристапи специфични за случајот.titleplaceholder
Основен пример
Ставете еден додаток или копче на двете страни на влезот. Можете исто така да поставите еден од двете страни на влезот.
Не поддржуваме повеќе додатоци ( .input-group-addonили .input-group-btn) на една страна.
Ние не поддржуваме повеќе контроли на форма во една влезна група.
Димензионирање
Додајте ги релативните класи за големината на формата во .input-groupсебе и содржината во неа автоматски ќе ја промени големината - нема потреба да се повторуваат класите за големина за контрола на формата на секој елемент.
��оле за избор и радио додатоци
Ставете го секое поле за избор или радио опција во додатокот на влезната група наместо текст.
Додатоци за копчиња
Копчињата во влезните групи се малку различни и бараат едно дополнително ниво на вгнездување. Наместо .input-group-addon, ќе треба да ги користите .input-group-btnза завиткување на копчињата. Ова е потребно поради стандардните стилови на прелистувачот што не може да се отфрлат.
Копчиња со паѓачки мени
Сегментирани копчиња
Повеќе копчиња
Иако може да имате само еден додаток по страна, може да имате повеќе копчиња во едно .input-group-btn.
Navs
Navs достапни во Bootstrap имаат споделено обележување, почнувајќи од основната .navкласа, како и споделени состојби. Заменете ги класите на модификаторите за да се префрлате помеѓу секој стил.
Користењето на навигација за панели со јазичиња бара приклучок за јазичиња JavaScript
Направете ги навигациите што се користат како навигација достапни
Ако користите навигација за да обезбедите лента за навигација, погрижете се да додадете a role="navigation"во најлогичниот родителски контејнер на <ul>, или да завиткате <nav>елемент околу целата навигација. Не ја додавајте улогата на <ul>самата, бидејќи тоа ќе спречи да биде објавена како вистинска листа од помошните технологии.
Јазичиња
Забележете дека .nav-tabsкласата бара .navосновна класа.
Лесно направете јазичиња или таблети еднакви ширини на нивните родители на екрани пошироки од 768 пиксели со .nav-justified. На помалите екрани, врските за навигација се наредени.
Оправданите врски за навигација на лентата за навигација во моментов не се поддржани.
Сафари и одговорни оправдани навигација
Од верзијата 9.1.2, Safari покажува грешка во која хоризонталното менување на големината на вашиот прелистувач предизвикува грешки при прикажување во оправданата навигација што се бришат по освежувањето. Оваа грешка е прикажана и во примерот за оправдана навигација .
Navbars се одговорни мета компоненти кои служат како заглавија за навигација за вашата апликација или локација. Тие почнуваат да се собираат (и се префрлаат) во мобилните прикази и стануваат хоризонтални како што се зголемува достапната ширина на приказот.
Оправданите врски за навигација на лентата за навигација во моментов не се поддржани.
Преполна содржина
Бидејќи Bootstrap не знае колку простор и е потребен на содржината во вашата лента за навигација, може да наидете на проблеми со завиткување на содржината во втор ред. За да го решите ова, можете:
Намалете ја количината или ширината на ставките на лентата за навигација.
Сокријте одредени ставки на лентата за навигација на одредени големини на екранот користејќи респонзивни класи на алатки .
Променете ја точката во која вашата лента за навигација се префрла помеѓу склопен и хоризонтален режим. Прилагодете ја @grid-float-breakpointпроменливата или додајте сопствено барање за ��едиум.
Потребен е приклучок за JavaScript
Ако JavaScript е оневозможен и пристаништето за преглед е доволно тесно што лентата за навигација се сруши, ќе биде невозможно да се прошири лентата за навигација и да се прегледа содржината во .navbar-collapse.
Одговорната лента за навигација бара приклучокот за колапс да биде вклучен во вашата верзија на Bootstrap.
Менување на прекинатата точка на прекинуваната лента за навигација на мобилниот телефон
Навивачката лента се собира во нејзиниот вертикален мобилен приказ кога пристаништето за гледање е потесно од @grid-float-breakpoint, и се проширува во хоризонталниот не-мобилен приказ кога приказот е барем @grid-float-breakpointво ширина. Прилагодете ја оваа променлива во изворот Помалку за да контролирате кога лентата за навигација ќе се сруши/проширува. Стандардната вредност е 768px(најмалиот „мал“ или „таблет“ екран).
Направете ги лентите за навигација достапни
Погрижете се да користите <nav>елемент или, ако користите погенерички елемент, како што е <div>, додајте го на role="navigation"секоја лента за навигација за експлицитно да го идентификувате како значаен регион за корисниците на помошни технологии.
Имиџ на брендот
Заменете го брендот на navbar со своја сопствена слика со замена на текстот за <img>. Со оглед на тоа што .navbar-brandима сопствено полнење и висина, можеби ќе треба да отфрлите дел од CSS во зависност од вашата слика.
Форми
Ставете ја содржината на формуларот .navbar-formза правилно вертикално порамнување и склопено однесување во тесни пристаништа за гледање. Користете ги опциите за порамнување за да одлучите каде се наоѓа во содржината на лентата за навигација.
Како глави нагоре, .navbar-formсподелува голем дел од својот код со .form-inlineпреку mixin. Некои контроли на форми, како што се групите за внесување, може да бараат фиксни ширини да се прикажуваат правилно во лентата за навигација.
Читателите на екранот ќе имаат проблем со вашите формулари ако не вклучите етикета за секој влез. За овие вградени форми, можете да ги скриете етикетите користејќи ја .sr-onlyкласата. Постојат дополнителни алтернативни методи за обезбедување ознака за помошни технологии, како што е атрибутот aria-label, aria-labelledbyили . titleАко ниту едно од овие не е присутно, читателите на екранот може да прибегнат кон користење на placeholderатрибутот, доколку е присутен, но имајте предвид дека употребата на placeholderкако замена за други методи за етикетирање не се препорачува.
Копчиња
Додадете ја .navbar-btnкласата на <button>елементи кои не се наоѓаат во a <form>за вертикално да ги центрирате во лентата за навигација.
Употреба специфична за контекст
Како и стандардните класи на копчиња , .navbar-btnможе да се користи на <a>и <input>елементи. Сепак, ниту .navbar-btnстандардните класи на копчиња не треба да се користат на <a>елементи во .navbar-nav.
Текст
Завиткајте низи од текст во елемент со .navbar-text, обично на <p>ознака за правилно водство и боја.
Линкови кои не се на навигација
За луѓе кои користат стандардни врски што не се во рамките на редовната компонента за навигација на лентата за навигација, користете ја .navbar-linkкласата за да ги додадете соодветните бои за стандардните и инверзните опции на лентата за навигација.
Порамнување на компонентите
Порамнете ги врските за навигација, формите, копчињата или текстот, користејќи ги .navbar-leftили .navbar-rightкласите на услужните програми. Двете класи ќе додадат CSS плови во наведената насока. На пример, за да ги усогласите врските за навигација, ставете ги во посебен <ul>со применетата соодветна класа на услужни програми.
Овие класи се мешани верзии на .pull-leftи .pull-right, но тие се опфатени со медиумски барања за полесно ракување со компонентите на лентата за навигација низ големини на уреди.
Десно порамнување на повеќе компоненти
Navbars моментално имаат ограничување со повеќе .navbar-rightкласи. За правилно празно место, користиме негативна маргина на последниот .navbar-rightелемент. Кога има повеќе елементи кои ја користат таа класа, овие маргини не функционираат како што е предвидено.
Ќе го повториме ова кога ќе можеме да ја преработиме таа компонента во v4.
Фиксиран на врвот
Додајте .navbar-fixed-topи вклучете содржина на .containerлентата .container-fluidза навигација во центарот и подлогата.
Потребно е полнење на телото
Фиксната лента за навигација ќе ја прекрие другата содржина, освен ако не додадете paddingна врвот на <body>. Испробајте ги вашите сопствени вредности или користете го нашиот фрагмент подолу. Совет: Стандардно, лентата за навигација е висока 50 пиксели.
Погрижете се да го вклучите ова по основниот Bootstrap CSS.
Фиксиран до дното
Додајте .navbar-fixed-bottomи вклучете содржина на .containerлентата .container-fluidза навигација во центарот и подлогата.
Потребно е полнење на телото
Фиксната лента за навигација ќе ја прекрие другата содржина, освен ако не додадете paddingна дното на <body>. Испробајте ги вашите сопствени вредности или користете го нашиот фрагмент подолу. Совет: Стандардно, лентата за навигација е висока 50 пиксели.
Погрижете се да го вклучите ова по основниот Bootstrap CSS.
Статичен врв
Создадете лента за навигација со целосна ширина што се оддалечува со страницата со додавање .navbar-static-topи вклучување на содржината на лентата за навигација во центарот .containerили .container-fluidво центарот и подлогата.
За разлика од .navbar-fixed-*класите, не треба да менувате никакви подлоги на body.
Превртена лента за навигација
Изменете го изгледот на лентата за навигација со додавање .navbar-inverse.
Трошки од леб
Наведете ја локацијата на тековната страница во рамките на навигациската хиерархија.
Сепараторите автоматски се додаваат во CSS преку :beforeи 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елемент, како и повеќето други компоненти (со дополнителни стилови).
Пример заглавие на страницата Подтекст за заглавие
Сликички
Проширете го мрежниот систем на Bootstrap со компонентата за сликички за лесно прикажување на мрежи од слики, видеа, текст и многу повеќе.
Ако барате презентација на сликички со различна висина и/или ширина слична на 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копче и затворање.
Обезбедете ажурирани повратни информации за напредокот на работниот тек или акција со едноставни, но флексибилни ленти за напредок.
Компатибилност со вкрстени прелистувачи
Лентите за напредок користат 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%
За да се осигурате дека текстот на етикетата останува читлив дури и за ниски проценти, размислете да додадете a min-widthна лентата за напредок.
0%
2%
Контекстуални алтернативи
Лентите за напредок користат некои од истите копчиња и класи на предупредување за конзистентни стилови.
40% заврши (успех)
20% Целосно
60% Целосно (предупредување)
80% Целосно (опасност)
Пругасти
Користи градиент за да создаде ефект на риги. Не е достапно во IE9 и подолу.
40% заврши (успех)
20% Целосно
60% Целосно (предупредување)
80% Целосно (опасност)
Анимирани
Додајте .activeво за да .progress-bar-stripedги анимирате лентите од десно кон лево. Не е достапно во IE9 и подолу.
45% Целосно
Наредени
Ставете повеќе ленти во истото .progressза да ги наредете.
35% Завршено (успешно)
20% Целосно (предупредување)
10% Целосно (опасност)
Медиумски објект
Стилови на апстрактни објекти за градење на различни видови компоненти (како коментари на блог, твитови, итн.) кои имаат слика порамнета лево или десно заедно со текстуалната содржина.
Стандарден медиум
Стандардниот медиум прикажува медиумски објект (слики, видео, аудио) лево или десно од блок со содржина.
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.
Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Класите .pull-leftи .pull-rightисто така постојат и претходно се користеа како дел од медиумската компонента, но се застарени за таа употреба од v3.3.0. Тие се приближно еквивалентни на .media-leftи .media-right, освен што .media-rightтреба да бидат поставени по .media-bodyво html.
Порамнување на медиумите
Сликите или другите медиуми може да се порамнат нагоре, на средината или на дното. Стандардно е порамнето одозгора.
Топ порамнети медиуми
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.
Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Средно порамнети медиуми
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.
Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Подредени медиуми од долу
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis во faucibus.
Донец сед одо дуи. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Медиумска листа
Со малку дополнително обележување, можете да користите медиуми во внатрешноста на списокот (корисно за теми за коментари или списоци на статии).
Медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Вгнезден медиумски наслов
Cras sit amet nibh libero, во gravida nulla. Нулта или метус скалериска пред да се соличитудин commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Листа група
Групите со списоци се флексибилна и моќна компонента за прикажување не само едноставни списоци на елементи, туку и сложени со прилагодена содржина.
Основен пример
Најосновната група списоци е едноставно неуредена листа со ставки од списокот и соодветни класи. Надоградете го со опциите што следат, или ваш сопствен CSS по потреба.
Cras justo odio
Dapibus ac facilisis во
Морби Лео Ризус
Porta ac consectetur ac
Вестибулум и ерос
Значки
Додајте ја компонентата за значки на која било ставка од групата список и таа автоматски ќе се позиционира десно.
14Cras justo odio
2Dapibus ac facilisis во
1Морби Лео Ризус
Поврзани ставки
Поврзете ги групните ставки на списокот со користење на прицврстувачки ознаки наместо ставки од списокот (тоа значи и родител <div>наместо <ul>). Нема потреба од индивидуални родители околу секој елемент.
Ставките на групата од списокот може да бидат копчиња наместо ставки од списокот (тоа значи и родител <div>наместо <ul>). Нема потреба од индивидуални родители околу секој елемент. Не користете ги стандардните .btnкласи овде.
Оневозможени ставки
Додај .disabledво a .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. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Име
Презиме
Корисничко име
1
Означи
Ото
@mdo
2
Јаков
Торнтон
@масти
3
Лери
птицата
@twitter
Ако нема тело на панелот, компонентата се движи од заглавие на панелот до табела без прекин.
Некои стандардни содржини на панелот овде. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis во
Морби Лео Ризус
Porta ac consectetur ac
Вестибулум и ерос
Одговорно вградување
Дозволете им на прелистувачите да ги одредат димензиите на видеото или слајдовите врз основа на ширината на нивниот блок што го содржи со создавање на внатрешен сооднос што правилно ќе се скалира на кој било уред.
Правилата директно се применуваат на <iframe>, <embed>, <video>и <object>елементи; опционално користете експлицитна класа на потомок .embed-responsive-itemкога сакате да го усогласите стилот за други атрибути.
Про-Совет! Вие не треба да го вклучите frameborder="0"во вашиот <iframe>s бидејќи ние го отфрламе тоа за вас.
Велс
Стандардно добро
Користете го бунарот како едноставен ефект на елемент за да му дадете вметнат ефект.
Види, јас сум во бунар!
Факултативни часови
Контролирајте ги облогите и заоблените агли со две опционални класи на модификатори.