Thẻ bootstrap
|
Trong bài viết này, mình sẽ giới thiệu cho các bạn một thành phần rất hay được sử dụng trong Bootstrap đó là Bootstrap Card Component. Mỗi một định nghĩa của mình sẽ có một ví dụ kèm theo, chắc chắn sau bài viết này các bạn đều có thể sử dụng nó một cách thành công vì nó rất đơn giản. Hi vọng các bạn có thể áp dụng được vào project của mình Show
Bootstrap là một framework HTML, CSS và Javascript phổ biến nhất hiện nay Nó cung cấp rất nhiều lợi ích cho nhà phát triển như là
Phiên bản mới nhất của Bootstrap cung cấp rất nhiều tính năng mới, chẳng hạn như hỗ trợ Flexbox, thành phần thẻ mới, thay thế các bảng, hình thu nhỏ Bootstrap Card Component is whatĐây chính là một ví dụ sử dụng Bootstrap Card.  Flexbox là một kiểu trang mới của CSS3 (https. //viblo. asia/p/gioi-thieu-ve-css3-flexbox-3P0lPM785ox), và Bootstrap Card Component được xây dựng dựa trên cơ chế này Bạn có thể có rất nhiều tùy chọn trong Bootstrap Card như định nghĩa đầu trang & chân trang, định nghĩa nội dung, nền, chèn liên kết Use Bootstrap Card trong projectĐể sử dụng Bootstrap trong dự án của bạn, chỉ cần bao gồm CDN hoặc tải xuống từ trang getbootstrap. com. Mình sẽ demo một số đoạn mã HTML đơn giản, có sử dụng Bootstrap để minh họa các thành phần cơ bản của Card 1. Định nghĩa Style đơn giản cho CardsĐây là những phần tử cơ bản nhất để tạo nên Card as after Khi tạo một thẻ đơn giản, chúng ta cần
Như các bạn đã thấy, Card đang hiển thị trên toàn bộ Nếu muốn lấy ảnh làm nền và hiển thị chữ trên ảnh, các bạn chỉ cần đổi lớp Hoặc nếu muốn hiển thị thêm ảnh ở dưới tiêu đề thì bạn chỉ cần thêm một thẻ 2. Định nghĩa chiều rộng và chiều cao cho Thành phần thẻ BootstrapMặc định Thẻ sẽ lấy tất cả chiều rộng có sẵn trong thẻ Các bạn có để ý rằng mình sử dụng đơn vị của Thay vì sửa chiều rộng và chiều cao như thế nào, các bạn cũng có thể sử dụng Với công việc định nghĩa 1 thẻ sẽ ứng với 3 cột như trên, 1 hàng mình sẽ có 4 thẻ 3. Định nghĩa Header và Footer Bootstrap Card ComponentCác bạn chỉ cần thêm thẻ 4. Thêm điều hướngMột tính năng mới của Bootstrap Card Component là khả năng bổ sung các tab mẫu hoặc thuốc điều hướng vào tiêu đề. Để làm được điều này chúng ta sẽ bổ sung thẻ Tương tự chúng ta có thể bổ sung thuốc điều hướng bằng cách thay thế 5. Thêm liên kếtChúng ta có thể dễ dàng thêm liên kết vào nội dung bằng cách thêm thẻ 6. Sử dụng Căn chỉnh và Chuyển đổi văn bảnChúng ta có thể căn chỉnh nội dung hiển thị trong thẻ bằng cách bổ sung thêm vào các lớp như. Chúng ta cũng có thể viết hoa, viết thường nội dung văn bản bằng cách thêm các lớp 7. Điều chỉnh Background, Foreground và Border ColorsMàu nền hoặc nền trước có thể được tùy chỉnh bằng cách sử dụng các tiện ích màu nền và văn bản Bootstrap (https. //getbootstrap. com/docs/4. 0/tiện ích/màu sắc/). Để sử dụng các tiện ích viền của Bootstrap, chúng ta cần thiết lập màu viền cho thẻ Đoạn mã này mình đã đổi màu nền của thẻ sang Như các bạn đã biết, Card được sử dụng để tạo bố cục cho album ảnh, bài blog, sản phẩm thương mại điện tử. Có rất nhiều công ty lớn như Facebook, Google, Printest sử dụng nó Thông thường, nếu bạn muốn tạo ra những bố cục đẹp mắt thì bạn cần phải có những kiến thức chuyên sâu về HTML và CSS. Tuy nhiên, nhờ vào những tính năng mới của Bootstrap, chúng ta có thể nhanh chóng xây dựng các bố cục như vậy bằng cách đặt các Thẻ bên trong thẻ 1. Thẻ nhóm/lồngThẻ nhóm chính được hiển thị 1 nhóm Thẻ cùng kích thước. To doing the thing that it was used by thuộc tính 2. bộ bàiTương tự như ví dụ trên, các bạn chỉ cần thay lớp 3. Cột thẻCũng giống như Card group và Card deck, chúng ta cũng chỉ cần đặt thẻ vào trong thẻ Tóm lại, với Bootstrap Card Component, các bạn đã có thể tạo ra một trang web hiện đại mà không cần phải đi quá sâu vào tìm hiểu CSS. Bạn cũng có rất nhiều lựa chọn để lựa chọn và tự tùy chỉnh theo ý thích của mình. Bootstrap vẫn làm 1 framework mạnh mẽ nhất dành cho tất cả mọi người |
