Bảng [bảng] là một trong các thành phần được sử dụng rộng rãi trong trang. Để có được một bảng theo cách của Bootstrap khá đơn giản, bạn chỉ cần áp dụng lớp. bảng cho các thẻ [tag], và một vài lớp bổ sung để tạo ra một bảng theo ý muốn. [bảng] là một trong các thành phần được sử dụng rộng rãi trong trang. Để có được một bảng theo cách của Bootstrap khá đơn giản, bạn chỉ cần áp dụng lớp. bảng cho các thẻ [tag], và một vài lớp bổ sung để tạo ra một bảng theo ý muốn
Application Layer. table for you will have a table cơ bản nhất theo cách của Bootstrap. Hình minh họa dưới đây cho bạn thấy sự khác biệt giữa một bảng mặc định và một bảng được áp dụng lớp. bàn. . table for you will have a table cơ bản nhất theo cách của Bootstrap. Hình minh họa dưới đây cho bạn thấy sự khác biệt giữa một bảng mặc định và một bảng được áp dụng lớp. bàn
Class. thiết lập bảng chiều rộng 100% và nền trong suốt [trong suốt] cho bảng, thiết lập đệm cho các ô [ô],. . thiết lập bảng chiều rộng 100% và nền trong suốt [trong suốt] cho bảng, thiết lập đệm cho các ô [ô],
ví dụ về bảng cơ bản. html
Basic Bootstrap Table
Basic Bootstrap Table
No
Language
Percent
1
Java
14.21%
2
C
11.03%
3
C++
5.60%
Class. bảng áp dụng màu nền trong suốt [trong suốt] cho bảng, tuy nhiên nếu bạn muốn có màu nền khác thì có thể sử dụng một vài lớp có sẵn sau. . bảng áp dụng màu nền trong suốt [trong suốt] cho bảng, tuy nhiên nếu bạn muốn có màu nền khác thì có thể sử dụng một vài lớp có sẵn sau
- bảng-chính
- bảng phụ
- bàn-thành công
- bàn nguy hiểm
- bảng-cảnh báo
- thông tin bảng
- đèn bàn
- bàn tối
- tắt tiếng bảng
- bàn trắng
2- Màu tiêu đề
Bạn có thể thiết lập nền nền cho Tiêu đề của bảng bằng cách sử dụng lớp. thead-dark or. thead-light for tag. Tiêu đề của bảng bằng cách sử dụng lớp. thead-dark or. thead-light for tag
Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về bảng thành phần và danh sách trong Bootstrap 4. Nào hãy cùng mình khám phá nhé
Bảng thành phần
Table[Table] được tạo thành bằng cách sắp xếp dữ liệu theo hàng và cột giúp chúng ta tra cứu giá trị một cách nhanh chóng, so sánh giá trị của nhiều dạng dữ liệu khác nhau, giúp người dùng có cái nhìn trực quan và quan sát. . Trong Bootstrap có cung cấp cho bạn một lớp table
giúp làm cho bảng giao diện đẹp và rõ ràng hơn. Để hiểu rõ hơn các bạn hãy cùng mình xem đoạn mã dưới đây nhé
Ví dụ về bảng Bootstrap
Xem ví dụ về bootstrap Pen Table của haycuoilennao19 [@haycuoilennao19] trên CodePen
Như bạn thấy là cấu trúc hoàn toàn giống với một bảng HTML bình thường [nếu bạn cần xem lại bảng trong HTML thì nhấn vào đây nhé Bảng HTML]. Và chúng ta chỉ cần đặt lớp table
trong bảng thẻ là có thể gọi ra bảng thành phần trong bootstrap. Ngoài ra sẽ có một vài lớp giúp bạn dễ dàng tinh chỉnh bảng thành phần này hợp với ý mình hơn
Đầu tiên là lớp table-bordered
có tác dụng là tạo đường viền giữa các ô trong bảng. Để hiểu rõ hơn các bạn xem đoạn mã sau đây nhé
Bảng lớp có viền
Xem Bootstrap 4 viền bảng của haycuoilennao19 [@haycuoilennao19] trên CodePen
Thứ hai là khi người dùng xem bảng của bạn thì sẽ rất khó đọc nếu nó có quá nhiều dòng vì vậy Bootstrap cung cấp một lớp table-striped
làm cho màu nền của hai dòng kế tiếp nhau sẽ có màu hơi khác nhau một chút. Để hiểu rõ hơn các bạn xem ví dụ sau đây nhé
Bảng lớp sọc
Xem Pen table-striped bootstrap4 của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nếu bạn không muốn chia màu thành lớp table-striped
như trên thì Bootstrap cung cấp cho chúng ta một lớp tên là table-hover
giúp người dùng khi hover[di chuyển chuột lên] dòng nào trong bảng thì nó sẽ có màu khác so với các dòng còn lại. Để hiểu rõ hơn các bạn xem ví dụ dưới đây nhé
Di chuột qua bảng lớp
Xem Pen table-hover bootstrap của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nhìn các bảng ở trên hơi đơn điệu nhỉ, giờ hãy cùng mình sử dụng các class màu của Bootstrap để tạo màu nền cho các dòng trong bảng bằng cách sử dụng class table-[color]
. Color ở đây có thể là primary, success.. và chúng ta gắn với các thẻ tr
[dòng] mà mình muốn nhé ví dụ
Bảng lớp-[màu]
Xem Bootstrap hàng nền Pen của haycuoilennao19 [@haycuoilennao19] trên CodePen
Bootstrap cũng cung cấp màu chữ và màu nền cho thẻ thead
bằng cách gọi table
0 cho màu tối và table
0 cho màu sáng. Để hiểu rõ hơn hãy xem ví dụ của mình sau đây nhé
Phân loại thead-dark và thead-light
Xem Bút thead-dark vs thead-light của haycuoilennao19 [@haycuoilennao19] trên CodePen
Bạn có thể sử dụng trang định vị cho bảng dưới dạng hai màu bằng cách thay đổi như sau table-dark và table-light nhé. Điều cuối cùng mình muốn giới thiệu về thành phần này là nếu bạn muốn các chữ trong cột không bị rớt dòng ở những màn hình nhỏ thì ta có thể sử dụng lớp table
1 để tạo thanh cuộn ngang khi độ rộng của bảng lớn hơn màn hình hiển thị . Ngoài ra, bạn có thể sử dụng table
2 cho từng màn hình mà mình muốn. Để hiểu rõ hơn hãy xem ví dụ mình dưới đây nhé
Bảng lớp đáp ứng
Xem Pen table-responsive bootstrap của haycuoilennao19 [@haycuoilennao19] trên CodePen
Danh sách thành phần
Như bạn đã biết thì danh sách [list] thường được cấu hình từ thẻ ul, ol, dl, Bootstrap cung cấp cho chúng ta một số lớp để làm việc với thẻ này. Để hiểu rõ hơn mình hãy vào cụ thể nhé
Đầu tiên là nhiều khi bạn muốn loại bỏ kiểu[style] mặc định cho các thẻ danh sách ol, ul thì ta có thể sử dụng lớp table
3. Để hiểu rõ hơn hãy cùng xem ví dụ nhé
danh sách lớp-unstyled
Xem Pen list-unstyled bootstrap của haycuoilennao19 [@haycuoilennao19] trên CodePen
Mình có một lưu ý nhỏ là khi bạn sử dụng class table
3 cho thẻ danh sách nào thì nó mới chịu ảnh hưởng nha ví dụ ở đây thẻ cha mình thiết lập class này nhưng thẻ danh sách con ở Sản Phẩm sẽ không bị ảnh hưởng nhé.
Bạn để ý là với thẻ danh sách ul, ol thì các phần tử con sẽ theo chiều dọc từ trên xuống dưới để nằm ngang thì Bootstrap cung cấp cho ta một lớp là table
5. Cái này mình để ý hay được sử dụng trong thanh điều hướng [nơi chứa các đường dẫn nằm ở đầu trang]. Để hiểu rõ hơn hãy xem đoạn mã dưới đây nhé
Danh sách lớp-nội tuyến
Xem Bootstrap danh sách nội tuyến trên bút của haycuoilennao19 [@haycuoilennao19] trên CodePen
Ở đây ngoài bạn đặt lớp table
5 cho thẻ ul thì mình cũng phải đặt lớp table
7 cho thẻ li thì nó mới hoạt động nhé
Ngoài thẻ ul, ol thì chúng ta còn một thẻ danh sách ít được sử dụng đó là thẻ dl. Nếu các bạn muốn xem lại hoặc tìm hiểu thêm về thẻ này thì xem tại đây nha Thẻ dl. Ở đây Bootstrap giúp chúng ta xác định danh sách theo hướng ngang như ví dụ trên thẻ dl. Nào cùng mình xem ví dụ nhé
Thẻ DL
Xem Pen Thẻ DL nằm ngang của haycuoilennao19 [@haycuoilennao19] trên CodePen
Như ta thấy thì nó sẽ chia theo dòng cho thẻ dl và cột cho thẻ dt. Còn nếu muốn bình thường thì bạn bỏ các dòng và cột trong Bootstrap là được nhé
Tổng kết
Qua đây mình mong bài viết sẽ giúp các dì chiếm được bảng thành phần[bảng] và danh sách[danh sách] trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi mail mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ