Bootstrap W3Schools
|
Tì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? Show
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ể, chúng yêu cầu plugin JavaScript và Popper của riêng chúng tôi. Đặt một trong những thứ sau đây ChiaNếu bạn quyết định sử dụng giải pháp tập lệnh riêng biệt, thì Popper phải được ưu tiên trước (nếu bạn đang sử dụng chú giải công cụ hoặc cửa sổ bật lên), sau đó là plugin JavaScript của chúng tôi mô-đunNếu bạn sử dụng Đối với các bước tiếp theo, hãy 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 toàn cầu 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 đế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 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 đang hoạt động trong mẫu dành cho người mới bắt đầu 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 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 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 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 Một thành phần nhẹ, linh hoạt có thể tùy chọn mở rộng toàn bộ khung nhìn để hiển thị các thông điệp tiếp thị chính trên trang web của bạn Đây là một đơn vị anh hùng đơn giản, một thành phần kiểu jumbotron đơn giản để kêu gọi thêm sự chú ý đến nội dung hoặc thông tin nổi bật Nó sử dụng các lớp tiện ích cho kiểu chữ và khoảng cách để sắp xếp nội dung trong vùng chứa lớn hơn Tìm hiểu thêm Để làm cho jumbotron có chiều rộng đầy đủ và không có các góc tròn, hãy thêm lớp công cụ sửa đổi Danh sách thả xuống có thể chuyển đổi, lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa. Chúng được thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được bật bằng cách nhấp chuột, không phải bằng cách di chuột; Danh sách thả xuống được xây dựng trên thư viện của bên thứ ba, Popper, cung cấp tính năng định vị động và phát hiện chế độ xem. Hãy chắc chắn bao gồm popper. tối thiểu. js trước JavaScript của Bootstrap hoặc sử dụng khả năng tiếp cậnTiêu chuẩn WAI ARIA xác định một tiện ích Mặt khác, trình đơn thả xuống của Bootstrap được thiết kế chung chung và có thể áp dụng cho nhiều tình huống và cấu trúc đánh dấu. Chẳng hạn, có thể tạo danh sách thả xuống chứa đầu vào bổ sung và điều khiển biểu mẫu, chẳng hạn như trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi (cũng như không tự động thêm) bất kỳ thuộc tính Tuy nhiên, Bootstrap có thêm hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các phần tử ví dụBọc nút chuyển đổi của menu thả xuống (nút hoặc liên kết của bạn) và menu thả xuống trong ________ 134 hoặc một phần tử khác khai báo ________ 135. Danh sách thả xuống có thể được kích hoạt từ các yếu tố
nút đơnBất kỳ Và với các yếu tố Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào nút táchTương tự, tạo danh sách thả xuống của nút tách với cách đánh dấu gần giống như danh sách thả xuống của nút đơn, nhưng có thêm Chúng tôi sử dụng lớp bổ sung này để giảm 25% định cỡMenu thả xuống nút hoạt động với các nút ở mọi kích cỡ, bao gồm các nút thả xuống mặc định và chia nhỏ Nút tách lớn Toggle Dropdown Nút tách nhỏ Toggle Dropdown thả xuống tốiChọn tham gia menu thả xuống tối hơn để phù hợp với thanh điều hướng tối hoặc kiểu tùy chỉnh bằng cách thêm Và đưa nó vào sử dụng trong thanh điều hướng HướngRTLChỉ đường được nhân đôi khi sử dụng Bootstrap trong RTL, có nghĩa là căn giữaĐặt menu thả xuống ở giữa bên dưới nút chuyển đổi với dropupKích hoạt menu thả xuống phía trên các phần tử bằng cách thêm Tách dropup Chuyển đổi thả xuống Trung tâm dropupĐặt menu thả xuống ở giữa phía trên chuyển đổi với thả xuốngKích hoạt menu thả xuống ở bên phải của phần tử bằng cách thêm Tách dropend Chuyển đổi Dropend Khởi động lạiKích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm Chuyển đổi Dropstart Tách dropstart Bạn có thể sử dụng các phần tử Bạn cũng có thể tạo các mục thả xuống không tương tác với Tích cựcThêm Vô hiệu hóaThêm Theo mặc định, menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của menu chính. Bạn có thể thay đổi điều này bằng các lớp Thêm Đứng lên. Danh sách thả xuống được định vị nhờ Popper trừ khi chúng được chứa trong thanh điều hướng Ví dụ về menu căn phải căn chỉnh đáp ứngNếu bạn muốn sử dụng căn chỉnh đáp ứng, hãy tắt tính năng định vị động bằng cách thêm thuộc tính Để căn chỉnh menu thả xuống bên phải với điểm dừng đã cho hoặc lớn hơn, hãy thêm Căn trái nhưng căn phải khi màn hình lớn Để căn trái menu thả xuống với điểm dừng đã cho hoặc lớn hơn, hãy thêm Căn phải nhưng căn trái khi màn hình lớn Lưu ý rằng bạn không cần thêm thuộc tính tùy chọn căn chỉnhSử dụng hầu hết các tùy chọn được hiển thị ở trên, đây là bản demo bồn rửa nhà bếp nhỏ về các tùy chọn căn chỉnh thả xuống khác nhau ở một nơi Căn trái, căn phải lg Căn phải, căn trái lg Thêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào dải phân cáchTách các nhóm mục menu có liên quan bằng một dải phân cách ChữĐặt bất kỳ văn bản dạng tự do nào trong menu thả xuống có văn bản và sử dụng các tiện ích giãn cách. Lưu ý rằng bạn có thể sẽ cần các kiểu định cỡ bổ sung để hạn chế chiều rộng của menu Các hình thứcĐặt một biểu mẫu trong menu thả xuống hoặc biến nó thành một menu thả xuống và sử dụng các tiện ích lề hoặc đệm để cung cấp cho nó khoảng trống mà bạn yêu cầu tùy chọn thả xuốngSử dụng Tự động đóng hành viTheo mặc định, menu thả xuống bị đóng khi nhấp vào bên trong hoặc bên ngoài menu thả xuống. Bạn có thể sử dụng tùy chọn CSSBiếnĐã thêm vào v5. 2. 0Là một phần trong cách tiếp cận các biến CSS đang phát triển của Bootstrap, trình đơn thả xuống hiện sử dụng các biến CSS cục bộ trên Tùy chỉnh thông qua các biến CSS có thể được nhìn thấy trên lớp biến sassBiến cho tất cả danh sách thả xuống Các biến cho trình đơn thả xuống tối Các biến cho dấu mũ dựa trên CSS biểu thị tính tương tác của trình đơn thả xuống hỗn hợpMixin được sử dụng để tạo dấu mũ dựa trên CSS và có thể tìm thấy trong Cách sử dụngThông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi lớp Trên các thiết bị hỗ trợ cảm ứng, việc mở menu thả xuống sẽ thêm các trình xử lý Thông qua thuộc tính dữ liệuThêm Qua JavaScriptGọi danh sách thả xuống qua JavaScript
|
