Bootstrap tạo nút có cùng kích thước
|
Các nút phản hồi được xây dựng với Bootstrap 5. Nhiều lớp kiểu nút được xác định trước. liên kết nút, phác thảo, nút tròn, xã hội, nổi, cố định và hơn thế nữa
Show
Sử dụng các kiểu nút tùy chỉnh MDB cho các hành động trong biểu mẫu, hộp thoại, v.v. với sự hỗ trợ cho nhiều kích cỡ, trạng thái, v.v. Ghi chú. Đọc tab API để tìm tất cả các tùy chọn khả dụng và tùy chỉnh nâng cao Video hướng dẫn  Ví dụ cơ bảnSử dụng kiểu nút mặc định để biểu thị một hành động hoặc liên kết trong trang web của bạn
Vô hiệu hóa gói văn bảnNếu bạn không muốn văn bản của nút ngắt dòng, bạn có thể thêm lớp 6 vào nút. Trong Sass, bạn có thể đặt
7 để tắt gói văn bản cho mỗi nút
Hệ thống cấp bậcCác nút, là một trong những thành phần giao diện người dùng chính, phải có hệ thống phân cấp riêng. Điều này có nghĩa là người dùng có thể dễ dàng xác định nút nào là quan trọng nhất (nút chính), nút nào ít quan trọng hơn (nút phụ) và nút nào trình bày thông tin hoàn toàn bổ sung (nút thứ ba) Các yếu tố có nền và bóng mạnh mẽ, đầy màu sắc thu hút sự chú ý nhiều nhất, đó là lý do tại sao nút chính được tạo theo cách này Nền tinh tế không có bóng sẽ kém hấp dẫn hơn, vì vậy nó rất phù hợp cho nút phụ Việc thiếu nền và bóng làm cho phần tử ít được nhìn thấy nhất. Các tính năng này đặc trưng cho nút cấp ba Ghi chú. Nút cấp ba có thể yêu cầu thêm lề. Nếu không có thêm lề, cạnh nút sẽ phẳng với các phần tử liền kề (đôi khi là kết quả mong muốn). Nếu bạn cần ký quỹ - chỉ cần thêm các lớp tiện ích ký quỹ như 8
theo ngữ cảnhMDB bao gồm một số kiểu nút được xác định trước, mỗi kiểu phục vụ mục đích ngữ nghĩa riêng
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ 9
Trung tínhCác nút trung tính cung cấp thêm màu sáng và tối
liên kếtNút liên kết tương tự như nút cấp ba (và thường được sử dụng thay thế). Sự khác biệt là nút liên kết có nền khi di chuột và cũng có phần đệm mặc định ________số 8_______ Đề cươngCần một nút bấm, nhưng không cần màu nền nặng nề mà chúng mang lại? Trong các nút phác thảo, chúng tôi khuyên bạn nên thêm 1 để thay đổi màu của hiệu ứng gợn sóng. Màu sáng mặc định của gợn sóng (được áp dụng tự động cho mọi nút) có thể không hiển thị rõ trong trường hợp các nút sáng và đường viền
Để tìm hiểu thêm về hiệu ứng gợn sóng và tất cả các tùy chọn khả dụng, hãy xem Ripple Docs
Một số kiểu nút sử dụng màu nền trước tương đối sáng và chỉ nên được sử dụng trên nền tối để có đủ độ tương phản Làm trònThêm lớp 2 để làm tròn nút
đường viền trònBạn có thể sử dụng đồng thời 0 và
2 để tạo đường viền và làm tròn nút cùng một lúc
NổiSử dụng lớp 5 để tạo nút hình tròn
Để làm cho nó hoạt động bình thường, bạn phải đặt một biểu tượng bên trong. Các văn bản sẽ không phù hợp trong. Bạn có thể tìm thấy hàng trăm biểu tượng có sẵn trong tài liệu biểu tượng của chúng tôi
Bạn có thể áp dụng gần như tất cả các lớp và thuộc tính giống nhau cho các nút nổi cũng như cho các nút thông thường - màu sắc, gợn sóng, kích thước, đường viền, v.v.
nút cố địnhSử dụng lớp 6 để tạo một nút cố định với danh sách các tùy chọn có sẵn hiển thị khi di chuột hoặc nhấp chuột
Xem ví dụ trực tiếp về nút cố định ở góc dưới cùng bên phải của trang này Ghi chú. Có sẵn các phương pháp 7/
8 để mở và đóng danh sách theo cách thủ công. Đọc tab API để tìm thêm thông tin
0
1
ChữBạn không cần chỉ sử dụng một biểu tượng. Bạn có thể thêm văn bản vào nút. Hãy nhớ thêm một số lớp giãn cách (ví dụ: 9) để cung cấp khoảng cách thích hợp giữa biểu tượng và văn bản
2
biểu tượng duy nhấtBằng cách loại bỏ các lớp nút và thay thế 0 bằng
1, bạn có thể tạo các biểu tượng tối giản, có thể nhấp được
3
thẻCác lớp 2 được thiết kế để sử dụng với phần tử. Tuy nhiên, bạn cũng có thể sử dụng các lớp này trên các phần tử
3hoặc
3 (mặc dù một số trình duyệt có thể áp dụng kết xuất hơi khác một chút)
Khi sử dụng các lớp nút trên 3phần tử được sử dụng để kích hoạt chức năng trong trang (chẳng hạn như thu gọn nội dung), thay vì liên kết tới các trang hoặc phần mới trong trang hiện tại, các liên kết này phải được cung cấp một
6 để truyền đạt mục đích của chúng một cách thích hợp tới các công nghệ hỗ trợ như
4
7
kích cỡFancy nút lớn hơn hoặc nhỏ hơn? 5
trạng thái hoạt độngThêm lớp 0 để làm cho nút trông như được nhấn
6
trạng thái bị vô hiệu hóaLàm cho các nút trông không hoạt động bằng cách thêm thuộc tính boolean 1 vào bất kỳ phần tử nào. Các nút đã tắt có
2 áp dụng cho, ngăn không cho kích hoạt trạng thái di chuột và hoạt động
7
3
Các nút bị vô hiệu hóa sử dụng phần tử 3 hoạt động hơi khác một chút
8
Thông báo chức năng liên kết 2 trên một liên kết bị vô hiệu hóa, lớp
7 sử dụng
2 để cố gắng vô hiệu hóa chức năng liên kết của
3s. Lưu ý rằng thuộc tính CSS này chưa được chuẩn hóa cho HTML, nhưng tất cả các trình duyệt hiện đại đều hỗ trợ nó. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ
2, điều hướng bàn phím vẫn không bị ảnh hưởng, nghĩa là người dùng bàn phím có thị giác và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để đảm bảo an toàn, ngoài
0, còn bao gồm thuộc tính
9 trên các liên kết này để ngăn chúng nhận tiêu điểm bàn phím và sử dụng JavaScript tùy chỉnh để vô hiệu hóa hoàn toàn chức năng của chúng
9
nút chặnTạo các ngăn xếp đáp ứng các “nút chặn” có chiều rộng đầy đủ, giống như trong Bootstrap 4 với sự kết hợp giữa các tiện ích hiển thị và khoảng cách của chúng tôi. Bằng cách sử dụng các tiện ích thay vì các lớp cụ thể của nút, chúng tôi có quyền kiểm soát tốt hơn nhiều đối với khoảng cách, căn chỉnh và các hành vi phản hồi 0
Ở đây, chúng tôi tạo một biến thể đáp ứng, bắt đầu bằng các nút được xếp chồng lên nhau theo chiều dọc cho đến điểm ngắt 0, trong đó
1 thay thế lớp
2, do đó vô hiệu hóa tiện ích
3. Thay đổi kích thước trình duyệt của bạn để xem chúng thay đổi
1
Bạn có thể điều chỉnh độ rộng của các nút khối bằng các lớp độ rộng cột lưới. Ví dụ: đối với "nút chặn" nửa chiều rộng, hãy sử dụng 4. Căn giữa nó theo chiều ngang với cả
5
2
Các tiện ích bổ sung có thể được sử dụng để điều chỉnh căn chỉnh các nút khi nằm ngang. Ở đây, chúng tôi đã lấy ví dụ phản hồi trước đó của mình và thêm một số tiện ích linh hoạt và tiện ích lề trên nút để căn chỉnh các nút khi chúng không còn được xếp chồng lên nhau 3
Chuyển trạng tháiThêm 6 để chuyển đổi trạng thái
7 của một nút. Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm thủ công lớp
0 và
9 vào
Làm cách nào để thay đổi kích thước nút trong Bootstrap?
Bạn thích các nút lớn hơn hoặc nhỏ hơn? . btn-lg hoặc. btn-sm cho kích thước bổ sung Add .btn-lg or .btn-sm for additional sizes . Tạo các nút mức khối—những nút mở rộng toàn bộ chiều rộng của nút gốc—bằng cách thêm. khối btn.
Làm cách nào để đặt kích thước nút trong Bootstrap 5?
Bạn có thể điều chỉnh độ rộng của các nút khối bằng các lớp độ rộng cột lưới . Ví dụ: đối với "nút chặn" nửa chiều rộng, hãy sử dụng. col-6. Căn giữa nó theo chiều ngang với. mx-auto cũng vậy. Các tiện ích bổ sung có thể được sử dụng để điều chỉnh căn chỉnh các nút khi nằm ngang.
Làm cách nào để giảm kích thước nút trong Bootstrap?
Để tạo một nút nhỏ, hãy sử dụng. lớp Bootstrap btn-sm .
Làm cách nào để tạo nút phản hồi trong Bootstrap?
Điều này được thực hiện bằng cách thêm lớp btn-block vào nút và đặt nó bên trong div với các lớp col thích hợp để định kích thước cho nút ở các điểm ngắt khác nhau.
|
