Source

Кнопкалар

Ботстрапның махсус төймә стильләрен формаларда, диалогларда һәм башка зурлыклар, штатлар һәм башкалар ярдәмендә кулланыгыз.

Мисаллар

Bootstrap берничә алдан билгеләнгән төймә стилен үз эченә ала, аларның һәрберсе үз семантик максатына хезмәт итә, берничә контроль өстәмә контроль өчен.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Ярдәмче технологияләргә мәгънә җиткерү

Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .sr-onlyкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.

Кнопка теглары

Класслар элемент белән куллану өчен .btnэшләнгән . <button>Ләкин, сез шулай ук ​​бу классларны <a>яки <input>элементларны куллана аласыз (кайбер браузерлар бераз башка рендеринг кулланырга мөмкин).

Хәзерге биттәге яңа битләргә яки бүлекләргә сылтама урынына, биттәге функцияне эшләтеп җибәрү өчен кулланылган элементлар буенча төймә классларын кулланганда, бу сылтамаларга ярдәм итү технологияләренә булышу максатын тиешенчә җиткерү өчен <a>бирелергә тиеш. role="button"экран укучылары.

Ссылка 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Схема төймәләре

Кнопкага мохтаҗ, ләкин алар китергән зур фон төсләре түгел? .btn-outline-*Килешү үзгәртүче классларны теләсә нинди төймәдәге барлык фон рәсемнәрен һәм төсләрен бетерү өчен алыштырыгыз .

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Зурлыклар

Зуррак яки кечерәк төймәләр? Өстәмә .btn-lgяки .btn-smөстәмә зурлыклар өчен.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Кушып, блок дәрәҗәсе төймәләрен булдырыгыз - ата-ананың тулы киңлеген киңәйтә .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Актив хәл

Актив булганда төймәләр басылган булып күренәчәк (караңгы фон, караңгы чик һәм күләгә кертү). Алар псевдо-класс кулланганга, классларга өстәргә кирәкми<button> . Шулай да, сез дәүләтне программалы рәвештә күчерергә тиеш булсагыз , сез шул ук актив күренешне .active(һәм атрибутны кертегез) мәҗбүр итә аласыз.aria-pressed="true"

Беренчел сылтама Ссылка 
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Инвалид хәл

Теләсә нинди элементка disabledбуле атрибутын өстәп төймәләрне активсыз күрегез .<button>

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

<a>Элемент ярдәмендә инвалид төймәләр бераз башкача эш итәләр:

  • <a>disableds атрибутны хупламый , шуңа күрә .disabledаны визуаль яктан инвалид итеп күрсәтү өчен класс өстәргә кирәк.
  • Киләчәктә файдалы стильләрнең барысы pointer-eventsда якорь төймәләрендә сүндерелгән. Бу милекне яклаучы браузерларда сез инвалид курсорны бөтенләй күрмисез.
  • Инвалид төймәләр aria-disabled="true"ярдәмче технологияләргә элементның торышын күрсәтү өчен атрибутны кертергә тиеш.
Беренчел сылтама Ссылка 
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Класс с сылтамалар функциясен .disabledсүндерергә pointer-events: noneтырыша <a>, ләкин CSS милеге әле стандартлаштырылмаган. Моннан тыш, хәтта ярдәм күрсәтүче браузерларда да pointer-events: none, клавиатура навигациясе тәэсирсез кала, димәк, клавиатура кулланучылары һәм ярдәмче технологияләр кулланучылар бу сылтамаларны активлаштыра алалар. Шулай итеп, куркынычсыз булу өчен, tabindex="-1"бу сылтамаларга атрибут өстәгез (клавиатура фокусын алмас өчен) һәм аларның функцияләрен сүндерү өчен махсус JavaScript кулланыгыз.

Плагин

Кнопкалар белән күбрәк эшләгез. Контроль төймә кораллар плитәсе кебек компонентлар өчен төймәләр төркемнәрен күрсәтә.

Күчерә

Кнопка торышын data-toggle="button"алыштырырга . activeӘгәр дә сез төймәне алдан алыштырсагыз, сез кул белән .activeклассны һәм .aria-pressed="true"<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Такталар һәм радио төймәләре

Bootstrap .buttonстильләре s кебек башка элементларга кулланылырга мөмкин, <label>шкаф яки радио стиле төймәсен күчү өчен. Аларның үзгәртелгән тәртибен JavaScript аша эшләтеп җибәрү өчен, сезнең төймәләр эчендәге стильләрне өстәү өчен, үзгәртелгән data-toggle="buttons"төймәләрне үз эченә алыгыз. Игътибар итегез, сез бердәм кертелгән төймәләр яки аларның төркемнәрен булдыра аласыз..btn-group.btn-group-toggle<input>

Бу төймәләр өчен тикшерелгән хәл төймәдәге вакыйга аша гына яңартыла . clickӘгәр сез кертүне яңарту өчен бүтән ысул куллансагыз, мәсәлән, <input type="reset">кертү мөлкәте белән яки кул белән куллансагыз, сезгә кул белән checkedкүчү кирәк ..active<label>

Игътибар итегез, алдан тикшерелгән төймәләр сез .activeкертүне класска кул белән кушуны таләп итә <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Методлар

Метод Тасвирлау
$().button('toggle') Күчереп тору. Кнопкага активлашкан кыяфәт бирә.
$().button('dispose') Элемент төймәсен җимерә.