Làm cách nào để tạo kiểu phản ứng với Bootstrap?
|
Chúng tôi sử dụng một tập hợp con của tất cả các màu để tạo một bảng màu nhỏ hơn để tạo bảng phối màu, cũng có sẵn dưới dạng biến Sass và bản đồ Sass trong tệp .title { background-color: red; }20 của Bootstrap Show
Tất cả các màu này đều có sẵn dưới dạng bản đồ Sass, .title { background-color: red; }21 trong tệp .title { background-color: red; }20Ghi chú. Màu chủ đề cũng có sẵn dưới dạng các lớp CSS. Bạn có thể sử dụng chúng trực tiếp trong dự án của mình mà không cần biên dịch mã scss. Hãy xem các ví dụ dưới đây Tạo kiểu là điều cần thiết trong mọi dự án phản ứng. Chúng tôi sử dụng cả CSS tùy chỉnh và cũng sử dụng các thư viện bên ngoài như bootstrap phản ứng để tạo kiểu cho các thành phần phản ứng. Trong bài viết này, tôi viết về các cách/chiến lược khác nhau về cách chúng ta có thể kết nối kiểu dáng với các dự án phản ứng của mình Các chiến lược tạo kiểu phổ biến sẽ được thảo luận trong bài viết này là 1. Biểu định kiểu CSS và SCSS2. Mô-đun CSS3. Thành phần được tạo kiểuBiểu định kiểu CSS và SCSSĐây là một trong những phương pháp đơn giản để liên kết các kiểu trong phản ứng. Đây là một cách tiếp cận tương tự nơi chúng ta thường liên kết các biểu định kiểu khi xây dựng ứng dụng bằng html và css thuần túy. Cách tiếp cận này sử dụng các biểu định kiểu riêng biệt và liên kết chúng theo cách thông thường chúng tôi tạo ra. css hoặc. scss riêng biệt và liên kết nó trực tiếp bên trong thành phần phản ứng của chúng tôi. Sau đó, chúng tôi sử dụng đã tạo. các lớp css bên trong thuộc tính className phản ứng Mẫu biểu định kiểu bên ngoài được hiển thị bên dưới Nhập biểu định kiểu và sử dụng nó có thể được thực hiện như thế này bên dưới ở trên, chúng tôi đã nhập biểu định kiểu bằng cách sử dụng câu lệnh nhập và đã sử dụng các lớp css đã khai báo bên trong thành phần phản ứng Lợi ích của việc sử dụng biểu định kiểu css/scss bên ngoài
Hạn chế của việc sử dụng biểu định kiểu CSS/SCSS bên ngoàiTheo thời gian, nếu cơ sở mã tăng lên và ứng dụng trở nên phức tạp, biểu định kiểu cũng gặp phải các vấn đề về khả năng đọc phức tạp/lớn Có thể có kiểu dáng không được sử dụng bên trong các biểu định kiểu lớn và khó điều hướng bên trong biểu định kiểu. Dọn dẹp kiểu dáng không sử dụng có thể khó Xung đột đặt tên xảy ra nếu cùng một tên lớp được sử dụng trong biểu định kiểu. Vì chúng tôi sử dụng một biểu định kiểu duy nhất nên chúng tôi phải sử dụng tên duy nhất cho mọi lớp tạo kiểu Mô-đun CSSSử dụng Mô-đun CSS là một cách tiếp cận khác để tạo kiểu liên kết trong dự án phản ứng của bạn Lợi ích chính của các mô-đun CSS là bạn có thể sử dụng các tên lớp giống nhau mà không phải lo lắng về bất kỳ xung đột đặt tên nào trong toàn bộ dự án khi sử dụng các mô-đun CSS trong các dự án Html/Js đơn giản, chúng tôi phải cài đặt webpack và thực hiện cấu hình. Nhưng với ứng dụng tạo phản ứng, chúng tôi đã có sẵn thiết lập đó và chúng tôi có thể dễ dàng sử dụng các mô-đun CSS bên trong dự án phản ứng của mình Đầu tiên thay vì [tên]. đổi tên tệp scss. tệp scss với [tên]. mô-đun. scss import styles from './cart.modules.scss'Bạn có thể truy cập kiểu dáng bằng cách sử dụng ký hiệu dấu chấm. ví dụ .title { background-color: red; }23Điều xảy ra khi sử dụng các mô-đun css là tên lớp của chúng tôi được ánh xạ trực tiếp tới tên được tạo tự động trong thời gian xây dựng. Tên lớp CSS như bên dưới .title { background-color: red; }được chuyển đổi thành một cái gì đó như thế này ._styles__title_309571057 { background-color: red; }Bộ chọn lớp mới này được tạo động và nằm trong phạm vi của thành phần cụ thể mà nó đang được nhập và sử dụng. Khi sử dụng các mô-đun CSS CSS gốc của chúng tôi hoàn toàn không được cung cấp cho trình duyệt. Thuộc tính lớp và bộ chọn .title { background-color: red; }24 đã hoàn toàn biến mấtChúng ta có thể khai báo khác. bộ chọn lớp tiêu đề trong một tệp riêng biệt và nhập trực tiếp vào thành phần khác và sẽ không có xung đột Lợi ích của việc sử dụng Mô-đun CSS
Hạn chế của việc sử dụng Mô-đun CSS
Thành phần theo kiểuthành phần được tạo kiểu là một thư viện cho phản ứng và nó cũng có thể được sử dụng bên trong phản ứng gốc. Nó mang lại những lợi ích giống như các mô-đun css cho phép kiểu dáng nằm trong phạm vi một thành phần Nhà phát triển web toàn diện học các mẹo mới mỗi ngày một lần. Người đam mê công nghệ web. Công cụ hack @theflutterwave. Sử dụng Bootstrap với React. Hướng dẫn với các ví dụNgày 23 tháng 6 năm 2022 13 phút đọc 3735 Ghi chú của biên tập viên. Bài đăng này đã được cập nhật vào ngày 23 tháng 6 năm 2022 để đảm bảo tất cả thông tin đều cập nhật và thêm một phần về cách khắc phục sự cố Bootstrap không hoạt động trong React Sự phổ biến ngày càng tăng của các ứng dụng một trang trong vài năm qua đã dẫn đến một loạt các khung JavaScript, trong đó phổ biến nhất là React. Điều này trùng hợp với sự xuất hiện của các khung CSS được thiết kế để giúp các nhà phát triển xây dựng các ứng dụng web đáp ứng Nếu React là khung JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web, thì Bootstrap là khung CSS phổ biến nhất, cung cấp năng lượng cho hàng triệu trang web trên internet. Trong hướng dẫn này, chúng ta sẽ đi qua
Nếu bạn mới bắt đầu với những framework này, tôi khuyên bạn nên đọc lướt qua tài liệu chính thức về React và Bootstrap. Tôi cũng khuyến khích bạn xem video hướng dẫn toàn diện bên dưới để tìm hiểu sâu hơn Giới thiệu sơ lược về JavaScript và CSS frameworksCó nhiều khung JavaScript bạn có thể chọn, bao gồm Angular, React, Vue. js, Ember — danh sách tiếp tục. Nhờ những tùy chọn phong phú này, không còn cần thiết phải sử dụng thư viện DOM, chẳng hạn như jQuery, để xây dựng các ứng dụng web Ngoài ra, nếu bạn là nhà phát triển giao diện người dùng, gần như chắc chắn bạn đã sử dụng hoặc ít nhất đã nghe nói về Bootstrap, Foundation và Bulma. Đây đều là các khung CSS đáp ứng (ưu tiên thiết bị di động) với các tính năng mạnh mẽ và tiện ích tích hợp Như chúng tôi đã đề cập, React và Bootstrap hiện là các khung JavaScript và CSS phổ biến nhất, tương ứng. Tiếp theo, hãy xem cách thêm Bootstrap vào React Cách thêm Bootstrap vào ReactBa cách phổ biến nhất để thêm Bootstrap vào ứng dụng React của bạn là
Hãy xem xét từng chi tiết này một cách chi tiết hơn Thêm Bootstrap vào React bằng Bootstrap CDNBootstrap CDN là cách dễ nhất để thêm Bootstrap vào ứng dụng React của bạn. Không cần cài đặt thêm hoặc tải xuống Bạn sẽ chỉ phải bao gồm một liên kết đến CDN trong phần đầu của tệp nhập ứng dụng của bạn. Trong một ứng dụng React điển hình được tạo bằng
6, ứng dụng đó sẽ nằm trong tệp
7Vì chúng tôi muốn bao gồm phiên bản ổn định hiện tại của Bootstrap, liên kết của chúng tôi sẽ trông như thế này .title { background-color: red; }1Nếu dự án của bạn cũng yêu cầu sử dụng các thành phần JavaScript đi kèm với Bootstrap, chẳng hạn như chuyển đổi phương thức, danh sách thả xuống hoặc thanh điều hướng, chúng tôi sẽ cần liên kết tệp
8, được biên dịch sẵn với Popper. jsChúng tôi có thể làm điều này bằng cách đặt thẻ
9 sau gần cuối trang đánh dấu mục nhập của chúng tôi, ngay trước khi đóng thẻ .title { background-color: red; }40.title { background-color: red; }5Sau khi liên kết CSS Bootstrap và CDN Javascript đi kèm, mã hoàn chỉnh cho tệp
7 của chúng ta sẽ như thế này
Giờ đây, bạn có thể bắt đầu sử dụng các lớp Bootstrap tích hợp sẵn và các thành phần JavaScript trong các thành phần ứng dụng React của mình Nhập Bootstrap vào React dưới dạng phụ thuộcNếu bạn đang sử dụng công cụ xây dựng hoặc gói mô-đun, chẳng hạn như .title { background-color: red; }42, thì đây sẽ là tùy chọn ưu tiên để thêm Bootstrap vào ứng dụng React của bạn. Bạn có thể dễ dàng bắt đầu cài đặt bằng cách chạy bên dưới.title { background-color: red; }4Lệnh này sẽ cài đặt phiên bản Bootstrap mới nhất. Sau khi quá trình cài đặt hoàn tất, chúng tôi có thể đưa nó vào tệp mục nhập của ứng dụng ._styles__title_309571057 { background-color: red; }0Trong trường hợp dự án được xây dựng bằng
6, dự án đó sẽ nằm trong tệp .title { background-color: red; }44. Toàn bộ nội dung của tệp sẽ trông như thế này sau khi nhập._styles__title_309571057 { background-color: red; }3Như được hiển thị trong mã ở trên, chúng tôi đã nhập cả Bootstrap CSS và tệp JavaScript được liên kết của nó. Chúng tôi cũng đã đảm bảo nhập Bootstrap trước tệp CSS chính của chúng tôi .title { background-color: red; }45 để dễ dàng thay đổi kiểu dáng mặc định của Bootstrap với tệp này như mong muốnKhi quá trình này hoàn tất, chúng ta có thể tiếp tục và bắt đầu sử dụng các lớp Bootstrap tích hợp trong các thành phần ứng dụng React của mình Cài đặt gói React Bootstrap chẳng hạn như
|
