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. 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 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. <object> / PDF ... Đây là một ví dụ đơn giản sử dụng <object> để 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML object PDF</title>
</head>
<body>
<h3 class="mb-3">Non-Responsive object PDF</h3>
<object data="example.pdf" type="application/pdf" internalinstanceid="9" title="">
<p>
Your browser isn't supporting embedded pdf files.
You can download the file
<a href="example.pdf">here</a>.
</p>
</object>
</body>
</html>
<iframe> / video ... Và một ví dụ đơn giản khác sử dụng <iframe> để 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. iframe-non-responsive-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML iframe</title>
</head>
<body>
<h3 class="mb-3">Non-Responsive iframe</h3>
<iframe
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
</iframe>
</body>
</html>
Và đây là giải pháp của Bootstrap: - Bao bọc (wrap) <iframe>/<object>/.. bởi <div class="embed-responsive embed-responsive-*by*">. Trong đó: (*) là một con số, tôi sẽ giải thích chi tiết hơn về nó ở bên dưới.
- Áp dụng lớp .embed-responsive-item cho <iframe>/<object>/...
<!-- object/ PDF ... -->
<div class="embed-responsive embed-responsive-16by9">
<object class="embed-responsive-item" data="example.pdf"
type="application/pdf" internalinstanceid="9" title="">
<p>
Your browser isn't supporting embedded pdf files. You can download the file
<a href="example.pdf">here</a>
</p>
</object>
</div>
<!-- iframe/ Video ... -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
</iframe>
</div>
Và kết quả thực sự là không tệ! iframe-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Embed</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<h3 class="mb-3">Responsive iframe</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>
</iframe>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
.embed-responsive-*by* Có một vài lớp được Bootstrap xây dựng sẵn để thiết lập tỷ lệ giữa chiều rộng và chiều cao của media. - embed-responsive-21by9
- embed-responsive-16by9
- embed-responsive-4by3
- embed-responsive-1by1
.embed-responsive-*by*
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
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-5by4
.embed-responsive-5by4 {
padding-bottom: 80.0%;
}
Công thức tổng quát là: 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: .embed-responsive-210by297
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
object-pdf-responsive-example
<style>
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
</style>
<div class="embed-responsive embed-responsive-210by297">
<object class="embed-responsive-item" data="example.pdf"
type="application/pdf" internalinstanceid="9" title="">
<p>
Your browser isn't supporting embedded pdf files. You can download the file
<a href="example.pdf">here</a>.
</p>
</object>
</div
| 
