การสร้างปุ่ม DropDown Boostrap
โพสต์แล้ว: 08/09/2016 5:51 pm
การสร้างปุ่ม Drop Down ส่วนใหญ่เราจะใช้กับ Link ที่มี Link ย่อยเข้าไปด้านใน เช่นการสร้างปุ่ม Action ที่ภายในเก็บกิจกรรมอย่าง view, Edit, delete หรือเป็นปุ่มหมวดหมู่ในช่องสินค้าต่าง การล็อคอินเข้าสู่ระบบหน้าตาก็จะเป็นแบบนี้
ติดตั้ง bootstrap และเรียกใช้งาน Boostrap เสียก่อนนะคับ
โค้ดเรียกใช้งานBoostrap
จากนั้น เราจะใช้ Code ฝั่ง HTML ดังนี้
เราสามารถที่จะทำได้ไม่ยากครับ มาดูวิธีกัน ก่อนอื่นคือคุณค้องทำการโค้ดเรียกใช้งาน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>
โค้ด: เลือกทั้งหมด
<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>