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

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

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

User avatar
pnut
PHP Super Member
PHP Super Member
Posts: 488
Joined: 08/08/2016 10:48 am

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

Post by pnut » 08/09/2016 5:51 pm

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

Code: Select all

<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 ดังนี้

Code: Select all

<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>

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest