Bootstrap: Thumbnail | V1Study

• Đào tạo Độ tuổi từ 5 - 11 Độ tuổi từ 12 - 17 Từ 18 tuổi
• Lập trình Python Lập trình C C++ Java C# - C Sharp Android Scratch Pascal Robot mBot
• Web ReactJS HTML5 CSS3 JavaScript Node.js JSP ASP.NET Core jQuery PHP
• FW-CMS Laravel AngularJS Flutter Magento Bootstrap VueJS CodeIgnitor WordPress Sass Drupal
• Video Video Python Video Lập trình C Video C# Video Java Video HTML5-CSS3-JavaScript Video SQL Server Video PHP Video jQuery Video Android Video C++ Video Scratch
• Video1 Video XML-JSON Video MySQL Video Excel Video Giải thuật và Lập trình Video Sức khỏe Video Drupal Video mBot Video Giáo dục - Khoa học
• Other Unity Giải thuật và lập trình Giải thuật và lập trình - C CCNA Mạng máy tính Design Patterns English Facebook SEO Git Tin học đại cương Japanese App-Uti Download
• Data SQL Server XML JSON MySQL
• News

≡ ≡ Bootstrap Mở đầu Tải về Bên trong có gì Biên dịch CSS và JavaScript Template cơ bản Các ví dụ Công cụ và cộng đồng Vô hiệu hóa tính năng Responsive Chuyển đổi từ phiên bản 2.x sang 3.x Hỗ trợ các trình duyệt và các thiết bị Hỗ trợ bên thứ ba Vấn đề truy nhập Các câu hỏi thường gặp về bản quyền Bootstrap CSS Tổng quan Hệ thống lưới Typography Code Bảng (Table) Forms Nút (Buttons) Hình ảnh (Images) Các class trợ giúp Các tiện ích responsive Sử dụng Less Sử dụng Sass Bootstrap Các thành phần Glyphicons Menu sổ xuống (Dropdowns) Nhóm nút (Button groups) Menu sổ xuống dạng nút Nhóm input (Input groups) Thành phần điều hướng (Navs) Thanh điều hướng (Navbar) Breadcrumbs Phân trang (Pagination) Nhãn, Badge, Jumbotron, Tiêu đề trang Thumbnail Thông báo (Alerts) Thanh tiến trình (Progress bars) Media Nhóm danh sách (List group) Panel Thành phần nhúng responsive Wells Bootstrap JavaScript Tổng quan Hiệu ứng dịch chuyển transition.js Modals modal.js Menu sổ xuống dropdown.js ScrollSpy scrollspy.js Thẻ đóng/mở tab.js Chú thích tooltip.js Popovers popover.js Tin nhắn thông báo alert.js Nút button.js Collapse collapse.js Carousel carousel.js Affix affix.js Bootstrap Tuts Cách show Modal theo ý muốn Bootstrap: Thumbnail Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên

Mở rộng hệ thống lưới của Bootstrap với thành phần thumbnail để dễ dàng hiển thị lưới các ảnh, video, text, và còn hơn thế nữa.

Ví dụ cơ bản

Mặc định, thumbnail của Bootstrap được thiết kế để hiển thị các ảnh có liên kết bằng một chút markup.

<div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img data-src="holder.js/100%x180" alt="..."> </a> </div> ... </div>

Tùy biến nội dung

Bạn có thể thêm bất kỳ loại nội dung dạng HTML nào như tiêu đề, đoạn văn, các nút... vào trong thumbnail bằng cách bổ sung thêm một chút markup nữa.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img data-src="holder.js/300x200" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> » Tiếp: Thông báo (Alerts) « Trước: Nhãn, Badge, Jumbotron, Tiêu đề trang Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên Copied !!! Copy linkCopied link!

Bạn muốn tìm kiếm điều gì?

×