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

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 qua bài Tạo button trong bootstrap 3 vì đây là bài nâng cao để làm việc với button trong bootstrap 3. Nghe từ group thì các bạn đã phần nào hình dung ra được Button Group bootstrap 3 sẽ mang đến cho chúng ta điều gì?

1. Định nghĩa class btn-group bootstrap 3

Chúng ta sẽ có một cái bảng sơ lược các thuộc tính mà btn-group hỗ trợ 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.
Class Mô tả
.btn-group Dùng để khai báo mặc định button group
.btn-toolbar Tạo ra button dạng danh sách nằm ngang và dính liền
.btn-group-lg
.btn-group-sm
.btn-group-xs
Tạo ra button group có các kích cỡ lớn nhỏ & vừa
.btn-group-vertical Tạo ra button group ở dạng nằm dọc

Tiếp theo chúng ta sẽ tìm hiểu từng class xem nó stylesheet ra sao.

2. Định nghĩa class btn-group bootstrap 3

Class này được khai báo với mục đích giúp cho gom các button lại thành một cục. Các bạn có thể xem ví dụ minh họa để hình dung ra thêm nó là gì nhé.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Button Group</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 btn-group</h2>
               <div class="btn-group">
                    <button type="button" class="btn btn-default">Button 1</button>
                    <button type="button" class="btn btn-default">Button 2</button>
                    <button type="button" class="btn btn-default">Button 3</button>
               </div>
            </div>
        </div>
</div>
    </body>
    </html>


btn group png
Hình ảnh class btn-group

Khai báo class này trong tag <div></div> với ví dụ đầu tiên thì tôi nghĩ các bạn đã cảm thấy bắt đầu hứng thú với button group rồi hen, chưa dừng lại ở đây đâu, các bạn sẽ còn nhiều bất ngờ ở các ví dụ tiếp theo nửa.

3. Định nghĩa class btn-toolbar bootstrap 3

Class này có thuộc tính giống với class btn-group vì thế tôi sẽ không giải thích sâu về nó. Cách khai báo đê dùng thì nó là div cha và btn-group là div con bao bọc bên trong là các button.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Button Group</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 btn-toolbar & btn-group</h2>
               <div class="btn-toolbar">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">Button 1</button>
                        <button type="button" class="btn btn-default">Button 2</button>
                        <button type="button" class="btn btn-default">Button 3</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary">Button 4</button>
                        <button type="button" class="btn btn-primary">Button 5</button>
                        <button type="button" class="btn btn-primary">Button 6</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-info">Button 7</button>
                        <button type="button" class="btn btn-info">Button 8</button>
                        <button type="button" class="btn btn-info">Button 9</button>
                    </div>
               </div>
            </div>
        </div>
</div>
    </body>
    </html>


btn toolbar png
Hình ảnh class btn-toolbar

Tiếp theo chúng ta sẽ tìm hiểu phần resize button group.

4. Resize button group bootstrap 3

Phần này khá giống với bài trước nên tôi sẽ không giải thích quá nhiều .Các bạn xem ví dụ thì sẽ hình dung ra điều mà tôi muốn truyền đạt, cách khai báo thì vẫn là lồng class vào class btn-group nhé,

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Button Group</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 btn-group-lg - btn-group-sm - btn-group-xs</h2>
                    <div class="btn-group btn-group-lg">
                        <button type="button" class="btn btn-default">Button 1</button>
                        <button type="button" class="btn btn-default">Button 2</button>
                        <button type="button" class="btn btn-default">Button 3</button>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-primary">Button 4</button>
                        <button type="button" class="btn btn-primary">Button 5</button>
                        <button type="button" class="btn btn-primary">Button 6</button>
                    </div>
                    <div class="btn-group btn-group-xs">
                        <button type="button" class="btn btn-info">Button 7</button>
                        <button type="button" class="btn btn-info">Button 8</button>
                        <button type="button" class="btn btn-info">Button 9</button>
                    </div>
            </div>
        </div>
</div>
    </body>
    </html>


resize button png
Hình ảnh class resize button group

Như vậy chúng ta đã đi gần hết bài viết này rồi, phần cuối cùng sẽ tìm hiểu cách khai báo để tạo ra dạng button nằm dọc.

5.Tạo button dọc với class btn-group-vertical bootstrap 3

Class này có nhiệm vụ tạo ra hàng loạt button nằm dọc đứng trên cùng một hàng. Khác với class btn-group thì ở vi dụ này chúng ta có thể khai báo class btn-group-vertical làm class cha mà không cần phải lồng class giống như các ví dụ ở trên.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Button Group</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 btn-group-vertical</h2>
                    <div class="btn-group-vertical">
                        <button type="button" class="btn btn-default">Button 1</button>
                        <button type="button" class="btn btn-default">Button 2</button>
                        <button type="button" class="btn btn-default">Button 3</button>
                    </div>
            </div>
        </div>
</div>
    </body>
    </html>


button vertical png
Hình ảnh class btn-group-vertical

Kết Bài:

Ở bài tiếp theo chúng ta sẽ tiếp tục tìm hiểu thêm một thuộc tính mà button group trong bootstrap 3 hỗ trợ. Hy vọng thông qua bài viết này thì các bạn đã có thể tạo ra cho mình các button tùy ý theo ý đồ của các bạn. Chúc các bạn học tốt ^^.

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 11: List group trong bootstrap 3

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…

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