Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong bootstrap 3, nghe tới cái tên list chắc hẳn các bạn đã hình dung ra được nó là cái quái gì rồi phải không nào, nôm na là dùng các tag <ul></li> để tạo ra các định dạng menu ngang,dọc.
1. Class list-unstyled định nghĩa tag <ul> & <ol>
Class này được dùng để định nghĩa cho các tag <ul> hoặc <ol> . Tôi có một ví dụ nhỏ để minh họa như sau:
Ví dụ: Xem demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 List</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2>Định nghĩa class list-unstyled</h2>
<ul class="list-unstyled">
<li>Trang Chủ</li>
<li>Giới Thiệu</li>
<li>Khuyến Mãi</li>
<li>Sản Phẩm
<ul>
<li>Máy Tính</li>
<li>Điện Thoại</li>
</ul>
</li>
<li>Liên Hệ</li>
</ul>
</div>
</div>
</div>
</body>
</html>Tiếp theo chúng ta sẽ làm quen với class tạo ra menu dạng nằm ngang.
Bài viết này được đăng tại [kiso.vn]
2. Class list-inline tạo menu ngang
Nếu bạn dùng css bình thường để tạo ra một menu dạng nằm ngang thì sẽ xử lý rất là phức tạp, nào là float:left, padding, display…vvv. Nhưng khi làm việc với bootstrap 3 thì việc tạo ra một menu nằm ngang sẽ trở nên rất là đơn giản 
Ví dụ: Xem demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 List</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2>Định nghĩa class list-inline</h2>
<ul class="list-inline">
<li>Trang Chủ</li>
<li>Giới Thiệu</li>
<li>Khuyến Mãi</li>
<li>Sản Phẩm</li>
<li>Liên Hệ</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hình ảnh class list-inline
Phần căn bản trong list group đến đây là hết, tiếp theo chúng ta sẽ đi sâu nhé.
3. Class list-group & list-group-item tạo danh sách nằm dọc
Hai class này có nhiệm vụ tạo ra một danh sách dạng nằm dọc và từng dòng được bao bọc trong một đường viền rất là bắt mắt nhé. Sử dụng bằng cách tag <ul> sẽ nhận khai báo của class list-group, còn lại các tag <li> sẽ nhận khai báo của class list-group-item.
Ví dụ: Xem demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 List</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2>Định nghĩa class list-group & list-group-item</h2>
<ul class="list-group">
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hình ảnh list-group & list-group-item
Giải thích sơ về hai class này, thì các bạn có thể hiểu đơn giản là list-group là cha,còn list-group-item là con. Muốn thằng con hoạt động thì thằng cha phải được khai báo trong tag <ul>
4. Kết hợp list-group với các thuộc tính khác
Chúng ta hoàn toàn có thể kết hợp nó với bất kì thuộc tính bên trong bootstrap 3 cung cấp sẵn, để dễ hình dung thì tôi sẽ kết hợp nó với class label
Ví dụ: Xem demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 List</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2>Định nghĩa class list-group & list-group-item & class label</h2>
<ul class="list-group">
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn
<span class="label label-danger">Mới</span>
</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn
<span class="label label-default">Mới</span>
</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn
<span class="label label-info">Mới</span>
</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn
<span class="label label-warning">Mới</span>
</li>
<li class="list-group-item">Học bootstrap 3 free cùng với kiso.vn
<span class="label label-success">Mới</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hình ảnh class list-group & class label
Như vậy là chúng ta vừa thực hiện xong việc kết hợp thuộc tính bên trong class label vào list-group để tạo ra một danh sách có gắn nhãn hiệu bắt mắt.
5. Tạo link với list-group-item cùng với tag <a>
Ở phần này sẽ tạo ra một list danh sách với cơ chế là link có thể click để chuyển đến trang mà chúng ta đã khai báo.
Ví dụ: Xem demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 List</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
.example{
margin: 20px;
}
</style>
</head>
<body>
<div class="example">
<div class="container">
<div class="row">
<h2>Định nghĩa class list-group link itme</h2>
<a class="list-group-item" href="#">Học PHP tại kiso.vn</a>
<a class="list-group-item" href="#">Học CSS tại kiso.vn</a>
<a class="list-group-item active" href="#">Học Bootstrap 3 tại kiso.vn</a>
<a class="list-group-item" href="#">Học AngularJS tại kiso.vn</a>
<a class="list-group-item" href="#">Học Jquery tại kiso.vn</a>
</div>
</div>
</div>
</body>
</html>
Hình ảnh link
Chỗ hiện màu xanh báo là link đã được click là do tôi có khai báo thêm class active. Các bạn có thấy đơn giản không ? vừa tạo ra một danh sách nằm dọc vừa có thể click vào nửa 
Kết Bài:
Kết thúc bài này tôi chỉ muốn các bạn xem và code lại kỹ phần list-group vì đây sẽ là phần quan trọng có thể các bạn sẽ làm việc với nó nhiều lần, nếu như các bạn lựa chọn bootstrap 3 để stylesheet giao diện website. Hẹn gặp lại các bạn ở bài tiếp theo.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Class list-unstyled định nghĩa tag <ul> & <ol>2....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Class list-unstyled định nghĩa tag <ul> & <ol>2. Class list-inline tạo menu ngang3. Class list-group & list-group-item tạo danh sách nằm dọc4. Kết hợp list-group với các thuộc tính khác5. Tạo link...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Class list-unstyled định nghĩa tag <ul> & <ol>2. Class list-inline tạo menu ngang3. Class list-group & list-group-item tạo danh sách nằm dọc4. Kết hợp list-group với các thuộc tính khác5. Tạo link...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Class list-unstyled định nghĩa tag <ul> & <ol>2. Class list-inline tạo menu ngang3. Class list-group & list-group-item tạo danh sách nằm dọc4. Kết hợp list-group với các thuộc tính khác5. Tạo link...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Class list-unstyled định nghĩa tag <ul> & <ol>2. Class list-inline tạo menu ngang3. Class list-group & list-group-item tạo danh sách nằm dọc4. Kết hợp list-group với các thuộc tính khác5. Tạo link...