Компоненти
Над дузина компоненти за многократна употреба, създадени да предоставят иконография, падащи менюта, групи за въвеждане, навигация, предупреждения и много други.
Над дузина компоненти за многократна употреба, създадени да предоставят иконография, падащи менюта, групи за въвеждане, навигация, предупреждения и много други.
Включва над 250 глифа във формат на шрифт от комплекта Glyphicon Halflings. Glyphicons Halflings обикновено не се предлагат безплатно, но създателят им ги е предоставил безплатно за Bootstrap. Като благодарност ви молим само да включите връзка обратно към Glyphicons, когато е възможно.
От съображения за производителност всички икони изискват основен клас и индивидуален клас икони. За да използвате, поставете следния код почти навсякъде. Не забравяйте да оставите разстояние между иконата и текста за правилна подложка.
Класовете икони не могат да се комбинират директно с други компоненти. Те не трябва да се използват заедно с други класове на същия елемент. Вместо това добавете вложени <span>
и приложете класовете икони към <span>
.
Класовете икони трябва да се използват само върху елементи, които не съдържат текстово съдържание и нямат дъщерни елементи.
Bootstrap предполага, че файловете с шрифтове на иконите ще бъдат разположени в ../fonts/
директорията спрямо компилираните CSS файлове. Преместването или преименуването на тези файлове с шрифтове означава актуализиране на CSS по един от трите начина:
@icon-font-path
и/или @icon-font-name
променливите в изходните Less файлове.url()
пътищата в компилирания CSS.Използвайте опцията, която най-добре отговаря на вашата специфична настройка за разработка.
Съвременните версии на помощните технологии ще обявяват съдържание, генерирано от CSS, както и специфични Unicode знаци. За да избегнем нежелано и объркващо извеждане в екранни четци (особено когато иконите се използват само за декорация), ние ги скриваме с aria-hidden="true"
атрибута.
Ако използвате икона, за да предадете значение (а не само като декоративен елемент), уверете се, че това значение се предава и на помощни технологии – например включете допълнително съдържание, визуално скрито с .sr-only
класа.
Ако създавате контроли без друг текст (като например, <button>
който съдържа само икона), винаги трябва да предоставяте алтернативно съдържание, за да идентифицирате целта на контролата, така че да има смисъл за потребителите на помощни технологии. В този случай можете да добавите aria-label
атрибут към самата контрола.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Използвайте ги в бутони, групи бутони за лента с инструменти, навигация или добавяне на формуляр.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Икона, използвана в предупреждение , за да съобщи, че това е съобщение за грешка, с допълнителен .sr-only
текст, за да предаде този намек на потребителите на помощни технологии.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Превключваемо контекстно меню за показване на списъци с връзки. Направен интерактивен с падащия JavaScript плъгин .
Обвийте тригера на падащото меню и падащото меню в .dropdown
или друг елемент, който декларира position: relative;
. След това добавете HTML на менюто.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Падащите менюта могат да бъдат променени да се разширяват нагоре (вместо надолу) чрез добавяне .dropup
към родителя.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
По подразбиране падащото меню се позиционира автоматично на 100% от горната част и от лявата страна на своя родител. Добавяне .dropdown-menu-right
към a .dropdown-menu
за подравняване на падащото меню вдясно.
Падащите менюта се позиционират автоматично чрез CSS в нормалния поток на документа. Това означава, че падащите менюта могат да бъдат изрязани от родители с определени overflow
свойства или да се показват извън границите на прозореца за изглед. Решете тези проблеми сами, когато възникнат.
.pull-right
подравняванеСчитано от v3.1.0, ние отхвърлихме .pull-right
падащите менюта. За да подравните меню вдясно, използвайте .dropdown-menu-right
. Подравнените вдясно навигационни компоненти в навигационната лента използват mixin версия на този клас за автоматично подравняване на менюто. За да го отмените, използвайте .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Добавете заглавка, за да етикетирате секции от действия във всяко падащо меню.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Добавете разделител, за да отделите поредица от връзки в падащо меню.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Добавете .disabled
към a <li>
в падащото меню, за да деактивирате връзката.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Групирайте поредица от бутони заедно на един ред с групата бутони. Добавете опционално радио на JavaScript и поведение в стил на полето за отметка с нашия плъгин за бутони .
Когато използвате подсказки или изскачащи елементи върху елементи в рамките на .btn-group
, ще трябва да посочите опцията container: 'body'
за избягване на нежелани странични ефекти (като елементът става по-широк и/или губи заоблените си ъгли, когато се задейства подсказката или изскачащият елемент).
role
и предоставете етикетЗа да могат помощните технологии – като екранни четци – да предадат, че серия от бутони е групирана, role
трябва да се предостави подходящ атрибут. За групи бутони това би било role="group"
, докато лентите с инструменти трябва да имат role="toolbar"
.
Едно изключение са групите, които съдържат само една контрола (например групите с оправдани бутони с <button>
елементи) или падащо меню.
Освен това групите и лентите с инструменти трябва да получат изричен етикет, тъй като повечето помощни технологии иначе няма да ги обявят, въпреки наличието на правилния role
атрибут. В дадените тук примери използваме aria-label
, но могат да се използват и алтернативи като aria-labelledby
.
Увийте поредица от бутони .btn
с .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Комбинирайте комплекти <div class="btn-group">
в <div class="btn-toolbar">
за по-сложни компоненти.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Вместо да прилагате класове за оразмеряване на бутони към всеки бутон в група, просто добавете .btn-group-*
към всеки .btn-group
, включително когато влагате няколко групи.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Поставете a .btn-group
в друго .btn-group
, когато искате падащи менюта, смесени с поредица от бутони.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Направете набор от бутони да изглеждат вертикално подредени, а не хоризонтално. Тук не се поддържат падащи менюта с бутони за разделяне.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Направете група бутони да се разтягат с равни размери, за да обхванат цялата ширина на своя родител. Работи и с падащи менюта с бутони в рамките на групата бутони.
Поради специфичния HTML и CSS, използвани за оправдаване на бутони (а именно display: table-cell
), границите между тях се удвояват. В обикновените групи бутони margin-left: -1px
се използва за подреждане на границите, вместо да ги премахва. Въпреки това margin
не работи с display: table-cell
. В резултат на това, в зависимост от вашите персонализации на Bootstrap, може да пожелаете да премахнете или преоцветите границите.
Internet Explorer 8 не изобразява граници на бутони в група с оправдани бутони, независимо дали е включена <a>
или <button>
елементи. За да избегнете това, увийте всеки бутон в друг .btn-group
.
Вижте #12476 за повече информация.
<a>
елементиПросто увийте поредица от .btn
s в .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Ако <a>
елементите се използват да действат като бутони – задействащи функционалност в страницата, вместо да навигират до друг документ или раздел в текущата страница – те също трябва да получат подходящо role="button"
.
<button>
елементиЗа да използвате подравнени групи бутони с <button>
елементи, трябва да обвиете всеки бутон в група бутони . Повечето браузъри не прилагат правилно нашия CSS за обосновка към <button>
елементи, но тъй като поддържаме падащи бутони, можем да заобиколим това.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Използвайте който и да е бутон, за да задействате падащо меню, като го поставите в рамките на .btn-group
и предоставите правилното маркиране на менюто.
Падащите бутони изискват приставката за падащо меню да бъде включена във вашата версия на Bootstrap.
Превърнете бутон в падащо меню с някои основни промени в маркирането.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
По същия начин създайте падащи менюта с разделени бутони със същите промени в маркирането, само с отделен бутон.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Падащите менюта с бутони работят с бутони с всякакъв размер.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Задействайте падащи менюта над елементите чрез добавяне .dropup
към родителя.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Разширете контролите на формуляра, като добавите текст или бутони преди, след или от двете страни на всеки базиран на текст <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
или атрибут) и каква допълнителна информация ще трябва да бъде предадена, ще варира в зависимост от точния тип интерфейсен модул, който прилагате. Примерите в този раздел предоставят няколко предложения, специфични за конкретни случаи подходи.title
placeholder
Поставете една добавка или бутон от двете страни на вход. Можете също така да поставите един от двете страни на входа.
Ние не поддържаме множество добавки ( .input-group-addon
или .input-group-btn
) от една страна.
Не поддържаме множество контроли на формуляри в една входна група.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Добавете относителните класове за оразмеряване на формуляра към .input-group
самия него и съдържанието в него автоматично ще се преоразмери – няма нужда да повтаряте класовете за размер на контрола на формуляра за всеки елемент.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Поставете произволно квадратче за отметка или радио опция в добавката на група за въвеждане вместо текст.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Бутоните в групите за въвеждане са малко по-различни и изискват едно допълнително ниво на влагане. Вместо .input-group-addon
, ще трябва да използвате .input-group-btn
за обвиване на бутоните. Това се изисква поради стандартните стилове на браузъра, които не могат да бъдат заменени.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Докато можете да имате само една добавка на страна, можете да имате няколко бутона в един .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Наличните навигации в Bootstrap имат споделена маркировка, започваща с базовия .nav
клас, както и споделени състояния. Разменете класовете модификатори, за да превключвате между всеки стил.
Обърнете внимание, че .nav-tabs
класът изисква .nav
базовия клас.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Вземете същия HTML, но .nav-pills
вместо това използвайте:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Хапчетата също могат да се подреждат вертикално. Просто добавете .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Лесно направете раздели или хапчета с еднаква ширина на родителя си на екрани, по-широки от 768px с .nav-justified
. На по-малки екрани навигационните връзки са подредени.
Понастоящем не се поддържат навигационни връзки в лентата за навигация.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
За всеки навигационен компонент (табове или хапчета) добавете .disabled
за сиви връзки и без ефекти при задържане .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Добавете падащи менюта с малко допълнителен HTML и JavaScript приставката за падащи менюта .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbars са отзивчиви мета компоненти, които служат като навигационни заглавки за вашето приложение или сайт. Те започват свити (и могат да се превключват) в мобилни изгледи и стават хоризонтални с увеличаване на наличната ширина на прозореца за изглед.
Понастоящем не се поддържат навигационни връзки в лентата за навигация.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Заменете марката на навигационната лента с вашето собствено изображение, като замените текста с <img>
. Тъй като .navbar-brand
има собствена подложка и височина, може да се наложи да замените някои CSS в зависимост от вашето изображение.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Поставете съдържанието на формуляра вътре .navbar-form
за правилно вертикално подравняване и свито поведение в тесни прозорци. Използвайте опциите за подравняване, за да решите къде да се намира в съдържанието на навигационната лента.
Като хедс-ъп, .navbar-form
споделя голяма част от кода си с .form-inline
чрез mixin. Някои контроли на формуляри, като групи за въвеждане, може да изискват фиксирани ширини, за да се показват правилно в лентата за навигация.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Добавете .navbar-btn
класа към <button>
елементи, които не се намират в a, <form>
за да ги центрирате вертикално в навигационната лента.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Обвийте текстови низове в елемент с .navbar-text
, обикновено върху <p>
етикет за правилен водещ и цвят.
<p class="navbar-text">Signed in as Mark Otto</p>
За хора, използващи стандартни връзки, които не са в обикновения навигационен компонент на навигационната лента, използвайте .navbar-link
класа, за да добавите правилните цветове за опциите по подразбиране и обратната навигационна лента.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Подравнете навигационни връзки, формуляри, бутони или текст, като използвате .navbar-left
или .navbar-right
помощните класове. И двата класа ще добавят CSS float в указаната посока. Например, за да подравните връзките за навигация, поставете ги отделно <ul>
с приложения съответен полезен клас.
Тези класове са смесени версии на .pull-left
и .pull-right
, но те са обхванати от медийни заявки за по-лесно боравене с компоненти на лентата за навигация в различни размери на устройства.
Добавете .navbar-fixed-top
и включете .container
или .container-fluid
към центриране и подложка на съдържанието на навигационната лента.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Добавете .navbar-fixed-bottom
и включете .container
или .container-fluid
към центриране и подложка на съдържанието на навигационната лента.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Създайте навигационна лента с пълна ширина, която се превърта настрани със страницата, като добавите .navbar-static-top
и включите .container
или .container-fluid
за центриране и подреждане на съдържанието на навигационната лента.
За разлика от .navbar-fixed-*
класовете, не е необходимо да променяте никакви подложки на body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Променете външния вид на навигационната лента, като добавите .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Посочете местоположението на текущата страница в рамките на навигационната йерархия.
Разделителите се добавят автоматично в CSS чрез :before
и content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Осигурете връзки за страниране за вашия сайт или приложение с компонента за страниране на много страници или по-простата алтернатива на пейджър .
Проста пагинация, вдъхновена от Rdio, чудесна за приложения и резултати от търсене. Големият блок е трудно да се пропусне, лесно се мащабира и осигурява големи области за щракване.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Компонентът за страниране трябва да бъде обвит в <nav>
елемент, който да го идентифицира като навигационен раздел за екранни четци и други помощни технологии. Освен това, тъй като една страница е вероятно вече да има повече от една такава навигационна секция (като основната навигация в заглавката или навигация в страничната лента), препоръчително е да предоставите описание aria-label
, <nav>
което отразява нейната цел. Например, ако компонентът за страниране се използва за навигация между набор от резултати от търсене, подходящ етикет може да бъде aria-label="Search results pages"
.
Връзките могат да се персонализират за различни обстоятелства. Използвайте .disabled
за връзки, върху които не можете да щракнете, и .active
за обозначаване на текущата страница.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Препоръчваме ви да замените активните или деактивирани котви за <span>
или да пропуснете котвата в случай на предишни/следващи стрелки, за да премахнете функционалността на щракване, като същевременно запазите предвидените стилове.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Искате ли по-голяма или по-малка пагинация? Добавете .pagination-lg
или .pagination-sm
за допълнителни размери.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Бързи предишни и следващи връзки за прости реализации на страниране с леко маркиране и стилове. Страхотен е за прости сайтове като блогове или списания.
По подразбиране пейджърът центрира връзките.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Като алтернатива можете да подравните всяка връзка към страните:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Пейджър връзките също използват общия .disabled
полезен клас от пагинацията.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Добавете някой от посочените по-долу класове модификатори, за да промените външния вид на етикет.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Проблеми с изобразяването могат да възникнат, когато имате десетки вградени етикети в тесен контейнер, всеки от които съдържа свой собствен inline-block
елемент (като икона). Начинът за това е настройка display: inline-block;
. За контекст и пример вижте #13219 .
Маркирайте лесно нови или непрочетени елементи, като добавите <span class="badge">
към връзки, Bootstrap навигации и др.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Когато няма нови или непрочетени елементи, значките просто ще се свият (чрез :empty
селектора на CSS), при условие че в тях няма съдържание.
Значките няма да се свият сами в Internet Explorer 8, защото липсва поддръжка за :empty
селектора.
Включени са вградени стилове за поставяне на значки в активни състояния в навигации за хапчета.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Лек, гъвкав компонент, който по желание може да разшири целия изгледен прозорец, за да покаже ключово съдържание на вашия сайт.
Това е проста геройска единица, прост компонент в стил jumbotron за привличане на допълнително внимание към представено съдържание или информация.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
За да направите jumbotron с пълна ширина и без заоблени ъгли, поставете го извън всички .container
s и вместо това добавете .container
вътре.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Проста обвивка за h1
подходящо разпределяне и сегментиране на секции от съдържание на страница. Може да използва елемента h1
по подразбиране small
, както и повечето други компоненти (с допълнителни стилове).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Разширете мрежовата система на Bootstrap с компонента за миниатюри, за да показвате лесно решетки от изображения, видеоклипове, текст и др.
Ако търсите подобно на Pinterest представяне на миниатюри с различна височина и/или ширина, ще трябва да използвате приставка на трета страна като Masonry , Isotope или Salvattore .
По подразбиране миниатюрите на Bootstrap са проектирани да показват свързани изображения с минимално необходимо маркиране.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
С малко допълнително маркиране е възможно да добавите всякакъв вид HTML съдържание като заглавия, параграфи или бутони в миниатюри.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Осигурете контекстуални съобщения за обратна връзка за типични потребителски действия с шепа налични и гъвкави предупредителни съобщения.
Обвийте произволен текст и опционален бутон за отхвърляне в .alert
един от четирите контекстуални класа (напр. .alert-success
) за основни предупредителни съобщения.
Сигналите нямат класове по подразбиране, а само базови и модифициращи класове. Сиво предупреждение по подразбиране няма много смисъл, така че трябва да посочите тип чрез контекстуален клас. Изберете между успех, информация, предупреждение или опасност.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Надграждайте всяко предупреждение, като добавите незадължителен .alert-dismissible
бутон за затваряне.
За напълно работещи предупреждения, които могат да бъдат отхвърлени, трябва да използвате приставката JavaScript за предупреждения .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Не забравяйте да използвате <button>
елемента с data-dismiss="alert"
атрибута data.
Използвайте .alert-link
помощния клас, за да предоставите бързо съвпадащи цветни връзки във всеки сигнал.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Осигурете актуална обратна връзка за напредъка на работен процес или действие с прости, но гъвкави ленти за напредъка.
Лентите за напредък използват CSS3 преходи и анимации, за да постигнат някои от своите ефекти. Тези функции не се поддържат в Internet Explorer 9 и по-стари версии на Firefox. Opera 12 не поддържа анимации.
Ако вашият уебсайт има правила за сигурност на съдържанието (CSP) , които не позволяват style-src 'unsafe-inline'
, тогава няма да можете да използвате вградени style
атрибути, за да зададете ширини на лентата за напредък, както е показано в нашите примери по-долу. Алтернативните методи за задаване на ширини, които са съвместими със строги CSP, включват използване на малък персонализиран JavaScript (който задава element.style.width
) или използване на персонализирани CSS класове.
Лента за прогрес по подразбиране.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Премахнете класа <span>
с .sr-only
от лентата за напредък, за да покажете видим процент.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
За да сте сигурни, че текстът на етикета остава четлив дори при ниски проценти, помислете за добавяне min-width
към лентата за напредък.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Лентите за напредъка използват някои от едни и същи бутони и класове за предупреждение за последователни стилове.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Използва градиент за създаване на раиран ефект. Не се предлага в IE9 и по-стари версии.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Добавете .active
към .progress-bar-striped
, за да анимирате ивиците отдясно наляво. Не се предлага в IE9 и по-стари версии.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Поставете няколко ленти в една и съща .progress
, за да ги подредите.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Стилове на абстрактни обекти за изграждане на различни видове компоненти (като коментари в блогове, туитове и т.н.), които включват подравнено вляво или вдясно изображение заедно с текстово съдържание.
Медията по подразбиране показва медиен обект (изображения, видео, аудио) отляво или отдясно на блок със съдържание.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Класовете .pull-left
и .pull-right
също съществуват и са били използвани преди това като част от медийния компонент, но са отхвърлени за тази употреба от v3.3.0. Те са приблизително еквивалентни на .media-left
и .media-right
, с изключение на това, че .media-right
трябва да се постави след .media-body
в html.
Изображенията или други медии могат да бъдат подравнени отгоре, в средата или отдолу. По подразбиране е подравнено отгоре.
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 et magnis dis parturient 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 et magnis dis parturient 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 et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
С малко допълнително маркиране можете да използвате мултимедиен вътрешен списък (полезно за нишки за коментари или списъци със статии).
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.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Групите списъци са гъвкав и мощен компонент за показване не само на прости списъци с елементи, но и на сложни с персонализирано съдържание.
Най-основната списъчна група е просто неподреден списък с елементи от списък и правилните класове. Надграждайте го с опциите, които следват, или със собствен CSS, ако е необходимо.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Добавете компонента за значки към който и да е елемент от група от списък и той автоматично ще бъде позициониран вдясно.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Свържете елементите на списъчната група, като използвате маркери за котва вместо елементи на списък (това означава също родител <div>
вместо <ul>
). Няма нужда от отделни родители около всеки елемент.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Елементите от списъчна група може да са бутони вместо елементи от списък (което също означава родител <div>
вместо <ul>
). Няма нужда от отделни родители около всеки елемент. Не използвайте стандартните .btn
класове тук.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Добавете .disabled
към a .list-group-item
, за да го оцветите в сиво, за да изглежда деактивирано.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Използвайте контекстуални класове за стилизиране на елементи от списък, по подразбиране или свързани. Включва също .active
състояние.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Добавете почти всеки HTML вътре, дори за групи от свързани списъци като тази по-долу.
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Въпреки че не винаги е необходимо, понякога трябва да поставите своя DOM в кутия. За тези ситуации опитайте панелния компонент.
По подразбиране всичко, което .panel
се прави, е да се приложат някои основни граници и подложки, за да съдържат някакво съдържание.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Лесно добавете контейнер за заглавие към вашия панел с .panel-heading
. Можете също така да включите всеки <h1>
- <h6>
с .panel-title
клас, за да добавите предварително стилизирано заглавие. Въпреки това, размерите на шрифта на <h1>
- <h6>
се заместват от .panel-heading
.
За правилно оцветяване на връзки, не забравяйте да поставите връзки в заглавия в рамките на .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Обвиване на бутони или вторичен текст в .panel-footer
. Обърнете внимание, че долните колонтитули на панела не наследяват цветове и граници, когато се използват контекстуални вариации, тъй като те не са предназначени да бъдат на преден план.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Подобно на други компоненти, можете лесно да направите панел по-смислен за конкретен контекст, като добавите някой от класовете на контекстуално състояние.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Добавете всякакъв .table
панел без граници за безпроблемен дизайн. Ако има .panel-body
, добавяме допълнителна граница в горната част на таблицата за разделяне.
Част от съдържанието на панела по подразбиране тук. Nulla vitae elit libero, a 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 | Джейкъб | Торнтън | @дебел |
3 | Лари | птицата | @туитър |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Ако няма тяло на панела, компонентът се премества от заглавката на панела към таблицата без прекъсване.
# | Първо име | Фамилия | Потребителско име |
---|---|---|---|
1 | Марк | Ото | @mdo |
2 | Джейкъб | Торнтън | @дебел |
3 | Лари | птицата | @туитър |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Лесно включвайте списъчни групи с пълна ширина във всеки панел.
Част от съдържанието на панела по подразбиране тук. Nulla vitae elit libero, a 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.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Позволете на браузърите да определят размерите на видео или слайдшоу въз основа на ширината на съдържащия се в тях блок, като създадат вътрешно съотношение, което правилно ще мащабира на всяко устройство.
Правилата се прилагат директно към <iframe>
, <embed>
, <video>
и <object>
елементи; по избор използвайте явен клас наследник, .embed-responsive-item
когато искате да съответствате на стила за други атрибути.
Професионален съвет! Не е необходимо да включвате frameborder="0"
във вашия <iframe>
s, тъй като ние заместваме това вместо вас.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Използвайте кладенеца като прост ефект върху елемент, за да му придадете ефект на вмъкване.
<div class="well">...</div>
Контролирайте подложките и заоблените ъгли с два незадължителни класа модификатори.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>