Товчлуурууд

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>

Товчлуурын шошго

Ангиудыг элементтэй .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>

Идэвхгүй байдал

Аливаа элементэд disabledboolean шинж чанарыг нэмж товчлууруудыг идэвхгүй болгох.<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" autocomplete="off">
  Single toggle
</button>

Шалгах хайрцаг ба радио товчлуурууд

Ачаалагчийн .buttonхэв маягийг s гэх мэт бусад элементүүдэд ашиглаж, <label>чагтлах хайрцаг эсвэл радио загварын товчлуурыг солих боломжтой. data-toggle="buttons"Эдгээр өөрчилсөн товчлуурыг агуулсан товчлуур дээр нэмж .btn-group, JavaScript-ээр сэлгэн залгах ажиллагааг идэвхжүүлж, товчлуур доторх s - .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>

Арга зүй