Hình ảnh với nút xóa bootstrap

---

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

Tự mình thử »

---

Cách thêm nút trên hình ảnh

Bước 1) Thêm HTML

Ví 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;
}

Tự mình thử »

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

4

Tà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

2

Bứ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

9

Truyề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

02

Cá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

08

cá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

9

kích cỡ

Fancy nút lớn hơn hoặc nhỏ hơn?

2

3

Tạ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

92

Nút cấp khối Nút cấp khối

5

trạ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

8

trạ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

96

Cá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ợ

8

Thô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úng

plugin 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

32

Hộ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ông

Lư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