Kết nối

[Bootstrap 4] Phần 7: Hình ảnh

91 lượt xem 
 Cập nhật lần cuối: 05/10/2018 lúc 18:05:41
Thể loại: Bootstrap 

Trong Bootstrap 4, bạn có thể hiển thị hình ảnh với 4 góc bo tròn, hình tròn hay hình có khung ảnh đẹp mắt bao quanh.

Bài viết sử dụng hình ảnh mẫu với URL là: http://www.dammio.com/wp-content/uploads/2018/10/girl.jpg

Hình có góc bo tròn

Để hiển thị hình có góc bo tròn, bạn có thể thêm lớp .rounded vào một thẻ hình ảnh.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ hình ảnh trong Bootstrap 4 --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h3>Hình ảnh có 4 góc bo tròn với lớp .rounded --- dammio.com</h3>
<div class="row"> 
	<div class="col-lg-4 col-md-4">
		<img src="girl.jpg" class="rounded" alt="A girl" width="300">
	</div>
</div>
</div>
</body>
</html>

Hình ảnh tròn

Bạn chỉ cần lớp .rounded-circle là có thể biến hình ảnh cần hiển thị thành hình tròn.

<img src="girl.jpg" class="rounded-circle" alt="A girl" width="300">

Hình thu nhỏ

Nếu bạn muốn tạo hình thu nhỏ có khung viền xung quanh thì bạn có thể sử dụng lớp .img-thumbnail như ví dụ sau.

<img src="girl.jpg" class="img-thumbnail" alt="A girl" width="300">

Canh chỉnh hình ảnh

Hai lớp .float-right và .float-left dùng để canh chỉnh hình ảnh xuất hiện ở bên trái hoặc bên phải nội dung như sau.

...
<div class="container">
<h3>Căn chỉnh hình ảnh trong Bootstrap 4 --- dammio.com</h3>
<div class="row"> 

	<div class="col-md-12 col-lg-12">
		<img src="girl.jpg" class="float-left" width="300"> 
		<img src="girl.jpg" class="float-right" width="300">
	</div>

</div>
</div>
...

Căn giữa hình ảnh

Để căn giữa hình ảnh, bạn có thể dùng lớp .mx-auto (margin:auto) và .d-block (display:block) vào hình ảnh cần căn giữa.

...
<div class="container">
<h3>Căn giữa hình ảnh trong Bootstrap 4 --- dammio.com</h3>
<div class="row"> 

	<div class="col-md-12 col-lg-12">
		<img src="girl.jpg" class="mx-auto d-block" width="300">
	</div>

</div>
</div>
...

Hình ảnh đáp ứng

Tính năng hiển thị hình ảnh đáp ứng theo kích thước màn hình của các thiết bị khác nhau là một tính năng tuyệt vời của Bootstrap. Để thực hiện hiển thị hình ảnh đáp ứng, đơn giản là bạn chỉ cần thêm lớp .img-fluid vào hình cần thêm. Khi đó lớp này sẽ áp dụng phong cách max-width: 100%;height: auto; vào hình ảnh.

<div class="container">
<h3>Hình ảnh đáp ứng trong Bootstrap 4 --- dammio.com</h3>
<div class="row"> 

	<div class="col-md-4 col-lg-4">
		<img class="img-fluid" src="girl.jpg">
	</div>

</div>
</div>

Kết luận

Như vậy, bài viết đã chỉ cho bạn cách dùng một số lớp để hiển thị hình ảnh trong Bootstrap 4. Mời bạn tiếp tục theo dõi bài tiếp theo.

Bình luận Facebook

1
Để lại bình luận

avatar
1000
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] << Bài trước Trang mục lục Bài tiếp theo >> […]