รูปแบบของ Dropdowns

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

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

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

รูปแบบของ Dropdowns

โพสต์ที่ยังไม่ได้อ่าน โดย tai14 »

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

วิธีนำไปใช้งาน

1.นำโค้ดด้านล่างนี้ไปไว้ใน <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>

2.เลือกรูปแบบของ Dropdown ที่ต้องการนำไปใช้แล้ววางโค้ดด้านล่างนี้ในส่วนของ <body>


รูปแบบของ Dropdowns
รูปแบบที่ 1 Basic Dropdown เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง
นำโค้ดด้านล่างนี้ไปไว้ในส่วนของ <body>

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

  <div class="container">
            <h2>จังหวัด</h2>                                      
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกจังหวัด
                    <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">กรุงเทพมหานคร</a></li>
                    <li><a href="#">ชลบุรี</a></li>
                    <li><a href="#">เชียงใหม่</a></li>
                    <li><a href="#">เชียงราย</a></li>
                    <li><a href="#">ขอนแก่น</a></li>
                    <li><a href="#">ภูเก็ต</a></li>
                    <li><a href="#">เลย</a></li>
                    <li><a href="#">ระยอง</a></li>
                </ul>
            </div>
        </div>
Screenshot_285.jpg
Screenshot_285.jpg (7.84 KiB) Viewed 4598 times
Screenshot_286.jpg
Screenshot_286.jpg (14.23 KiB) Viewed 4598 times
รูปแบบที่ 2 Dropdown Header เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะไม่เหมือนกับ Basic Dropdown ตรงที่จะมีหัวข้อใหญ่แสดงข้อมูลกำกับไว้ และมีเมนูย่อยให้เลือกด้านล่าง

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

<div class="container">
            <h2>จังหวัด</h2>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกจังหวัด
                    <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">ภาคเหนือ</li>
                    <li><a href="#">เชียงใหม่</a></li>
                    <li><a href="#">เชียงราย</a></li>

                    <li class="divider"></li>
                    <li class="dropdown-header">ภาคอีสาน</li>
                    <li><a href="#">โคราช</a></li>
                    <li><a href="#">บุรีรัมย์</a></li>


                </ul>
            </div>
        </div>
Screenshot_279.jpg
Screenshot_279.jpg (7.49 KiB) Viewed 4598 times
Screenshot_280.jpg
Screenshot_280.jpg (11.92 KiB) Viewed 4598 times

รูปแบบที่ 3 Disable and Active items เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะมีบางรายการที่ไม่สามารถเลือกได้

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

<div class="container">
            <h2>Zone ที่นั่ง</h2>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกZoneที่นั่ง
                    <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Zone A</a></li>
                    <li class="disabled"><a href="#">Zone B (เต็ม)</a></li>
                    <li class="active"><a href="#">Zone C</a></li>
                    <li><a href="#">Zone D</a></li>
                </ul>
            </div>
        </div>
Screenshot_281.jpg
Screenshot_281.jpg (8.17 KiB) Viewed 4598 times
Screenshot_282.jpg
Screenshot_282.jpg (13.26 KiB) Viewed 4598 times

รูปแบบที่ 4 Dropdown Position เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่รายการจะอยู่ทางด้านขวา ไม่ได้อยู่ติดกับที่ปุ่ม

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

<div class="container">
            <h2>Menu</h2>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือก
                    <span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">copy</a></li>
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Paste</a></li>
                </ul>
            </div>
        </div>
Screenshot_283.jpg
Screenshot_283.jpg (6.28 KiB) Viewed 4598 times
Screenshot_284.jpg

รูปแบบที่ 5 Dropup เมื่อคลิกที่ปุ่มจะมีเมนูรายการขึ้นมาทางด้านบนของปุ่ม เหมาะสำหรับนำปุ่มไปไว้ทางด้านล่างของเว็บเพื่อแสดงรายการเรียงไว้ด้านบน

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

<div class="container">
            <h2>ห้อง</h2>
            <div class="dropup">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกห้อง
                    <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">ห้อง 1</a></li>
                    <li><a href="#">ห้อง 2</a></li>
                    
                </ul>
                </ul>
            </div>
        </div>
Screenshot_287.jpg
Screenshot_287.jpg (6.17 KiB) Viewed 4598 times
Screenshot_288.jpg
Screenshot_288.jpg (6.68 KiB) Viewed 4598 times

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 29