ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap JS เลื่อนลง


JS Dropdown (dropdown.js)

มีเมนูแบบเลื่อนลงเป็นเมนู toggleable ที่ช่วยให้ผู้ใช้สามารถเลือกหนึ่งค่าจากรายการที่กำหนดไว้ล่วงหน้า

สำหรับการสอนเกี่ยวกับเมนูแบบเลื่อนลงอ่านของเรา Bootstrap dropdowns กวดวิชา


เรียนแบบเลื่อนลงปลั๊กอิน

ชั้น ลักษณะ ตัวอย่าง
.dropdown บ่งบอกถึงเมนูแบบเลื่อนลง ลองมัน
.dropdown-menu สร้างเมนูแบบเลื่อนลง ลองมัน
.dropdown-menu-right ขวาสอดคล้องเมนูแบบเลื่อนลง ลองมัน
.dropdown-header เพิ่มส่วนหัวภายในเมนูแบบเลื่อนลง ลองมัน
.dropup แสดงให้เห็นเมนู dropup ลองมัน
.disabled ปิดการใช้งานรายการในเมนูแบบเลื่อนลง ลองมัน
.divider แยกรายการภายในเมนูแบบเลื่อนลงกับเส้นแนวนอน ลองมัน

ผ่าน data-* แอตทริบิวต์

เพิ่ม data-toggle="dropdown" เพื่อการเชื่อมโยงหรือปุ่มเพื่อสลับเมนูแบบเลื่อนลง

ตัวอย่าง

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
ลองตัวเอง»

ผ่านทางจาวาสคริปต์

เปิดใช้งานด้วยตนเอง:

ตัวอย่าง

$('.dropdown-toggle').dropdown();
ลองตัวเอง»

หมายเหตุ: data-toggle="dropdown" แอตทริบิวต์จะต้องคำนึงถึงว่าคุณเรียก dropdown() วิธีการ


ตัวเลือกแบบเลื่อนลง

None

วิธีการแบบเลื่อนลง

ตารางต่อไปนี้แสดงวิธีการแบบเลื่อนที่มีอยู่ทั้งหมด

วิธี ลักษณะ ลองมัน
.dropdown("toggle") สลับแบบเลื่อนลง ลองมัน

เหตุการณ์แบบเลื่อนลง

ตารางต่อไปนี้แสดงเหตุการณ์แบบเลื่อนที่มีอยู่ทั้งหมด

เหตุการณ์ ลักษณะ ลองมัน
show.bs.dropdown เกิดขึ้นเมื่อเลื่อนลงเป็นเรื่องเกี่ยวกับที่จะแสดง ลองมัน
shown.bs.dropdown เกิดขึ้นเมื่อเลื่อนลงก็แสดงให้เห็นอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน
hide.bs.dropdown เกิดขึ้นเมื่อเลื่อนลงเป็นเรื่องที่จะซ่อน ลองมัน
hidden.bs.dropdown เกิดขึ้นเมื่อเลื่อนลงจะถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน

เคล็ดลับ: ใช้ของ jQuery event.relatedTarget ที่จะได้รับองค์ประกอบที่เรียกแบบเลื่อนลง:

ตัวอย่าง

$(".dropdown").on("show.bs.dropdown", function(event){
    var x = $(event.relatedTarget).text(); // Get the text of the element
    alert(x);
});
ลองตัวเอง»

ตัวอย่าง

ตัวอย่าง

เปลี่ยนไอคอนลูกศรเพื่อคว่ำ

ตัวอย่างต่อไปนี้การเปลี่ยนแปลงไอคอนรูปหมวกจากชี้ลงเพื่อขึ้นเมื่อคลิกที่เลื่อนลง:

ตัวอย่าง

/* CSS: */
<style>
.caret.caret-up {
    border-top-width: 0;
    border-bottom: 4px solid #fff;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
  $(".dropdown").on("hide.bs.dropdown", function(){
    $(".btn").html('Dropdown <span class="caret"></span>');
  });
  $(".dropdown").on("show.bs.dropdown", function(){
    $(".btn").html('Dropdown <span class="caret caret-up"></span>');
  });
});
</script>
ลองตัวเอง»

Navbar ด้วยแบบเลื่อนลง

ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงปุ่มในแถบนำทาง A:

ตัวอย่าง

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
ลองตัวเอง»

ตัวอย่างต่อไปนี้จะเพิ่มเมนูแบบเลื่อนลงด้วยรูปแบบการเข้าสู่ระบบในแถบนำทางไปนี้:

ตัวอย่าง

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
    <div class="dropdown-menu">
      <form id="formlogin" class="form container-fluid">
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
          <button type="button" id="btnLogin" class="btn btn-block">Login</button>
      </form>
      <div class="container-fluid">
        <a class="small" href="#">Forgot password?</a>
      </div>
    </div>
  </li>
</ul>
ลองตัวเอง»

dropdowns หลายระดับ

ในตัวอย่างนี้เราจะใช้ jQuery เพื่อเปิดเมนูแบบเลื่อนลงหลายระดับเมื่อคลิก:

ตัวอย่าง

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
ลองตัวเอง»

ในตัวอย่างนี้เราได้สร้างที่กำหนดเอง .dropdown-submenu ชั้นเรียนสำหรับเมนูแบบเลื่อนลงหลายระดับ:

ตัวอย่าง

 /* CSS: */
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
ลองตัวเอง»