HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 บทช่วยสอน

BS4 HOME BS4 เริ่มต้น BS4 คอนเทนเนอร์ BS4 Grid Basic BS4 วิชาการพิมพ์ BS4 สี ตาราง BS4 BS4 รูปภาพ BS4 Jumbotron การแจ้งเตือน BS4 ปุ่ม BS4 กลุ่มปุ่ม BS4 ป้าย BS4 แถบความคืบหน้า BS4 BS4 Spinners BS4 การแบ่งหน้า BS4 รายการกลุ่ม การ์ด BS4 BS4 ดรอปดาวน์ BS4 ยุบ BS4 Navs BS4 Navbar แบบฟอร์ม BS4 อินพุต BS4 กลุ่มอินพุต BS4 BS4 แบบฟอร์มที่กำหนดเอง BS4 ม้าหมุน BS4 โมดอล เคล็ดลับเครื่องมือ BS4 BS4 ป๊อปโอเวอร์ BS4 ขนมปังปิ้ง BS4 Scrollspy BS4 ยูทิลิตี้ BS4 Flex ไอคอน BS4 วัตถุสื่อ BS4 ตัวกรอง BS4

Bootstrap 4 Grid

ระบบกริด BS4 BS4 ซ้อน/แนวนอน BS4 Grid XSmall BS4 กริดขนาดเล็ก BS4 กริดขนาดกลาง BS4 กริดขนาดใหญ่ BS4 Grid XLarge ตัวอย่างกริด BS4

Bootstrap 4 อื่นๆ

เทมเพลตพื้นฐาน BS4 แบบฝึกหัด BS4 แบบทดสอบ BS4

Bootstrap 4 อ้างอิง

ทุกชั้นเรียน JS Alert ปุ่ม JS JS Carousel JS ยุบ JS Dropdown JS Modal JS Popover JS Scrollspy JS แท็บ JS Toasts JS Tooltip


Bootstrap 4 สปินเนอร์

❮ ก่อนหน้า ถัดไป ❯

สปินเนอร์

ในการสร้างสปินเนอร์/โหลดเดอร์ ให้ใช้.spinner-borderคลาส:

ตัวอย่าง

<div class="spinner-border"></div>

สปินเนอร์สี

ใช้ยูทิลิตี้สีข้อความเพื่อเพิ่มสีให้กับสปินเนอร์:

ตัวอย่าง

<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>

นักปั่นที่กำลังเติบโต

ใช้.spinner-growคลาสถ้าคุณต้องการให้สปินเนอร์/ตัวโหลดเติบโตแทน "สปิน":

ตัวอย่าง

<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>

ขนาดปินเนอร์

ใช้.spinner-border-smหรือ.spinner-grow-smเพื่อสร้างเครื่องปั่นด้ายขนาดเล็ก:

ตัวอย่าง

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

ปุ่มสปินเนอร์

คุณยังสามารถเพิ่มสปินเนอร์ให้กับปุ่ม โดยมีหรือไม่มีข้อความ:

ตัวอย่าง

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

❮ ก่อนหน้า ถัดไป ❯