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
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ểu
Styles 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 CSS
Tạ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 New > CSS File
Để 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 CSS
Khi 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 Include Order
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ó
- Bật/Tắt - với tùy chọn này, bạn có thể tắt biểu định kiểu để nó không áp dụng trong bất kỳ trang nào của bạn
- Hiển thị. - điều này sẽ mở một hộp thoại cho phép bạn chọn những trang nào trong thiết kế của bạn sẽ được thêm biểu định kiểu vào
Liên kết CSS bên ngoài
Bạ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 Link External CSS
. Trong hộp thoại, bạn có thể dán URL vào biểu định kiểu được lưu trữ bên ngoài và URL đó sẽ được thêm vào thiết kế của bạn
Chỉnh sửa CSS
Nhấ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 Enter
hoặc Tab
để chuyển sang quy tắc tiếp theo và Shift+Tab
để chuyển sang quy tắc trước đó. Bạn có thể nhấp vào khoảng cách giữa các quy tắc để tạo quy tắc mới và giữa các khối css để tạo khối hoặc nhận xét mới
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ọn
Nhấp vào các khối CSS trong khi giữ phím Ctrl/Shift
[Windows/Linux] hoặc Cmd/Shift
[Mac] để bắt đầu đa lựa chọn. Điều này cung cấp cho bạn các hành động nhanh chóng để áp dụng hàng loạt
Làm việc với các khối bị khóa
CSS 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ối
Nế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ối
Bạ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 Add Media Query
từ menu Tùy chọn [ba dấu chấm ở trên cùng bên phải của khối]
Truy vấn sẽ được điền trước bằng min-width
hoặc Include Order
0 tùy thuộc vào chiều rộng hiện tại của vù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 Keyframe
Hoạ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 Include Order
1 làm phần đầu của bộ chọn CSS mới
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. Include Order
2. Bạn có thể tìm hiểu thêm trên trang hoạt ảnh MDN
Biến CSS
Bootstrap 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ố Include Order
3
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