Bạn có thể có một số lý do
để thu hút sự chú ý của khách truy cập vào một số phần nhất định của trang web của bạn hoặc có thể bạn muốn cảnh báo cho
người dùng về một số thông tin hoặc bạn có thể muốn giữ cho
người dùng thông báo về tiến độ của một hoạt động mà họ bắt đầu trên trang web của bạn.
Hãy nhìn vào một số cơ chế khác nhau mà
bootstrap cung cấp cho các loại hoạt động này.
Bootstrap có nhiều thành phần khác nhau cho phép chúng tôi giữ cho người dùng thông tin.
Chúng tôi có phù hiệu cho phép chúng tôi thu hút sự chú ý của
người dùng đến các cập nhật gần đây cho trang web của chúng tôi.
Chúng tôi có thông báo cảnh báo, lỗi
và cảnh báo có thể được gửi đến người dùng nếu
họ thực hiện các thao tác không được phép.
Và cũng có thể, chúng tôi có thể sử dụng thanh tiến trình để thông báo cho người dùng
về tiến trình của bất kỳ hoạt động nào mà họ bắt đầu trên trang web của chúng tôi.
Hãy nhìn vào điều này trong một chút chi tiết hơn tiếp theo.
Huy hiệu là một cách dễ dàng để thêm một lượng nhỏ
thông tin vào trang web của bạn để thu hút sự chú ý của khách truy cập.
Ví dụ, bạn có thể thấy rằng chúng tôi đã thêm một vài phù hiệu để
mô tả món ăn ở đây trên trang chính của chúng tôi, vì vậy bạn
có thể thấy rằng chúng tôi có huy hiệu màu đỏ thu hút sự chú ý của người sử dụng
thực tế rằng đây là một mục nóng trên menu
và thậm chí có thể thông báo cho họ về giá của thực đơn.
Những loại thông tin nhỏ này có thể được thêm vào trang web của bạn bằng cách sử dụng một huy hiệu.
Một huy hiệu ví dụ,
một màu đỏ ở đây được tạo ra bằng cách sử dụng một khoảng với huy hiệu lớp học và huy hiệu nguy hiểm.
Bạn có thể sử dụng các màu khác nhau được xây dựng
trong khung bootstrap để tạo ra các huy hiệu của một số màu sắc khác nhau.
Tương tự như vậy, bạn có thể sử dụng một huy hiệu thuốc mà tạo ra một hình chữ nhật tròn như bạn nhìn thấy ở đây,
và điều đó có thể được thực hiện bằng cách áp dụng các huy hiệu, huy hiệu
lớp thuốc để nó cùng với lớp huy hiệu.
Cảnh báo là một cách khác để thông báo cho người dùng về thông tin.
Ví dụ, một cảnh báo có thể được tạo ra bằng cách sử dụng thành phần cảnh báo
mà chỉ đơn giản có thể được tạo ra bằng cách áp dụng cảnh báo với cảnh báo ví dụ,
trong ví dụ này bạn thấy cảnh báo tạo ra một cảnh báo màu vàng.
Bạn có thể áp dụng một lần nữa nguy hiểm chính và các màu bootstrap khác ở đó.
Và sau đó lớp cảnh báo loại bỏ,
cho phép bạn bao gồm một lớp học ở đó mà người dùng có thể nhấp vào để bỏ qua một cảnh báo.
Để hỗ trợ hoạt động đó,
bạn cũng cần phải bao gồm một nút vào cảnh báo của bạn như bạn có thể nhìn thấy bên trong div này,
chúng tôi bao gồm nút này ở đây.
Và nội dung của cảnh báo có thể được định dạng bằng cách sử dụng HTML chuẩn như bạn có thể thấy ở đây.
Vì vậy, điều này cho phép chúng tôi tạo ra một cảnh báo trên trang web của chúng tôi.
Vì vậy, để tóm tắt, các cảnh báo có thể được tạo ra bởi một áp dụng các lớp cảnh báo
cùng với các lớp học cảnh báo đủ điều kiện bổ sung,
cho phép bạn tạo cảnh báo trong màu sắc khác nhau.
Chúng tôi cũng có thể bao gồm các liên kết trong cảnh báo của chúng tôi.
Chúng tôi cũng có thể làm cho cảnh báo bị loại bỏ bằng cách sử dụng
các lớp bị loại bỏ cảnh báo và bao gồm một nút chéo bên trong cảnh báo của chúng tôi.
Tương tự như vậy, thanh tiến trình được bao gồm trong các trang web để giữ cho
người dùng thông tin về tiến trình của bất cứ điều gì chúng tôi đã khởi xướng trên trang web.
Ví dụ: nếu bạn đang tải tệp lên một trang web,
thì bạn có thể muốn giữ cho người dùng thông báo về số lượng tệp đã
hoàn tất tải lên bằng cách hiển thị thanh tiến trình trên trang web.
Vì vậy, tạo ra một thanh tiến trình trong bootstrap được
thực hiện bằng cách áp dụng các lớp tiến trình cho một div và bên trong mà chúng ta có thể áp dụng
một div bên trong với thanh tiến trình lớp và
cũng cho phép đó được thêm theo kiểu bằng cách sử dụng những thứ như
thanh tiến trình sọc và sau đó bạn có thể áp dụng màu sắc cho
thanh tiến trình bằng cách xác định màu dưới dạng dấu gạch nối BG và màu sắc.
Vì vậy, trong trường hợp này bg-danger được áp dụng cho thanh tiến trình này.
Chúng tôi cũng có thể làm cho phần tiến bộ sọc,
chúng tôi cũng có thể hoạt hình thanh tiến trình,
và cũng xác định bao nhiêu thanh tiến trình đó cần phải có trong hình thức.
Vì vậy, bằng cách thay đổi giá trị chiều rộng này một cách tự
động, bạn có thể tạo một thanh tiến trình sẽ tiếp tục cập nhật chính nó trên trang web.
Vì vậy, để tóm tắt, một thanh tiến trình có thể được tạo ra bằng cách
áp dụng một lớp tiến trình cho div và bên trong
có một div bên trong mà bạn áp dụng
các lớp thanh tiến trình sẽ cho phép bạn tạo thanh tiến trình.
Bạn thậm chí có thể xếp chồng nhiều thanh tiến trình với nhau để tạo ra
một thanh tiến trình xếp chồng lên nhau và cũng có thể áp dụng các màu sắc
khác nhau cho thanh tiến trình và cũng có thể có diện mạo khác nhau cho
thanh tiến trình sử dụng lớp sọc thanh tiến trình và cũng thanh tiến trình
hoạt hình lớp cho hoạt hình sọc trên thanh tiến trình của chúng tôi.
Bây giờ chúng ta đã xem xét nhiều cách khác nhau để cảnh báo người dùng, chúng
ta hãy thực hiện một bài tập đơn giản tiếp theo và sử dụng phù hiệu
trong trang web của chúng tôi để thu hút sự chú ý của người dùng.