1
00:00:03,650 --> 00:00:08,240
Bạn có thể có một số lý do

2
00:00:08,240 --> 00:00:11,890
để 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

3
00:00:11,890 --> 00:00:16,370
người dùng về một số thông tin hoặc bạn có thể muốn giữ cho

4
00:00:16,370 --> 00:00:22,150
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.

5
00:00:22,150 --> 00:00:25,840
Hãy nhìn vào một số cơ chế khác nhau mà

6
00:00:25,840 --> 00:00:30,750
bootstrap cung cấp cho các loại hoạt động này.

7
00:00:30,750 --> 00:00:38,810
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.

8
00:00:38,810 --> 00:00:42,440
Chúng tôi có phù hiệu cho phép chúng tôi thu hút sự chú ý của

9
00:00:42,440 --> 00:00:46,550
người dùng đến các cập nhật gần đây cho trang web của chúng tôi.

10
00:00:46,550 --> 00:00:48,365
Chúng tôi có thông báo cảnh báo, lỗi

11
00:00:48,365 --> 00:00:52,010
và cảnh báo có thể được gửi đến người dùng nếu

12
00:00:52,010 --> 00:00:56,470
họ thực hiện các thao tác không được phép.

13
00:00:56,470 --> 00:01:01,870
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

14
00:01:01,870 --> 00:01:08,135
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.

15
00:01:08,135 --> 00:01:11,455
Hãy nhìn vào điều này trong một chút chi tiết hơn tiếp theo.

16
00:01:11,455 --> 00:01:15,800
Huy hiệu là một cách dễ dàng để thêm một lượng nhỏ

17
00:01:15,800 --> 00:01:21,085
thông tin vào trang web của bạn để thu hút sự chú ý của khách truy cập.

18
00:01:21,085 --> 00:01:24,710
Ví dụ, bạn có thể thấy rằng chúng tôi đã thêm một vài phù hiệu để

19
00:01:24,710 --> 00:01:30,890
mô tả món ăn ở đây trên trang chính của chúng tôi, vì vậy bạn

20
00:01:30,890 --> 00:01:37,480
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

21
00:01:37,480 --> 00:01:40,495
thực tế rằng đây là một mục nóng trên menu

22
00:01:40,495 --> 00:01:44,605
và thậm chí có thể thông báo cho họ về giá của thực đơn.

23
00:01:44,605 --> 00:01:51,455
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.

24
00:01:51,455 --> 00:01:52,960
Một huy hiệu ví dụ,

25
00:01:52,960 --> 00:02:00,400
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.

26
00:02:00,400 --> 00:02:04,495
Bạn có thể sử dụng các màu khác nhau được xây dựng

27
00:02:04,495 --> 00:02:11,945
trong khung bootstrap để tạo ra các huy hiệu của một số màu sắc khác nhau.

28
00:02:11,945 --> 00:02:18,075
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,

29
00:02:18,075 --> 00:02:21,700
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

30
00:02:21,700 --> 00:02:26,000
lớp thuốc để nó cùng với lớp huy hiệu.

31
00:02:26,000 --> 00:02:30,655
Cảnh báo là một cách khác để thông báo cho người dùng về thông tin.

32
00:02:30,655 --> 00:02:37,245
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

33
00:02:37,245 --> 00:02:45,370
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ụ,

34
00:02:45,370 --> 00:02:50,285
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.

35
00:02:50,285 --> 00:02:57,075
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 ở đó.

36
00:02:57,075 --> 00:02:59,955
Và sau đó lớp cảnh báo loại bỏ,

37
00:02:59,955 --> 00:03:06,190
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.

38
00:03:06,190 --> 00:03:08,140
Để hỗ trợ hoạt động đó,

39
00:03:08,140 --> 00:03:14,625
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,

40
00:03:14,625 --> 00:03:16,740
chúng tôi bao gồm nút này ở đây.

41
00:03:16,740 --> 00:03:23,505
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.

42
00:03:23,505 --> 00:03:27,490
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.

43
00:03:27,490 --> 00:03:32,320
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

44
00:03:32,320 --> 00:03:37,585
cùng với các lớp học cảnh báo đủ điều kiện bổ sung,

45
00:03:37,585 --> 00:03:40,560
cho phép bạn tạo cảnh báo trong màu sắc khác nhau.

46
00:03:40,560 --> 00:03:43,145
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.

47
00:03:43,145 --> 00:03:46,110
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

48
00:03:46,110 --> 00:03:51,260
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.

49
00:03:51,260 --> 00:03:55,360
Tương tự như vậy, thanh tiến trình được bao gồm trong các trang web để giữ cho

50
00:03:55,360 --> 00:03:59,680
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.

51
00:03:59,680 --> 00:04:04,100
Ví dụ: nếu bạn đang tải tệp lên một trang web,

52
00:04:04,100 --> 00:04:08,105
thì bạn có thể muốn giữ cho người dùng thông báo về số lượng tệp đã

53
00:04:08,105 --> 00:04:12,780
hoàn tất tải lên bằng cách hiển thị thanh tiến trình trên trang web.

54
00:04:12,780 --> 00:04:16,780
Vì vậy, tạo ra một thanh tiến trình trong bootstrap được

55
00:04:16,780 --> 00:04:22,155
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

56
00:04:22,155 --> 00:04:26,265
một div bên trong với thanh tiến trình lớp và

57
00:04:26,265 --> 00:04:30,695
cũng cho phép đó được thêm theo kiểu bằng cách sử dụng những thứ như

58
00:04:30,695 --> 00:04:34,890
thanh tiến trình sọc và sau đó bạn có thể áp dụng màu sắc cho

59
00:04:34,890 --> 00:04:40,180
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.

60
00:04:40,180 --> 00:04:44,910
Vì vậy, trong trường hợp này bg-danger được áp dụng cho thanh tiến trình này.

61
00:04:44,910 --> 00:04:47,150
Chúng tôi cũng có thể làm cho phần tiến bộ sọc,

62
00:04:47,150 --> 00:04:49,395
chúng tôi cũng có thể hoạt hình thanh tiến trình,

63
00:04:49,395 --> 00:04:54,100
và cũng xác định bao nhiêu thanh tiến trình đó cần phải có trong hình thức.

64
00:04:54,100 --> 00:04:58,015
Vì vậy, bằng cách thay đổi giá trị chiều rộng này một cách tự

65
00:04:58,015 --> 00:05:04,925
độ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.

66
00:05:04,925 --> 00:05:08,350
Vì vậy, để tóm tắt, một thanh tiến trình có thể được tạo ra bằng cách

67
00:05:08,350 --> 00:05:12,030
áp dụng một lớp tiến trình cho div và bên trong

68
00:05:12,030 --> 00:05:14,260
có một div bên trong mà bạn áp dụng

69
00:05:14,260 --> 00:05:18,800
các lớp thanh tiến trình sẽ cho phép bạn tạo thanh tiến trình.

70
00:05:18,800 --> 00:05:22,450
Bạn thậm chí có thể xếp chồng nhiều thanh tiến trình với nhau để tạo ra

71
00:05:22,450 --> 00:05:28,325
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

72
00:05:28,325 --> 00:05:32,865
khác nhau cho thanh tiến trình và cũng có thể có diện mạo khác nhau cho

73
00:05:32,865 --> 00:05:36,570
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

74
00:05:36,570 --> 00:05:41,375
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.

75
00:05:41,375 --> 00:05:45,515
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

76
00:05:45,515 --> 00:05:50,925
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

77
00:05:50,925 --> 00:05:58,090
trong trang web của chúng tôi để thu hút sự chú ý của người dùng.