IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Images

by GokiSoft.Com - 19:30 12/10/2020 2,652 Lượt Xem

Bootstrap 4 Image Shapes (Các hình dạng ảnh)


Rounded Corners

Class .rounded thêm các góc tròn cho ảnh:

Ví dụ

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Circle

Class .rounded-circle làm tròn bức ảnh:

Ví dụ

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail

Class .img-thumbnail làm khung cho ảnh:

Ví dụ

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Aligning Images (Căn chỉnh hình ảnh)

Muốn ảnh sang phải ta dùng .float-right sang trái thì .float-left:


Ví dụ

<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">

Centered Image (Căn giữa hình ảnh)

Căn giữa một hình ảnh bằng cách thêm các class .mx-auto (margin:auto) và .d-block (display:block):


Ví dụ

<img src="paris.jpg" class="mx-auto d-block">

Responsive Images (Ảnh responsive)

Tự động điều chỉnh hình ảnh cho vừa màn hình

Tạo ảnh responsive bằng cách thêm class .img-fluid vào thẻ <img>. Sau đó, hình ảnh sẽ tự động chia tỷ lệ sao cho vừa so với thành phần chứa nó.

Class .img-fluid áp dụng max-width: 100%; và height: auto; cho ảnh:

Ví dụ

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!