การสร้างปุ่ม DropDown Boostrap

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

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

ภาพประจำตัวสมาชิก
pnut
PHP Super Member
PHP Super Member
โพสต์: 488
ลงทะเบียนเมื่อ: 08/08/2016 10:48 am

การสร้างปุ่ม DropDown Boostrap

โพสต์โดย pnut » 08/09/2016 5:51 pm

การสร้างปุ่ม Drop Down ส่วนใหญ่เราจะใช้กับ Link ที่มี Link ย่อยเข้าไปด้านใน เช่นการสร้างปุ่ม Action ที่ภายในเก็บกิจกรรมอย่าง view, Edit, delete หรือเป็นปุ่มหมวดหมู่ในช่องสินค้าต่าง การล็อคอินเข้าสู่ระบบหน้าตาก็จะเป็นแบบนี้
Capture.JPG
Capture.JPG (20.14 KiB) เปิดดู 372 ครั้ง

เราสามารถที่จะทำได้ไม่ยากครับ มาดูวิธีกัน ก่อนอื่นคือคุณค้องทำการติดตั้ง bootstrap และเรียกใช้งาน Boostrap เสียก่อนนะคับ
โค้ดเรียกใช้งานBoostrap

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

<head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

จากนั้น เราจะใช้ Code ฝั่ง HTML ดังนี้

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

<li class="dropdown">
                             <a href="./../../ucp.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">                     
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
                                เข้าสู่ระบบ</a>
                            <ul class="dropdown-menu" id="login-dp">
                              <li>
                                    <div class="row">
                                        <div class="login-index">
                                            Login via
                                            <div class="social-buttons">
                                                <a href="http://www.thaimtb.com/forum/app.php/form/login" class="btn btn-fb">
                                                    <i class="fa fa-facebook"></i> Facebook
                                                </a>
                                            </div>
                                            or
                                            <form method="post" action="./../../ucp.php?mode=login" class="headerspace" id="login-nav">
                                                <div class="form-group">
                                                    <label class="sr-only" for="exampleInputEmail2">ชื่อผู้ใช้:</label>
                                                    <input name="username" id="username" class="form-control" placeholder="ชื่อผู้ใช้" required="" type="text">
                                                </div>
                                                <div class="form-group">
                                                    <label class="sr-only" for="exampleInputPassword2">รหัสผ่าน:</label>                                                   
                                                    <input name="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required="" type="password"/>
                                                    <div class="help-block text-right">
                                                        <a href="">ลืมรหัสผ่าน</a>
                                                    </div>
                                                </div>
                                                <div class="form-grop">
                                                    <button type="submit" name="login" value=" เข้าสู่ระบบ " class="btn btn-primary btn-block"> เข้าสู่ระบบ </button>

                                                </div>
                                                <input name="redirect" value="./app.php/tags/index?" type="hidden">
                                                <div class="checkbox">
                                                    <label>
                                                        <input name="autologin" id="autologin" type="checkbox"><label for="autologin">เข้าสู่ระบบอัตโนมัติ</label>
                                                    </label>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="bottom text-center">
                                            <a href="./../../ucp.php?mode=register" role="menuitem"><b>สมัครสมาชิก</b></a>
                                       </div>
                                    </div>
                                </li> 
                            </ul>
                               
                        </li>

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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

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