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

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à bootstrap hỗ trợ. Đó là Labels & panel, 2 class này có hai nhiệm vụ khác nhau nhưng cũng rất quan trọng khi các bạn làm việc với phần giao diện website, để hiểu rõ nó hơn thì chúng ta sẽ tìm hiểu từng class nhé.

1. Labels & panel là gì

Labels là tên thường gọi tiếng anh của (Nhãn dán) nó được dùng để định nghĩa  mô tả một phần text nổi bật nào đó  như là Hôm nay trời không có mưa (Labels). Còn panel được dịch nôm na là khung điều khiển, còn dùng nó ra sao thì các bạn xem từng ví dụ phía dưới nhé.

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.

2. Class label trong bootstrap 3

Một cái hay trong bootstrap 3 là, nếu các bạn dùng các tag h1,h2,h3..vvv bao bọc đoạn text thì phần hiển thị stylesheet của class label nó sẽ nhỏ dần theo kích thước của từng tag h1 nhé. Trong ví dụ tôi sử dụng 6 tag h1,h2,h3,h4,h5,h6 để hiển thị từng labels theo đúng kích thước text của tag. Ngoài ra các bạn còn phải thêm vào sau class label là class label-default nhé, gán thêm class này vào thì nó mới hỗ trợ hiển thị stylesheet cho class label.

Ví du: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Labels</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">
                <h1>Freetuts là website học lập trình miễn phí hàng đầu việt nam <span class="label label-default">Mới</span></h1>
                <h2>Freetuts là website học lập trình miễn phí hàng đầu việt nam <span class="label label-default">Mới</span></h2>
                <h3>Freetuts là website học lập trình miễn phí hàng đầu việt nam <span class="label label-default">Mới</span></h3>
                <h4>Freetuts là website học lập trình miễn phí hàng đầu việt nam <span class="label label-default">Mới</span></h4>
                <h5>Freetuts là website học lập trình miễn phí hàng đầu việt nam <span class="label label-default">Mới</span></h5>
                <h6>Freetuts là website học lập trình miễn phí hàng đầu việt nam <span class="label label-default">Mới</span></h6>
            </div>
        </div>
    </div>
    
</body>
</html>

label bootstrap png
Hình ảnh label basic

Ngoài ra các bạn còn có thể dễ dàng thay đổi màu sắc các label theo ý mình bằng cách sử dụng các class như sau:

  • label-primary ( Hiển thị màu xanh dương đậm)
  • label-success (Hiển thị màu xanh lá)
  • label-warning (Hiển thị màu cam)
  • label-info (Hiển thị màu xanh dương nhạt)
  • label-danger (Hiển thị màu đỏ)

Ví du: Xem Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Labels</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">
               <p>Đây là <span class="label label-default">Default</span> label.</p>
               <p>Đây là <span class="label label-primary">Primary</span> label.</p>
               <p>Đây là <span class="label label-success">Success</span> label.</p>
               <p>Đây là <span class="label label-info">Info</span> label.</p>
               <p>Đây là <span class="label label-warning">Warning</span> label.</p>
               <p>Đây là <span class="label label-danger">Danger</span> label.</p>
           </div>
       </div>
   </div>

</body>
</html>

label option png
Hình ảnh label stylesheet option

3. Class panel trong bootstrap 3

Phần panel sẽ giúp các bạn dễ dàng tạo ra các khối block có thể gọi nôm na là sidebar hoặc là đoạn text được bao bọc trong một cái khung có đường viền. Ở class panel các bạn chỉ cần chú ý 3 class sau đây.

  • panel-default (Class này bắt buộc phải khai báo chung với class panel nhé)
  • panel-heading (Hiển thị phần bao bọc đoạn tiêu đề)
  • panel-body (Phần nội dung bên trong khung)

Chúng ta sẽ đi đến ví dụ đầu tiên sử dụng class panel.

Ví du: Xem Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Panels</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">
              <div class="panel panel-default">
              <div class="panel-heading">Học bootstrap 3 miễn phí tại freetuts</div>
                <div class="panel-body">Đây là nội dung khóa học.....</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

panel png
Hình ảnh panel basic

Phần panel-heading , các bạn có thể sử dụng tag h1 -> h6 cho nó bình thường nhé. Nhưng để sử dụng các tag thì cần phải gán thêm vào đó class panel-title. Câu hỏi đặt ra ở đây là chúng ta có thể thay đổi màu sắc cho phần heading được không ? Để làm được điều đó thì các bạn cần phải ghi nhớ các class sau đây. Trong ví dụ này tôi sử dụng 6 class con của class panel và bọc phần tiêu đề trong tag h3.

  • panel-primary ( Hiển thị màu xanh dương đậm)
  • panel-success (Hiển thị màu xanh lá)
  • panel-warning (Hiển thị màu cam)
  • panel-info (Hiển thị màu xanh dương nhạt)
  • panel-danger (Hiển thị màu đỏ)

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Panels</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">
              <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Học bootstrap 3 miễn phí tại freetuts</h3>
                </div>
                <div class="panel-body">Nội dung khóa học ^^</div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">Học bootstrap 3 miễn phí tại freetuts</h3>
                </div>
                <div class="panel-body">Nội dung khóa học ^^</div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Học bootstrap 3 miễn phí tại freetuts</h3>
                </div>
                <div class="panel-body">Nội dung khóa học ^^</div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">Học bootstrap 3 miễn phí tại freetuts</h3>
                </div>
                <div class="panel-body">Nội dung khóa học ^^</div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">Học bootstrap 3 miễn phí tại freetuts</h3>
                </div>
                <div class="panel-body">Nội dung khóa học ^^</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

panel option png
Hình ảnh panel option

Lời Kết:

Các ví dụ chỉ dừng lại ở mức căn bản nhất, nếu các bạn cảm thấy chưa hài lòng thì có thể lên trang chủ của bootstrap tìm hiểu thêm. Chào tạm biệt và hẹn gặp lại các bạn ở các 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 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 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