ปุ่ม Bootstrap

องค์ประกอบปุ่มเป็นหนึ่งในองค์ประกอบ Hypertext Markup Language (HTML) ที่มีประโยชน์มากกว่าในแง่ที่ทำให้ผู้ใช้สามารถโต้ตอบกับเพจได้

การเข้าสู่ระบบ สมัครสมาชิก ลบหรือเปิดบางสิ่ง การแสดงเมนู การเปลี่ยนธีมสีเป็นการดำเนินการโดยใช้ปุ่มต่างๆ

รูปแบบปุ่มเริ่มต้นของเบราว์เซอร์ไม่ได้ดูดีที่สุด และไม่ทันสมัยไม่ว่าด้วยวิธีใด

ด้วยการปรับแต่งสไตล์ของพวกเขาในทุกโครงการ เราทำซ้ำโค้ดเดิมหลายครั้งเพื่อให้ได้ผลลัพธ์ที่เหมือนกัน

อีกครั้ง Bootstrap บังคับเรา ดูว่าปุ่ม Bootstrap ทำอะไรได้บ้าง

ปุ่มสี

    <button class="btn btn-primary">button 1</button>
    <button class="btn btn-secondary">button 2</button>
    <button class="btn btn-info">button 3</button>
    <button class="btn btn-warning">button 4</button>
    <button class="btn btn-danger">button 5</button>
    <button class="btn btn-success">button 6</button>
    <button class="btn btn-light">button 7</button>
    <button class="btn btn-dark">button 8</button>
    <button class="btn btn-link">button 9</button>

เกี่ยวกับสี เราสามารถใช้สีที่กำหนดไว้ล่วงหน้าของ Bootstrap รวมถึงตัวเลือก BTN-LINK เพื่อใช้สไตล์ของ Bootstrap สำหรับลิงก์

ตัวเลือกสีทั้งหมดมีช่องว่างภายในที่สม่ำเสมอและการเปลี่ยนสีอย่างรวดเร็วเป็นเฉดสีเข้มกว่าเล็กน้อยเมื่อวางเคอร์เซอร์ไว้เหนือ ลิงก์มีขีดเส้นใต้เมื่อวางเมาส์เหนือ

หากเราประกาศเฉพาะคลาส BTN Bootstrap จะลบสไตล์เบราว์เซอร์เริ่มต้นเท่านั้น:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

<button>Without Bootstrap</button>
<button class="btn">With Bootstrap</button>

ดังที่เราเห็นได้ที่นี่:

ปุ่มเค้าร่าง

เราสามารถใช้สีเดียวกันเพื่อสร้างปุ่มที่มีเพียงแค่โครงร่าง:

 	<button class="btn btn-outline-primary">button 1</button>
    <button class="btn btn-outline-secondary">button 2</button>
    <button class="btn btn-outline-info">button 3</button>
    <button class="btn btn-outline-warning">button 4</button>
    <button class="btn btn-outline-danger">button 5</button>
    <button class="btn btn-outline-success">button 6</button>
    <button class="btn btn-outline-light">button 7</button>
    <button class="btn btn-outline-dark">button 8</button>
    <button class="btn btn-outline-link">button 9</button>

โดยได้สีพื้นหลังเดียวกันกับเค้าร่าง และข้อความจะกลายเป็นสีขาวหรือสีดำ ขึ้นอยู่กับคอนทราสต์ แสงและสีเหลือง (คำเตือน) จะได้รับข้อความสีดำ อย่างไรก็ตาม เวอร์ชันลิงก์ไม่รองรับตัวเลือกนี้

ขนาด

Bootstrap รองรับปุ่มสามขนาด:เล็ก ปกติ และใหญ่
เราเพิ่มคลาสอื่นเพื่อเลือกขนาดดังนี้:

<div class="m-5">
      <button class="btn btn-primary btn-sm">small button 1</button>
      <button class="btn btn-warning btn-sm">small button 2</button>
      <button class="btn btn-primary btn-sm">small button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary">regular button 1</button>
      <button class="btn btn-warning">regular button 2</button>
      <button class="btn btn-danger">regular button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary btn-lg">large button 1</button>
      <button class="btn btn-warning btn-lg">large button 2</button>
      <button class="btn btn-danger btn-lg">large button 3</button>
    </div>

มีการสร้างปุ่มสามปุ่มของแต่ละขนาด และห่อแต่ละขนาดใน div ด้วยคลาส M-5 เพื่อให้มีระยะขอบเล็กน้อยเพื่อเว้นระยะห่าง

ปุ่มบล็อคระดับ

หากเราต้องการปุ่มที่มีความกว้างเต็มขององค์ประกอบนั้น เราจะเพิ่มคลาสของ BTN-BLOCK เข้าไป มาสร้างรูปแบบง่ายๆ ซึ่งเป็นกรณีทั่วไปสำหรับวิธีนี้

<div class="form-group">
          <label for="username">username</label>
          <input type="text" class="form-control" />
          <div class="form-group"></div>
          <label for="email">Email</label>
          <input type="email" class="form-control" />
        </div>
        <button class="btn btn-lg btn-block btn-primary">
          Block Level Button
        </button>
        <button class="btn btn-lg btn-secondary my-2">Regular button</button>
      </form>

เราจะไม่ลงรายละเอียดเกี่ยวกับคลาสแบบฟอร์ม Bootstrap

เราเพิ่งสร้างแบบฟอร์มง่ายๆ ที่ยอมรับชื่อผู้ใช้และอีเมล โดยมีปุ่มระดับบล็อกหนึ่งปุ่มและปุ่มปกติหนึ่งปุ่ม

MT-2 เป็นเพียงระยะขอบ (บน) ที่เพิ่มเข้ามาเพื่อแยกปุ่มทั้งสองออก

และที่นี่เราสามารถเห็นความแตกต่าง:

สถานะปุ่ม

เช่นเดียวกับส่วนประกอบ Bootstrap อื่นๆ เราสามารถเปลี่ยนรูปลักษณ์ของปุ่มด้วยคลาสสถานะ นั่นคือ ACTIVE หรือ DISABLED

สถานะใช้งาน

ปุ่มที่ใช้งานจะมีพื้นหลัง เส้นขอบ และเงาที่เข้มกว่าเล็กน้อย

      <button class="btn btn-primary">Regular</button>
      <button class="btn btn-primary active">Active</button>
      <button class="btn btn-primary">Regular</button>

สถานะผู้พิการ

ในทางตรงกันข้าม ปุ่มที่ปิดใช้งานจะใช้เฉดสีที่สว่างกว่าสำหรับคุณสมบัติเดียวกัน โปรดทราบว่าการเพิ่มคลาส DISABLED จะทำให้ปุ่มมีสีอ่อนลงเท่านั้น ในการปิดการใช้งานอย่างแท้จริง เราต้องประกาศเป็นแอตทริบิวต์ปุ่ม:

	<button class="btn btn-primary disabled">Disabled Looking</button>
    <button class="btn btn-primary" disabled>Truly Disabled</button>

คลาสที่มี DISABLED ยังคงคลิกได้ และจะดำเนินการหากมี

สำหรับเทคโนโลยีอำนวยความสะดวก เราจำเป็นต้องรวมแอตทริบิวต์ ARIA-DISABLED="TRUE" ด้วย เพื่อให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบว่ามีปุ่มปิดใช้งานอยู่บนหน้าจอ

นอกจากนี้ ปัจจุบันองค์ประกอบ ไม่รองรับแอตทริบิวต์ DISABLED ดังนั้นเพื่อให้มีลักษณะที่ปิดใช้งาน เราจึงต้องรวมคลาสไว้ด้วย

<a class="btn btn-danger" disabled>Attribute Not Supported</a>
      <a href="#" class="btn btn-danger disabled">Disabled Look</a>

ในกรณีของแท็ก คลาส DISABLED จะเพิ่มกฎ CSS POINTER-EVENTS:NONE ซึ่งปิดใช้งานการคลิกเมาส์

คุณไม่ควรใช้แท็ก เป็นปุ่มอยู่ดี แต่ควรทราบ

กลุ่มปุ่ม

เช่นเดียวกับ CARDS <( ในการเผยแพร่ในขณะที่เขียน ) ใน Bootstrap เราสามารถใช้คลาส GROUP เพื่อรวมปุ่มต่างๆ เข้าด้วยกันเป็นองค์ประกอบเดียวด้วยสายตา

<div class="btn-group">
      <button class="btn btn-primary">button 1</button>
      <button class="btn btn-warning">button 2</button>
      <button class="btn btn-info">button 3</button>
      <button class="btn btn-danger">button 4</button>
    </div>

เรารวมมันไว้ใน div ด้วยคลาส BTN-GROUP แค่นั้นเอง!

ลักษณะการทำงานเหมือนกันทุกประการ แต่ตอนนี้อยู่ติดกัน และมุมด้านนอกโค้งมนอย่างสวยงาม

สรุป

ปุ่มต่างๆ สามารถพบได้ในเกือบทุกเว็บไซต์ และเป็นส่วนสำคัญของประสบการณ์ออนไลน์ เราสามารถเข้าสู่ระบบบัญชี สั่งอาหารออนไลน์ สมัครรับจดหมายข่าว หรือบล็อกสแปมทั้งหมดที่ส่งถึงกล่องจดหมายของเราด้วยปุ่มต่างๆ หากไม่มีพวกเขา เว็บไซต์ก็จะกลายเป็นนามบัตรดิจิทัล เราสามารถสร้างปุ่มต่างๆ ให้เป็นองค์ประกอบที่สวยงามของไซต์ได้โดยใช้ Bootstrap