[Bootstrap] Phần 16: Dropdown

175 lượt xem

Trong bài này, chúng ta sẽ học các lớp để trang trí cho các dropdown trong Bootstrap.

Dropdown cơ bản
Một menu dropdown là 1 menu xổ xuống cho phép người dùng chọn 1 giá trị từ danh sách được định nghĩa trước. Chúng ta dùng lớp .dropdown để định nghĩa 1 dropdown.
dropdown

<div class="container">
	<h2>Dropdown - dammio.com </h2>
	<p>Lớp .dropdown dùng để định 1 menu dropdown</p>
	<p>Lớp .dropdown-menu để xây dựng nội dung menu.</p>
	<p>Để mở dropdown, dùng 1 nút hoặc liên kết với lớp .dropdown-toggle và data-toggle="dropdown".</p>
	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ví dụ dropdown
		<span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li><a href="#">Lập trình Web</a></li>
			<li><a href="#">Thiết kế Web</a></li>
			<li><a href="#">Tiếng Anh</a></li>
    </ul>
  </div>
</div>

Để mở 1 menu dropdown, chúng ta xây dựng 1 nút hoặc 1 đường link với lớp tên là .dropdown-toggle và thuộc tính data-toggle=”dropdown”.

Lớp .caret để hiển thị hình mũi tên, giúp người dùng nhận biết rằng nút này chứa dropdown. Thêm lớp .dropdown-menu class vào phần tử ul để xây dựng 1 dropdown menu.

Phân chia dropdown
Lớp .divider dùng để phân chia các liên kết trong dropdown bằng 1 đường gạch ngang.
dropdown_divider

<div class="container">
	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" 
		data-toggle="dropdown">Ví dụ dropdown
		<span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li><a href="#">Lập trình Web</a></li>
			<li><a href="#">Thiết kế Web</a></li>
			<li class="divider"></li>
			<li><a href="#">Tiếng Anh</a></li>
		</ul>
	</div>
</div>

Phần đầu Dropdown
Lớp .dropdown-header dùng để thêm các phần đầu vào bên trong 1 dropdown menu.
dropdown_header

<div class="container">
	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" 
		data-toggle="dropdown">Ví dụ dropdown
		<span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li class="dropdown-header">Phần đầu Dropdown</li>
			<li><a href="#">Lập trình Web</a></li>
			<li><a href="#">Thiết kế Web</a></li>
			<li><a href="#">Tiếng Anh</a></li>
		</ul>
	</div>
</div>

Vô hiệu hóa 1 phần tử trong dropdown
Để vô hiệu hóa 1 phần tử, chúng ta có thể dùng lớp .disabled.

<li class="disabled"><a href="#">Lập trình Web</a></li>

Vị trí dropdown
Chúng ta có thể điều chỉnh được vị trí dropdown, thêm lớp .dropdown-menu-right vào phần tử ul để tạo dropdown bên phải.

<ul class="dropdown-menu dropdown-menu-right">

Dropup
Trái ngược với dropdown, dropup là danh sách được xổ lên phía trên, chúng ta dùng lớp .dropup để định nghĩa.
dropup

<div class="dropup">

Khả năng truy cập dropdown
Để nâng cao khả năng truy xuất với người dùng, bạn có thể dùng các thuộc tính role và aria-* khi tạo 1 menu dropdown.

<div class="container">
	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" 
		data-toggle="dropdown">Ví dụ dropdown
		<span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li role="presentation"><a role="menuitem" href="#">Lập trình Web</a></li>
			<li role="presentation"><a role="menuitem" href="#">Thiết kế Web</a></li>
			<li role="presentation"><a role="menuitem" href="#">Tiếng Anh</a></li>
		</ul>
	</div>
</div>

Như vậy trong bài viết bạn đã nắm được các lớp trong Bootstrap để biểu diễn các dropdown.

Bình luận Facebook

Để lại bình luận

Hãy là người đầu tiên bình luận!

Thông báo khi có
avatar
1000
wpDiscuz