Bootstrap chuyển đổi 3 trạng thái

Tìm hiểu cách tạo "công tắc bật tắt" (nút bật/tắt) bằng CSS

Tự mình thử »

Bước 1) Thêm HTML

Thí dụ

Bước 2) Thêm CSS

Thí dụ

/* Công tắc - hộp xung quanh thanh trượt */
công tắc {
Chức vụ. liên quan đến;
trưng bày. chặn Nội tuyến;
bề rộng. 60px;
chiều cao. 34px;
}

/* Ẩn hộp kiểm HTML mặc định */
chuyển đổi đầu vào {
độ mờ đục. 0;
bề rộng. 0;
chiều cao. 0;
}

/* Thanh trượt */
thanh trượt {
Chức vụ. tuyệt đối;
con trỏ. con trỏ;
đứng đầu. 0;
bên trái. 0;
đúng. 0;
đáy. 0;
màu nền. #ccc;
-webkit-chuyển tiếp. . 4s;
chuyển tiếp. . 4s;
}

thanh trượt. trước {
Chức vụ. tuyệt đối;
nội dung. "";
chiều cao. 26px;
bề rộng. 26px;
bên trái. 4px;
đáy. 4px;
màu nền. trắng;
-webkit-chuyển tiếp. . 4s;
chuyển tiếp. . 4s;
}

đầu vào. kiểm tra +. thanh trượt {
màu nền. #2196F3;
}

đầu vào. tập trung +. thanh trượt {
bóng hộp. 0 0 1px #2196F3;
}

đầu vào. kiểm tra +. thanh trượt. trước {
-webkit-biến đổi. dịchX(26px);
-ms-biến đổi. dịchX(26px);
biến đổi. dịchX(26px);
}

/* Thanh trượt tròn */
thanh trượt. vòng {
bán kính đường viền. 34px;
}

thanh trượt. vòng. trước {
bán kính đường viền. 50%;
}

Trong hướng dẫn này, tôi sẽ chỉ cho bạn một trình cắm có thể được sử dụng để tạo các công tắc đẹp mắt bằng cách xoay các nút radio hoặc hộp kiểm sử dụng khung Bootstrap

Một đoạn video ngắn về Hướng dẫn này cho Ý tưởng nhanh

Nó yêu cầu bạn thêm một vài tệp phụ thuộc bao gồm tệp Bootstrap CSS và JS, thư viện jQuery và các tệp JS và CSS của trình cắm thêm

Nếu dự án của bạn đã dựa trên khung Bootstrap thì trang web sẽ không nặng vì các tệp của plugin đó có kích thước nhỏ, đặc biệt nếu bạn sử dụng các phiên bản rút gọn

Demo công tắc Bật/Tắt đơn giản

Trong bản trình diễn này, một hộp kiểm được tạo hoạt động như một công tắc bật tắt. Giá trị mặc định được chọn để công tắc được Bật lúc đầu. Xem bản demo trực tuyến, sau đó là một số chi tiết để thiết lập

Trong bản minh họa, bạn có thể thấy bốn nút để Đặt trạng thái đúng/sai của công tắc hoặc hộp kiểm. Nút chuyển đổi sẽ đảo ngược chế độ hiện tại. Trong khi nút Nhận trả về giá trị hiện tại của hộp kiểm. Nếu được chọn, nó sẽ trả về true, ngược lại, false

Thực hiện theo các bước sau để thiết lập trình cắm chuyển đổi / bật tắt này cho trang web của bạn

Bước 1

Include the Bootstrap and bootstrap-switch CSS files in the section:

(Đặt nó ở vị trí mong muốn của bạn, nếu không được giới thiệu từ CDN)

Bước 2

Đặt thư viện jQuery, đánh dấu. js, bootstrap-switch. js và chính. js ngay phía trên thẻ

Bạn có thể lấy tất cả các tệp này bằng cách tải xuống gói từ trang trình cắm từ trang web GitHub (tín dụng. Mattia Larentis)

Bước 3

Phần đánh dấu nơi hộp kiểm được tạo bằng id

Tất cả bốn nút đều được gán các thuộc tính dữ liệu liên quan để thực hiện một hành động nhất định

Lấy mã hoàn chỉnh từ trang demo

Bản trình diễn tạo các nút chuyển đổi có kích thước khác nhau

Bạn cũng có thể tạo các công tắc có kích thước khác với ví dụ trên. Bạn có thể đặt kích thước bằng cách sử dụng thuộc tính data-size và gán cho nó bất kỳ giá trị nào sau đây

• nhỏ
• bé nhỏ
• thông thường
• lớn

Xem ví dụ này nơi tôi đã tạo bốn hộp kiểm (công tắc) với các kích cỡ khác nhau

Đánh dấu sau đây được sử dụng để tạo các công tắc này

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

id="Bootswitch1"type< id="Bootswitch1" type="checkbox" checked data-size="mini">

id="Bootswitch2"type< id="Bootswitch2" type="checkbox" checked data-size="small">

id="Bootswitch3"type< id="Bootswitch3" type="checkbox" checked data-size="normal">

id="Bootswitch4"type< id="Bootswitch4" type="checkbox" checked data-size="large">

Lấy mã hoàn chỉnh từ trang demo

Bản trình diễn sử dụng các màu khác nhau cho trạng thái Bật hoặc đúng

Bạn có thể sử dụng các màu khác cho công tắc ngoài màu xanh mặc định, như được sử dụng trong các ví dụ trên. Bằng cách sử dụng thuộc tính dữ liệu data-on-color, bạn có thể đặt các giá trị màu khác nhau, ví dụ:

• nguy hiểm cho màu đỏ
• xanh thành công
• Thông tin màu xanh nhạt
• chính (mặc định) cho màu xanh đậm
• cảnh báo cho màu da cam

(Màu đặc trưng của Bootstrap framework)

Xem ví dụ bên dưới nơi các công tắc trong Bootstrap được tạo với tất cả các màu này cho trạng thái BẬT/True

Xem bản demo và mã trực tuyến

Đây là đánh dấu cho ví dụ trên để tạo các công tắc nhiều màu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

 

id="switch-onColor" id="switch-onColor" type="checkbox" checked data-on-color="warning">

id="switch-onColor" id="switch-onColor" type="checkbox" checked data-on-color="default">

id="switch-onColor" id="switch-onColor" type="checkbox" checked data-on-color="success">

id="switch-onColor" id="switch-onColor" type="checkbox" checked data-on-color="info">

id="switch-onColor" id="switch-onColor" type="checkbox" checked data-on-color="primary">

Bản trình diễn cách tạo công tắc màu trạng thái Tắt/sai

Giống như tôi đã tạo Công tắc bật màu bằng cách sử dụng thuộc tính data-on-color, bạn có thể tạo công tắc bật/tắt màu bằng cách sử dụng thuộc tính data-off-color có cùng thông số màu

Xem bản demo sau nơi các công tắc Bootstrap được tạo với các màu khác nhau cho cả hai;

id="switch-onColor" id="switch-onColor" type="checkbox"  data-on-color="primary" data-off-color="warning">

id="switch-onColor" id="switch-onColor" type="checkbox"  data-on-color="success" data-off-color="danger">

id="switch-onColor" id="switch-onColor" type="checkbox"  data-on-color="info" data-off-color="success">

id="switch-onColor" id="switch-onColor" type="checkbox"  data-on-color="danger" data-off-color="info">

id="switch-onColor" id="switch-onColor" type="checkbox"  data-on-color="danger" data-off-color="primary">

Bản trình diễn sử dụng văn bản/chú thích tùy chỉnh trong công tắc

Trong tất cả các ví dụ trên, tôi đã sử dụng văn bản Bật và Tắt cho các công tắc. Thực tế, bạn sẽ cần các phụ đề khác nhau để lựa chọn cho người dùng. Ví dụ: chọn Có hoặc Không, Đúng hoặc sai, Đồng ý hoặc Không đồng ý bằng cách nhấp vào công tắc bật tắt

Bằng cách sử dụng các thuộc tính data-on-text và data-off-text, bạn có thể sử dụng bất kỳ văn bản nào tùy theo nhu cầu của tình huống

Xem ví dụ sau tôi đã tạo ba công tắc với văn bản như sau

• Có không
• Đúng sai
• Đồng ý không đồng ý

Cùng với văn bản, các màu khác nhau được sử dụng bằng cách sử dụng các thuộc tính dữ liệu liên quan

id="bootswitch-text1" id="bootswitch-text1" type="checkbox"  data-on-color="primary" data-off-color="warning" data-on-text="Yes" data-off-text="No">

id="bootswitch-text2" id="bootswitch-text2" type="checkbox"  data-on-color="success" data-off-color="danger" data-on-text="True" data-off-text="False">

id="bootswitch-text3" id="bootswitch-text3" type="checkbox"  data-on-color="info" data-off-color="success" data-on-text="Agree" data-off-text="Disagree">

Bản demo xử lý độ rộng của các công tắc bật/tắt Bootstrap

Sử dụng thuộc tính dữ liệu data-handle-width với giá trị như 100, 150, 200, v.v. để thiết lập chiều rộng của công tắc. Trong các ví dụ trên, bạn đã thấy các công tắc được điều chỉnh theo văn bản đã cho

Trong bản trình diễn này, chiều rộng được đặt bằng cách sử dụng thuộc tính dữ liệu. Xem ví dụ trên với các kích thước chiều rộng khác nhau

id="bootswitch-width1" id="bootswitch-width1" type="checkbox" data-handle-width="100"  data-on-color="primary" data-off-color="warning" data-on-text="Yes" data-off-text="No" checked>

id="bootswitch-width2" id="bootswitch-width2" type="checkbox" data-handle-width="150"  data-on-color="success" data-off-color="danger" data-on-text="True" data-off-text="False" checked>

id="bootswitch-width3" id="bootswitch-width3" type="checkbox" data-handle-width="200"  data-on-color="info" data-off-color="success" data-on-text="Agree" data-off-text="Disagree">

Chuyển đổi các nút radio thành bản trình diễn công tắc bật tắt

Trong tất cả các ví dụ trên, các hộp kiểm được sử dụng làm công tắc. Bạn cũng có thể sử dụng các nút radio để chuyển đổi chúng thành công tắc

Trong bản trình diễn này, ba nút radio được sử dụng để tạo công tắc với các thuộc tính dữ liệu khác nhau như cài đặt màu. Xem bản demo và mã bằng cách nhấp vào liên kết bên dưới

lớp="h5">< class="h5">A demo of radio buttons as switch

<đầu vào loại="đài"tên< type="radio" name="radio1" checked data-on-color="success" data-off-color="warning" class="switch-radio1">

<đầu vào loại="đài"tên< type="radio" name="radio1" data-on-color="danger" data-off-color="warning" class="switch-radio1">

<đầu vào loại="đài"tên< type="radio" name="radio1" data-on-color="info" data-off-color="primary"  class="switch-radio1">