Глифлар бар
Glyphicon Halflings җыелмасыннан шрифт форматында 250-дән артык глиф керә. Глификон Халфлинглар гадәттә бушлай мөмкин түгел, ләкин аларны ясаучы аларны Bootstrap өчен бушлай тәкъдим итте. Рәхмәт буларак, без мөмкин булган вакытта Глификоннарга сылтама кертүегезне сорыйбыз .
Ничек кулланырга
Эшчәнлек сәбәпләре аркасында, барлык иконалар төп класс һәм аерым иконка классын таләп итә. Куллану өчен, түбәндәге кодны теләсә кайда урнаштырыгыз. Дөрес урнаштыру өчен икона белән текст арасында урын калдырыгыз.
Башка компонентлар белән кушылмагыз
Икона классларын башка компонентлар белән турыдан-туры берләштереп булмый. Аларны бер үк элементтагы бүтән класслар белән бергә кулланырга ярамый. Киресенчә, ояны өстәгез <span>
һәм иконка классларын кулланыгыз <span>
.
Буш элементларда куллану өчен генә
Икона класслары текст эчтәлеге булмаган һәм балалар элементлары булмаган элементларда гына кулланылырга тиеш.
Икона шрифтының урынын үзгәртү
../fonts/
Bootstrap иконка шрифт файллары тупланган CSS файлларына караганда каталогта урнашачак дип фаразлый . Бу шрифт файлларын күчерү яки исемен үзгәртү 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 радиосына һәм безнең төймәләр плагины белән тикшерү тартмасының стиль тәртибен өстәгез .
Дөреслекне 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'тагы көйләүләрегезгә карап, сез чикләрне бетерергә яки яңадан төсләргә теләрсез.
IE8 һәм чикләр
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>
Элементлар белән акланган төймә төркемнәрен куллану өчен , сез һәр төймәне төймә төркеменә төрергә тиеш . Күпчелек браузерлар элементларны аклау өчен безнең 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'
(мәсәлән, элемент киңәя бара һәм / яки кораллар яки поповерлар эшләгәндә түгәрәк почмакларын югалту кебек).
Керүнең ике ягына бер өстәмә яки төймә куегыз. Сез шулай ук кертүнең ике ягына урнаштыра аласыз.
Без бер ягында берничә өстәмә ( .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әр стиль арасында күчү өчен модификатор классларын алыштырыгыз.
Таблицалар панельләре өчен navs куллану JavaScript кыстыргычлары плагинын таләп итә
Таблицалар өлкәләре булган таблицалар өчен сез JavaScript плагинын кулланырга тиеш . Билгеләү шулай ук өстәмә role
һәм ARIA атрибутларын таләп итәчәк - өстәмә мәгълүмат өчен плагинның үрнәк билгесен карагыз .
Навигация буларак кулланылган диңгезләрне кулланыгыз
Әгәр дә сез навигация сызыгын тәэмин итү өчен диңгез хәрәкәтләрен кулланасыз икән role="navigation"
, иң логик ата-аналар контейнерына өстәргә <ul>
, яисә <nav>
бөтен навигациягә элементны урарга онытмагыз. Рольне <ul>
үзенә өстәмәгез, чөнки бу ярдәмче технологияләр ярдәмендә фактик исемлек итеп игълан ителмәс иде.
Таблицалар
Игътибар итегез, класс төп .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 сылтамалары хәзерге вакытта ярдәм итми.
Сафари һәм җаваплы акланган диңгезләр
V9.1.2 мәгълүматларына караганда, Safari хата күрсәтә, анда браузерыгыз горизонталь рәвештә үзгәртелгән, яңартылганнан соң чистартылган актуаль диңгездә хаталар китерә. Бу хата шулай ук акланган nav мисалында күрсәтелә .
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
Инвалид сылтамалар
Теләсә нинди диңгез компоненты (таблицалар яки таблеткалар) .disabled
өчен соры сылтамалар өстәгез, эффектлар юк .
Ссылка функциясе тәэсир итми
<a>
Бу класс функциональлеген түгел, тышкы кыяфәтен генә үзгәртәчәк . Мондагы сылтамаларны сүндерү өчен махсус JavaScript кулланыгыз.
<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 сылтамалары хәзерге вакытта ярдәм итми.
Эчтәлек
Bootstrap сезнең диңгез тактасындагы эчтәлекнең күпме урын кирәклеген белмәгәнгә, сез икенче рәткә эчтәлек төрү проблемаларына керергә мөмкин. Моны чишү өчен сез:
Навбар әйберләренең күләмен яки киңлеген киметү.
Responsаваплы файдалы класслар кулланып, билгеле бер зурлыктагы әйберләрне зур экранда яшерегез .
Navава торышының җимерелгән һәм горизонталь режим арасында күчү ноктасын үзгәртегез. Theзгәрешне көйләгез @grid-float-breakpoint
яки үзегезнең медиа соравыгызны өстәгез.
JavaScript плагины кирәк
Әгәр JavaScript сүндерелгән булса һәм күренү порты җимерелсә, диңгез тактасы җимерелсә, диңгез тактасын киңәйтү һәм эчтәлекне карау мөмкин булмаячак..navbar-collapse
.
Navаваплы диңгез тактасы җимерелү плагинын сезнең Bootstrap версиясенә кертүне таләп итә.
Mobileимерелгән мобиль диңгез ноктасын үзгәртү
Диңгез тактасы вертикаль мобиль күренешкә таркала, күренеш портка караганда таррак булганда, күренеш @grid-float-breakpoint
горизонталь булмаган мобиль булмаган күренешкә киңәя @grid-float-breakpoint
. Диңгез тактасы җимерелгәндә / киңәюдә контрольдә тоту өчен, аз чыганактагы бу үзгәрүчене көйләгез. Килешенгән кыйммәт 768px
(иң кечкенә "кечкенә" яки "планшет" экраны).
Диңгез такталарын үтемле итегез
Элементны кулланырга онытмагыз, <nav>
яисә, гомуми элементны куллансагыз, ярдәмче технологияләр кулланучылар өчен истәлекле төбәк итеп ачыклау өчен, һәр диңгез тактасына <div>
а өстәгез.role="navigation"
<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-btn
кулланырга мөмкин . Ләкин, эчтәлекле элементларда да, стандарт төймә класслары да кулланылырга тиеш түгел .<a>
<input>
.navbar-btn
<a>
.navbar-nav
Текст
Текстның сызыкларын элементка төрегез .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
ләкин алар җайланма зурлыклары буенча диңгез компонентларын җиңелрәк эшкәртү өчен медиа соравларына бирелгән.
Берничә компонентны дөрес тигезләү
Navbars хәзерге вакытта берничә .navbar-right
класс белән чикләнә. .navbar-right
Эчтәлекне дөрес урнаштыру өчен, без соңгы элементта тискәре маржаны кулланабыз . Бу классны кулланган берничә элемент булганда, бу кырлар теләгәнчә эшләми.
V4-та бу компонентны яңадан яза алгач, без моны яңадан карап чыгарбыз.
Topгарыга урнаштырылган
Яисә үзәккә һәм такта тактасына эчтәлек .navbar-fixed-top
өстәгез ..container
.container-fluid
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
Тәнне ябыштыру кирәк
Туры диңгез плитәсе сезнең бүтән эчтәлекне каплаячак, әгәр сез padding
өскә өстәмәсәгез <body>
. Valuesз кыйммәтләрегезне сынап карагыз яки астагы фрагментны кулланыгыз. Киңәш: Килешү буенча, диңгез плитәсе 50px биек.
body { padding-top : 70px ; }
Моны Bootstrap CSS үзәгеннән кертергә онытмагыз .
Түбәнгә урнаштырылган
Яисә үзәккә һәм такта тактасына эчтәлек .navbar-fixed-bottom
өстәгез ..container
.container-fluid
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
Тәнне ябыштыру кирәк
Тотрыклы диңгез плитәсе сезнең бүтән эчтәлекне каплаячак, әгәр сез padding
аның төбенә кушмасагыз <body>
. Valuesз кыйммәтләрегезне сынап карагыз яки астагы фрагментны кулланыгыз. Киңәш: Килешү буенча, диңгез плитәсе 50px биек.
body { padding-bottom : 70px ; }
Моны Bootstrap CSS үзәгеннән кертергә онытмагыз .
Статик өс
Тулы киңлектәге диңгез тактасын булдырыгыз, ул бит белән үзәккә яисә тактага такталар эчтәлеген өстәп .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>
Инвалид һәм актив хәлләр
Сылтамалар төрле шартларда көйләнә. .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>
Selfз-үзеңне җимерү
Яңа яки укылмаган әйберләр булмаганда, бейджлар җимереләчәк (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 эчтәлеген өстәргә мөмкин.
Эскиз этикеткасы
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.
Кнопка Кнопка
Эскиз этикеткасы
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.
Кнопка Кнопка
Эскиз этикеткасы
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.
Кнопка Кнопка
<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
Килешенгән класс юк
Сигнализациянең демократик класслары юк, бары тик база һәм үзгәртүче класслар гына. Килешенгән соры кисәтү артык мәгънәгә ия түгел, шуңа күрә сез контекст класс аша төрне күрсәтергә тиеш. Уңыштан, мәгълүматтан, кисәтүдән яки куркынычтан сайлагыз.
Афәрин! Сез бу мөһим хәбәрне уңышлы укыйсыз.
Идарә итә! Бу кисәтү сезнең игътибарыгызга мохтаҗ, ләкин бу бик мөһим түгел.
Кисәтү! Yourselfз-үзеңне тикшерү яхшырак, син артык яхшы күренмисең.
Әй! Берничә әйберне үзгәртегез һәм яңадан җибәрергә тырышыгыз.
<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 кисәтү плагины кирәк
Тулы эшләве өчен, җибәрелә торган хәбәрләр өчен сез JavaScript плагинын кулланырга тиеш .
×
Кисәтү! Yourselfз-үзеңне тикшерү яхшырак, син артык яхшы күренмисең.
<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>
Сигналларда сылтамалар
.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) туры килү
Әгәр сезнең вебсайтта Эчтәлек Куркынычсызлыгы Политикасы (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
Аларны туплау өчен берничә барны бер үк урынга урнаштырыгыз .
35% тулы (уңыш)
20% тулы (кисәтү)
10% тулы (куркыныч)
<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
.
Рәсемнәр яки бүтән медиа өске, урта яки аскы тигезләнергә мөмкин. Килешү өстә тигезләнгән.
<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>
Бераз өстәмә билгеләр белән сез исемлек эчендә медиа куллана аласыз (аңлатма җепләре яки мәкаләләр исемлеге өчен файдалы).
<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 белән төзегез.
Крас Джасто Одио
Dapibus ac facilisis
Morbi leo risus
Porta ac consectetur ac
Вестибулум
<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>
Бейджлар
Билгеләр компонентын теләсә нинди исемлек төркеменә өстәгез һәм ул автоматик рәвештә уңда урнашачак.
14 Крас Джасто Одио
2 Dapibus ac facilisis
1 Morbi leo risus
<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
Крас Джасто Одио
Dapibus ac facilisis
Morbi leo risus
Porta ac consectetur ac
Вестибулум
<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
дәүләт керә.
Dapibus ac facilisis
Крас утыра
Porta ac consectetur ac
Вестибулум
<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 өстәгез.
<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
Ларри
Кош
@twitter
<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
Ларри
Кош
@twitter
<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 транспорт чарасы.
Крас Джасто Одио
Dapibus ac facilisis
Morbi leo risus
Porta ac consectetur ac
Вестибулум
<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>