[Bootstrap Căn Bản] Bài 6: Các Kiểu Căn Chỉnh Hình ảnh Trong Bootstrap

Toggle navigation

• Trang chủ
• Wordpress
  • Lập trình theme
  • Lập trình theme
  • Plugin
• HTML-CSS
  • HTML CSS căn bản
  • HTML CSS căn bản
  • Bootstrap
• SEO
• Tin bên lề
  • Thủ thuật
  • Thủ thuật
  • Câu chuyện của tôi

• Tìm kiếm

2 Tháng Tư, 2019 9246 Lượt xem [Bootstrap căn bản] Bài 6: Các kiểu căn chỉnh hình ảnh trong bootstrap

Trong bài viết này mình sẽ giới thiệu với các bạn những kiểu căn chỉnh hình ảnh trong bootstrap từ bo góc, bo tròn ảnh tới tạo kiểu tạo viền cho ảnh… Những kiến thức này rất quan trọng, bạn chỉ cần sử dụng chúng để căn chỉnh hình ảnh mà không cần phải viết thêm css cho cho ảnh trong giao diện của bạn.

Các kiểu hiển thị hình ảnh trong bootstrap

Bootstrap bo góc hình ảnh

Để bo góc hình ảnh chúng ta sử dụng lớp .img-rounded. Lớp này dùng để bo góc cho hình ảnh trong bootstrap (tuy nhiên trình duyệt IE8 không hỗ trợ lớp này).

img-rounded

Code: <img src="img-rounded.jpg" class="img-rounded"/>

Bootstrap bo tròn hình ảnh

Để bo tròn hình ảnh chúng ta sử dụng lớp .img-circle. Lớp này dùng để bo tròn cho hình ảnh trong bootstrap.

img-circle

Code: <img src="img-circle.jpg" class="img-circle"/>

Bootstrap hiển thị hình ảnh thumbnail

Để tạo hình ảnh thumbnail trong bootstrap ta sử dụng lớp .img-thumbnail.  Lớp này dùng để tạo hình ảnh thumbnail trong bootstrap.

img-thumbnail

Code: <img src="img-thumbnail.jpg" class="img-thumbnail"/>

Bootstrap hỉnh ảnh responsive

Để sử hình ảnh tương thích với từng vùng kích thước cho website ta sử dụng lớp .img-responsive, lớp này giúp cho hình ảnh tự động tương thích với kích thước vùng chứa của tag html.

Code: <img src="img-responsive.jpg" class="img-responsive"/>

Bootstrap gallery hình ảnh

Để tạo được gallery hình ảnh trong bootstrap chúng ta sử dụng đoạn code sau.

image-gallery

<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>

Bootstrap căn chỉnh vị trí hình ảnh

Để căn chỉnh hình ảnh chúng ta sử dụng các lớp sau .pull-left, pull-right và .center-block giúp căn trái, phải và giữa cho hình ảnh.

Lớp .pull-left căn trái hình ảnh

pull-left

Code: <img src="pull-left.jpg" class="pull-left"/>

Lớp .pull-right căn phải hình ảnh

pull-right

Code: <img src="pull-right.jpg" class="pull-right"/>

Lớp .center-block căn giữa hình ảnh

center-block

Code: <img src="center-block.jpg" class="center-block"/>

Trong bài viết này mình đã chia sẻ cho các bạn biết về các lớp hình ảnh trong bootstrap, giúp chúng ta sử dụng chúng dễ dàng hơn trong từng trường hợp.

Tôi là một freelance, mọi kiến thức mà tôi chia sẻ cho bạn đều là miễn phí!

Chia sẻ: Bài trước

[Bootstrap căn bản] Bài 5: Tạo và sử dụng bảng trong bootstrap

Thẻ

• bootstrap
• bootstrap căn bản
• 

Bài viết mới nhất

Phần mềm ghép mặt vào video sử dụng cho vui nhưng phải cẩn thận

Đăng bởi: Tuấn Vũ / 13 Tháng Tám, 2021

Thu nhập từ 200 – 300k/ngày với nền tảng Ola City

Đăng bởi: Tuấn Vũ / 9 Tháng Tám, 2021

Làm USB cài win bằng Rufus cực kỳ đơn giản

Đăng bởi: Tuấn Vũ / 29 Tháng Ba, 2020

Hướng dẫn cài tiếng Việt cho MyBB

Đăng bởi: Tuấn Vũ / 23 Tháng Ba, 2020

Hướng dẫn cài đặt theme cho MyBB

Đăng bởi: Tuấn Vũ / 22 Tháng Ba, 2020

Hướng dẫn tạo diễn đàn với open source MyBB

Đăng bởi: Tuấn Vũ / 22 Tháng Ba, 2020

Danh mục

HTML-CSS (9)

• Bootstrap (6)
• HTML CSS căn bản (2)

SEO (3)

Tin bên lề (13)

• Câu chuyện của tôi (1)
• Kiếm tiền oline (1)
• Thủ thuật (8)

Wordpress (9)

• Lập trình theme (5)
• Plugin (1)

Quảng cáo