1
00:00:00,089 --> 00:00:04,955
[MUSIC]

2
00:00:04,955 --> 00:00:08,311
Đã qua đi là những ngày mà các trang web được sử dụng hoàn toàn

3
00:00:08,311 --> 00:00:11,385
để cung cấp thông tin cho người dùng.

4
00:00:11,385 --> 00:00:16,380
Những ngày này trên hầu hết các trang web, người dùng sẽ có thể tương tác với trang web để

5
00:00:16,380 --> 00:00:21,360
cung cấp thông tin, ví dụ bằng cách nhấp vào nút hoặc bằng cách điền vào biểu mẫu

6
00:00:21,360 --> 00:00:26,240
và bằng cách gõ một cái gì đó vào hộp tìm kiếm, v.v.

7
00:00:26,240 --> 00:00:29,940
Vậy làm thế nào để chúng tôi hỗ trợ các loại tương tác này với người dùng?

8
00:00:29,940 --> 00:00:35,900
Vì vậy, đó là những gì chúng ta sẽ giải quyết trong bài giảng đặc biệt này và

9
00:00:35,900 --> 00:00:38,333
bài tập sau đó.

10
00:00:38,333 --> 00:00:43,880
Ví dụ, nếu bạn truy cập trang web Coursera, bạn sẽ thấy rằng bạn có

11
00:00:43,880 --> 00:00:49,091
các nút ở trên cùng ở đây mà bạn có thể nhấp vào để tiếp cận các địa điểm khác nhau.

12
00:00:49,091 --> 00:00:54,954
Bạn có thể có một hộp tìm kiếm, trong đó bạn có thể nhập thông tin,

13
00:00:54,954 --> 00:01:01,880
để tìm kiếm, ví dụ, phát triển web stack đầy đủ và, như vậy.

14
00:01:01,880 --> 00:01:08,286
Vì vậy, những gì chúng tôi nhận thấy là tương tác người dùng cần được hỗ trợ

15
00:01:08,286 --> 00:01:14,808
trên các trang web bằng cách sử dụng nhiều cách tiếp cận khác nhau bao gồm các nút

16
00:01:14,808 --> 00:01:20,054
, biểu mẫu, hộp văn bản, hộp kiểm, và nhiều người khác.

17
00:01:20,054 --> 00:01:25,710
Tương tác sớm với các trang web được cung cấp chủ yếu thông qua các siêu liên kết.

18
00:01:25,710 --> 00:01:29,852
Vì vậy, bạn có thể nhấp vào một siêu liên kết và tiếp tục đến những nơi khác và vân vân, nhưng

19
00:01:29,852 --> 00:01:31,046
điều này rõ ràng

20
00:01:31,046 --> 00:01:35,559
là, siêu liên kết chỉ là một trong nhiều phương pháp tương tác với trang web của bạn.

21
00:01:35,559 --> 00:01:40,335
Bạn có thể có các nút bao gồm trên trang web mà khi nhấp

22
00:01:40,335 --> 00:01:44,580
vào, sẽ dẫn đến một số hành động được thực hiện trên trang web.

23
00:01:44,580 --> 00:01:49,900
Bạn có thể có các biểu mẫu mà bạn điền vào để cung cấp thông tin cho trang web.

24
00:01:49,900 --> 00:01:54,500
Vì vậy, khi bạn nhìn vào cách bạn sẽ bao gồm các

25
00:01:54,500 --> 00:01:58,660
tính năng tương tác người dùng như vậy vào trang web của bạn, bạn sẽ thấy rằng bạn có thể sử dụng

26
00:01:58,660 --> 00:02:03,930
một cái gì đó giống như một thẻ có ích cho việc cung cấp siêu liên kết,

27
00:02:03,930 --> 00:02:10,100
sau đó bạn có các thẻ nút cho phép bạn bao gồm các nút trong trang web của bạn.

28
00:02:10,100 --> 00:02:15,060
Bây giờ những gì chúng ta sẽ xem xét là làm thế nào để chúng ta định dạng với một thẻ trên

29
00:02:15,060 --> 00:02:19,850
các thẻ nút sử dụng các lớp bootstrap

30
00:02:20,910 --> 00:02:24,775
để bạn có thể phong cách chúng giả mạo chủ đề chung của bootstrap.

31
00:02:25,785 --> 00:02:30,075
HTML đã bao gồm các yếu tố biểu mẫu và các yếu tố đầu vào trong đó.

32
00:02:30,075 --> 00:02:34,640
Bây giờ, chúng ta có thể nhìn vào cách bootstrap tăng cường các yếu tố này bằng cách cung cấp các

33
00:02:34,640 --> 00:02:40,310
tính năng kiểu dáng cho các biểu mẫu, và các yếu tố khác nhau đi vào các biểu mẫu.

34
00:02:40,310 --> 00:02:45,950
Các nút hiển nhiên cung cấp một cách đơn giản để tương tác với trang web của bạn.

35
00:02:45,950 --> 00:02:49,600
Vì vậy, khi bạn có một nút trên trang web của bạn, bạn có thể di chuột trên nút,

36
00:02:49,600 --> 00:02:55,100
bạn có thể nhấp vào nút và mong đợi một cái gì đó xảy ra trong quá trình này.

37
00:02:55,100 --> 00:02:59,830
Hành vi nút phụ thuộc vào vị trí của nó trong bootstrap.

38
00:02:59,830 --> 00:03:03,060
Ví dụ, nếu nút nằm bên trong biểu mẫu, thông

39
00:03:03,060 --> 00:03:08,280
thường nút bấm sẽ dẫn đến biểu mẫu được gửi đến máy chủ,

40
00:03:08,280 --> 00:03:13,270
hoặc thông tin biểu mẫu bị hủy bỏ.

41
00:03:13,270 --> 00:03:19,200
Một nút bên ngoài một biểu mẫu có thể có những cách khác để cung cấp tương tác.

42
00:03:19,200 --> 00:03:24,589
Tương tự như vậy, < a > thẻ mà chúng tôi có truyền thống liên

43
00:03:25,690 --> 00:03:31,550
kết với các siêu liên kết cũng có thể bị cướp để được tạo kiểu và

44
00:03:31,550 --> 00:03:34,170
trình bày dưới dạng một nút.

45
00:03:34,170 --> 00:03:39,356
Vì vậy, ở đây chúng ta sẽ thấy làm thế nào bootstrap cung cấp các lớp học có thể được

46
00:03:39,356 --> 00:03:46,580
sử dụng để định dạng <a> thẻ thành một nút để được trình bày trên trang web của bạn.

47
00:03:46,580 --> 00:03:51,600
Chúng tôi cũng sẽ xem xét các yếu tố hình thức khác nhau, như các yếu tố đầu vào,

48
00:03:51,600 --> 00:03:56,390
chọn, nút và cũng là các yếu tố AD văn bản, và

49
00:03:56,390 --> 00:04:03,320
cách chúng tôi sử dụng chúng trong các biểu mẫu của chúng tôi để thiết kế và

50
00:04:03,320 --> 00:04:09,660
xây dựng một biểu mẫu có thể được bao gồm trong trang web của chúng tôi.

51
00:04:09,660 --> 00:04:13,640
Vì vậy, bài tập mà sau bài giảng đặc biệt này sẽ giới thiệu bạn để

52
00:04:13,640 --> 00:04:17,440
hỗ trợ bootstrap cho các nút tạo kiểu, và

53
00:04:17,440 --> 00:04:22,670
cũng nhìn vào cách các yếu tố hình thức khác nhau có thể được tăng cường bằng cách sử dụng các

54
00:04:22,670 --> 00:04:27,730
lớp bootstrap để trình bày các biểu mẫu Bootstrap cổ điển.