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?
CSS
Sao chép-dán biểu định kiểu
60 vào trước tất cả các biểu định kiểu khác của bạn để tải CSS của chúng tôi
JS
Nhiề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
60Chia
Nế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ô-đun
Nếu bạn sử dụng
60Đố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ọng
Bootstrap 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 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 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
63 từ
64 thành
0. Điều này đảm bảo rằng
1 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
.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
2 và
3—tất cả sẽ kế thừa
63 đã chỉ định cho
5 đó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
0Để 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
66 và thêm
67 hoặc
68 bên trong 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
18 /
19 có chứa Popper. Popper không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng mặc dù không yêu cầu định vị độngkhả năng tiếp cận
Tiêu chuẩn WAI ARIA xác định một tiện ích
30 thực tế, nhưng điều này dành riêng cho các menu giống như ứng dụng kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, mục menu hộp kiểm, mục menu nút radio, nhóm nút radio và menu phụ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
31 và
32 nào cần thiết cho các menu ARIA thực. Các tác giả sẽ phải tự đưa vào các thuộc tính cụ thể hơn nàyTuy 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ử
33 riêng lẻ bằng các phím con trỏ và đóng menu bằng phím ESCví 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ố
36hoặc để phù hợp hơn với nhu cầu tiềm năng của bạn. Các ví dụ hiển thị ở đây sử dụng ngữ nghĩa- các yếu tố thích hợp, nhưng đánh dấu tùy chỉnh được hỗ trợ
nút đơn
Bất kỳ
37 đơn lẻ nào cũng có thể được chuyển đổi thành nút chuyển đổi thả xuống với một số thay đổi đánh dấu. Đây là cách bạn có thể làm cho chúng hoạt động với một trong haiyếu tố
...
1
38
39Và với các yếu tố
36
...
5Phầ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
...
6nút tách
Tươ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
...
71 để có khoảng cách thích hợp xung quanh dấu mũ thả xuốngChúng tôi sử dụng lớp bổ sung này để giảm 25%
...
72 nằm ngang ở hai bên của dấu mũ và loại bỏ
...
73 được thêm vào cho các nút thả xuống thông thường. Những thay đổi bổ sung đó giữ cho dấu nháy ở giữa nút tách và cung cấp vùng nhấn có kích thước phù hợp hơn bên cạnh nút chính
1đị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
3Nút tách nhỏ Toggle Dropdown
...
7thả xuống tối
Chọ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
...
74 vào một
...
75 hiện có. Không cần thay đổi đối với các mục thả xuống
5Và đưa nó vào sử dụng trong thanh điều hướng
6Hướng
RTL
Chỉ đường được nhân đôi khi sử dụng Bootstrap trong RTL, có nghĩa là
...
76 sẽ xuất hiện ở phía bên phảicăn giữa
Đặt menu thả xuống ở giữa bên dưới nút chuyển đổi với
...
77 trên phần tử gốc
9dropup
Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm
...
78 vào phần tử gốcTách dropup Chuyển đổi thả xuống
1Trung tâm dropup
Đặt menu thả xuống ở giữa phía trên chuyển đổi với
...
79 trên phần tử gốc
...
50thả xuống
Kích hoạt menu thả xuống ở bên phải của phần tử bằng cách thêm
50 vào phần tử gốcTách dropend Chuyển đổi Dropend
...
51Khởi động lại
Kích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm
...
76 vào phần tử chínhChuyển đổi Dropstart Tách dropstart
...
52Bạn có thể sử dụng các phần tử
36or làm mục thả xuống
...
1
53
54Bạn cũng có thể tạo các mục thả xuống không tương tác với
55. Thoải mái tạo kiểu hơn nữa với các tiện ích văn bản hoặc CSS tùy chỉnh
...
54Tích cực
Thêm
56 vào các mục trong danh sách thả xuống để định kiểu chúng là hoạt động. Để chuyển trạng thái hoạt động sang các công nghệ hỗ trợ, hãy sử dụng thuộc tính
57 — sử dụng giá trị
58 cho trang hiện tại hoặc
59 cho mục hiện tại trong một bộ
...
55Vô hiệu hóa
Thêm
60 vào các mục trong danh sách thả xuống để định kiểu chúng là bị vô hiệu hóa
...
56Theo 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
61 định hướng, nhưng bạn cũng có thể kiểm soát chúng bằng các lớp sửa đổi bổ sungThêm
62 vào một
...
75 để căn phải menu thả xuống. Chỉ đường được nhân đôi khi sử dụng Bootstrap trong RTL, nghĩa là
62 sẽ xuất hiện ở phía bên tráiĐứ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
...
57căn chỉnh đáp ứng
Nế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
65 và sử dụng các lớp biến thể đáp ứngĐể 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
66Căn trái nhưng căn phải khi màn hình lớn
...
58Để 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
62 và
68Căn phải nhưng căn trái khi màn hình lớn
...
59Lưu ý rằng bạn không cần thêm thuộc tính
65 vào các nút thả xuống trong thanh điều hướng vì Popper không được sử dụng trong thanh điều hướngtùy chọn căn chỉnh
Sử 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
...
60Thêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào
...
61dải phân cách
Tách các nhóm mục menu có liên quan bằng một dải phân cách
...
62Chữ
Đặ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
...
63Cá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
...
64
...
65tùy chọn thả xuống
Sử dụng
90 hoặc
91 để thay đổi vị trí của danh sách thả xuống
...
66Tự động đóng hành vi
Theo 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
92 để thay đổi hành vi này của trình đơn thả xuống
...
67CSS
Biế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
...
75 để tùy chỉnh thời gian thực nâng cao. Các giá trị cho các biến CSS được đặt thông qua Sass, do đó tùy chỉnh Sass cũng vẫn được hỗ trợ
...
68Tùy chỉnh thông qua các biến CSS có thể được nhìn thấy trên lớp
...
74 nơi chúng tôi ghi đè các giá trị cụ thể mà không cần thêm các bộ chọn CSS trùng lặp
...
69biến sass
Biến cho tất cả danh sách thả xuống
10Các biến cho trình đơn thả xuống tối
11Cá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
12hỗn hợp
Mixin được sử dụng để tạo dấu mũ dựa trên CSS và có thể tìm thấy trong
95
13Cách sử dụng
Thô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
96 trên lớp cha mẹ
...
75. Thuộc tính
98 được dựa vào để đóng menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng thuộc tính nàyTrê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ý
99 trống vào phần tử con trực tiếp của phần tử. Bản hack xấu xí được thừa nhận này là cần thiết để giải quyết một vấn đề khó hiểu trong ủy quyền sự kiện của iOS, điều này sẽ ngăn một lần nhấn ở bất kỳ đâu bên ngoài danh sách thả xuống kích hoạt mã đóng danh sách thả xuống. Sau khi đóng trình đơn thả xuống, các trình xử lý
99 trống bổ sung này sẽ bị xóaThông qua thuộc tính dữ liệu
Thêm
98 vào một liên kết hoặc nút để chuyển đổi danh sách thả xuống
14Qua JavaScript
Gọi danh sách thả xuống qua JavaScript
15
98 vẫn được yêu cầuBất kể bạn gọi trình đơn thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, thì _____398 luôn được yêu cầu phải có mặt trên phần tử kích hoạt của trình đơn thả xuống
Tùy chọn
Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào
14, như trong
15. Đảm bảo thay đổi kiểu chữ hoa chữ thường của tên tùy chọn từ “camelCase” thành “kebab-case” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ: sử dụng
16 thay vì
17Kể từ Bootstrap 5. 2. 0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệm
18 có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có các thuộc tính
19 và
...
500, giá trị cuối cùng của
...
501 sẽ là
...
502 và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị đã cho trên
18. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như
...
504NameTypeDefaultDescription____392boolean, string
59Định cấu hình hành vi đóng tự động của trình đơn thả xuống
59 - danh sách thả xuống sẽ được đóng bằng cách nhấp vào bên ngoài hoặc bên trong menu thả xuống
508 - trình đơn thả xuống sẽ được đóng lại bằng cách nhấp vào nút chuyển đổi và gọi phương thức...
509 hoặc...
510 theo cách thủ công. [Cũng sẽ không bị đóng khi nhấn phím esc]...
511 - danh sách thả xuống sẽ được đóng [chỉ] bằng cách nhấp vào bên trong menu thả xuống...
512 - danh sách thả xuống sẽ được đóng [chỉ] bằng cách nhấp vào bên ngoài menu thả xuống...
...
513chuỗi, phần tử
...
514Ranh giới hạn chế tràn của menu thả xuống [chỉ áp dụng cho công cụ sửa đổi ngăn chặn tràn của Popper]. Theo mặc định, đó là
...
515 và có thể chấp nhận tham chiếu HTMLElement [chỉ qua JavaScript]. Để biết thêm thông tin, hãy tham khảo tài liệu detectOverflow của Popper.
...
516string
...
517Theo mặc định, chúng tôi sử dụng Popper để định vị động. Vô hiệu hóa điều này với
...
518.
...
519mảng, chuỗi, hàm
...
520Độ lệch của trình đơn thả xuống so với mục tiêu của nó. Bạn có thể chuyển một chuỗi trong thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như.
...
521. Khi một hàm được sử dụng để xác định độ lệch, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper rects làm đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được chuyển làm đối số thứ hai. Hàm phải trả về một mảng có hai số. trượt, khoảng cách. Để biết thêm thông tin, hãy tham khảo tài liệu bù đắp của Popper.
...
522 null, object, function
...
523Để thay đổi cấu hình Popper mặc định của Bootstrap, hãy xem cấu hình của Popper. Khi một chức năng được sử dụng để tạo cấu hình Popper, nó được gọi với một đối tượng chứa cấu hình Popper mặc định của Bootstrap. Nó giúp bạn sử dụng và hợp nhất cấu hình mặc định với cấu hình của riêng bạn. Hàm phải trả về một đối tượng cấu hình cho Popper.
...
524chuỗi, phần tử, đối tượng
...
525Phần tử tham chiếu của menu thả xuống. Chấp nhận các giá trị của
...
525,
...
527, tham chiếu HTMLElement hoặc đối tượng cung cấp
...
528. Để biết thêm thông tin, hãy tham khảo tài liệu về hàm tạo của Popper và tài liệu về phần tử ảoSử dụng chức năng với
...
522
...
16phương pháp
MethodDescription
...
530Destroys dropdown của một phần tử. [Xóa dữ liệu được lưu trữ trên phần tử DOM] ____2531Phương thức tĩnh cho phép bạn lấy phiên bản thả xuống được liên kết với phần tử DOM, bạn có thể sử dụng nó như thế này.
...
532.
...
533Phương thức tĩnh trả về một phiên bản thả xuống được liên kết với một phần tử DOM hoặc tạo một phần tử mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này.
...
534.
...
509Ẩn trình đơn thả xuống của thanh điều hướng hoặc điều hướng theo thẻ nhất định.
...
536Hiển thị menu thả xuống của một thanh điều hướng nhất định hoặc điều hướng theo thẻ.
...
510Chuyển đổi menu thả xuống của một thanh điều hướng nhất định hoặc điều hướng theo thẻ.
...
538Cập nhật vị trí của phần tử thả xuốngSự kiện
Tất cả các sự kiện thả xuống được kích hoạt ở phần tử chuyển đổi và sau đó nổi lên. Vì vậy, bạn cũng có thể thêm trình lắng nghe sự kiện vào phần tử cha của
...
75. Sự kiện
...
540 và
...
541 có thuộc tính
...
542 [chỉ khi loại Sự kiện ban đầu là
...
543] chứa Đối tượng Sự kiện cho sự kiện nhấp chuộtLoại sự kiệnMô tả
...
540Cháy ngay lập tức khi phương thức cá thể
...
509 được gọi.
...
541Được kích hoạt khi trình đơn thả xuống đã hoàn tất bị ẩn khỏi người dùng và quá trình chuyển đổi CSS đã hoàn tất.
...
547Cháy ngay lập tức khi phương thức đối tượng
...
536 được gọi.
...
549Được kích hoạt khi trình đơn thả xuống hiển thị với người dùng và quá trình chuyển đổi CSS đã hoàn tất