Товчлуурууд

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анги нэмж болно. Sass-д та $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>

Идэвхтэй байдал

Товчлуур нь бараан дэвсгэртэй, бараан хүрээтэй, сүүдрийг идэвхжүүлсэн үед сүүдэртэй үед дарагдсан харагдана. Тэд псевдо анги ашигладаг тул 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Зангууны товчлуур дээрх бүгдийг идэвхгүй болгохын тулд ирээдүйд ээлтэй зарим загваруудыг оруулсан болно . Энэ өмчийг дэмждэг хөтөч дээр та идэвхгүй курсорыг огт харахгүй.
• Ашигласан идэвхгүй товчлуурууд нь туслах технологид элементийн төлөвийг харуулах шинж чанарыг агуулсан <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гарны навигаци нөлөөлөлгүй хэвээр байгаа бөгөөд энэ нь хараатай гар хэрэглэгчид болон туслах технологи ашигладаг хүмүүс эдгээр холбоосыг идэвхжүүлэх боломжтой хэвээр байх болно. Тиймээс аюулгүй байхын тулд -аас гадна гарын фокусыг хүлээн авахаас сэргийлэхийн тулд эдгээр холбоосууд дээр шинж чанаруудыг оруулаад, тэдгээрийн функцийг бүхэлд нь идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу aria-disabled="true".tabindex="-1"

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

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

Ачаалагчийн .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> 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>

Арга зүй