Hướng dẫn iframe trong bootstrap - iframe in bootstrap

Hướng dẫn iframe trong bootstrap - iframe in bootstrap
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hướng dẫn iframe trong bootstrap - iframe in bootstrap
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook
Hướng dẫn iframe trong bootstrap - iframe in bootstrap
Facebook

1- Bootstrap Embed

Đôi khi bạn cần nhúng một nội dung đa phương tiện (media) vào trong trang HTML, chẳng hạn Video, PDF,... Nó có thể không phù hợp với tất cả các loại thiết bị có độ rộng màn hình khác nhau. Vì vậy Bootstrap đưa ra các lớp tiện ích để giải quyết vấn đề này. HTML, chẳng hạn Video, PDF,... Nó có thể không phù hợp với tất cả các loại thiết bị có độ rộng màn hình khác nhau. Vì vậy Bootstrap đưa ra các lớp tiện ích để giải quyết vấn đề này.

/ PDF ...

Đây là một ví dụ đơn giản sử dụng để nhúng một tập tin PDF vào trang HTML, nhưng cửa sổ hiển thị PDF không co giãn phù hợp với khung nhìn (viewport) của trình duyệt. để nhúng một tập tin PDF vào trang HTML, nhưng cửa sổ hiển thị PDF không co giãn phù hợp với khung nhìn (viewport) của trình duyệt.

object-pdf-non-responsive-example.html




   
      
      HTML object PDF
   
   
      

Non-Responsive object PDF

Your browser isn't supporting embedded pdf files. You can download the file here.

Hướng dẫn iframe trong bootstrap - iframe in bootstrap

/ video ...

Và một ví dụ đơn giản khác sử dụng để hiển thị một Video trên trang HTML. Cũng giống như ví dụ PDF ở trên, video hiển thị không tương thích đối với các thiết bị khác nhau.

2- Tùy biến .embed-responsive-*by*

Bạn có thể tạo ra một lớp .embed-responsive-*by* tùy biến, chẳng hạn .embed-responsive-5by4. .embed-responsive-*by* tùy biến, chẳng hạn .embed-responsive-5by4.

.embed-responsive-5by4


.embed-responsive-5by4 {
  padding-bottom: 80.0%;
}

Công thức tổng quát là:

Hướng dẫn iframe trong bootstrap - iframe in bootstrap

210:297 là tỷ lệ giữa chiều rộng và chiều cao của tờ giấy A4. Và bạn có thể định nghĩa lớp .embed-responsive-210by297 như sau: là tỷ lệ giữa chiều rộng và chiều cao của tờ giấy A4. Và bạn có thể định nghĩa lớp .embed-responsive-210by297 như sau:

.embed-responsive-210by297


.embed-responsive-210by297 {
  padding-bottom: 141.42%;
}

object-pdf-responsive-example




Your browser isn't supporting embedded pdf files. You can download the file here.