Nhật ký học tập

Bài đăng

Hiển thị các bài đăng có nhãn Bootstrap

Hướng dẫn DataTable cơ bản: Individual Column Searching - Part 2

Trong các bài trước, chúng ta đã làm quen với ô Search tổng quát. Tuy nhiên, khi dữ liệu trở nên phức tạp, người dùng thường có nhu cầu lọc chính xác theo từng trường thông tin (ví dụ: chỉ xem sản phẩm "Hết hàng" hoặc thuộc loại "Điện tử"). Hôm nay, mình sẽ hướng dẫn các bạn cách tạo bộ lọc dạng Popup Dropdown ngay trên Header của DataTable Chúng ta sẽ sử dụng Icon tam giác và Popup Menu của Bootstrap graph LR subgraph "Thẻ TH (Table Header Cell)" Title[Text: Category] --- Icon[Icon: bi-caret-down-fill] end Icon -.-> Menu[Dropdown Menu - Absolute Position] subgraph "Dropdown Menu Items" Option1[Tất cả] Option2[Giá trị 1] Option3[Giá trị 2] end Menu --- Option1 Menu --- Option2 Menu --- Option3 Cài đặt giao diện CSS Tham khảo: https://getbootstrap.com/docs/4.0/components/dropdowns/ Cấu Trúc HTML Dropdown <div class="dropdown d-inline-block filter-container ms-2"> <!...

Bootstrap 5: Giới thiệu về Bootstrap - Day 1

Lịch sử Bootstrap Bootstrap là một framework front-end phát triển bởi Twitter vào năm 2011 bởi Mark Otto và Jacob Thornton. Ban đầu, nó được gọi là "Twitter Blueprint" và được sử dụng bên trong Twitter để tạo giao diện cho ứng dụng Web của họ. Sau đó, Twitter quyết định chia sẻ nó với cộng đồng phát triển Ngày 19 tháng 8 năm 2011, Bootstrap chính thức được phát hành. Bootstrap 2 ra mắt vào tháng 1 năm 2012 với nhiều cải tiến và tính năng mới. Phiên bản này đã cải thiện hệ thống lưới, tương tác trang Web và hỗ trợ trình duyệt tốt hơn. Tiếp đến Bootstrap 3 được phát hành vào tháng 8 năm 2013 và đưa ra các tính năng Responsive Design, tương thích với các thiết bị di động, và nhiều thành phần giao diện mới. Bootstrap 4 đã mất một thời gian dài để phát triển, ra mắt vào tháng 1 năm 2018 với nhiều cải tiến lớn. Bootstrap 4 cải thiện hệ thống grid, tối ưu hóa CSS, hỗ trợ Flexbox, và đem lại nhiều tính năng và sự linh hoạt hơn cho người phát triển. Đến nay Bootstrap đã nhận được sự ủ...

React: Complex Component với React Bootstrap- Day 4.1

Trong bài viết trước, mình có hướng dẫn sử dụng React Bootstrap để xây dựng Component. Tham khảo: React: Complex Componnet - Day 4 Vấn đề của Bootstrap DOM Manipulation: Bootstrap sử dụng DOM manipulation để thay đổi giao diện. Tuy nhiên, trong React, việc thay đổi trực tiếp DOM là không khuyến khích và có thể dẫn đến vấn đề hiệu năng và khó bảo trì. State Management: Bootstrap không cung cấp các công cụ state management tự động được tích hợp với React. Khi bạn sử dụng Bootstrap truyền thống với React, bạn phải tự quản lý trạng thái của các thành phần và đồng bộ hóa nó với các lớp CSS. JavaScript Dependencies: Bootstrap truyền thống yêu cầu sử dụng thư viện jQuery và các phiên bản Bootstrap mới hơn cũng yêu cầu Popper.js. Khi sử dụng với React, việc quản lý các phụ thuộc này có thể phức tạp và có thể gây ra xung đột với các thư viện React khác. React Bootstrap là gì? React Bootstrap là một phiên bản Bootstrap được tối ưu hóa cho việc sử dụng với React. Integrates with React ...

React: Complex Component- Day 4

Trong bài viết này, chúng ta sẽ xây dựng giao diện từ project html-javascript-css cho đến project sử dụng react app. Giao diện trang web Giao diện bao gồm: HTML5 + Bootstrap 5 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container mt-5"> <div class="r...

Làm quen với Bootstrap với Visual Studio Code

Bạn muốn tìm 1 editor miễn phí, để có thể viết code html, js, css nhanh chóng, vừa có thể debug và chạy trực tiếp. Có rất nhiều tool editor miễn phí lần tính phí, nhưng theo cá nhân mình, mình thấy tool Visual Studio Code là công cụ nhẹ nhàng, mạnh mẽ, và có rất nhiều extension (tiện ích) hỗ trợ. Và quan trọng nhất là Visual Studio Code chạy được trên đa nền tảng, và có Microsoft hỗ trợ phát triển. Download: https://code.visualstudio.com/download Một số extension hữu ích và cần thiết để viết code Bootstrap Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro Snippets - Ashok Koyi Live Server - Ritwick Dey Để cài đặt extension cho Visual Studio Code, bạn mở Ctrl + Shift + P => Install Extensions, rồi gõ tên những extension mà bạn cần cài đặt. Tạo project Web Mở Visual Studio Code. Bấm File -> Open Folder -> Chọn folder cần chứa project -> Select Folder. Tạo mới 1 file html: index.html. Gõ b4-$ rồi bấm Enter. Extension 1 sẽ tạo mới 1 file template mẫu Html ...