[Bootstrap] Phần 6: Hình ảnh

Trong bài này, chúng ta tiếp tục học các lớp trong Bootstrap để tạo phong cách cho hình ảnh.

Lớp .img-rounded: lớp này dùng để bo góc tròn cho hình ảnh (lưu ý trình duyệt IE8 không hỗ trợ)

<img src="girl.jpg" class="img-rounded" alt="Hot girl" width="304" height="236">

Lớp .img-circle: lớp này dùng để biến ảnh thành 1 hình tròn (lưu ý trình duyệt IE8 không hỗ trợ )

<img src="girl.jpg" class="img-circle" alt="Hot girl" width="304" height="236">

Lớp .img-thumbnail: lớp này dùng để tạo hình ảnh thumbnail với viền ở ngoài

<img src="girl.jpg" class="img-thumbnail" alt="Hot girl" width="304" height="236">

Hình ảnh đáp ứng

Trong Bootstrap, để làm cho các hình ảnh sẽ được đáp ứng kích thước phù hợp với kích thước màn hình, chúng ta có thể thêm lớp .img-responsive. Lớp này chưa các phong cách như display: block; và max-width: 100%; và height: auto; đối với hình ảnh được áp dụng.

<img src="girl.jpg" class="img-responsive" alt="Hot girl">

Như đoạn mã trên, khi áp dụng cho hình ảnh bằng lớp .img-responsive, chúng ta không cần phải định nghĩa chiều rộng và chiều cao của hình.

Gallery hình ảnh
Chúng ta có thể dùng lớp thumbnail để tạo 1 gallery hình ảnh như ví dụ.

<div class="container">
<div class="row">
  <div class="col-md-4">
    <a href="girl.jpg" class="thumbnail">
      <p style="text-align:center">Hình cô gái</p> 
      <img src="girl.jpg" alt="firl" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="flower.jpg" class="thumbnail">
      <p style="text-align:center">Hình bông hoa</p>
      <img src="flower.jpg" alt="flower" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="tree.jpg" class="thumbnail">
      <p style="text-align:center">Hình cái cây</p> 
      <img src="tree.jpg" alt="tree" style="width:150px;height:150px">
    </a>
  </div>
</div>
</div>

Canh chỉnh vị trí hình
Chúng ta cũng có thể sử dụng các lớp .pull-left, pull-right, .center-block để canh chỉnh ví trí hình trái, phải, ở giữa.

<img src="girl.jpg" class="img-rounded pull-left alt="girl" width="300">

<img src="girl.jpg" class="img-rounded pull-right" alt="girl" width="300">

<img src="girl.jpg" class="img-rounded center-block" alt="girl" width="300">

Tóm lại, bài viết đã giúp các bạn tìm hiểu các lớp về bo tróc hình, tạo đường viền, tạo ảnh thu nhỏ, tạo gallery hình ảnh và canh chỉnh vị trí hình ảnh.