Các thành phần nút cùng với các liên kết được bọc bên trong chúng có thể là những thành phần quan trọng nhất cho phép người dùng tương tác với các trang web và thực hiện các hành động khác nhau cũng như di chuyển từ trang này sang trang khác. Đặc biệt là bây giờ trong thế giới di động đầu tiên khi ít nhất một nửa số trang đang được xem từ các thiết bị màn hình cảm ứng nhỏ, các khu vực hình chữ nhật thoải mái lớn trên màn hình dễ dàng tìm thấy bằng mắt và chạm bằng ngón tay của bạn trở nên quan trọng hơn bao giờ hết. Đó là lý do tại sao khung Bootstrap 4 mới đã phát triển mang lại trải nghiệm thoải mái hơn khi giảm kích thước nút cực nhỏ và thêm một số không gian trống xung quanh chú thích của nút để làm cho chúng dễ đọc và dễ sử dụng hơn. Một điểm nhấn nhỏ làm tăng thêm vẻ thân thiện hơn của các nút mới cũng là các góc bo tròn hơn một chút, cùng với nhiều không gian trống hơn xung quanh làm cho các nút dễ nhìn hơn nhiều.
Các lớp ngữ nghĩa
Trong phiên bản này có cùng một số kiểu ngữ nghĩa thú vị và dễ sử dụng, cho chúng tôi khả năng chuyển tiếp ý nghĩa cho các nút chúng tôi sử dụng chỉ bằng cách thêm một lớp duy nhất
Các lớp ngữ nghĩa có cùng số lượng như trong phiên bản trước nhưng có một số cải tiến – nút mặc định hiếm khi được sử dụng thường không mang ý nghĩa gì đã bị loại bỏ để thay thế bằng kiểu dáng nút phụ trực quan và tinh tế hơn, vì vậy giờ đây các lớp ngữ nghĩa được
Link Button2 chính - tô màu xanh nhạt;
Lớp
Link Button3 thứ cấp - thay thế lớp
Link Button4 – màu trắng sạch sẽ với đường viền màu xám tinh tế;
Thông tin
Link Button5 - màu xanh sáng hơn và thân thiện hơn một chút;
Thành công
Link Button6 xanh tốt tuổi già;
Cảnh báo
Link Button7 màu cam;
Nguy hiểm
Link Button8 có màu đỏ;
Và Liên kết
Link Button9 để tạo kiểu cho nút làm thành phần liên kết mặc định;
Chỉ cần đảm bảo rằng bạn thêm lớp
Primary
Secondary
Success
Info
Warning
Danger
0 chính trước khi áp dụng chúngLink
Button
Tuy nhiên, đây chỉ là một nửa số lần xuất hiện mà bạn có thể thêm vào các nút của mình trong Bootstrap 4 vì phiên bản mới của khung cũng cung cấp cho chúng tôi một cách hoàn toàn mới tinh tế và hấp dẫn để tạo kiểu cho các nút của chúng tôi mà vẫn giữ nguyên ngữ nghĩa mà chúng tôi đã có – chế độ phác thảo
Cài đặt phác thảo
Nền đồng nhất không có viền được thay thế bằng một đường viền với một số văn bản bên trong có màu tương ứng. Tinh chỉnh các lớp thực sự dễ dàng – chỉ cần thêm
Primary
Secondary
Success
Info
Warning
Danger
3 trước khi gán đúng ngữ nghĩa nhưNút chính được phác thảo trở thành
Primary
Secondary
Success
Info
Warning
Danger
4Outlined Secondary -
Primary
Secondary
Success
Info
Warning
Danger
5, v.v.Điều quan trọng cần lưu ý ở đây là không có cái gọi là nút liên kết được phác thảo nên các nút được phác thảo thực sự là sáu chứ không phải bảy
Xóa và thay thế các lớp công cụ sửa đổi mặc định bằng lớp
Primary
Secondary
Success
Info
Warning
Danger
6 để loại bỏ tất cả ảnh nền và tông màu trên mỗi nútLink
Button
11 bao trùm toàn bộ chiều rộng của phần tử mà nó đã được đặt trong đó, kết hợp với kích thước lớn sẽ trở thành lời kêu gọi hành động hoàn hảo khi bạn cần.Link
Button
1Thiết lập các nút cấp độ khối - những nút trải rộng toàn bộ chiều rộng của nút gốc - bằng cách thêm
Link Button11Link Button 6
Cài đặt hoạt động
Các nút dường như được nhấn [với nền tối hơn, đường viền tối hơn và bóng bên trong] khi đang hoạt động. Hoàn toàn không cần thêm một lớp vào -s khi chúng hoạt động với một lớp giả. Mặc dù vậy, bạn vẫn có thể buộc giao diện hoạt động tương tự với
Link Button13 [và bao gồm thuộc tính
Link Button14] nếu bạn cần sao chép trạng thái theo chương trìnhLink Button 9
cơ chế bị vô hiệu hóa
Làm cho các nút trông không hoạt động bằng cách cung cấp thuộc tính boolean
Link Button15 cho bất kỳ. Link Button 16
Các nút bị vô hiệu hóa khiến phần tử
Primary
Secondary
Success
Info
Warning
Danger
1 hoạt động hơi khác một chút-
Primary
Secondary
Success
Info
Warning
Danger
1-s không hỗ trợ tính năng bị vô hiệu hóa, ở mức độ này, bạn cần bao gồm lớp Link Button19 để làm cho nó có vẻ như bị vô hiệu hóa
- Một số kiểu thân thiện với tương lai có liên quan để tắt từng sự kiện con trỏ trên các nút neo. Trong các trình duyệt hỗ trợ thuộc tính đó, bạn sẽ không tìm thấy con trỏ bị vô hiệu hóa
- Các nút bị tắt phải cung cấp thuộc tính
Link Button40 để tiết lộ tình trạng của phần tử cho các công nghệ hỗ trợ
Thận trọng về khả năng liên kết
Ngoài ra, ngay cả trong các trình duyệt hỗ trợ sự kiện con trỏ. không, điều hướng bàn phím vẫn không bị ảnh hưởng, có nghĩa là người dùng bàn phím có thị lực và người dùng công nghệ hỗ trợ sẽ vẫn có thể kích hoạt các liên kết này
chuyển đổi phần tử
Đặt
Link Button41 để chuyển đổi trạng thái hoạt động của nút. Trong trường hợp bạn đang chuyển đổi trước một nút, bạn cần thêm lớp
Link Button42 và
Link Button14 vào lớp theo cách thủ côngLink Button 1
Link Button44
Thêm một chút nút. hộp kiểm và cả đài phát thanh
Trạng thái được xem xét cho tất cả các nút này chỉ được cải thiện thông qua sự kiện nhấp vào nút. Nếu bạn thực hiện thêm một phương pháp để cập nhật đầu vào - e. g. , với
Primary
Secondary
Success
Info
Warning
Danger
1 hoặc đơn giản bằng cách áp dụng thủ công thuộc tính được kiểm tra của đầu vào - bạn sẽ phải chuyển đổi Link Button13 trên
Primary
Secondary
Success
Info
Warning
Danger
1 bằng tayLưu ý rằng các nút được kiểm tra trước yêu cầu bạn thêm lớp
Link Button13 vào lớp
Primary
Secondary
Success
Info
Warning
Danger
1 của đầu vào theo cách thủ côngLink
Button
0Link
Button
1kỹ thuật
Link Button60 - bật tắt trạng thái đẩy. Cung cấp cho nút có vẻ như nó đã được bật
kết luận
Vì vậy, nhìn chung trong phiên bản mới của khung đầu tiên dành cho thiết bị di động phổ biến nhất, các nút đã phát triển nhằm mục đích trở nên dễ đọc hơn, thân thiện hơn và dễ sử dụng trên màn hình nhỏ hơn và mạnh mẽ hơn nhiều về mặt biểu cảm với giao diện hoàn toàn mới. Bây giờ tất cả những gì họ cần là được đưa vào trang tuyệt vời tiếp theo của bạn