Кнопкалар

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

Мисаллар

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>

Текстны төрүне сүндерегез

Әгәр дә сез төймә текстының төрелүен теләмисез икән, сез .text-nowrapтөймәгә класс өсти аласыз. Сасста сез $btn-white-space: nowrapһәр төймә өчен текст төрүне сүндерә аласыз.

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

Класслар элемент белән куллану өчен .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>

Плагин

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

Күчерә

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Методлар