Sử dụng bootstrap và css cùng nhau
Trong bài viết này, chúng ta sẽ biết cách sử dụng Bootstrap với Tailwind CSS, tại một thời điểm, trong cùng một mã. Chúng tôi có thể sử dụng cả hai khung CSS cùng nhau nhưng điều đó không được khuyến khích. Bởi vì một số lớp sẽ mâu thuẫn với nhau như “container”, “clearfix”, v.v. Như chúng ta biết rằng Bootstrap là một khung CSS đã biết. Mặc dù khung CSS Tailwind cũng có thể được sử dụng song song so với Bootstrap. Tailwind CSS về cơ bản là một khung CSS ưu tiên tiện ích hỗ trợ xây dựng nhanh chóng các giao diện người dùng tùy chỉnh. Vì vậy, trong lĩnh vực phát triển, nó quen thuộc với Tailwind hơn là Bootstrap. Có sự khác biệt đáng kể trong Tailwind CSS so với Bootstrap Show Giả sử có một trang web dựng sẵn mà các nhà phát triển cũ đã sử dụng Bootstrap và các nhà phát triển mới muốn sử dụng Tailwind. Trong trường hợp đó, nhà phát triển mới phải cẩn thận với các lớp Bootstrap đã sử dụng, trong đó các lớp không được mâu thuẫn với nhau. Chúng tôi sẽ sử dụng các liên kết CDN bên dưới trong ví dụ mã để sử dụng các lớp CSS Bootstrap & Tailwind hiện hành khác nhau và sử dụng chúng trên một trang Liên kết CDN Bootstrap Liên kết CDN CSS Tailwind Thí dụ. Trong ví dụ này, chúng tôi sẽ sử dụng Bootstrap để căn chỉnh nội dung và đối với văn bản và màu nền, chúng tôi sẽ sử dụng Tailwind CSS. Vì vậy, cả hai khuôn khổ sẽ được áp dụng Bắt đầu với Bootstrap, khuôn khổ phổ biến nhất trên thế giới để xây dựng các trang web đáp ứng, ưu tiên thiết bị di động, với jsDelivr và một trang bắt đầu mẫu Bắt đầu nhanhTìm cách nhanh chóng thêm Bootstrap vào dự án của bạn? . Sử dụng trình quản lý gói hoặc cần tải xuống các tệp nguồn? CSSSao chép-dán biểu định kiểu
JSNhiều thành phần của chúng tôi yêu cầu sử dụng JavaScript để hoạt động. Cụ thể, họ yêu cầu jQuery, Popper. js và các plugin JavaScript của riêng chúng tôi. Đặt sau Tò mò không biết thành phần nào yêu cầu jQuery, JS và Popper của chúng tôi một cách rõ ràng. js? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu
Mẫu dành cho người mới bắt đầuĐảm bảo các trang của bạn được thiết lập với các tiêu chuẩn phát triển và thiết kế mới nhất. Điều đó có nghĩa là sử dụng loại tài liệu HTML5 và bao gồm thẻ meta chế độ xem cho các hành vi phản hồi phù hợp. Đặt tất cả lại với nhau và các trang của bạn sẽ trông như thế này
Đó là tất cả những gì bạn cần cho các yêu cầu trang tổng thể. Truy cập tài liệu Bố cục hoặc các ví dụ chính thức của chúng tôi để bắt đầu bố trí nội dung và thành phần trang web của bạn Toàn cầu quan trọngBootstrap sử dụng một số kiểu và cài đặt chung quan trọng mà bạn cần lưu ý khi sử dụng nó, tất cả chúng hầu như chỉ hướng tới việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào loại tài liệu HTML5Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng không hoàn chỉnh vui nhộn, nhưng việc bao gồm nó sẽ không gây ra bất kỳ trục trặc đáng kể nào
Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
Bạn có thể xem một ví dụ về điều này trong thực tế kích thước hộpĐể định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu 0 thành 1. Điều này đảm bảo rằng 2 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của GoogleTrong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua 3 và 4—tất cả sẽ kế thừa box-sizing đã chỉ định cho 6 đóTìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS khởi động lạiĐể cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại có chủ ý hơn một chút cho các thành phần HTML phổ biến Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này Tôi có thể sử dụng Bootstrap và CSS cùng nhau không?Để sử dụng Bootstrap CSS, bạn cần tích hợp nó vào môi trường phát triển của mình . Để làm điều đó, bạn chỉ cần tạo một thư mục trên máy tính của mình. Trong thư mục đó, hãy lưu các tệp CSS và JS đã biên dịch của bạn và một tệp HTML mới nơi bạn sẽ tải Bootstrap.
Khi nào tôi nên sử dụng Bootstrap và khi nào nên sử dụng CSS?CSS là ngôn ngữ tạo kiểu trong khi Bootstrap là khung CSS . Giống như cách jQuery là một khung của JavaScript. Bootstrap có thể dễ sử dụng hơn vì nó có một hệ thống lưới toàn diện với nhiều yếu tố đã được xây dựng sẵn để tiết kiệm thời gian và công sức cho mọi người sử dụng thay vì viết mã của riêng bạn. |