Компонентлар
Иконография, тамчылар, кертү төркемнәре, навигация, хәбәрләр һәм башкалар белән тәэмин итү өчен төзелгән дистәдән артык кабат кулланыла торган компонентлар.
Иконография, тамчылар, кертү төркемнәре, навигация, хәбәрләр һәм башкалар белән тәэмин итү өчен төзелгән дистәдән артык кабат кулланыла торган компонентлар.
Glyphicon Halflings җыелмасыннан шрифт форматында 250-дән артык глиф керә. Глификон Халфлинглар гадәттә бушлай мөмкин түгел, ләкин аларны ясаучы аларны Bootstrap өчен бушлай тәкъдим итте. Рәхмәт буларак, без мөмкин булган вакытта Глификоннарга сылтама кертүегезне сорыйбыз .
Эшчәнлек сәбәпләре аркасында, барлык иконалар төп класс һәм аерым иконка классын таләп итә. Куллану өчен, түбәндәге кодны теләсә кайда урнаштырыгыз. Дөрес урнаштыру өчен икона белән текст арасында урын калдырыгыз.
Икона классларын башка компонентлар белән турыдан-туры берләштереп булмый. Аларны бер үк элементтагы бүтән класслар белән бергә кулланырга ярамый. Киресенчә, ояны өстәгез <span>
һәм иконка классларын кулланыгыз <span>
.
Икона класслары текст эчтәлеге булмаган һәм балалар элементлары булмаган элементларда гына кулланылырга тиеш.
../fonts/
Bootstrap иконка шрифт файллары тупланган CSS файлларына караганда каталогта урнашачак дип фаразлый . Бу шрифт файлларын күчерү яки исемен үзгәртү CSS-ны өч ысулның берсендә яңарту дигән сүз:
@icon-font-path
һәм / яки @icon-font-name
үзгәрүчәннәрне аз файллар.url()
Compыелган CSS юлларын үзгәртегез .Сезнең конкрет үсеш көйләүләренә туры килгән вариантны кулланыгыз.
Ярдәмче технологияләрнең заманча версияләре CSS ясалган эчтәлекне, шулай ук icникод символларын игълан итәчәк. Экран укучыларында уйланмаган һәм буталчык чыгышлардан саклану өчен (аеруча иконалар бизәү өчен генә кулланылганда), без аларны 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
өстәгез ..dropdown-menu
Төшү автоматик рәвештә документның гадәти агымы кысаларында CSS аша урнаштырыла. Димәк, төшүләр ата-аналар тарафыннан билгеле бер overflow
үзенчәлекләргә ия булырга мөмкин яки күренеш чикләреннән күренергә мөмкин. Бу проблемаларны килеп чыкканда үзегез чишегез.
.pull-right
тигезләүV3.1.0 булганга, без .pull-right
тамчы менюларда искердек. Менюны уң тигезләү өчен кулланыгыз .dropdown-menu-right
. Диңгез тактасында уң тигезләнгән диңгез компонентлары менюны автоматик рәвештә тигезләү өчен бу классның миксин версиясен кулланалар. Аны кире кагу өчен кулланыгыз .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
Ссылканы сүндерү өчен <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>
Бер -бер артлы төймәләр белән кушылган тамчы менюларны теләгәндә .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
.
Күбрәк мәгълүмат өчен 12 12476 карагыз .
<a>
Элементлар беләнБер-бер артлы гына .btn
төрегез .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'
(мәсәлән, элемент киңәя бара һәм / яки кораллар яки поповерлар эшләгәндә түгәрәк почмакларын югалту кебек).
Форма төркемнәрен яки челтәр баганасы классларын турыдан-туры кертү төркемнәре белән кушмагыз. Киресенчә, форма төркеме яки челтәр белән бәйле элемент эчендә кертү төркемен оялагыз.
Screenәрбер кертү өчен ярлык кертмәсәгез, экран укучылары сезнең формаларда кыенлыклар кичерәчәк. Бу кертү төркемнәре өчен теләсә нинди өстәмә ярлык яки функциональ ярдәм технологияләренә җиткерелүен тәэмин итегез.
Кулланыла торган төгәл техника (күренеп торган <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>
Themselvesзенә чагыштырма форма үлчәм классларын өстәгез, .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
класстан башлап, уртак дәүләтләр белән уртаклаштылар. Eachәр стиль арасында күчү өчен модификатор классларын алыштырыгыз.
Игътибар итегез, класс төп .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
. Кечкенә экраннарда диңгез сылтамалары тезелгән.
Акланган navbar nav сылтамалары хәзерге вакытта ярдәм итми.
<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 - җаваплы мета компонентлары, алар сезнең кушымта яки сайт өчен навигация башы булып хезмәт итә. Алар мобиль күренешләрдә җимерелә башлый (һәм алыштырыла) һәм булган күренеш киңлеге арта барган саен горизонталь була.
Акланган navbar nav сылтамалары хәзерге вакытта ярдәм итми.
<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>
Navbar брендын үз образыгыз белән текстка алыштырып алыштырыгыз <img>
. Ownзенең паддеры һәм биеклеге булганлыктан .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
аша бүлешә. Кайбер форма контроллеры, кертү төркемнәре кебек, диңгез киңлегендә дөрес күрсәтелергә тиеш.
<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>
яшәмәгән элементларга өстәгез .<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 йөзүен өстәячәк. Мәсәлән, диңгез сылтамаларын тигезләү өчен, <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 navs һәм башкаларга өстәп җиңел күрсәтегез.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Яңа яки укылмаган әйберләр булмаганда, бейджлар җимереләчәк (CSS :empty
селекторы аша), эчтәлек булмаса.
Бейджлар 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>
Siteиңел, сыгылмалы компонент, сайтыгыздагы төп эчтәлекне күрсәтү өчен, бөтен күренешне киңәйтә ала.
Бу гади герой берәмлеге, үзенчәлекле эчтәлеккә яки мәгълүматка өстәмә игътибарны җәлеп итү өчен гади джумботрон стилендәге компонент.
<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>
Джамботронны тулы киңлек итәр өчен, һәм түгәрәк почмакларсыз, аны барлык читтән куегыз .container
, киресенчә эчне өстәгез .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 челтәр системасын символ компоненты белән киңәйтегез, рәсемнәр, видео, текст һ.б.
Төрле биеклектә һәм / яки киңлектәге эскизларның Пинтерестка охшаган презентациясен эзлисез икән, сезгә масон , изотоп яки Сальваттор кебек өченче як плагин кулланырга кирәк .
Килешү буенча, 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"
мәгълүмат атрибуты белән кулланыгыз .
.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ның аскы яки иске версияләрендә булышмый. Опера 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
html'тан .media-right
соң урнаштырылырга тиеш .media-body
.
Рәсемнәр яки бүтән медиа өске, урта яки аскы тигезләнергә мөмкин. Килешү өстә тигезләнгән.
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
Donec sed odio dui. Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус.
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
Donec sed odio dui. Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус.
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.
Donec sed odio dui. Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус.
<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>
Бераз өстәмә билгеләр белән сез исемлек эчендә медиа куллана аласыз (аңлатма җепләре яки мәкаләләр исемлеге өчен файдалы).
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, 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>
. Eachәрбер элемент тирәсендә аерым ата-аналарга ихтыяҗ юк.
<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>
. Eachәрбер элемент тирәсендә аерым ата-аналарга ихтыяҗ юк. Монда стандарт классларны кулланмагыз ..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
инвалид .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 eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida eget metus. Maecenas 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>
Alwaysәрвакыт кирәк булмаса да, кайвакыт сезгә 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, 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 транспорт чарасы.
# | Исем | Фамилия | Кулланучы исеме |
---|---|---|---|
1 | Билге | Отто | @mdo |
2 | Ягъкуб | Торнтон | @fat |
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 | Ягъкуб | Торнтон | @fat |
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, 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 транспорт чарасы.
<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>
<!-- 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>