Кнопкалар

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

Мисаллар

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да якорь төймәләрендә сүндерелгән. Бу милекне яклаучы браузерларда сез инвалид курсорны бөтенләй күрмисез.
• Кулланылган инвалид төймәләр ярдәмче технологияләргә элементның торышын күрсәтү өчен атрибутны <a>кертергә тиеш .aria-disabled="true"
• Кулланылган инвалид төймәләр атрибутны кертергә <a> тиеш түгел .href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Функциональлекне бәйләү

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

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

Методлар