Jumbotron là một phần không thể thiếu ở giao diện trong bootstrap, tác dụng chính của Jumbotron làm tạo ra một vùng hiển thị nội dung quan trọng nhất của website. Mời các bạn cùng với Blog Getbootstrap đi tìm hiểu về Jumbotron nhé.
Tổng quan về Jumbotron
Jumbotron chính là 1 class, lớp dùng để tạo ra một background màu xám, nó được bọc các nội dung ở bên trong và thường được dùng để mô tả những thông tin quan trọng như khuyến mãi, giới thiệu hay đưa ra thông báo quan trọng của cửa hàng hay doanh nghiệp trên chính website đó.
Code html ví dụ:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Bootstrap 3 Jumbotron</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>
<style type=”text/css”>
.jumbotron{
margin-top: 15px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”row”>
<h2 class=”text-center”>Jumbotron</h2>
<div class=”col-md-12″>
<div class=”jumbotron”>
<h1>Khóa học bootstrap 3</h1>
<p>Bootstrap là một thư viện CSS và JS được sử dụng rộng rãi nhất hiện nay vì tính nhanh, đẹp và chính xác của nó. Khi làm việc với bootstrap thì ban phải có nền tảng CSS và javascript thì mới mới có thể làm tốt được.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Bạn có thể sử dụng jumbotron bằng cách khai báo thẻ div và gắn class vào cho nó như ví dụ trên, nội dung ở bên trong thẻ div bạn có thể sử dụng bất cứ components nào ở trong bootstrap cũng được, như button trong bootstrap, form hay dropdown menu …
Well trong bootstrap 3
Loại class này cũng dùng để tạo ra màu nền và bọc lấy các nội dung ở bên trong nó.
Code html ví dụ:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Bootstrap 3 Well</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>
<style type=”text/css”>
.well{
margin-top: 15px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”row”>
<h2 class=”text-center”>Well</h2>
<div class=”col-md-12″>
<div class=”well”>
Nội dung bên trong class well
</div>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh:
Nếu như bạn sử dụng class này thì bạn chỉ cần khai báo trong thẻ và bọc lấy nội dung bạn cần làm nổi bật là xong.
Progress Bar
Progress Bar có tác dụng tạo ra các thanh tiến trình thông báo cho người dùng đang thực hiện ở giai đoạn này, những tiến trình này có thể được sử dụng cho việc nạp, chuyển hướng hay hiển thị tình trạng hoạt động cho người sử dụng.
Với 1 thanh tiến trình sẽ có mức % tối đa sẽ là 100%, và ở ví dụ dưới đây, Blog Getbootstrap sẽ để khoảng 60% để các bạn dễ hiểu.
Code html ví dụ:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>Bootstrap 3 Progress bar</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>
<style type=”text/css”>
.well{
margin-top: 15px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”row”>
<h2 class=”text-center”>Progres Bar</h2>
<div class=”col-md-12″>
<div class=”progress”>
<div class=”progress-bar” style=”width: 60%;”>
<span class=”sr-only”>60% Complete</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh:
Bạn chỉ cần tạo ra 1 thẻ div và gán vào nó 1 class progress(class cha), và thẻ div đó sẽ thêm trực tiếp css vào thẻ div con có giá trị là progress-bar muốn chiều rộng như thế nào thì bạn thiết lập x% như dưới đây:
<div class=”progress-bar” style=”width: 60%;”></div>
Ở phần định dạng màu sắc hay kiểu cách cho thanh tiến trình thì mặc định ở bootstrap 3 sẽ là màu xanh dương đậm, ngoài ra nó cũng hỗ trợ thêm nhiều màu khác cho bạn sử dụng.
Với class sr-only sẽ có tác dụng ẩn đi đoạn nội dung nằm ở bên trong nó
Một vài class màu trong bootstrap 3 như sau:
- progress-striped ( Thanh tiến trình có lằn sọc ngang xung quanh)
- progress-bar-success (Màu xanh lá cây)
- progress-bar-info ( Màu xanh dương nhạt)
- progress-bar-warning (Màu cam)
- progress-bar-danger (Màu đỏ)
Hi vọng với những chia sẻ trên về jumbotron hay class progress-bar trong bootstrap sẽ giúp bạn có thêm kiến thức bổ ích về bootstrap nhé. Chúc các bạn thành công.
