Thay đổi css không được phản ánh

Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này

1. Tạo một tệp

   4 mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻ
   5 để có hành vi phản hồi phù hợp trong thiết bị di động

   
   
     
       
       
       Bootstrap demo
     
     
       Hello, world!
     
   
   

2. Bao gồm CSS và JS của Bootstrap. Đặt thẻ

   5 vào CSS của chúng tôi và thẻ
   5

   Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper

3. Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi

Để tham khảo, đây là các liên kết CDN chính của chúng tôi

Mô tảURLCSS

8JS

0

Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung

Bước tiếp theo

thành phần JS

Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . 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

Hiển thị các thành phần yêu cầu JavaScript

• Cảnh báo sa thải
• Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
• Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
• Thu gọn để chuyển đổi mức độ hiển thị của nội dung
• Danh sách thả xuống để hiển thị và định vị (cũng yêu cầu Popper)
• Các phương thức để hiển thị, định vị và hành vi cuộn
• Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
• Điều hướng với plugin Tab để chuyển đổi bảng nội dung
• Offcanvases để hiển thị, định vị và hành vi cuộn
• Scrollspy cho hành vi cuộn và cập nhật điều hướng
• Chúc mừng để hiển thị và loại bỏ
• Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Popper)

Toàn cầu quan trọng

Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến 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 HTML5

Bootstrap 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 ngộ nghĩnh và không đầy đủ

  ...

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

1 từ

2 thành

3. Điều này đảm bảo rằng

4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một 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 Google

Trong 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

.selector-for-some-widget {
  box-sizing: content-box;
}

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

5 và

6—tất cả sẽ kế thừa

1 đã chỉ định cho

8 đó

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 cài đặt 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

Cascading Style Sheets (CSS) là một cách tiêu chuẩn công nghiệp để tạo kiểu trang web. Nội dung của một trang được hiển thị bằng HTML và giao diện của trang được xác định bởi các tệp CSS. Bạn có thể tải lên tệp văn bản CSS hoặc chỉ cần nhập biểu định kiểu và áp dụng tệp đó vào một không gian hoặc thậm chí toàn bộ trang Confluence

Ghi chú. Theo mặc định, chỉ quản trị viên hệ thống mới có thể chỉnh sửa CSS cho một không gian hoặc cho trang web. Để cho phép bất kỳ người dùng nào có quyền Quản trị viên không gian chỉnh sửa CSS cho không gian, hãy chuyển đến

 > Cấu hình chung  > Cấu hình bảo mật rồi chọn Biểu định kiểu tùy chỉnh cho không gian.

Tạo các kiểu CSS hoạt động trơn tru trên các trình duyệt khác nhau là một nhiệm vụ phức tạp đối với các trang web cơ bản và khá khó khăn khi tùy chỉnh các ứng dụng web như Confluence. Điều quan trọng là phải kiểm tra từng thay đổi mà bạn thực hiện và đảm bảo nó hoạt động như mong đợi trong tất cả các khu vực của Confluence – ví dụ: trên bảng điều khiển Confluence cũng như trên các trang thông thường

Để giúp bạn bắt đầu, chúng tôi đã biên soạn phần giới thiệu này, hướng dẫn tạo kiểu cơ bản

Trên trang này

trang liên quan

• Hướng dẫn tạo kiểu cơ bản
• Phông chữ tạo kiểu trong Confluence

Cân nhắc khi sử dụng CSS tùy chỉnh

Kiến thức CSS là bắt buộc

Nếu bạn chưa quen với CSS, hãy xem các liên kết trong bên dưới. Bạn nên dành chút thời gian để trở nên tự tin với Cascading Style Sheets trước khi bắt đầu chỉnh sửa biểu định kiểu Confluence của mình

Bảo vệ

CSS tùy chỉnh có thể được sử dụng để đưa tập lệnh vào một trang, mở ra nguy cơ tấn công kịch bản chéo trang (XSS). Với tính năng này được bật, quản trị viên không gian có thể tải lên các kiểu đánh cắp thông tin đăng nhập của người dùng khác, lừa trình duyệt của họ thực hiện các hành động trên wiki mà họ không biết hoặc thậm chí có được đặc quyền quản trị toàn cầu. Như vậy, tính năng này bị tắt theo mặc định. Quản trị viên hợp lưu chỉ nên bật CSS tùy chỉnh nếu họ cảm thấy thoải mái với những rủi ro được liệt kê trong đoạn này

mở rộng quy mô

Mỗi trang cần chia tỷ lệ. Tùy thuộc vào độ phân giải màn hình của người dùng, nội dung sẽ hiển thị thông minh. Thiết kế của bạn cần xuống cấp một cách duyên dáng. Hãy thử thay đổi kích thước từng trang tồn tại trong Confluence. Có khá nhiều trang trong phần không gian duyệt, như bản nháp, nhãn, phân cấp trang, v.v. Phong cách của bạn phải phù hợp ở mọi nơi, không chỉ trong trang đầu tiên mà bạn tình cờ xem

Tính năng không thể bị vô hiệu hóa

Có thể dễ dàng tắt một số liên kết, tiêu đề hoặc thậm chí các mục menu bằng cách chỉ cần đặt kiểu của chúng thành 'ẩn'. Điều này có thể giúp bạn triển khai Confluence cho những người dùng có thể chưa hiểu rõ lắm về Wiki. Giao diện người dùng càng đơn giản, họ càng dễ sử dụng. Tuy nhiên, hãy nhớ rằng việc xóa liên kết đến một phần của ứng dụng không có nghĩa là chức năng này không khả dụng. Mọi người dùng vẫn có thể thay đổi phong cách của họ từ trong trình duyệt của họ hoặc truy cập trực tiếp vào URL. Đừng dựa vào CSS để vô hiệu hóa các phần của Confluence

Các tính năng không nên bị vô hiệu hóa

Người dùng quen thuộc với Confluence sẽ mong muốn tìm thấy các điều khiển tương tự mà họ đã quen thuộc. Không nên xóa các nút hoặc điều khiển khỏi giao diện vì nó có thể khiến người dùng của bạn thất vọng và khiến họ phá vỡ thiết kế của bạn bằng cách sử dụng quyền truy cập URL trực tiếp, như đã đề cập ở trên

CSS tùy chỉnh không áp dụng cho màn hình Quản trị viên

Mọi kiểu CSS được áp dụng cho trang web của bạn sẽ không được áp dụng cho Bảng điều khiển quản trị. Điều này nhằm đảm bảo các thay đổi đối với CSS không ngăn quản trị viên truy cập các chức năng của Quản trị viên trong tương lai.  

Khả năng tương thích của phiên bản Confluence

Lưu ý về mọi kế hoạch nâng cấp phiên bản Confluence của bạn. Các phiên bản tương lai của Confluence có thể không tương thích với CSS tùy chỉnh của bạn — điều này có thể khiến CSS của bạn bị hỏng, yêu cầu bảo trì khi Confluence được nâng cấp. Hỏi quản trị viên Confluence của bạn để biết thêm thông tin

Thử nghiệm trên các trình duyệt web khác nhau

Theo quy định, bạn nên kiểm tra các sửa đổi của mình trên các trình duyệt web khác nhau được Confluence hỗ trợ.  

Tùy chỉnh CSS không được hỗ trợ

Vì việc tạo CSS tùy chỉnh có khả năng vô hạn nên Atlassian sẽ không hỗ trợ các sự cố gây ra bởi hoặc liên quan đến việc tùy chỉnh CSS