1
00:00:03,460 --> 00:00:06,755
Trong mô-đun trước,

2
00:00:06,755 --> 00:00:12,335
chúng tôi đã kiểm tra số lượng các thành phần Bootstrap hoàn toàn dựa trên CSS.

3
00:00:12,335 --> 00:00:15,945
Vì vậy, bằng cách áp dụng các lớp CSS cho các thành phần này,

4
00:00:15,945 --> 00:00:19,490
chúng tôi đã có thể tạo ra chúng trên trang web của chúng tôi.

5
00:00:19,490 --> 00:00:26,500
Trong mô-đun này, chúng ta sẽ kiểm tra thêm các thành phần dựa trên JavaScript Bootstrap.

6
00:00:26,500 --> 00:00:30,580
Vì vậy, tóm tắt, như chúng ta đã thấy trong mô-đun trước đó,

7
00:00:30,580 --> 00:00:34,755
Bootstrap hỗ trợ một số lớp CSS có thể được áp dụng cho

8
00:00:34,755 --> 00:00:43,260
đánh dấu HTML của bạn trong các trang web của bạn để kích hoạt và sử dụng các lớp CSS.

9
00:00:43,260 --> 00:00:49,610
Vì vậy, bạn có thể thấy làm thế nào các lớp CSS sửa đổi các thẻ HTML chung và

10
00:00:49,610 --> 00:00:56,365
cung cấp cách riêng của Bootstrap để trình bày cùng một thông tin.

11
00:00:56,365 --> 00:01:02,180
Vì vậy, các thành phần hoàn toàn dựa trên CSS có thể dễ dàng được kích hoạt bằng cách

12
00:01:02,180 --> 00:01:04,260
áp dụng các lớp CSS bootstrap cho

13
00:01:04,260 --> 00:01:09,270
các thẻ HTML khác nhau có trong các trang web của bạn.

14
00:01:09,270 --> 00:01:14,525
Bootstrap của chính nó có thể được sử dụng hoàn toàn cho các lớp CSS của nó.

15
00:01:14,525 --> 00:01:19,500
Một khía cạnh khác của Bootstraps CSS class mà chúng ta thấy là

16
00:01:19,500 --> 00:01:24,630
hầu hết các thành phần này bắt đầu với một lớp cơ sở mà bạn áp dụng.

17
00:01:24,630 --> 00:01:27,660
Ví dụ, khi bạn nhìn vào nút,

18
00:01:27,660 --> 00:01:31,575
bạn thấy rằng lớp cơ sở là lớp BTN.

19
00:01:31,575 --> 00:01:33,160
Sau đó, bạn sẽ áp dụng

20
00:01:33,160 --> 00:01:38,160
một cái gì đó giống như một BTN chính mà sẽ thêm màu sắc của họ vào BTN,

21
00:01:38,160 --> 00:01:43,175
sau đó bạn có thể xác định kích thước của nút bằng cách nói BTN SM.

22
00:01:43,175 --> 00:01:49,905
Sau đó, bạn cũng có thể xác định nút là một khối toàn bộ bằng cách sử dụng lớp khối BTN.

23
00:01:49,905 --> 00:01:56,260
Vì vậy, tất cả các lớp tiếp theo và sửa đổi cho lớp BTN cơ sở.

24
00:01:56,260 --> 00:01:59,430
Vì vậy, cách tiếp cận này, bạn sẽ thấy nó

25
00:01:59,430 --> 00:02:03,330
hơn và hơn nữa trong nhiều thành phần Bootstraps.

26
00:02:03,330 --> 00:02:07,925
Vì vậy, bạn sẽ có một lớp cơ sở sau đó tập hợp các lớp modifier có thể được

27
00:02:07,925 --> 00:02:14,164
áp dụng để sửa đổi hành vi của thành phần cơ sở.

28
00:02:14,164 --> 00:02:20,210
Điều này tạo điều kiện cho việc thiết kế trang web của bạn dễ dàng.

29
00:02:20,210 --> 00:02:24,260
Lấy một ví dụ khác, chúng ta có thể nhìn vào lớp Nav.

30
00:02:24,260 --> 00:02:28,020
Chúng tôi sử dụng lớp Nav trong NAV bar mà

31
00:02:28,020 --> 00:02:33,635
chúng tôi bao gồm trong trang web của chúng tôi trong mô-đun trước đó.

32
00:02:33,635 --> 00:02:40,130
Lớp Nav, chúng tôi sửa đổi điều đó bằng cách áp dụng lớp NAV-bar Nav cho nó.

33
00:02:40,130 --> 00:02:45,660
Vì vậy, điều đó cung cấp cho chúng tôi một cách nhất định để trình bày các thông tin điều hướng.

34
00:02:45,660 --> 00:02:51,310
Trong mô-đun này, chúng tôi sẽ kiểm tra các tab Nav-tab và

35
00:02:51,310 --> 00:02:58,295
Nav-tablet mà vẫn là một cách khác để trình bày thông tin điều hướng cho trang web.

36
00:02:58,295 --> 00:03:04,180
Các tab và các viên thuốc chúng tôi đang trình bày điều hướng một lần nữa, được

37
00:03:04,180 --> 00:03:10,265
hỗ trợ với một plugin JavaScript,

38
00:03:10,265 --> 00:03:15,195
cung cấp một cách nâng cao để cung cấp điều hướng trong nội dung của bạn.

39
00:03:15,195 --> 00:03:18,835
Vì vậy, chúng tôi sẽ kiểm tra điều đó trong mô-đun cụ thể này.

40
00:03:18,835 --> 00:03:23,620
Tôi sử dụng điều này như một ví dụ để minh họa cho bạn cách bắt đầu từ một lớp cơ sở,

41
00:03:23,620 --> 00:03:28,075
bạn có thể sửa đổi bằng cách áp dụng các lớp modifier cho lớp cơ sở.

42
00:03:28,075 --> 00:03:30,640
Tất nhiên, nếu bạn muốn đưa vào

43
00:03:30,640 --> 00:03:35,285
một phần JavaScript của các thành phần Bootstrap của bạn vào hành động,

44
00:03:35,285 --> 00:03:38,670
sau đó bạn nên bắt đầu áp dụng các lớp JavaScript.

45
00:03:38,670 --> 00:03:41,725
Vì vậy, Bootstrap hỗ trợ một số thành phần

46
00:03:41,725 --> 00:03:44,970
được hỗ trợ thông qua các plugin JavaScript.

47
00:03:44,970 --> 00:03:47,880
Bây giờ, khi bạn sử dụng các plugin này trong trang web của

48
00:03:47,880 --> 00:03:52,890
bạn, bạn có thể bao gồm các plugin riêng lẻ mà bạn thực sự sẽ sử dụng trong trang web

49
00:03:52,890 --> 00:03:55,815
của bạn, hoặc toàn bộ các plugin.

50
00:03:55,815 --> 00:03:59,500
Bây giờ, những gì chúng ta sẽ làm trong các bài tập là,

51
00:03:59,500 --> 00:04:03,495
bao gồm toàn bộ các plugin bởi vì chúng tôi chỉ muốn khám phá tất cả chúng.

52
00:04:03,495 --> 00:04:05,870
Nhưng nếu bạn đang thiết kế một trang web,

53
00:04:05,870 --> 00:04:09,000
bạn có thể chỉ bao gồm một tập hợp con của các plugin

54
00:04:09,000 --> 00:04:12,300
mà bạn đang thực sự sử dụng trong trang web

55
00:04:12,300 --> 00:04:15,630
của bạn, do đó giảm lượng mã JavaScript cần

56
00:04:15,630 --> 00:04:21,470
được gửi đến một người dùng đang xem trang web của bạn.

57
00:04:21,470 --> 00:04:27,590
Đây là cách tôi nhìn vào cách tiếp cận Bootstraps để sử dụng JavaScript trong

58
00:04:27,590 --> 00:04:33,905
sự hỗ trợ riêng của mình cho các thành phần Bootstrap được kích hoạt với JavaScript.

59
00:04:33,905 --> 00:04:36,785
Nếu bạn nhìn vào JavaScript

60
00:04:36,785 --> 00:04:44,845
một mình, nó cung cấp rất nhiều sự linh hoạt và cho phép bạn làm rất nhiều điều thú vị.

61
00:04:44,845 --> 00:04:46,695
Nhưng điều đó cũng đòi hỏi phải

62
00:04:46,695 --> 00:04:52,200
viết mã JavaScript để được sử dụng khi bạn đang thiết kế trang web của mình.

63
00:04:52,200 --> 00:04:58,730
Bây giờ, tôi nhìn vào JavaScript như một đô vật sumo lớn với rất nhiều khả năng,

64
00:04:58,730 --> 00:05:02,670
rất nhiều sức mạnh, nhưng không thuần hóa.

65
00:05:02,670 --> 00:05:09,875
Bây giờ, jQuery như một thư viện được xây dựng trên đầu trang của JavaScript,

66
00:05:09,875 --> 00:05:14,815
về cơ bản mất sumo đô vật và sau đó gói nó một cách tốt hơn để làm cho

67
00:05:14,815 --> 00:05:20,435
con khỉ đột trăm lbs này thành một kích thước dễ quản lý hơn, dễ

68
00:05:20,435 --> 00:05:23,790
tiếp cận hơn và dễ dàng hơn để

69
00:05:23,790 --> 00:05:28,235
bao gồm và làm cho sử dụng tắt trong trang web của bạn thiết kế.

70
00:05:28,235 --> 00:05:31,855
Vì vậy, nếu bạn đang sử dụng thư viện jQuery trực tiếp,

71
00:05:31,855 --> 00:05:34,510
bạn chắc chắn có thể tận dụng nhiều

72
00:05:34,510 --> 00:05:40,175
thành phần jQuery và sử dụng chúng trong trang web của bạn.

73
00:05:40,175 --> 00:05:44,480
Bây giờ, đó là một cách tiếp cận mà bạn luôn có thể thực hiện bởi vì jQuery

74
00:05:44,480 --> 00:05:48,170
đã được đưa vào trang web Bootstrap của

75
00:05:48,170 --> 00:05:52,910
bạn, nếu bạn sẽ tận dụng các thành phần dựa trên JavaScript.

76
00:05:52,910 --> 00:05:56,545
Bootstrap tiến thêm một bước nữa,

77
00:05:56,545 --> 00:05:59,145
và sau đó nhìn vào hình ảnh

78
00:05:59,145 --> 00:06:04,395
cách tiếp cận của Bootstrap là lấy đô vật sumo và sau đó đưa anh ta vào một cái hộp.

79
00:06:04,395 --> 00:06:09,730
Về cơ bản đứng để đóng gói các

80
00:06:09,730 --> 00:06:18,935
plugin JavaScript của bạn vào một thành phần mà bạn có thể dễ dàng sử dụng hơn trong các trang web của bạn.

81
00:06:18,935 --> 00:06:24,775
Vì vậy, các thành phần dựa trên Bootstrap JavaScript về cơ bản có hỗ trợ dựa trên jQuery,

82
00:06:24,775 --> 00:06:28,760
nhưng sau đó đóng gói chúng theo cách mà bạn có thể sử dụng chúng trong

83
00:06:28,760 --> 00:06:34,390
trang web của bạn ngay cả khi không viết một dòng mã JavaScript.

84
00:06:34,390 --> 00:06:38,955
Đây là nơi mà thành phần Bootstrap JavaScript

85
00:06:38,955 --> 00:06:43,030
có thể được sử dụng mà không cần viết một dòng mã duy nhất.

86
00:06:43,030 --> 00:06:46,620
Cách nó được hỗ trợ trong Bootstrap là,

87
00:06:46,620 --> 00:06:51,400
các thành phần JavaScript hỗ trợ một số

88
00:06:51,400 --> 00:06:56,940
thuộc tính sao gạch nối dữ liệu mà bạn có thể áp dụng cho các thẻ HTML của mình.

89
00:06:56,940 --> 00:07:00,120
Vì vậy, bạn sẽ thấy tôi sử dụng những thứ như chuyển đổi dữ liệu,

90
00:07:00,120 --> 00:07:04,370
dữ liệu gián điệp, dữ liệu mục tiêu, và như vậy.

91
00:07:04,370 --> 00:07:07,795
Nếu bạn nhớ lại, khi chúng tôi thiết kế thanh Nav-bar,

92
00:07:07,795 --> 00:07:11,120
bạn đã thực sự thấy một vài thuộc tính này.

93
00:07:11,120 --> 00:07:15,660
Ở đó chúng tôi đã thiết kế nút cho các màn hình nhỏ thêm.

94
00:07:15,660 --> 00:07:21,550
Bây giờ, đã đến lúc chúng ta [không nghe được] tại sao chúng ta đã làm điều đó trong mô-đun trước đó.

95
00:07:21,550 --> 00:07:26,935
Vì vậy, chúng ta sẽ tìm hiểu cách tiếp cận này một cách chi tiết trong mô-đun này,

96
00:07:26,935 --> 00:07:33,000
xem xét một số thành phần Bootstrap tận dụng hỗ trợ JavaScript.

97
00:07:33,000 --> 00:07:35,015
Tất nhiên, bạn có thể tận dụng

98
00:07:35,015 --> 00:07:38,650
API JavaScript đầy đủ có

99
00:07:38,650 --> 00:07:42,945
sẵn cho tất cả các thành phần này bằng cách thực sự viết mã JavaScript.

100
00:07:42,945 --> 00:07:46,130
Chúng tôi sẽ hoãn lại cho mô-đun tiếp theo, trong

101
00:07:46,130 --> 00:07:51,370
đó chúng tôi sẽ kiểm tra cách bạn có thể viết mã JavaScript đơn giản dựa trên

102
00:07:51,370 --> 00:07:54,580
cú pháp jQuery để thêm

103
00:07:54,580 --> 00:08:00,070
nhiều chức năng hơn vào các thành phần Bootstrap dựa trên JavaScript của bạn.