Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Bootstrap table Bảng Bootstrap

5/5 - (5 bình chọn)

Bootstrap Table – bảng bootstrap và bảng html có gì khác nhau? Trước khi tìm hiểu bảng bootstrap trong đầu mình cũng đã có suy nghĩ này, và mình cũng tưởng tượng ra chắc chắn bảng bootstrap có tính năng gì đó tiện ích hơn bảng html chứ. Trong đầu bạn có cùng suy nghĩ với mình trước kia không? Nếu bạn có cùng suy nghĩ với mình thì bạn đã đúng rồi. Vậy cụ thể bảng bootstrap tiện ích như thế nào chúng ta sẽ cùng tìm hiểu trong các phần dưới:

Xem thêm: Hướng dẫn học HTML, CSS

  1. Lớp .table

Bảng html bạn cần sử dụng các thuộc tính để tạo khoảng cách, vạch ngăn giữa các hàng, giúp người xem dễ dàng đọc bảng hơn. Nhưng với bảng bootstrap bạn không cần thủ công đến vậy,bạn chỉ cần thêm lớp .table vào thẻ <table>, lớp .table có thuộc tính padding sẽ tạo ra một khoảng cách nhỏ theo hàng ngang, giúp bảng dễ xem hơn.

Khi chưa sử dụng lớp .table

Bootstrap table Bảng Bootstrap ha01

Khi sử dụng lớp .table

Bootstrap table Bảng Bootstrap ha11

Xem thêm: Bootstrap là gì? Cách sử dụng bootstrap trong thiết kế website.

  1. Lớp .table-striped

Lớp .table-striped  sẽ tự động thêm thuộc tính background-color với mã màu #F9F9F9 vào các thẻ <tr> cách nhau một giúp bảng của bạn xem dễ dàng hơn.

Bootstrap table Bảng Bootstrap ha21

  1. Lớp .table-bordered

Lớp .table-bordered thêm thuộc tính border: 1px solid #ddd  bao xung quanh tất cả các mặt của bảng và tạo vạch ngăn giữa các cột .

Bootstrap table Bảng Bootstrap ha31

  1. Lớp .table-hover

Lớp .table-hover thêm hiệu ứng hover với thuộc tính background-color mã màu  #F5F5F5 khi trỏ chuột vào các hàng trong bảng.

Bootstrap table Bảng Bootstrap ha41

Xem thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap

  1. Lớp table-condensed

Lớp .table-condensed giúp bảng nhỏ gọn hơn bằng cách giảm một nửa padding của bảng.

Bootstrap table Bảng Bootstrap ha51

  1. Lớp .table –responsive

Lớp .table-responsive giúp bảng hiển thị tốt trên các màn hình có chiều rộng <768px. Và khi xem nội dung trên màn hình có chiều rộng >768px bảng hiển thị không có gì khác so với màn có chiều rộng <768px.

  1. Một số lớp khác

Một số lớp khác được sử dụng để tô màu cho các hàng < tr > hoặc các ô trong bảng < td >

+ Lớp .active: thêm thuộc tính background-color mã màu #F5F5F5 vào các thẻ <td>

+ Lớp .success:  thêm thuộc tính background-color mã màu #DFF0D8 vào các thẻ <td>

+ Lớp .info:  thêm thuộc tính background-color mã màu #D9EDF7 vào các thẻ <td>

+ Lớp .warning:  thêm thuộc tính background-color mã màu #FCF8E3 vào các thẻ <td>

+ Lớp .danger:  thêm thuộc tính background-color mã màu #F2DEDE vào các thẻ <td>

Bootstrap table Bảng Bootstrap ha61

Phần bảng bootstrap này khác ngắn và dễ nhớ, bạn hãy bắt tay vào sử dụng những lớp trên tạo ra những bảng danh sách, bảng phân tích, bảng theo dõi…đầy màu sắc và dễ xem nhé.

Xem thêm: Quy trình viết bài Chuẩn SEO toàn tập

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. TuArts Nguyen hay TuArts Wedding Studio là một thương hiệu chụp ảnh cưới nổi tiếng trong giới chụp ảnh gần...
    25 giây trước
  2. Đã làm Marketing bán hàng thì cần thành thạo GOOGLE ANALYTICS câu nói này nghe đâu đó trên mạng Facebook...
    9 giây trước
  3. Bạn muốn tự tay tạo một Widget riêng cho mình? Bạn muốn làm chủ các option trong đó? Vậy trước...
    25 giây trước
  4. “Đơn giản mà không tầm thường”. Điều này hoàn toàn đúng khi miêu tả về những chiếc nút kêu gọi...
    17 giây trước
  5. Thương mại điện tử là lĩnh vực hoạt động kinh tế không còn xa lạ với nhiều quốc gia, bởi...
    4 giây trước
  6. Không giống với những trang web nội thất khác, HAKOTA.VN mang lại những traỉ nghiệm khác biệt. Tốc độ load...
    16 giây trước
  7. Làm thế nào để một trang web mới bắt đầu được xếp hạng trong công cụ tìm kiếm của Google?...
    23 giây trước
  8. Câu hỏi Làm cách nào để lấy nội dung WordPress post theo post id? m3tsys Câu trả lời chính xác...
    26 giây trước
  9. Nếu bạn tham gia SEO, bạn nên biết tầm quan trọng của việc nghiên cứu từ khóa. Nói cách khác, tìm đúng...
    3 giây trước
  10. Quảng cáo từ Google Adsense có nhiều loại khác nhau, tùy vào nhu cầu quảng cáo của từng đơn vị...
    21 giây trước