×
×
×
Bài tập Kiểm tra kỹ năng của bạn với các bài tập khác nhau
Câu đố Tự kiểm tra bằng các câu hỏi trắc nghiệm
Được chứng nhận Ghi lại kiến thức của bạn
Đăng nhập Đăng ký Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn
Người tìm đường và việc học của tôi Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng
Nâng cấp Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)
Bắt đầu từ đâu Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi
Trình chỉnh sửa mã (Dùng thử) Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình
Video Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn
Mẫu Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!
Web hosting Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces
Tạo một máy chủ Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.
Làm thế nào để Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript
Khung CSS Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi
Thống kê trình duyệt Đọc xu hướng dài hạn của việc sử dụng trình duyệt
Tốc độ gõ Kiểm tra tốc độ đánh máy của bạn
Đào tạo AWS Tìm hiểu dịch vụ web của Amazon
Bộ chọn màu Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau.
Trò chơi mã Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông
Đặt mục tiêu Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn
Bản tin Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng
Việc làm Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo
Lớp học Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục
×
Hình ảnh khởi động Hình dạng hình ảnh Bootstrap Các góc tròn:
Vòng tròn:
Hình nhỏ:
góc tròn Lớp .img-rounded thêm các góc tròn vào hình ảnh (IE8 không hỗ trợ các góc tròn):
Ví dụ
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
Hãy tự mình thử » Vòng tròn Lớp .img-circle định hình hình ảnh thành hình tròn (IE8 không hỗ trợ các góc tròn):
Ví dụ
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque
Terre">
Hãy tự mình thử » Hình nhỏ Lớp .img-thumbnail định hình hình ảnh thành hình thu nhỏ:
Ví dụ
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Hãy tự mình thử » Hình ảnh đáp ứng Hình ảnh có đủ kích cỡ. Màn hình cũng vậy. Hình ảnh đáp ứng 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ẻ <img> . Sau đó, hình ảnh sẽ có tỷ lệ phù hợp với phần tử gốc.
Lớp .img-responsive áp dụng display: block; và max-width: 100%; và height: auto; đến hình ảnh:
Ví dụ
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Hãy 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 .thumbnail để tạo thư viện hình ảnh.
Lorem ipsum donec id elit non mi porta gradida at eget metus.
Lorem ipsum donec id elit non mi porta gradida at eget metus.
Lorem ipsum donec id elit non mi porta gradida at eget metus.
Lưu ý: 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).
Ví dụ
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
Hãy tự mình thử » Nhúng đáp ứng Đồng thời cho phép video hoặc trình chiếu có tỷ lệ phù hợp trên mọi thiết bị.
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 phản hồi bằng cách thêm lớp .embed-responsive-item vào thẻ <iframe> (sau đó video sẽ chia tỷ lệ phù hợp với phần tử gốc). Phần chứa <div> xác định tỷ lệ khung hình của video:
Ví dụ
<div class="embed-responsive embed-responsive-16by9">
Hãy tự mình thử » Tỷ lệ khung hình là gì?
Bạn có thể chọn giữa hai lớp tỷ lệ khung hình:
<!-- 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>
Hãy tự mình thử » Tham chiếu hình ảnh Bootstrap hoàn chỉnh Để có tài liệu tham khảo đầy đủ về tất cả các lớp hình ảnh, hãy truy cập Tài liệu tham khảo hình ảnh Bootstrap hoàn chỉnh của chúng tôi.
Bạn có biết không? W3.CSS là một sự thay thế tuyệt vời cho Bootstrap.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.
Người tìm đường W3schools
Theo dõi tiến trình của bạn - hoàn toàn miễn phí!
