Cách thay đổi màu nút hoạt động trong bootstrap

---

Màu nút

Cơ bản Mặc định Thông tin thành công chính Cảnh báo Liên kết nguy hiểm

---

Kích thước nút

Lớn Nhỏ XSmall

---

Các nút Kích hoạt/Tắt

Nút thông tin Nút thông tin hoạt động Nút thông tin bị vô hiệu hóa

---

Nút cấp khối

---

Nhóm nút

---

Các lớp nút

Các lớp bên dưới có thể được sử dụng để tạo kiểu cho bất kỳ , hoặc thành phần nào. Lớp Mô tảVí dụ. btnThêm kiểu dáng cơ bản cho bất kỳ nút nào Hãy dùng thử . btn-defaultCho biết nút mặc định/tiêu chuẩn Hãy dùng thử . btn-primaryCung cấp thêm trọng lượng hình ảnh và xác định hành động chính trong một nhóm nút Hãy dùng thử . btn-successCho biết một hành động thành công hoặc tích cực Hãy thử . btn-info Nút ngữ cảnh cho thông báo cảnh báo thông tin Hãy dùng thử . btn-warning Cho biết cần thận trọng với hành động này Hãy thử . btn-danger Chỉ ra một hành động nguy hiểm hoặc có khả năng tiêu cực Hãy thử . btn-linkLàm cho nút trông giống như một liên kết (vẫn sẽ có hành vi của nút) Hãy dùng thử . btn-lgTạo nút lớn Hãy dùng thử . btn-smTạo một nút nhỏ Hãy dùng thử . btn-xsTạo thêm một nút nhỏ Hãy dùng thử . btn-blockTạo nút cấp khối (kéo dài toàn bộ chiều rộng của phần tử gốc) Hãy dùng thử . activeLàm cho nút có vẻ như đã được nhấn Hãy dùng thử . bị vô hiệu hóa Làm cho nút bị vô hiệu hóa Hãy dùng thử . navbar-btn Căn chỉnh theo chiều dọc một nút bên trong thanh điều hướng Hãy dùng thử

Các lớp nhóm nút

Các lớp bên dưới có thể được sử dụng để tạo kiểu bất kỳ,

hoặc phần tử. Lớp Mô tảVí dụ. btn-groupNhóm các nút lại với nhau trên một dòng Hãy thử . btn-group-justifiedTạo một nhóm nút trải rộng trên toàn bộ chiều rộng của màn hình Hãy dùng thử . btn-group-lgNhóm nút lớn (làm cho tất cả các nút trong một nhóm nút lớn hơn - tăng cỡ chữ và phần đệm) Hãy dùng thử . btn-group-smNhóm nút nhỏ (làm cho tất cả các nút trong một nhóm nút nhỏ hơn) Hãy dùng thử . btn-group-xs Nhóm nút cực nhỏ (làm cho tất cả các nút trong một nhóm nút cực nhỏ) Hãy dùng thử . btn-group-verticalLàm cho nhóm nút xuất hiện xếp chồng lên nhau theo chiều dọc Hãy dùng thử

Đưa ra một tài liệu HTML chứa danh sách các mục và nhiệm vụ là thay đổi màu nền của danh sách các mục khi mục đó đang hoạt động. Trạng thái của danh sách các mục có thể được thay đổi bằng cách thay đổi thuộc tính CSS màu nền

cú pháp.  

background-color: color | transparent; 

Giá trị tài sản

• màu. Nó chỉ định màu nền của phần tử.  
• trong suốt. Nó chỉ định rằng màu nền phải trong suốt

Do đó, màu nền của một mục điều hướng đang hoạt động có thể được thay đổi theo cách sau bằng cách thay đổi thuộc tính CSS màu nền

cú pháp.  

.navbar-nav > .active > a { 
    background-color: color ; 
}

Ví dụ

html

.navbar-nav > .active > a { 
    background-color: color ; 
}

1

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

3

.navbar-nav > .active > a { 
    background-color: color ; 
}

4

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

6

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

0

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____82

.navbar-nav > .active > a { 
    background-color: color ; 
}

4

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____82____811

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

14

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

16

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

11

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

0

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

 

________ 82 ________ 825 ________ 87

.navbar-nav > .active > a { 
    background-color: color ; 
}

2______82______829

.navbar-nav > .active > a { 
    background-color: color ; 
}

30

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

32

.navbar-nav > .active > a { 
    background-color: color ; 
}

33

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

________ 835 ________ 836

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____82____839

.navbar-nav > .active > a { 
    background-color: color ; 
}

40

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

42

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

39

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____82____839

.navbar-nav > .active > a { 
    background-color: color ; 
}

40

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

53

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

39

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____82____839

.navbar-nav > .active > a { 
    background-color: color ; 
}

40

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

64

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

39

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____872

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

75

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

77

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

79

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

21

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

77

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

79

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

27

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

29

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

01

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

77

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

79

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

72

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2______82______112

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

15

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

22

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

29

.navbar-nav > .active > a { 
    background-color: color ; 
}

33

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

32

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

35

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

2______138

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

41

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

43

.navbar-nav > .active > a { 
    background-color: color ; 
}

44

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

38

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

62

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

29

.navbar-nav > .active > a { 
    background-color: color ; 
}

33

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

32

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

75

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

62

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

29

.navbar-nav > .active > a { 
    background-color: color ; 
}

33

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

32

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

102

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

62

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

2

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

5

.navbar-nav > .active > a { 
    background-color: color ; 
}

123

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

33____85

.navbar-nav > .active > a { 
    background-color: color ; 
}

32

.navbar-nav > .active > a { 
    background-color: color ; 
}

128

.navbar-nav > .active > a { 
    background-color: color ; 
}

26

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

19

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

12

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____82____839

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

13

.navbar-nav > .active > a { 
    background-color: color ; 
}

144

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

76

.navbar-nav > .active > a { 
    background-color: color ; 
}

146

.navbar-nav > .active > a { 
    background-color: color ; 
}

43____8148

.navbar-nav > .active > a { 
    background-color: color ; 
}

34____8146

.navbar-nav > .active > a { 
    background-color: color ; 
}

43____8152

.navbar-nav > .active > a { 
    background-color: color ; 
}

34

.navbar-nav > .active > a { 
    background-color: color ; 
}

154

_______876____8156

_______813____8156

.navbar-nav > .active > a { 
    background-color: color ; 
}

2____818

.navbar-nav > .active > a { 
    background-color: color ; 
}

39

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

25

.navbar-nav > .active > a { 
    background-color: color ; 
}

7

 

.navbar-nav > .active > a { 
    background-color: color ; 
}

18

.navbar-nav > .active > a { 
    background-color: color ; 
}

3____87

đầu ra

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này