Tìm hiểu cách thêm nút vào hình ảnh bằng CSS
Nút trên Hình ảnh
Cách thêm nút trên hình ảnh
Bước 1] Thêm HTMLVí dụ
Nút
Bước 2] Thêm CSS
Ví dụ
/* Vùng chứa cần thiết để định vị nút. Điều chỉnh độ rộng nếu cần */
. vùng chứa {
vị trí. tương đối;
chiều rộng. 50%;
}
/* Làm cho hình ảnh phản hồi nhanh */
. vùng chứa img {
chiều rộng. 100%;
chiều cao. tự động;
}
/* Tạo kiểu cho nút và đặt nút ở giữa vùng chứa/hình ảnh */
. thùng đựng hàng. btn {
vị trí. tuyệt đối;
trên cùng. 50%;
còn lại. 50%;
biến đổi. translate[-50%, -50%];
-ms-transform. translate[-50%, -50%];
màu nền. #555;
màu. trắng;
cỡ chữ. 16px;
phần đệm. 12px 24px;
đường viền. không;
con trỏ. con trỏ;
bán kính đường viền. 5px;
}
.container .btn:hover {
background-color. đen;
}
Cung cấp tùy chọn loại bỏ hoặc đóng một thành phần với
3. Kiểu dáng mặc định bị hạn chế, nhưng có khả năng tùy biến cao. Sửa đổi các biến Sass để thay thế
4 mặc định. Đảm bảo bao gồm văn bản cho trình đọc màn hình, như chúng tôi đã thực hiện với
5
trạng thái bị vô hiệu hóa
Các nút đóng bị tắt sẽ thay đổi
6 của chúng. Chúng tôi cũng đã áp dụng
7 và
8 để ngăn kích hoạt trạng thái di chuột và hoạt động
biến thể màu trắng
Thay đổi mặc định
3 thành màu trắng với lớp
1. Lớp này sử dụng thuộc tính
2 để đảo ngược
4Tài liệu và ví dụ để chọn hình ảnh vào hành vi phản hồi [để chúng không bao giờ trở nên lớn hơn các phần tử gốc của chúng] và thêm các kiểu nhẹ cho chúng—tất cả thông qua các lớp
Hình ảnh đáp ứng
Hình ảnh trong Bootstrap được tạo phản hồi nhanh với
1.
2 và
3 được áp dụng cho hình ảnh để nó chia tỷ lệ với phần tử gốc
Hình ảnh SVG và IE 10
Trong Internet Explorer 10, hình ảnh SVG có
1 có kích thước không cân xứng. Để khắc phục điều này, hãy thêm
0 nếu cần. Bản sửa lỗi này kích thước các định dạng hình ảnh khác không đúng cách, vì vậy Bootstrap không tự động áp dụng nóHình thu nhỏ của hình ảnh
Ngoài các tiện ích bán kính đường viền của chúng tôi, bạn có thể sử dụng
1 để cung cấp cho hình ảnh một đường viền tròn 1px
Căn chỉnh hình ảnh
Căn chỉnh hình ảnh với các lớp float của trình trợ giúp hoặc các lớp căn chỉnh văn bản. Hình ảnh cấp độ
2 có thể được căn giữa bằng cách sử dụng lớp tiện ích lề
3
0
2Bức ảnh
Nếu bạn đang sử dụng phần tử
4 để chỉ định nhiều phần tử
4 cho một
6 cụ thể, hãy đảm bảo thêm các lớp
7 vào
6 chứ không phải vào thẻ
4 Sử dụng các kiểu nút tùy chỉnh của Bootstrap 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.
ví dụ
Bootstrap 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, với một vài tính năng bổ sung được đưa vào để kiểm soát nhiều hơn
Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối Liên kết
9Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung [e. g. văn bản hiển thị], hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với lớp
02Các lớp
03 đượ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ử
04 hoặc
04 [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 các phần tử
04 đượ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
07 để 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ư
0
08các nút phác thảo
Cầ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?
Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối
9kích cỡ
Fancy nút lớn hơn hoặc nhỏ hơn?
2
3Tạo các nút cấp độ 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
92Nút cấp khối Nút cấp khối
5trạng thái hoạt động
Các nút sẽ xuất hiện khi đượ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 hoạt động. Không cần thêm lớp vào s vì chúng sử dụng lớp giả. Tuy nhiên, bạn vẫn có thể buộc giao diện hoạt động tương tự với
93 [và bao gồm thuộc tính
94] nếu bạn cần sao chép trạng thái theo chương trình
8trạng thái bị vô hiệu hóa
Làm cho các nút trông không hoạt động bằng cách thêm thuộc tính boolean
95 vào bất kỳthành phần
0
96Các nút bị vô hiệu hóa sử dụng phần tử
04 hoạt động hơi khác một chút- Các
04 không hỗ trợ thuộc tính
95, vì vậy bạn phải thêm lớp
20 để 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 bao gồm để tắt tất cả
21 trên các nút neo. Trong các trình duyệt hỗ trợ thuộc tính đó, bạn sẽ hoàn toàn không thấy con trỏ bị vô hiệu hóa - Các nút bị tắt phải bao gồm thuộc tính
22 để cho biết trạng thái của phần tử đối với các công nghệ hỗ trợ
8Thông báo chức năng liên kết
Lớp
20 sử dụng
24 để cố gắng vô hiệu hóa chức năng liên kết của
04, nhưng thuộc tính CSS đó chưa được chuẩn hóa. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ
24, đ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, để an toàn, hãy thêm thuộc tính
27 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 để tắt chức năng của chúngplugin nút
Làm nhiều hơn với các nút. Trạng thái nút điều khiển hoặc tạo nhóm nút cho nhiều thành phần hơn như thanh công cụ
Chuyển trạng thái
Thêm ________ 328 để chuyển đổi trạng thái nút ________ 329. 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
93 và
94 vào
0
32Hộp kiểm và nút radio
Các kiểu
33 của Bootstrap có thể được áp dụng cho các phần tử khác, chẳng hạn như các
04, để cung cấp hộp kiểm hoặc nút chuyển đổi kiểu radio. Thêm
35 vào một
36 chứa các nút đã sửa đổi đó để kích hoạt hành vi chuyển đổi của chúng thông qua JavaScript và thêm
37 để tạo kiểu cho các
04 trong các nút của bạn. Lưu ý rằng bạn có thể tạo các nút hoặc nhóm được hỗ trợ đầu vào đơn lẻTrạng thái đã chọn cho các nút này chỉ được cập nhật thông qua sự kiện
39 trên nút. Nếu bạn sử dụng một phương pháp khác để cập nhật đầu vào—e. g. , với
04 hoặc bằng cách áp dụng thủ công thuộc tính
51 của đầu vào—bạn sẽ cần chuyển đổi
93 trên
04 theo cách thủ côngLưu ý rằng các nút được kiểm tra trước yêu cầu bạn thêm thủ công lớp
93 vào đầu vào của
04