Khi bạn tiến hành làm giao diện website thì Labels và Panel là 2 class vô cùng quan trọng khi làm việc với giao diện website, mỗi class sẽ có chức năng và nhiệm vụ khác nhau.
Khái niệm Labels & Panel
Labels – Nhãn dán là mô pả 1 phần text nổi bật nào đó như: Blog Getbootstrap chia sẻ kiến thức bootstrap bổ ích (Labels). Vòn với panel thì nó là khung điều khiển trong xây dựng giao diện website.
Class Label trong Bootstrap 3
Nếu như các bạn sử dụng các tag h1, h2, h3… được bao bọc cá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.
VD: Blog Getbootstrap chúng 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 thì bạn cũng cần phải thêm vào sau class label là class label-default nhé, bởi khi bạn gắn thêm class này vào thì nó mới hỗ trợ hiển thị stylesheet cho class label.
Code html ví dụ:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap 3 Labels – Blog Getbootstrap</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>Blog Getbootstrap – chia sẻ kiến thức Bootstrap hoàn toàn miễn phí <span class=”label label-default”>Mới</span></h1>
<h2>Blog Getbootstrap – chia sẻ kiến thức Bootstrap hoàn toàn miễn phí <span class=”label label-default”>Mới</span></h2>
<h3>Blog Getbootstrap – chia sẻ kiến thức Bootstrap hoàn toàn miễn phí <span class=”label label-default”>Mới</span></h3>
<h4>Blog Getbootstrap – chia sẻ kiến thức Bootstrap hoàn toàn miễn phí <span class=”label label-default”>Mới</span></h4>
<h5>Blog Getbootstrap – chia sẻ kiến thức Bootstrap hoàn toàn miễn phí <span class=”label label-default”>Mới</span></h5>
<h6>Blog Getbootstrap – chia sẻ kiến thức Bootstrap hoàn toàn miễn phí <span class=”label label-default”>Mới</span></h6>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh:
Hoặc bạn cũng có thể dễ dàng thay đổi màu sắc các label theo ý mình thích 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 đỏ)
Code html ví dụ:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap 3 Labels – Blog Getbootstrap</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>
Kết quả hình ảnh:
Class panel trong bootstrap 3
Panel sẽ giúp cho bạn dễ dàng tạo ra các khối block và được gọi dễ hiểu là các sidebar hay đoạn text được bao bộc trong 1 khung có đường viền. Với class panel thì bạn chú ý đến 3 class sau đây:
- Panel-Default: bắt buộc phải khai báo chung với class panel
- Panel-Heading: sẽ hiển thị ở phần bao bọc đoạn tiêu đề
- Panel-Body: sẽ hiển thị ở nội dung bên trong khung
Code html ví dụ class panel
<!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 Blog Getbootstrap</div>
<div class=”panel-body”>Đây là nội dung khóa học…..</div>
</div>
</div>
</div>
</div></body>
</html>
Với panel-heading thì bạn có thể sử dụng các thẻ tag từ h1 đến h6 cho nó bình thường. Nhưng để có thể sử dụng các tag đó thì bạn cần phải gán thêm vào đó class panel-title.
Hi vọng với những chia sẻ ở trên về lables & panel trong bootstrap 3 sẽ giúp bạn hiểu hơn về các class trong xây dựng giao diện website với bootstrap nhé. Chúc các bạn thành công.
