Sau khi mình đã hiểu rõ về form trong bootstrap thì bài này Blog Getbootstrap sẽ chia sẻ thêm về Breadcrumbs & Images trong bootstrap 3. Đây là nội dung tất yếu khi bạn muốn làm website với bootstrap 3. Mời các bạn cùng tham khảo.
Khái niệm Breadcrumbs
Breadcrumbs chính là tập hợp các đường link phân cấp giúp cho người sử dụng biết được mình đang ở page nào để từ đó mà thuận lợi di chuyển từ page này sang page khác trong cùng 1 website.
Cách tạo Breadcrumbs trong bootstrap 3
Để có thể tạo một breadcrumbs thì bạn cần phải bọc Html ở trong cặp thẻ ul & li, thêm vào thẻ ul class breadcrumb. Từ đó nó sẽ ra ngay một stylessheet phân cấp link rõ ràng:
Ví dụ Html demo:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap 3 Breadcrumbs</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”>
<ul class=”breadcrumb”>
<li><a href=”#”>Trang Chủ</a></li>
<li><a href=”#”>Bootstrap</a></li>
<li class=”active”>Breadcrumb & Images</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh:
Học stylesheet trong bootstrap 3
Stylesheet trong bootstrap 3 sẽ có 3 class cơ bản là:
- Class img-rounded: bo góc
- Class img-circle: tròn
- Class img-thumbnail: thu nhỏ
Ngoài ra stylesheet còn có 1 clas là img-responsive, tác dụng của nó đơn giản là hỗ trợ co giãn hình ảnh khi chúng ta xem ảnh trên nhiều thiết bị sử dụng khác nhau hay là khi bạn muốn co giãn trình duyêt.
Ví dụ Html demo:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap 3 Image Styling</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”>
img{
margin: 10px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class=”bs-example”>
<div class=”container”>
<div class=”row”>
<h2>Images Bootstrap</h2>
<img src=”images/1.png” class=”img-rounded” alt=”Hình bo góc”>
<img src=”images/1.png” class=”img-circle” alt=”Hình Tròn”>
<img src=”images/1.png” class=”img-thumbnail” alt=”Hình Thumbnail”>
</div>
</div>
</div>
</body>
</html>
Hướng dẫn tạo images thumbnail
Ỏ mục này Blog Getbootstrap sẽ sử dụng class col-xs để làm demo, nếu như bạn muốn sử dụng các class hỗ trợ ở trên để co giãn màn hình thì cũng được nha/
Ví dụ Html demo:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap 3 Thumbnails</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>Images Thumbnail</h2>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”images/1.png” alt=”125×125″>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”images/1.png” alt=”125×125″>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”images/1.png” alt=”125×125″>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”images/1.png” alt=”125×125″>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh images thumbnail
Hi vọng với những chia sẻ ở trên của Blog Getbootstrap về breadcrumb & images trong bootstrap 3 sẽ giúp bạn có thêm về kiến thức bootstrap nhé. Nếu như bạn là người mới mà đột nhiên đọc tới bài này thì có thể quay lại bài Bootstrap là gì? để có thể update được những kiến thức cơ bản nhé. Chúc các bạn thành công.
