Thư viện hình thu nhỏ hình ảnh bootstrap

Hình ảnh có đủ kích cỡ. Màn hình cũng vậy. Hình ảnh phản hồi tự động điều chỉnh để phù hợp với kích thước của màn hình

Tạo hình ảnh phản hồi bằng cách thêm lớp .img-responsive vào thẻ

Thư viện hình thu nhỏ hình ảnh bootstrap

Tự mình thử »


thư viện hình ảnh

Bạn cũng có thể sử dụng hệ thống lưới của Bootstrap kết hợp với lớp .img-rounded0 để tạo thư viện hình ảnh

Ghi chú. Bạn sẽ tìm hiểu thêm về Hệ thống lưới sau trong hướng dẫn này (cách tạo bố cục với số lượng cột khác nhau)

Thí dụ

 


 


   


     
       

Thư viện hình thu nhỏ hình ảnh bootstrap

       

Lorem ipsum


       


     
   


 


 


   


     
       

Thư viện hình thu nhỏ hình ảnh bootstrap

       

Lorem ipsum


       


     
   


 


 


   


     
       

Thư viện hình thu nhỏ hình ảnh bootstrap

       

Lorem ipsum


       


     
   


 


Tự mình thử »


Nhúng đáp ứng

Đồng thời cho phép video hoặc trình chiếu được chia tỷ lệ chính xác trên mọi thiết bị

Các lớp có thể được áp dụng trực tiếp cho, và các phần tử

Ví dụ sau đây tạo video phản hồi bằng cách thêm lớp .img-rounded1 vào thẻ .img-rounded2 (sau đó video sẽ chia tỷ lệ phù hợp với thành phần gốc). Chứa .img-rounded2 xác định tỷ lệ khung hình của video

Thí dụ


 
Tự mình thử »

Tỷ lệ khung hình là gì?

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 nó. 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ổ cập cho truyền hình HD và truyền hình kỹ thuật số Châu Âu)

Ở phần này, bootstrap hỗ trợ chúng ta 3 class dùng để định vị kiểu trang cho hình ảnh giống như hình dưới đây

Thư viện hình thu nhỏ hình ảnh bootstrap
Hình ảnh biểu định kiểu ba kiểu bootstrap

Ba hình đấy tương ứng với ba lớp dưới đây

  • Class img-rounded (Bo góc)
  • Lớp img-circle (Tròn)
  • Lớp img-thumbnail (Thu nhỏ)

Ngoài ra thì còn một lớp là img-responsive nghe tới cái từ responsive thì chắc các bạn cũng hiểu lớp này có tác dụng gì rồi đúng không. Thôi tôi nói luôn là nó hỗ trợ co giãn hình ảnh khi chúng ta xem hình ảnh trên các loại thiết bị khác nhau, hoặc khi các bạn co giãn trình duyệt. Tiếp tục chúng ta sẽ tạo ra 4 hình thu nhỏ có kích thước là 125×125

Ví dụ




    
    Bootstrap 3 Image Styling
    
    
    
    
    


    

Images Bootstrap

Thư viện hình thu nhỏ hình ảnh bootstrap
Thư viện hình thu nhỏ hình ảnh bootstrap
Thư viện hình thu nhỏ hình ảnh bootstrap

2. Tạo hình ảnh thu nhỏ

Phần này mình dùng class col-xs để demo , còn các bạn thích thì có thể dùng các class hỗ trợ co giãn màn hình cũng không sao nhé

Thư viện hình thu nhỏ hình ảnh bootstrap
Hình thu nhỏ của hình ảnh

Ví dụ





Bootstrap 3 Thumbnails







Images Thumbnail

3. Breadcrumb là gì?

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể chuyển đổi thuận lợi từ trang này sang trang khác trong 1 website. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu cách stylesheet Breadcrumbs & Images trong bootstrap ra sao

4. Tạo breadcrumb trong bootstrap

Để có thể dễ dàng tạo ra một breadcrumb giống như hình, các bạn chỉ cần bọc thành phần html trong cặp thẻ ul & li, thêm vào thẻ ul lớp breadcrumb. Thì các bạn sẽ có ngay một stylesheet phân cấp link thật là bắt mắt. Phần stylesheet chỉ đơn giản như vậy thôi , tiếp theo chúng ta sẽ đi qua tìm hiểu phần stylesheet image

Ví dụ




    
    Bootstrap 3 Breadcrumbs
    
    
    
    
    


    
Thư viện hình thu nhỏ hình ảnh bootstrap
Hình ảnh breadcrumb trong bootstrap 3

5. Lời kết

Bài viết xin dừng lại tại đây, vì thật ra breadcrumb & images trong bootstrap chỉ hỗ trợ stylesheet như vậy thôi, còn sử dụng nó ra sao thì tùy vào thẩm mỹ của từng người nhé, Hẹn gặp lại ở các bài tiếp theo