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" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" 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>

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

Игътибар итегез, алдан тикшерелгән төймәләр .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') Элемент төймәсен җимерә.