Түймелер

Бірнеше өлшемдерге, күйлерге және т.б. қолдауы бар пішіндердегі, диалогтардағы және т.б. әрекеттер үшін Bootstrap қолданбасының реттелетін түймешік мәнерлерін пайдаланыңыз.

Мысалдар

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: nowrapSass қолданбасында әрбір түйме үшін мәтінді орауды өшіруді орнатуға болады.

Түйме белгілері

Сыныптар элементпен .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>

Белсенді күй

Түймешіктер қараңғы фонмен, күңгірт жиекпен және көлеңкелер қосылған кезде кірістірілген көлеңкемен белсенді кезде басылған көрінеді. s -ге класс қосудың қажеті жоқ, <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сынып s 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>

Құсбелгі және радио түймелері

Жүктелетін мәнерлер құсбелгісін немесе радио мәнері түймешігін ауыстырып қосуды қамтамасыз ету үшін s .buttonсияқты басқа элементтерге қолданылуы мүмкін . <label>JavaScript арқылы ауыстырып- қосу әрекетін қосу және түймелеріңіздегі s мәнеріне қосу 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>

Әдістері