khởi động | Phù hiệu và nhãn

Bài viết này sẽ đề cập đến các quan điểm sau để chứng minh việc sử dụng huy hiệu Bootstrap:

• Cách sử dụng Huy hiệu Bootstrap để biết thêm thông tin?
• Làm cách nào để sử dụng huy hiệu Bootstrap cho thông tin theo ngữ cảnh?
• Làm cách nào để thêm kiểu tùy chỉnh vào huy hiệu Bootstrap?
• Làm cách nào để thêm biểu tượng vào huy hiệu Bootstrap?
• Làm cách nào để liên kết huy hiệu Bootstrap với nguồn khác?
• Làm thế nào để làm tròn huy hiệu?
• Làm cách nào để sử dụng Huy hiệu Bootstrap làm Bộ đếm?

Huy hiệu Bootstrap là gì?

Huy hiệu là thành phần cơ bản được sử dụng để hiển thị một chỉ báo. Chẳng hạn, chúng có thể được sử dụng làm bộ đếm số để hiển thị số lượng thông báo hoặc tin nhắn:

Chúng cũng có thể được sử dụng để hiển thị thông tin bổ sung, chẳng hạn như được hiển thị trong hình ảnh đã cho:

Cách sử dụng Huy hiệu Bootstrap để biết thêm thông tin?

Huy hiệu Bootstrap có thể được thêm vào trong các phần tử HTML để sử dụng làm thông tin bổ sung. Kiểm tra ví dụ được đề cập dưới đây để trình diễn.

Thí dụ

Để sử dụng huy hiệu Bootstrap cho thông tin bổ sung, trước tiên:

• Thêm vào '

  ' và '

  ” yếu tố.

• Đặt “ ” yếu tố với “ phù hiệu ' và ' huy hiệu-* ' các lớp học. Lớp “huy hiệu-*” đề cập đến huy hiệu có màu được chỉ định:

Có thể quan sát thấy rằng hai huy hiệu được thêm vào các tiêu đề có liên quan:

Làm cách nào để sử dụng huy hiệu Bootstrap cho thông tin theo ngữ cảnh?

Huy hiệu Bootstrap cũng có thể được sử dụng để cung cấp thông tin theo ngữ cảnh như “ huy hiệu nguy hiểm ” hiển thị huy hiệu có màu đỏ và có thể được sử dụng để hiển thị một số thông báo không thành công như hủy, không hợp lệ, v.v. Các ' huy hiệu thành công ” được sử dụng khi chúng tôi muốn hiển thị một số thông báo thành công.

Thí dụ

Nhìn vào đoạn mã đã cho để hiểu kịch bản được thảo luận:

đầu ra

Làm cách nào để thêm kiểu tùy chỉnh vào huy hiệu Bootstrap?

Bạn cũng có thể sử dụng CSS để thêm một số kiểu dáng độc đáo vào huy hiệu Bootstrap. Để hiểu rõ hơn, một lớp có tên “ tập quán ” được thêm vào trong “ ' yếu tố. Sau đó, các thuộc tính sau được áp dụng:

Phong cách 'tùy chỉnh' lớp

Các ' .tập quán ” được sử dụng để truy cập vào “ tập quán ' tầng lớp. Các thuộc tính sau được áp dụng cho nó:

• “ cỡ chữ ” điều chỉnh kích thước phông chữ.
• “ trọng lượng phông chữ ” cho biết độ dày của phông chữ.
• “ khoảng cách giữa các chữ cái ” thêm khoảng cách giữa các chữ cái.
• “ đệm ” cung cấp không gian xung quanh nội dung của phần tử.

đầu ra

Làm cách nào để thêm biểu tượng vào huy hiệu Bootstrap?

Chúng tôi cũng có thể thêm các biểu tượng khác nhau vào huy hiệu. Để làm như vậy, có một số lớp có thể được sử dụng cho mục đích này. Để biết thêm thông tin, hãy truy cập phông chữ tuyệt vời trang mạng.

Thí dụ

Trong HTML, thêm một “ ' yếu tố. Trong phần tử này, hãy đặt phần tử nội tuyến “ ” hoặc “” để chèn lớp biểu tượng: