Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho hình ảnh, cũng như cách tạo hình ảnh và video responsive bằng Bootstrap.
Hình ảnh rất phổ biến trong thiết kế web hiện đại. Vì vậy, việc tạo kiểu hình ảnh và đặt nó đúng cách trên các trang web là rất quan trọng để cải thiện trải nghiệm người dùng.
Sử dụng các lớp tích hợp sẵn của Bootstrap, bạn có thể dễ dàng tạo kiểu cho hình ảnh, chẳng hạn như tạo hình bo tròn hoặc hình tròn, hoặc tạo cho chúng hiệu ứng như hình thu nhỏ.
<img src="images/avatar.svg" class="rounded" alt="Rounded Image">
<img src="images/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">
Kết quả của ví dụ trên sẽ giống như sau:
Với Bootstrap, bạn cũng có thể làm cho hình ảnh responsive nhanh chóng. Chỉ cần thêm lớp .img-fluid
vào thẻ <img>
. Lớp này chủ yếu áp dụng các kiểu max-width: 100%;
và height: auto;
cho hình ảnh để nó thay đổi tỷ lệ vừa vặn với phần tử chứa - trong trường hợp nếu chiều rộng của hình ảnh lớn hơn chính phần tử chứa. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:
<img src="images/kites.jpg" class="img-fluid" alt="Flying Kites">
<img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
<img src="images/balloons.jpg" class="img-fluid" alt="Hot Air Balloons">
Lưu ý: Khi tạo bố cục responsive, hãy cân nhắc cả việc làm cho hình ảnh của bạn responsive, nếu không, nếu chiều rộng hình ảnh lớn hơn chiều rộng của phần tử cha trong mọi trường hợp, nó sẽ tràn và có thể phá vỡ bố cục trang web của bạn.
Bạn cũng có thể làm cho video hoặc slideshow được nhúng trong một trang web trở nên responsive mà không ảnh hưởng đến tỷ lệ kích thước ban đầu của nó. Để thực hiện việc này, hãy bọc bất kỳ nhúng nào như một <iframe>
hoặc <video>
trong một phần tử <div>
và áp dụng lớp .embed-responsive
và một lớp tỷ lệ khung hình chẳng hạn như .embed-responsive-16by9
.
Bạn có thể tùy chọn áp dụng một lớp con .embed-responsive-item
trên phần tử được nhúng để khớp với kiểu cho các thuộc tính khác. Đây là một ví dụ:
<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4x3">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1x1">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
Trong ví dụ trên, chúng tôi đã tạo 4 video nhúng responsive với 4 tỷ lệ khung hình khác nhau (21:9, 16:9, 4:3 và 1:1) bằng cách sử dụng các lớp .ratio-21x9
, .ratio-16x9
, .ratio-4x3
và .ratio-1x1
tương ứng ngoài lớp cơ sở trên phần tử bao bọc.
Mẹo: Tỷ lệ khung hình của hình ảnh mô tả mối quan hệ tỷ lệ giữa chiều rộng và chiều cao của hình ảnh. Hai tỷ lệ khung hình video phổ biến là 16:9 và 4:3.
Bạn có thể sử dụng các lớp căn chỉnh văn bản , chẳng hạn như .text-center
và .text-end
trên vùng chứa cha để căn chỉnh các hình ảnh bên trong theo chiều ngang giữa và phải. Bạn cũng có thể căn chỉnh hình ảnh sang trái và phải trong một hộp lớn hơn bằng cách sử dụng các lớp .float-start
và .float-end
.
Tuy nhiên, để căn giữa các hình ảnh trong khối, bạn cần sử dụng lớp tiện ích lề .mx-auto
. Hãy thử ví dụ sau để hiểu nó thực sự hoạt động như thế nào:
<!-- Center alignment using text alignment classes -->
<div class="text-center">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Right alignment using text alignment classes -->
<div class="text-end">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Horizontal alignment using float classes -->
<div class="clearfix">
<img src="images/avatar.svg" class="float-start" alt="Sample Image">
<img src="images/avatar.svg" class="float-end" alt="Sample Image">
</div>
<!-- Center alignment of block-level image using auto margin -->
<div>
<img src="images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.