รูปแบบของ Buttons

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

tai14
PHP Super Member
PHP Super Member
โพสต์: 224
ลงทะเบียนเมื่อ: 06/08/2018 10:25 am

รูปแบบของ Buttons

โพสต์โดย tai14 » 23/08/2018 10:44 pm

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

วิธีนำไปใช้งาน
copy โค้ดส่วนนี้ไปใส่ในส่วน <head>

โค้ด: เลือกทั้งหมด

<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       

และ copy โค้ดปุ่มที่ต้องการนำไปใช้งานไปวางใน <body>


Button Styles เป็นสีสันของปุ่มที่แตกต่างกัน มีทั้งหมด 7 สีให้เลือกใช้งาน และปุ่มสุดท้ายเป็นแบบลิงค์ ไม่มีกรอบของปุ่ม

โค้ด: เลือกทั้งหมด

<button type="button" class="btn">gray</button>
        <button type="button" class="btn btn-default">white</button>
        <button type="button" class="btn btn-primary">blue</button>
        <button type="button" class="btn btn-success">green</button>
        <button type="button" class="btn btn-info">blue</button>
        <button type="button" class="btn btn-warning">orange</button>
        <button type="button" class="btn btn-danger">red</button>
        <button type="button" class="btn btn-link">Link</button>

Screenshot_289.jpg
Screenshot_289.jpg (9.77 KiB) เปิดดู 141 ครั้ง


Button Sizes ขนาดของปุ่ม มีทั้งหมด 4 ขนาด

โค้ด: เลือกทั้งหมด

<button type="button" class="btn btn-primary btn-lg">Large</button>
        <button type="button" class="btn btn-primary btn-md">Medium</button>
        <button type="button" class="btn btn-primary btn-sm">Small</button>
        <button type="button" class="btn btn-primary btn-xs">XSmall</button>

Screenshot_290.jpg
Screenshot_290.jpg (8.84 KiB) เปิดดู 141 ครั้ง


Block Level Buttons เป็นปุ่มที่มีขนาดยาวเต็มพื้นที่หน้าเว็บ

โค้ด: เลือกทั้งหมด

 <button type="button" class="btn btn-primary btn-block">Click</button>

180823222116-R840.jpg
180823222116-R840.jpg (7.94 KiB) เปิดดู 141 ครั้ง


Active/Disabled Buttons ปุ่มแรกเป็นปุ่มพื้นฐาน ปุ่มที่สองเป็นปุ่มที่กำลังใช้งานอยู่จะมีสีเข้ม และปุ่มสุดท้ายเป็นปุ่มที่ไม่สามารถคลิกได้

โค้ด: เลือกทั้งหมด

<div class="container">
            <button type="button" class="btn btn-primary">ปุ่มพื้นฐาน</button>
            <button type="button" class="btn btn-primary active">ปุ่มที่กำลังใช้งานอยู่</button>
            <button type="button" class="btn btn-primary disabled">ปุ่มที่ไม่สามารถใช้งานได้</button>
</div>

Screenshot_292.jpg
Screenshot_292.jpg (10.86 KiB) เปิดดู 141 ครั้ง

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน