TWITTER BOOTSTRAP 3
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 11: List group trong bootstrap 3

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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>


list unstyled png
Hình ảnh class list-unstyled

Tiếp theo chúng ta sẽ làm quen với class tạo ra menu dạng nằm ngang.

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 wink

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>


list inline png
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 freetuts.net</li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net</li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net</li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net</li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net</li>
                </ul>
            </div>
        </div>
</div>
    </body>
    </html>


list group png
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 freetuts.net
                        <span class="label label-danger">Mới</span>
                    </li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net
                        <span class="label label-default">Mới</span>
                    </li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net
                        <span class="label label-info">Mới</span>
                    </li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net
                        <span class="label label-warning">Mới</span>
                    </li>
                    <li class="list-group-item">Học bootstrap 3 free cùng với freetuts.net
                        <span class="label label-success">Mới</span>
                    </li>
                </ul>
            </div>
        </div>
</div>
    </body>
    </html>


label png
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 freetuts.net</a>
                <a class="list-group-item" href="#">Học CSS tại freetuts.net</a>
                <a class="list-group-item active" href="#">Học Bootstrap 3 tại freetuts.net</a>
                <a class="list-group-item" href="#">Học AngularJS tại freetuts.net</a>
                <a class="list-group-item" href="#">Học Jquery tại freetuts.net</a>
            </div>
        </div>
</div>
    </body>
    </html>


link list group item png
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 yes

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.

Cùng chuyên mục:

Bootstrap4 là gì?

Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap4 thì các bạn đã…

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp…

Bài 19: Helper classes trong bootstrap 3

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ…

Bài 18: Tạo Tabs trong bootstrap 3

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navs vì…

Bài 17: Dropdown menu trong bootstrap 3

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 13: Glyphicons trong bootstrap 3

Bài 13: Glyphicons trong bootstrap 3

Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 9: Xây dựng form với bootstrap 3

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 6: Pagination trong bootstrap 3

Bài 6: Pagination trong bootstrap 3

Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web,…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 4: Tạo table trong bootstrap 3

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần…

Bài 3: Grid System trong bootstrap 3

Bài 3: Grid System trong bootstrap 3

Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system…

Top