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

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ỗ trợ của bootstrap 3, đây là các class sẽ giúp các bạn trong việc tạo ra các thành phần con để hỗ trợ các components, bài viết này sẽ có liên quan một tí tới bài Định dạng Typography bootstrap 3,

1. Helper classes background color trong bootstrap 3

Tương tư như như các class màu sắc văn bản thì bootstrap 3 cũng hỗ trợ chúng ta các class tạo ra màu nền như sau:

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

<p class="bg-primary">Important: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
<p class="bg-success">Success: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
<p class="bg-info">Note: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
<p class="bg-warning">Warning: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
<p class="bg-danger">Error: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>

Cũng giống như cách định dạng phần văn bản thì nội dung cũng được bọc trong cặp thẻ <p class="bg-info">Nội dung</p>

Full code: XEM DEMO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Helper Classes</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;
            }
            
            .example p{
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="example">
            <div class="container">
                <div class="row">
                    <h2 class="text-center">Helper Classes - Author Hoài Minh</h2>
                    <p class="bg-primary">Important: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
                    <p class="bg-success">Success: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
                    <p class="bg-info">Note: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
                    <p class="bg-warning">Warning: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
                    <p class="bg-danger">Error: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn.</p>
                </div>
            </div>
        </div>
    </body>
</html>

helper background color png
Hình ảnh helper background color

2. Class center-block trong bootstrap 3

Sử dụng class này để sắp xếp các khối nội dung nằm ngang ở giữa, tuy nhiên để hiệu quả hơn thì các bạn cần phải thiết lập phần width riêng cho nó, để nó hiển thị tốt và đúng với ý đồ của chúng ta. Ở ví dụ này thì phần selector body chúng ta style thêm cho nó background, và border và thêm padding để minh họa dễ nhìn hơn.

<div class="center-block text-center">
Nội dung block nằm ngang ở giữa
</div>

Full Code: XEM DEMO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Helper Classes</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;
		padding: 10px;
		background: #fffacd;
		border: 1px solid #000;
            }

            .center-block{
                width: 50%;
                padding: 20px;
                background-color: #ccc;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="example">
            <h2 class="text-center">Helper Classes - Author Hoài Minh</h2>
            <div class="center-block text-center">
                Nội dung block nằm ngang ở giữa
            </div>
        </div>
    </body>
</html>

center block bootstrap png
Hình ảnh center-block

3. Quick floats trong bootstrap 3

Trong css thông thường thì để canh trái , canh phải một đoạn nội dung hay background thì chúng ta đã quá quen thuộc với 2 thuộc tính là float:left, float:right. Nhưng với bootstrap thì chúng ta chỉ cần tạo ra thẻ div và gán class hỗ trợ vào:

  • pull-left (Canh trái)
  • pull-right (Canh phải)

<div class="pull-left text-info">Nội dung nằm bên trái</div>
<div class="pull-right text-warning">Nội dung nằm bên phải</div>

Full Code: XEM DEMO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Helper Classes</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 class="text-center">Helper Classes - Author Hoài Minh</h2>
                    <div class="pull-left text-info">Nội dung nằm bên trái</div>
                    <div class="pull-right text-warning">Nội dung nằm bên phải</div>
                </div>
            </div>
        </div>
    </body>
</html>

pull left pull right png
Hình ảnh canh trái, phải bootstrap 3

Tuy nhiên chúng ta còn một vấn đề mắc phải giống như css thông thường như sau, nếu như cho 2 phần nội dung màu nền và bọc nó bằng một đường viền bên ngoài, set padding để có khoảng cách nhìn cho đẹp hơn thì phần border sẽ bị dính lỗi float mà chúng ta thường gặp ở css thông thường, và cách khắc phục là thêm vào thuộc tính clear:left hoặc clear:both đúng không ? 

Với bootstrap 3 thì chỉ cần ngay phần div định nghĩa thuộc tính border thì chúng ta bổ sung vào đó clas clearfix,  class này hỗ trợ chúng ta fix lỗi float.

non clearfix png
Hình ảnh chưa thêm class clearfix

Full Code: XEM DEMO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Helper Classes</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;
                padding: 10px;
                background: #fffacd;
                border: 1px solid #000;
            }
            .pull-left, .pull-right{
                padding: 20px;
                background: #e3b740;
            }
        </style>
    </head> 
    <body>
        <div class="example">
            <div class="pull-left">Bên trái</div>
            <div class="pull-right">Bên Phải</div>
        </div>
    </body>
</html>                                		

clearfix png
Hình ảnh sau khi thêm class clearfix

Như vậy, xem code thì các bạn sẽ hiểu được vì do tôi định nghĩa thuộc tính border ở class example nên ngay tại đó tôi thêm vào class clearfix xem như mọi chuyện được giải quyết.

4. Class badge (Huy hiệu) trong bootstrap 3

Class này có thể tạo ra các huy hiệu, dùng để mô tả trong chuyên mục đó có bao nhiêu bài, thành viên online bao nhiêu người vvv... Tôi sẽ mượn lại code của phần background color ở mục 1 trong bài viết.

Sử dụng class này cúng giống như cách khai báo icons, tức là gán class badge vào cặp thẻ span và nhúng nó vào vị trí mà bạn cần nhúng.

<p class="bg-primary">Important: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">24</span></p>
<p class="bg-success">Success: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">15</span></p>
<p class="bg-info">Note: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">20</span></p>
<p class="bg-warning">Warning: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">10</span></p>
<p class="bg-danger">Error: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">9</span></p>

Full Code: XEM DEMO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 Helper Classes</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;
            }
            
            .example p{
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="example">
            <div class="container">
                <div class="row">
                    <h2 class="text-center">Helper Classes - Author Hoài Minh</h2>
                    <p class="bg-primary">Important: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">24</span></p>
                    <p class="bg-success">Success: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">15</span></p>
                    <p class="bg-info">Note: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">20</span></p>
                    <p class="bg-warning">Warning: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">10</span></p>
                    <p class="bg-danger">Error: Freetuts.net nơi thể hiện kỹ năng lập trình của bạn. <span class="badge">9</span></p>
                </div>
            </div>
        </div>
    </body>
</html>

badge bootstrap png
Hình ảnh class badge

Kết Bài:

Kết thúc bài này xem như chúng ta đã cùng tìm hiểu qua các  helper classes trong bootrap 3,   các bạn đừng xem thường nó ngắn mà không chú ý xem bài kỹ nha, vì nó cũng được sử dụng rất nhiều trong khi làm việc với bootstrap 3. hẹn gặp các bạn ở bài lý thuyết cuối cùng trong serie này của tôi.

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 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 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