Глифлар бар

Glyphicon Halflings җыелмасыннан шрифт форматында 250-дән артык глиф керә. Глификон Халфлинглар гадәттә бушлай мөмкин түгел, ләкин аларны ясаучы аларны Bootstrap өчен бушлай тәкъдим итте. Рәхмәт буларак, без мөмкин булган вакытта Глификоннарга сылтама кертүегезне сорыйбыз .

глификон гликикон-йолдыз
глификон глификон-плюс
глификон глификон-евро
глификон глификон-евр
глификон глификон-минус
глификон глификон-болыт
глификон глификон-конверт
глификон глификон-карандаш
глификон гликикон-пыяла
глификон глификон-музыка
глификон глификон-эзләү
глификон глификон-йөрәк
глификон глификон-йолдыз
глификон глификон-йолдыз-буш
глификон глификон кулланучы
глификон глификон-фильм
глификон глификон-зур
глификон глификон-т
глификон глификон-исемлек
глификон глификон-ярар
глификон глификон-чыгару
глификон глификон-зум
глификон глификон-зурайту
глификон глификон-off
глификон глификон-сигнал
глификон глификон-ког
глификон глификон-чүп
глификон глификон-өй
глификон глификон-файл
глификон глификон-вакыт
глификон глификон-юл
глификон глификон-йөкләү-алт
глификон глификон-йөкләү
глификон глификон-йөкләү
глификон глификон-почта
глификон глификон-уйнау
глификон гликикон-кабатлау
глификон глификон-яңарту
глификон глификон-исемлек-алт
глификон глификон-йозак
глификон глификон-флаг
глификон глификон-наушниклар
глификон глификон-күләм күләме
глификон глификон-күләм-түбән
глификон глификон-күләм күләме
глификон гликикон-кркод
глификон гликикон-штрих-код
глификон глификон-тег
глификон глификон-теглар
глификон глификон-китап
глификон глификон-кыстыргыч
глификон глификон-бастыру
глификон глификон-камера
глификон глификон-шрифт
глификон глификон-калын
глификон глификон-италик
глификон гликикон-текст биеклеге
глификон гликикон-текст киңлеге
глификон глификон-тигезләү-сул
глификон глификон-тигезләү-үзәк
глификон глификон-тигезләү-уң
глификон глификон-тигезләү-аклау
глификон глификон-исемлек
глификон глификон-индент-сул
глификон глификон-индент-уң
глификон глификон-фасим-видео
глификон глификон-рәсем
глификон глификон-карта-маркер
глификон глификон-көйләү
глификон глификон-тинт
глификон глификон-редакция
глификон глификон-өлеш
глификон гликикон-тикшерү
глификон глификон-хәрәкәт
глификон глификон-адым-артка
глификон глификон-тиз-артка
глификон глификон-артка
глификон глификон-уйнау
глификон глификон-пауза
глификон глификон-тукталыш
глификон глификон-алга
глификон глификон-тиз алга
глификон глификон-алга
глификон глификон-чыгару
глификон глификон-шеврон-сул
глификон глификон-шеврон-уң
глификон глификон-плюс-билге
глификон глификон-минус-билге
глификон глификон-бетерү-билге
глификон гликикон-ярый
глификон глификон-сорау-билге
глификон глификон-информация билгесе
глификон глификон-скриншот
глификон глификон-чыгару-түгәрәк
глификон гликикон-ок-түгәрәк
глификон глификон-бан-түгәрәк
глификон глификон-ук-сул
глификон глификон-ук-уң
глификон глификон-ук
глификон глификон-ук-аска
глификон глификон-өлеш-алт
глификон глификон-размер тулы
глификон гликикон-размер-кечкенә
глификон глификон-игълан-билге
глификон глификон-бүләк
глификон глификон яфрагы
глификон глификон-ут
глификон глификон-күз ачык
глификон глификон-күзгә якын
глификон глификон-кисәтүче билге
глификон глификон-яссылык
глификон глификон-календарь
глификон глификон-очраклы
глификон глификон-аңлатма
глификон глификон-магнит
глификон глификон-шеврон-ап
глификон глификон-шеврон-аста
глификон глификон-ретвит
глификон глификон-кибет
глификон глификон-папка-якын
глификон глификон-папка ачык
глификон глификон-размер-вертикаль
глификон глификон-размер-горизонталь
глификон глификон-hdd
глификон глификон-үгез
глификон глификон-кыңгырау
глификон глификон-сертификат
глификон гликикон-бармаклар
глификон глификон-бармак-аста
глификон глификон-кул-уң
глификон глификон-кул-сул
глификон глификон-кул
глификон глификон кулдан-кулга
глификон гликикон-түгәрәк-ук-уң
глификон глификон-түгәрәк-ук-сул
глификон глификон-түгәрәк-ук
глификон глификон-түгәрәк-ук-аска
глификон глификон-глобус
глификон глификон-венч
глификон глификон-биремнәр
глификон глификон-фильтр
глификон глификон-портфель
глификон глификон-тулы экран
глификон глификон-такта
глификон глификон-паперклип
глификон глификон-йөрәк буш
глификон глификон-сылтама
глификон глификон-телефон
глификон глификон-пушпин
глификон глификон-usd
глификон глификон-гбп
глификон глификон-сорт
глификон глификон-сорт-алфавит
глификон глификон-сорт-алфавит-алт
глификон глификон-тәртип буенча
глификон глификон-сорт-тәртип-алт
глификон глификон-сорт-атрибутлар
глификон глификон-сорт-атрибутлар-alt
глификон глификон-тикшерелмәгән
глификон глификон-киңәйтү
глификон глификон-җимерелү
глификон гликикон-җимерелү
глификон глификон-керү
глификон глификон-флэш
глификон глификон-чыгу
глификон глификон-яңа тәрәзә
глификон гликикон-рекорд
глификон глификон-саклау
глификон глификон ачык
глификон глификон белән сакланган
глификон глификон-импорт
глификон глификон-экспорт
глификон глификон-җибәрү
глификон глификон-диспетчер
глификон глификон-флот-сакланган
глификон глификон-флот-бетерү
глификон глификон-флот-саклау
глификон глификон-флот-ачык
глификон глификон-кредит-картасы
глификон глификон-тапшыру
глификон гликикон-катлерия
глификон глификон-баш
глификон глификон-кысылган
глификон глификон-колакчын
глификон глификон-телефон-алт
глификон глификон-манара
глификон глификон-статистикасы
глификон глификон-sd-видео
глификон глификон-hd-видео
глификон гликикон-субтитрлар
глификон глификон-тавыш-стерео
глификон глификон-тавыш-долби
глификон глификон-тавыш-5-1
глификон глификон-тавыш-6-1
глификон гликикон-тавыш-7-1
глификон гликикон-авторлык-билгесе
глификон глификон-теркәлү билгесе
глификон глификон-болыт-йөкләү
глификон глификон-болыт-йөкләү
глификон глификон-агач-ылыс
глификон глификон-агач яфраклы
глификон глификон-cd
глификон глификон-саклау-файл
глификон глификон-ачык файл
глификон глификон дәрәҗәсе
глификон гликикон-күчермә
глификон глификон-паста
глификон глификон-уяу
глификон глификон-эквализатор
глификон глификон-король
глификон глификон-патшабикә
глификон глификон-ломбард
глификон глификон-епископ
глификон глификон-рыцарь
глификон глификон-бала-формула
глификон глификон-чатыр
глификон глификон-такта
глификон глификон-карават
глификон глификон-алма
глификон глификон-бетерү
глификон глификон-сәгать стакан
глификон глификон-лампа
глификон гликикон-дубликат
глификон глификон-дуңгыз банкы
глификон глификон-кайчы
глификон гликикон-биткойн
глификон глификон-б
глификон глификон-хбт
глификон гликикон-йен
глификон глификон-jpy
глификон глификон-рубль
глификон глификон-руб
глификон гликикон масштабы
глификон глификон-боз-лолли
глификон глификон-боз-лолли-тәмле
глификон глификон-мәгариф
глификон глификон-вариант-горизонталь
глификон глификон-вариант-вертикаль
глификон глификон-меню-гамбургер
глификон глификон-модаль-тәрәзә
глификон глификон-май
глификон глификон-ашлык
глификон глификон-көзгеләр
глификон глификон-текст зурлыгы
глификон глификон-текст-төс
глификон гликикон-текст-фон
глификон глификон-объект-тигезләү-өс
глификон глификон-объект-тигезләү-асты
глификон глификон-объект-тигезләү-горизонталь
глификон глификон-объект-тигезләү-сул
глификон глификон-объект-тигезләү-вертикаль
глификон глификон-объект-тигезләү-уң
глификон глификон-өчпочмак-уң
глификон глификон-өчпочмак-сул
глификон глификон-өчпочмак-асты
глификон глификон-өчпочмак-өс
глификон глификон-консол
глификон глификон-суперскрипт
глификон глификон-подписка
глификон глификон-меню-сул
глификон глификон-меню-уң
глификон глификон-меню-аста
глификон глификон-меню

Ничек кулланырга

Эшчәнлек сәбәпләре аркасында, барлык иконалар төп класс һәм аерым иконка классын таләп итә. Куллану өчен, түбәндәге кодны теләсә кайда урнаштырыгыз. Дөрес урнаштыру өчен икона белән текст арасында урын калдырыгыз.

Башка компонентлар белән кушылмагыз

Икона классларын башка компонентлар белән турыдан-туры берләштереп булмый. Аларны бер үк элементтагы бүтән класслар белән бергә кулланырга ярамый. Киресенчә, ояны өстәгез <span>һәм иконка классларын кулланыгыз <span>.

Буш элементларда куллану өчен генә

Икона класслары текст эчтәлеге булмаган һәм балалар элементлары булмаган элементларда гына кулланылырга тиеш.

Икона шрифтының урынын үзгәртү

../fonts/Bootstrap иконка шрифт файллары тупланган CSS файлларына караганда каталогта урнашачак дип фаразлый . Бу шрифт файлларын күчерү яки исемен үзгәртү CSS-ны өч ысулның берсендә яңарту дигән сүз:

Чыганактагы @icon-font-pathһәм / яки @icon-font-nameүзгәрүчәннәрне аз файллар.
Кечкенә компиляр белән тәэмин ителгән чагыштырма URL -ларны кулланыгыз .
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

<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'тагы көйләүләрегезгә карап, сез чикләрне бетерергә яки яңадан төсләргә теләрсез.

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>`Элементлар белән

<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'(мәсәлән, элемент киңәя бара һәм / яки кораллар яки поповерлар эшләгәндә түгәрәк почмакларын югалту кебек).

Башка компонентлар белән кушылмагыз

Форма төркемнәрен яки челтәр баганасы классларын турыдан-туры кертү төркемнәре белән кушмагыз. Киресенчә, форма төркеме яки челтәр белән бәйле элемент эчендә кертү төркемен оялагыз.

Waysәрвакыт этикеткалар өстәгез

Screenәрбер кертү өчен ярлык кертмәсәгез, экран укучылары сезнең формаларда кыенлыклар кичерәчәк. Бу кертү төркемнәре өчен теләсә нинди өстәмә ярлык яки функциональ ярдәм технологияләренә җиткерелүен тәэмин итегез.

Кулланыла торган төгәл техника (күренеп торган <label>элементлар, класс ярдәмендә <label>яшерелгән элементлар , яки ,, яки атрибутны куллану) һәм нинди өстәмә мәгълүмат җиткерергә кирәклеге сез башкарган интерфейс виджетының төгәл төренә карап үзгәрәчәк. Бу бүлектәге мисаллар берничә тәкъдим ителгән, очракларга хас алымнар китерә..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Төп мисал

Керүнең ике ягына бер өстәмә яки төймә куегыз. Сез шулай ук кертүнең ике ягына урнаштыра аласыз.

Без бер ягында берничә өстәмә ( .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яки үзегезнең медиа соравыгызны өстәгез.

Mobileимерелгән мобиль диңгез ноктасын үзгәртү

Диңгез тактасы вертикаль мобиль күренешкә таркала, күренеш портка караганда таррак булганда, күренеш @grid-float-breakpointгоризонталь булмаган мобиль булмаган күренешкә киңәя @grid-float-breakpoint. Диңгез тактасы җимерелгәндә / киңәюдә контрольдә тоту өчен, аз чыганактагы бу үзгәрүчене көйләгез. Килешенгән кыйммәт 768px(иң кечкенә "кечкенә" яки "планшет" экраны).

<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>

Waysәрвакыт этикеткалар өстәгез

Screenәрбер кертү өчен ярлык кертмәсәгез, экран укучылары сезнең формаларда кыенлыклар кичерәчәк. Бу сызык формалары өчен сез этикеткаларны .sr-onlyкласс ярдәмендә яшерә аласыз. Ярдәмче технологияләр өчен ярлык бирүнең альтернатив ысуллары бар, мәсәлән aria-label, aria-labelledbyяки titleатрибут. Әгәр дә боларның берсе дә булмаса, экран укучылары , булган placeholderочракта, атрибутны куллана алалар, ләкин исегездә тотыгыз, placeholderбүтән маркировкалау ысулларын алыштыру буларак куллану киңәш ителми.

Аларны диңгез тактасында вертикаль үзәкләштерү өчен .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ләкин алар җайланма зурлыклары буенча диңгез компонентларын җиңелрәк эшкәртү өчен медиа соравларына бирелгән.

Берничә компонентны дөрес тигезләү

Navbars хәзерге вакытта берничә .navbar-rightкласс белән чикләнә. .navbar-rightЭчтәлекне дөрес урнаштыру өчен, без соңгы элементта тискәре маржаны кулланабыз . Бу классны кулланган берничә элемент булганда, бу кырлар теләгәнчә эшләми.

V4-та бу компонентны яңадан яза алгач, без моны яңадан карап чыгарбыз.

Яисә үзәккә һәм такта тактасына эчтәлек .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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Ихтимал инвалид хәл

.disabledПейджер сылтамалары шулай ук пагинациядән гомуми ярдәм классын кулланалар .

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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 һәм башкаларга өстәп җиңел күрсәтегез.

Керү42

<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">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Барлык җайланмаларда да дөрес тәртипне тәэмин итү

<button>Элементны data-dismiss="alert"мәгълүмат атрибуты белән кулланыгыз .

Сигналларда сылтамалар

.alert-linkТеләсә нинди уяулык эчендә төсле сылтамаларны тиз тәэмин итү өчен , файдалы класс кулланыгыз .

Афәрин! Сез бу мөһим хәбәрне уңышлы укыйсыз .

Идарә итә! Бу кисәтү сезнең игътибарыгызга мохтаҗ , ләкин бу бик мөһим түгел.

Кисәтү! Yourselfз-үзеңне тикшерү яхшырак, син артык яхшы күренмисең .

Әй! Берничә әйберне үзгәртегез һәм яңадан җибәрергә тырышыгыз.

<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

60%

<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, прогресс сызыгына өстәргә уйлагыз.

0%

2%

<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-stripedIE9 һәм түбәндә юк.

<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>

Төрле төр компонентлар төзү өчен абстракт объект стильләре (блог аңлатмалары, Твитлар һ.б.) текст эчтәлеге белән бергә сул яки уңга тигезләнгән рәсемне күрсәтәләр.

Килешү медиа

Килешү медиа медиа объектны (рәсемнәр, видео, аудио) эчтәлек блогының сул яисә уң ягына күрсәтә.

Медиа башы

Гравида нуллада крас утыра. 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.

Медиа башы

Гравида нуллада крас утыра. 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.

Ояланган медиа башы

Гравида нуллада крас утыра. 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.

Медиа башы

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

Медиа башы

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

<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-righthtml'тан .media-rightсоң урнаштырылырга тиеш .media-body.

Медиа тигезләү

Рәсемнәр яки бүтән медиа өске, урта яки аскы тигезләнергә мөмкин. Килешү өстә тигезләнгән.

Topгары тигезләнгән медиа

Гравида нуллада крас утыра. 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.

Ояланган медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

Ояланган медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

Ояланган медиа башы
Гравида нуллада крас утыра. 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 белән төзегез.

Крас Джасто Одио
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Крас Джасто Одио
2Dapibus ac facilisis
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Бәйләнгән әйберләр

Исемлек төркеме әйберләрен исемлек урынына люк тэглары ярдәмендә бәйләгез (бу шулай ук ата-ананы аңлата <div>) <ul>. Eachәрбер элемент тирәсендә аерым ата-аналарга ихтыяҗ юк.

Крас Джасто Одио Dapibus ac facilisis Morbi leo risus Porta ac consectetur ac Вестибулум

<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булып күренсен.

Крас Джасто Одио Dapibus ac facilisis Morbi leo risus Porta ac consectetur ac Вестибулум

<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
Вестибулум

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 өстәгез.

Төркем элементының исемлеген күрсәтегез

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	Ларри	Кош	@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>

Компонентлар

Глификоннар

Глифлар бар

Ничек кулланырга

Башка компонентлар белән кушылмагыз

Буш элементларда куллану өчен генә

Икона шрифтының урынын үзгәртү

Уңайлы иконалар

Мисаллар

Тамчы

Мисал

Тигезләү

Өстәмә урнашуны таләп итә ала

Искергән .pull-rightтигезләү

Башлыклар

Бүләкләүче

Инвалид меню әйберләре

Кнопка төркемнәре

Кнопка төркемнәрендәге кораллар һәм поповерлар махсус көйләү таләп итә

Дөреслекне roleтәэмин итегез һәм ярлык бирегез

Төп мисал

Кнопка кораллары

Зурлык

Оя ясау

Вертикаль үзгәрү

Акланган төймә төркемнәре

Чикләрне эшкәртү

IE8 һәм чикләр

<a>Элементлар белән

Кнопка ролен башкаручы сылтамалар

<button>Элементлар белән

Кнопка тамчылары

Плагинга бәйләнеш

Бер төймә тамчылары

Кнопка тамчыларын бүлегез

Зурлык

Тамчы вариациясе

Керү төркемнәре

Текстлар <input>гына

Керү төркемнәрендәге кораллар һәм поповерлар махсус көйләү таләп итә

Башка компонентлар белән кушылмагыз

Waysәрвакыт этикеткалар өстәгез

Төп мисал

Зурлык

Такталар һәм радио адоннары

Төп төймә

Тамчы белән төймәләр

Сегментланган төймәләр

Берничә төймә

Хәрби диңгез

Таблицалар панельләре өчен navs куллану JavaScript кыстыргычлары плагинын таләп итә

Навигация буларак кулланылган диңгезләрне кулланыгыз

Таблицалар

Таблеткалар

Акланган

Сафари һәм җаваплы акланган диңгезләр

Инвалид сылтамалар

Ссылка функциясе тәэсир итми

Тамчы куллану

Таблицалар

Таблеткалар

Навбар

Килешү тактасы

Эчтәлек

JavaScript плагины кирәк

Mobileимерелгән мобиль диңгез ноктасын үзгәртү

Диңгез такталарын үтемле итегез

Бренд образы

Формалар

Кәрәзле җайланма

Waysәрвакыт этикеткалар өстәгез

Кнопкалар

Контекстка хас куллану

Текст

Диңгез булмаган сылтамалар

Компонент тигезләү

Берничә компонентны дөрес тигезләү

Topгарыга урнаштырылган

Тәнне ябыштыру кирәк

Түбәнгә урнаштырылган

Искергән `.pull-right`тигезләү

Дөреслекне `role`тәэмин итегез һәм ярлык бирегез

`<a>`Элементлар белән

`<button>`Элементлар белән

Текстлар `<input>`гына