Cách thêm CSS vào Bootstrap
|
Bootstrap Studio cung cấp cho bạn một cách hoàn toàn trực quan để xây dựng các trang web, bằng cách sử dụng bảng điều khiển Giao diện và các tùy chọn thành phần. Tuy nhiên, nếu bạn cần thêm quyền kiểm soát và khả năng tùy chỉnh, bạn có thể viết mã CSS trực tiếp trong bảng Trình chỉnh sửa Show Trình chỉnh sửa CSS được tích hợp trong Bootstrap Studio sẽ quen thuộc với bất kỳ ai đã sử dụng các công cụ dành cho nhà phát triển của trình duyệt của họ. Bạn có thể chỉnh sửa mã CSS trong tab Kiểu hoặc trong các tệp CSS mà bạn tạo trong bảng Thiết kế Tab KiểuStyles là một trong hai tab không thể đóng được trong bảng Editor. Nó cung cấp cho bạn một danh sách các khối CSS trong thiết kế của bạn phù hợp với thành phần hiện được chọn. Đây là một cách thuận tiện để khám phá khối CSS nào đang ảnh hưởng đến thành phần trên tất cả các tệp của bạn và mã do ứng dụng tạo  Lưu ý rằng các kiểu do ứng dụng tạo (được gắn nhãn là "Bootstrap") bị khóa và người dùng không thể chỉnh sửa được. Bạn có thể ghi đè lên chúng bằng cách nhấp vào menu ba chấm của khối và sao chép nó vào biểu định kiểu của riêng bạn Tệp CSSTạo một tệp CSS mới thật dễ dàng. Chỉ cần nhấp chuột phải vào nhãn "Kiểu" và chọn menu Để nhập tệp CSS hiện có, chỉ cần kéo và thả tệp đó vào cửa sổ ứng dụng. Nó sẽ được phân tích cú pháp và thêm vào thiết kế của bạn Bạn có thể tạo/nhập bao nhiêu tệp tùy thích và sắp xếp chúng vào các thư mục để dễ quản lý hơn Thứ tự tệp CSSKhi làm việc với nhiều tệp CSS, sớm hay muộn bạn sẽ gặp phải tình huống cần kiểm soát thứ tự ưu tiên của tệp. Để thay đổi thứ tự áp dụng các tệp CSS, nhấp chuột phải vào nhóm Kiểu và chọn Tại đây bạn có thể sắp xếp lại các tệp khi cần và sau đó nhấp vào nút Lưu. Những thay đổi này sẽ được áp dụng cho tất cả các trang trong thiết kế của bạn Ghi chú Mặc dù nó không được hiển thị trong hộp thoại, nhưng tệp css của khung Bootstrap luôn được đưa vào đầu tiên trong trang, trước biểu định kiểu của bạn Hiển thịKhi nhấp chuột phải vào tệp CSS, bạn sẽ có một số tùy chọn để kiểm soát mức độ hiển thị của nó
Liên kết CSS bên ngoàiBạn có thể liên kết các biểu định kiểu được lưu trữ bên ngoài trong Bootstrap Studio. Chỉ cần nhấp chuột phải vào nhóm Styles và chọn Chỉnh sửa CSSNhấp đúp vào tệp CSS và tệp đó sẽ được mở để chỉnh sửa trong trình chỉnh sửa CSS của chúng tôi. Nhấp vào bộ chọn, thuộc tính css hoặc giá trị để chỉnh sửa chúng. Nhấn Hình ảnh và phông chữ mà bạn đã thêm vào bảng Thiết kế sẽ tự động được chọn và hiển thị dưới dạng đề xuất khi thích hợp. Có lịch sử hoàn tác/làm lại đầy đủ, vì vậy hãy thoải mái thử nghiệm Khi bạn nhấp vào ba dấu chấm ở trên cùng bên phải của mỗi khối CSS, bạn sẽ thấy một menu có các tùy chọn. Bạn có các thao tác cơ bản như sao chép, di chuyển và xóa, ngoài ra còn có tùy chọn thêm truy vấn phương tiện và bật/tắt khối Đa lựa chọnNhấp vào các khối CSS trong khi giữ phím Làm việc với các khối bị khóaCSS của khung Bootstrap bị khóa trong Bootstrap Studio. Điều này là cần thiết để chúng tôi có thể nâng cấp khung khi các phiên bản mới được phát hành Tuy nhiên, thật dễ dàng để sửa đổi một trong những khối bị khóa này nếu bạn cần. Chỉ cần sao chép chúng vào biểu định kiểu của bạn và ghi đè lên các kiểu Nếu bạn cần thực hiện các thay đổi toàn diện hơn đối với Bootstrap, chúng tôi khuyên bạn nên nhập Chủ đề tùy chỉnh Sao chép và sao chép các khốiNếu bạn muốn sao chép khối CSS của mình, bạn cần nhấp vào ba dấu chấm ở trên cùng bên phải của khối và chọn tùy chọn Nhân bản. Điều này sẽ tạo một bản sao chính xác của khối trong cùng một tệp Nếu bạn muốn tạo một bản sao của khối CSS hoặc di chuyển nó sang một tệp khác, hãy sử dụng các tùy chọn Copy To và Move To Sắp xếp lại các khốiBạn cũng có thể sắp xếp lại các khối CSS của mình bằng cách kéo chúng. Điều này cho phép bạn tổ chức mã của mình tốt hơn và kiểm soát thứ tự áp dụng các quy tắc của bạn Truy vấn phương tiện là một công cụ quan trọng để tạo bố cục đáp ứng. Trong Bootstrap Studio, các truy vấn phương tiện được gán trên cơ sở từng khối. Để thực hiện việc này, hãy chọn Truy vấn sẽ được điền trước bằng TIỀN BOA Nếu bạn thấy trình soạn thảo CSS của chúng tôi quá hạn chế, bạn luôn có thể chuyển sang viết mã SASS Viết Hoạt hình KeyframeHoạt ảnh khung hình chính là một cách mạnh mẽ để tạo hoạt ảnh mượt mà trên web. Bạn có thể sử dụng chúng ngoài chức năng hoạt ảnh thông thường trong Bootstrap Studio Để thêm khối hoạt hình khung hình chính vào tệp CSS của bạn, chỉ cần nhập Sau khi bạn đã xác định nó, bạn có thể áp dụng hoạt ảnh của mình cho một thành phần bằng quy tắc css hoạt ảnh. Biến CSSBootstrap Studio có hỗ trợ tích hợp cho các thuộc tính tùy chỉnh CSS (mở cửa sổ mới) (còn được gọi là biến). Chúng cung cấp cho bạn một cách dễ dàng để sử dụng lại một màu cụ thể trong suốt thiết kế của bạn và thay đổi nó từ một vị trí trung tâm Khung Bootstrap sử dụng các thuộc tính tùy chỉnh chủ yếu để tùy chỉnh màu sắc và phông chữ. Dưới đây, bạn có thể thấy một số biến có sẵn cho Bootstrap 5, mỗi biến bắt đầu bằng tiền tố Xác định các thuộc tính tùy chỉnh của riêng bạn hoặc ghi đè các thuộc tính tích hợp rất đơn giản. Bạn có thể làm điều đó bằng cách viết mã như sau vào một trong các tệp css của mình Để sử dụng các biến CSS, chỉ cần đưa chúng vào những nơi bạn cần giá trị đó. Bằng cách này, nếu bạn chọn thực hiện thay đổi trong tương lai, nó sẽ tự động được áp dụng ở mọi nơi Bạn cũng có thể tìm thấy các tham chiếu hữu ích cho các biến đã xác định trong tất cả các tùy chọn liên quan đến màu sắc trong bảng Giao diện Bạn có thể tạo kiểu Bootstrap bằng CSS không?Nếu bạn là người mới bắt đầu, bạn có thể tùy chỉnh Bootstrap bằng biểu định kiểu CSS tùy chỉnh . Tính đặc hiệu của CSS rất quan trọng ở đây. Bạn viết CSS tùy chỉnh, với độ đặc hiệu tương tự hoặc cao hơn và liên kết tới nó trong phần đầu của chỉ mục của bạn. html sau dòng liên kết đến CSS Bootstrap gốc.
Bạn nên đặt liên kết Bootstrap CSS ở đâu?CSS. Sao chép-dán biểu định kiểu của bạn trước tất cả các biểu định kiểu khác để tải CSS của chúng tôi. |
