images trong bootstrap 3
Responsive images
Images trong bootstrap 3 giúp chúng ta tạo ra các hình ảnh với chức năng responsive thân thiện hơn thông qua bổ sung class .img-responsive. Thuộc tính áp dụng cho hình ảnh là max-width: 100%;, height: auto; và display: block;. để hình ảnh đáp ứng các yếu tố thẩm mỹ và yêu cầu người sử dụng.
Để tùy chỉnh căn giữa cho hình ảnh sử dụng class .img-responsive, chúng ta sử dụng class .center-block thay vì .text-center
Ví dụ
<img src="..." class="img-responsive center-block" alt="Responsive image">
Kết quả
Để tùy chỉnh căn trái cho hình ảnh, chúng ta sử dụng class .img-responsive và .pull-left
Ví dụ
<img src="..." class="img-responsive pull-left" alt="Responsive image">
Kết quả
Để tùy chỉnh căn phải cho hình ảnh, chúng ta sử dụng class .img-responsive và .pull-right
Ví dụ
<img src="..." class="img-responsive pull-right" alt="Responsive image">
Kết quả
Các lớp hình ảnh
Thêm các class hình ảnh vào thẻ <img> để dễ dàng tạo ra các style đẹp mắt
Khả năng tương thích trên nhiều trình duyệt
Internet explore 8 không hỗ trợ cho hình ảnh có góc bo tròn
Ví dụ
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Kết quả
Responsive Nhúng Video
Nhúng Responsive để video hoặc trình chiếu tự điều chỉnh tỷ lệ phù hợp trên các thiết bị khác nhau.
Các lớp có thể được áp dụng trực tiếp cho các phần tử <iframe>, <embed>, <video> và <object>.
Ví dụ sau tạo video đáp ứng bằng cách thêm một lớp .embed-responsive-item vào thẻ <iframe> (sau đó video sẽ chia tỷ lệ phù hợp với phần tử cha). Vùng chứa <div> xác định tỷ lệ khung hình của video.
Ví dụ
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LNEUi1YinlE"></iframe> </div>
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à 4:3 (định dạng video phổ biến của thế kỷ 20) và 16:9 (phổ biến cho truyền hình HD và truyền hình kỹ thuật số châu Âu).
Chúng ta có thể tùy chọn lớp responsive với hai tỷ lệ khung hình khác nhau.
Ví dụ
<h2>Tỷ lệ khung hình 4:3</h2> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LNEUi1YinlE"></iframe> </div> <h2>Tỷ lệ khung hình 16:9</h2> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LNEUi1YinlE"></iframe> </div>