1
00:00:03,550 --> 00:00:05,885
Trong bài giảng trước,

2
00:00:05,885 --> 00:00:08,860
chúng tôi đã tìm hiểu về thiết kế đáp ứng.

3
00:00:08,860 --> 00:00:12,300
Chúng tôi cũng đề cập ngắn gọn rằng hệ thống lưới Bootstrap được

4
00:00:12,300 --> 00:00:16,505
thiết kế để hỗ trợ các trang web đáp ứng.

5
00:00:16,505 --> 00:00:20,275
Làm thế nào để Bootstraps grid hỗ trợ điều này?

6
00:00:20,275 --> 00:00:23,765
Và chính xác những gì Bootstrap lưới liên quan đến,

7
00:00:23,765 --> 00:00:27,710
cho phép chúng tôi thiết kế các trang web đáp ứng?

8
00:00:27,710 --> 00:00:32,535
Hãy nói một chút chi tiết hơn về hệ thống lưới Bootstrap,

9
00:00:32,535 --> 00:00:36,700
và làm thế nào nó hỗ trợ đáp ứng tiếp theo.

10
00:00:36,700 --> 00:00:45,450
Chúng tôi đã thấy việc sử dụng thẻ meta viewport trong bài học trước đó,

11
00:00:45,450 --> 00:00:53,590
khi chúng tôi đã thực hiện bài tập ban đầu về việc thiết lập Bootstrap trong trang index.html của chúng tôi.

12
00:00:53,590 --> 00:00:58,790
Tôi ngắn gọn đề cập đến dòng đặc biệt này trong mã sau đó.

13
00:00:58,790 --> 00:01:05,015
Hãy cố gắng hiểu lý do tại sao chúng tôi sử dụng điều này trong trang index.html của chúng tôi.

14
00:01:05,015 --> 00:01:08,090
Những gì chúng tôi đang chỉ định ở đây là,

15
00:01:08,090 --> 00:01:14,555
khi trang web của chúng tôi đang được trình duyệt hiển thị trong một thiết bị cụ thể, sau đó,

16
00:01:14,555 --> 00:01:20,970
hiển thị của chúng trong trình duyệt sẽ tính đến kích thước của màn hình và

17
00:01:20,970 --> 00:01:28,080
tự động điều chỉnh việc hiển thị trang với chiều rộng màn hình thiết bị.

18
00:01:28,080 --> 00:01:32,090
Bằng cách đó, sau đó chúng tôi có các lớp học đáp ứng, các

19
00:01:32,090 --> 00:01:35,740
lớp CSS được xây dựng trong khuôn khổ giao diện người dùng của chúng tôi,

20
00:01:35,740 --> 00:01:39,030
sau đó sẽ đảm bảo rằng trang web của chúng tôi được

21
00:01:39,030 --> 00:01:42,855
kết xuất chính xác cho kích thước màn hình cụ thể.

22
00:01:42,855 --> 00:01:46,930
Đây là nơi mà hệ thống lưới Bootstrap đến để giải cứu chúng tôi và

23
00:01:46,930 --> 00:01:51,000
cho phép chúng tôi thiết kế các trang web đáp ứng.

24
00:01:51,000 --> 00:01:53,480
Vì vậy, một lần nữa, nhấn mạnh điểm này,

25
00:01:53,480 --> 00:01:57,100
lưới Bootstrap được thiết kế để đáp ứng.

26
00:01:57,100 --> 00:02:01,525
Bạn đã thấy điều này có nghĩa là gì trong bài giảng trước đó,

27
00:02:01,525 --> 00:02:07,845
và điện thoại di động đầu tiên, mà chúng tôi đã thảo luận trong bài giảng trước đó và sau đó chất lỏng,

28
00:02:07,845 --> 00:02:11,055
tự động thích nghi với chiều rộng màn hình.

29
00:02:11,055 --> 00:02:16,220
Lưới Bootstrap tận dụng cách bố trí CSS flexbox.

30
00:02:16,220 --> 00:02:19,860
Bố cục CSS flexbox đang được hỗ trợ bởi

31
00:02:19,860 --> 00:02:23,955
các phiên bản gần đây hơn của các trình duyệt khác nhau,

32
00:02:23,955 --> 00:02:30,070
cho phép các tùy chọn bố cục đơn giản hơn và linh hoạt hơn trong CSS.

33
00:02:30,070 --> 00:02:31,980
Bây giờ, các cuộc thảo luận thực tế về

34
00:02:31,980 --> 00:02:36,800
cách bố trí CSS flexbox hoạt động là vượt quá phạm vi của khóa học này,

35
00:02:36,800 --> 00:02:41,040
chúng tôi sẽ hạn chế bản thân như thế nào CSS flexbox đang được

36
00:02:41,040 --> 00:02:45,565
thúc đẩy bởi Bootstrap cho hệ thống lưới của nó.

37
00:02:45,565 --> 00:02:54,710
Trước đó Bootstrap đã có hệ thống lưới riêng của mình mà là predating bố cục CSS flexbox,

38
00:02:54,710 --> 00:02:58,840
nhưng phiên bản mới nhất của Bootstrap

39
00:02:58,840 --> 00:03:06,650
đã làm cho CSS flexbox bố cục làm tiêu chuẩn cho lưới Bootstrap.

40
00:03:06,650 --> 00:03:10,375
Bố cục flexbox này có thể dễ dàng xử lý

41
00:03:10,375 --> 00:03:17,390
nội dung động và có thể thích ứng các container với nội dung động,

42
00:03:17,390 --> 00:03:20,780
và cũng có thể dễ dàng thích ứng với kích thước không xác

43
00:03:20,780 --> 00:03:24,890
định của nội dung thực tế kèm theo bên trong container.

44
00:03:24,890 --> 00:03:30,320
Bố cục flexbox cũng hỗ trợ bố cục theo hướng bất khả tri.

45
00:03:30,320 --> 00:03:37,084
Những gì bố trí flexbox mang đến cho lưới Bootstrap là khả năng

46
00:03:37,084 --> 00:03:44,005
thực hiện dễ dàng căn chỉnh theo chiều dọc của nội dung trong một phần tử cha.

47
00:03:44,005 --> 00:03:48,595
Chúng ta sẽ thấy việc sử dụng điều này trong bài tập sau.

48
00:03:48,595 --> 00:03:52,625
Ngoài ra, nó cho phép dễ dàng sắp xếp lại nội dung

49
00:03:52,625 --> 00:03:58,170
trên các thiết bị khác nhau và độ phân giải màn hình với sự trợ giúp của các truy vấn phương tiện.

50
00:03:58,170 --> 00:04:03,050
Một lần nữa chúng ta sẽ thấy một chút về điều đó trong bài tập về cách Bootstrap

51
00:04:03,050 --> 00:04:08,645
tận dụng điều đó để hỗ trợ những cách thú vị để đặt ra nội dung.

52
00:04:08,645 --> 00:04:11,670
Ngoài ra, nội dung đó chính nó,

53
00:04:11,670 --> 00:04:19,275
các thùng chứa nội dung cũng có thể được thiết kế để có chiều cao bằng nhau cột sao cho

54
00:04:19,275 --> 00:04:25,245
các thùng chứa nội dung có chiều cao lớn nhất xác

55
00:04:25,245 --> 00:04:32,915
định chiều cao của tất cả các thùng chứa còn lại được đặt ra trong cùng một hàng.

56
00:04:32,915 --> 00:04:39,375
Bây giờ chúng ta hãy nói thêm một chút chi tiết về lưới Bootstrap và làm thế nào nó thực sự hoạt động.

57
00:04:39,375 --> 00:04:41,400
Cách lưới Bootstrap hoạt động,

58
00:04:41,400 --> 00:04:48,765
là bằng cách áp dụng một container cộng với lớp ngoài cùng.

59
00:04:48,765 --> 00:04:51,815
Chúng tôi có thể sử dụng một div để

60
00:04:51,815 --> 00:04:57,075
xác định các yếu tố mà chúng tôi áp dụng các lớp container nói chung.

61
00:04:57,075 --> 00:05:03,855
Thùng chứa là đơn vị ngoài cùng trong đó nội dung thực tế được đặt ra.

62
00:05:03,855 --> 00:05:10,220
Bootstrap hỗ trợ cả lớp chứa đó là một bố cục chiều rộng cố định,

63
00:05:10,220 --> 00:05:16,010
có nghĩa là nội dung chính nó bị giới hạn ở một chiều rộng cố định trên màn hình.

64
00:05:16,010 --> 00:05:22,420
Lớp chứa này cho phép chiều rộng cố định này tự động thích ứng với

65
00:05:22,420 --> 00:05:25,920
kích thước của màn hình bằng cách sử dụng các truy vấn phương tiện để đó

66
00:05:25,920 --> 00:05:29,695
là nơi thiết kế đáp ứng đi vào giải cứu của chúng tôi.

67
00:05:29,695 --> 00:05:36,340
Sau đó, chúng ta sẽ thấy cách container này sẽ điều chỉnh theo kích thước màn hình khác nhau.

68
00:05:36,340 --> 00:05:39,490
Bây giờ, chúng tôi cũng có sự linh hoạt của việc sử dụng trong

69
00:05:39,490 --> 00:05:42,684
các chất lỏng container cổ điển khác cho

70
00:05:42,684 --> 00:05:49,200
phép container tự động thích ứng với kích thước của màn hình.

71
00:05:49,200 --> 00:05:50,855
Nhưng thùng chứa chiều rộng cố định,

72
00:05:50,855 --> 00:05:56,270
sửa chữa kích thước của chiều rộng bố trí thực tế.

73
00:05:56,270 --> 00:06:01,370
Bên trong container, nội dung sẽ được đặt ra dưới dạng hàng,

74
00:06:01,370 --> 00:06:04,770
vì vậy thông thường những gì chúng tôi sẽ làm là bên trong

75
00:06:04,770 --> 00:06:08,360
và ra khỏi div mà chúng tôi áp dụng các lớp container, chúng tôi

76
00:06:08,360 --> 00:06:12,440
sẽ bao gồm một div bên trong mà chúng tôi sẽ áp dụng các lớp hàng.

77
00:06:12,440 --> 00:06:17,550
Vì vậy, nội dung chính nó sẽ được chia theo chiều dọc thành nhiều hàng.

78
00:06:17,550 --> 00:06:21,000
Và một khi điều này được chia thành các hàng, trong mỗi hàng,

79
00:06:21,000 --> 00:06:25,995
sau đó bạn có thể bố trí nội dung bằng cách sử dụng các cột.

80
00:06:25,995 --> 00:06:28,810
Vì vậy, mỗi hàng trong Bootstrap,

81
00:06:28,810 --> 00:06:34,565
sẽ được chia thành 12 cột có kích thước bằng nhau.

82
00:06:34,565 --> 00:06:43,820
Bây giờ, bạn có thể thiết kế nội dung của mình để chiếm bất kỳ số nào trong 12 cột này.

83
00:06:43,820 --> 00:06:48,900
Vì vậy, và thực tế là nội dung chính nó thích nghi với

84
00:06:48,900 --> 00:06:51,310
chiều rộng màn hình và hàng chính nó được

85
00:06:51,310 --> 00:06:54,710
bao bọc bên trong thùng chứa sẽ tự động thích ứng với chiều rộng màn hình,

86
00:06:54,710 --> 00:06:58,120
cũng như các cột,

87
00:06:58,120 --> 00:07:01,320
12 cột sẽ được xác định.

88
00:07:01,320 --> 00:07:05,010
Chiều rộng của chúng sẽ được xác định bởi hàng của chính nó.

89
00:07:05,010 --> 00:07:08,520
Vì vậy, điều đó có nghĩa là đối với một kích cỡ màn hình khác nhau,

90
00:07:08,520 --> 00:07:12,470
bất kỳ nội dung nào bạn bố trí tất cả 12 cột

91
00:07:12,470 --> 00:07:18,220
đó sẽ tự động điều chỉnh chính nó theo chiều rộng được cho phép đối với nội dung.

92
00:07:18,220 --> 00:07:21,990
Vì vậy, đây là cách đáp ứng được xây dựng

93
00:07:21,990 --> 00:07:27,370
vào lưới Bootstrap cách đặt ra nội dung.

94
00:07:27,370 --> 00:07:30,285
Vì vậy, chính xác làm thế nào để chúng ta bố trí nội dung?

95
00:07:30,285 --> 00:07:33,845
Chúng ta sẽ nói về điều đó trong vài slide tiếp theo.

96
00:07:33,845 --> 00:07:36,315
Các Bootstrap lưới chính nó,

97
00:07:36,315 --> 00:07:45,160
làm cho có sẵn cho chúng tôi năm lớp để xác định kích thước màn hình khác nhau theo mặc định.

98
00:07:45,160 --> 00:07:49,870
Có một lớp mặc định nhắm mục tiêu tất cả các kích thước màn hình,

99
00:07:49,870 --> 00:07:53,210
bắt đầu từ quá nhỏ đến quá lớn.

100
00:07:53,210 --> 00:07:59,205
Vì vậy, toàn bộ phạm vi của màn hình chiều rộng theo thuật ngữ Bootstrap,

101
00:07:59,205 --> 00:08:02,884
được chia thành các

102
00:08:02,884 --> 00:08:07,405
kích thước màn hình nhỏ, nhỏ, trung bình, lớn và cực lớn.

103
00:08:07,405 --> 00:08:11,180
Sau đó, nhìn vào cách các lớp khác nhau

104
00:08:11,180 --> 00:08:16,350
của kích thước màn hình được xác định chi tiết trong một trong các trang trình bày sau này.

105
00:08:16,350 --> 00:08:18,540
Vì vậy, trong mã của bạn,

106
00:08:18,540 --> 00:08:22,830
bạn sẽ xác định đặc điểm kỹ thuật bố trí bằng cách

107
00:08:22,830 --> 00:08:29,060
chỉ định sm cho kích thước màn hình nhỏ,

108
00:08:29,060 --> 00:08:32,195
md cho trung bình, lg cho lớn,

109
00:08:32,195 --> 00:08:35,905
và xx cho kích thước màn hình lớn thêm.

110
00:08:35,905 --> 00:08:37,400
Vì vậy, khi bạn thực hiện bố cục,

111
00:08:37,400 --> 00:08:40,345
như chúng ta đã thấy trong slide trước đó,

112
00:08:40,345 --> 00:08:45,405
mỗi hàng trong một hệ thống lưới Bootstrap được chia thành 12 cột.

113
00:08:45,405 --> 00:08:50,905
Bây giờ, chúng ta sẽ bố trí nội dung bằng cách sử dụng những gì được gọi là các lớp cột.

114
00:08:50,905 --> 00:08:52,450
Đối với các lớp cột,

115
00:08:52,450 --> 00:08:59,162
chúng ta có thể xác định cách bố trí được thực hiện cho độ rộng màn hình khác nhau.

116
00:08:59,162 --> 00:09:04,735
Xem chi tiết của điều này trong các trang chiếu tiếp theo sau.

117
00:09:04,735 --> 00:09:11,020
Nhưng hãy để tôi nhanh chóng thu hút sự chú ý của bạn đến cách chúng tôi chỉ định kích thước cột.

118
00:09:11,020 --> 00:09:13,655
Họ có thể xác định kích thước cột như col,

119
00:09:13,655 --> 00:09:19,485
đó là một trong những lớp họ sẽ nói col-sm cho

120
00:09:19,485 --> 00:09:25,360
nhỏ và col-md cho trung bình và lớn và thêm lớn và như vậy.

121
00:09:25,360 --> 00:09:29,810
Bây giờ, các lớp cột này được sử dụng để

122
00:09:29,810 --> 00:09:38,260
xác định chính xác bao nhiêu cột trong một hàng sẽ mỗi phần nội dung chiếm.

123
00:09:38,260 --> 00:09:40,015
Làm thế nào để làm việc này?

124
00:09:40,015 --> 00:09:42,215
Chúng ta sẽ thấy điều đó trong slide tiếp theo.

125
00:09:42,215 --> 00:09:45,565
Vì vậy, quay trở lại Bootstrap Grid của chúng tôi,

126
00:09:45,565 --> 00:09:50,345
giả sử chúng tôi có một phần nội dung và chúng tôi muốn đặt ra sự bình an của nội dung.

127
00:09:50,345 --> 00:09:54,915
Chúng ta có thể xác định rằng nội dung được bao bọc bên trong một div khác,

128
00:09:54,915 --> 00:09:57,815
mà chúng ta áp dụng lớp cột,

129
00:09:57,815 --> 00:10:00,390
như ví dụ, col-sm-5.

130
00:10:00,390 --> 00:10:08,560
Vì vậy, trong trường hợp đó, những gì chúng tôi đang chỉ định là cho kích thước màn hình nhỏ đến cực lớn,

131
00:10:08,560 --> 00:10:15,890
phần nội dung này sẽ chiếm năm cột trong số 12 cột đó.

132
00:10:15,890 --> 00:10:17,505
Bây giờ, bạn sẽ ngay lập tức hỏi tôi,

133
00:10:17,505 --> 00:10:19,835
những gì về việc hút thuốc thêm?

134
00:10:19,835 --> 00:10:23,465
Nếu nó không được chỉ định rõ ràng cho lockette thông minh thêm

135
00:10:23,465 --> 00:10:27,120
bởi toàn bộ chiều rộng của 12 cột,

136
00:10:27,120 --> 00:10:31,575
họ có thể xác định rõ ràng từ

137
00:10:31,575 --> 00:10:38,135
phạm vi mà bố trí cột sẽ chiếm bao nhiêu cột.

138
00:10:38,135 --> 00:10:39,890
Vì vậy, trong trường hợp đặc biệt này,

139
00:10:39,890 --> 00:10:42,470
khi tôi chỉ định tôi chỉ gọi chúng là sm-5, những

140
00:10:42,470 --> 00:10:48,295
gì tôi có nghĩa là nội dung đặc biệt này được bao bọc bên trong những div,

141
00:10:48,295 --> 00:10:52,375
sẽ chiếm năm cột cho tất cả các kích thước màn hình,

142
00:10:52,375 --> 00:10:56,595
từ nhỏ tất cả các cách để thêm lớn.

143
00:10:56,595 --> 00:11:00,595
Bây giờ, chúng ta thấy rằng trong số 12 cột,

144
00:11:00,595 --> 00:11:02,515
chúng ta đã chiếm năm cột.

145
00:11:02,515 --> 00:11:05,070
Vẫn còn 7 cột nữa.

146
00:11:05,070 --> 00:11:09,925
Tôi có thể lấy một phần của nội dung và sau đó vị trí nó ở bên phải của điều này,

147
00:11:09,925 --> 00:11:14,085
bằng cách bảo vệ một div và sau đó áp dụng cột sm-7.

148
00:11:14,085 --> 00:11:15,855
Bây giờ, trong trường hợp này,

149
00:11:15,855 --> 00:11:18,065
bạn thấy rằng 5 cộng 7 bằng 12.

150
00:11:18,065 --> 00:11:22,900
Vì vậy, hai phần nội dung được bao bọc trong hai divs,

151
00:11:22,900 --> 00:11:25,530
bây giờ sẽ được định vị cạnh nhau,

152
00:11:25,530 --> 00:11:30,070
và tổng số chúng chiếm toàn bộ chiều rộng cột 12.

153
00:11:30,070 --> 00:11:35,765
Vì vậy, đây là cách chúng ta có thể chỉ định và làm việc với 12 cột

154
00:11:35,765 --> 00:11:42,630
trong việc xác định bố trí của tầng hiện tại.

155
00:11:42,630 --> 00:11:46,960
Với việc sử dụng bố trí hộp CSS flex,

156
00:11:46,960 --> 00:11:51,660
Bootstrap cũng hỗ trợ những gì được gọi là cột tự động bố trí.

157
00:11:51,660 --> 00:11:52,905
Vì vậy, trong trường hợp này,

158
00:11:52,905 --> 00:11:55,380
tôi chỉ có thể chỉ định

159
00:11:55,380 --> 00:12:00,060
cột sm mà không xác định có bao nhiêu cột nó được cho là chiếm.

160
00:12:00,060 --> 00:12:07,570
Nhưng trong trường hợp tôi chỉ định ba Doobs chiều rộng cột sm trong heml của tôi 5,

161
00:12:07,570 --> 00:12:13,575
sau đó lưới bootstrap sẽ tự động định vị các nội dung này bên trong những divs

162
00:12:13,575 --> 00:12:14,905
, cạnh nhau, do

163
00:12:14,905 --> 00:12:18,875
đó, mỗi người trong số họ được một phần ba tổng chiều rộng.

164
00:12:18,875 --> 00:12:22,220
Vì vậy, vì chúng ta có 12 cột ở đây,

165
00:12:22,220 --> 00:12:26,045
mỗi cột trong ba sẽ nhận được bốn cột mỗi cột.

166
00:12:26,045 --> 00:12:32,525
Và điều này được tự động chăm sóc bởi cơ chế bố trí bootstraps.

167
00:12:32,525 --> 00:12:35,550
Bây giờ, chúng ta có thể xác

168
00:12:35,550 --> 00:12:40,375
định rõ ràng số lượng cột một phần nội dung cụ thể chiếm.

169
00:12:40,375 --> 00:12:45,625
Vì vậy, ví dụ, giả sử tôi chỉ định ba lớp cột,

170
00:12:45,625 --> 00:12:49,565
nhưng một trong những giữa tôi chỉ định cột sm 6.

171
00:12:49,565 --> 00:12:52,615
Sau đó, điều xảy ra là, khi bootstrap thực hiện bố cục, phần

172
00:12:52,615 --> 00:12:55,760
giữa sẽ chiếm sáu cột,

173
00:12:55,760 --> 00:13:01,885
và sau đó phần bên trái và bên phải của nội dung sẽ chiếm bất cứ thứ gì còn lại.

174
00:13:01,885 --> 00:13:04,785
Vì vậy, trong số 12 cột mà chúng tôi có,

175
00:13:04,785 --> 00:13:08,630
nếu 6 cột chiếm bởi phần giữa của nội dung,

176
00:13:08,630 --> 00:13:12,855
sau đó chúng tôi đã để lại với chúng tôi 6 cột nữa và đó sẽ được

177
00:13:12,855 --> 00:13:17,965
chia đều giữa nội dung và hai bên của cột giữa này.

178
00:13:17,965 --> 00:13:23,585
Vì vậy, mỗi người trong số họ sẽ nhận được các cột trống của không gian mỗi.

179
00:13:23,585 --> 00:13:27,730
Vì vậy, đó là cách bố trí được tự động thực hiện với Bootstrap.

180
00:13:27,730 --> 00:13:34,110
Trong bài tập, chúng ta sẽ thấy các kết hợp khác nhau của việc sử dụng các loại

181
00:13:34,110 --> 00:13:43,680
thông số kỹ thuật này của bao nhiêu cột mỗi phần nội dung sẽ chiếm trong bố cục màu sắc.

182
00:13:43,680 --> 00:13:49,135
Bảng này tóm tắt cách Bootstrap xử lý

183
00:13:49,135 --> 00:13:54,860
lưới màn hình khác nhau và tương ứng cách bạn xác định các lưới màn hình này.

184
00:13:54,860 --> 00:13:57,095
Vì vậy, như tôi đã chỉ định trước đó,

185
00:13:57,095 --> 00:14:04,580
Bootstrap chia toàn bộ phạm vi chiều rộng màn hình thành 5 lớp.

186
00:14:04,580 --> 00:14:12,890
Các màn hình nhỏ phụ là những màn hình có lưới dưới 776 pixel.

187
00:14:12,890 --> 00:14:22,090
Màn hình nhỏ là những màn hình nằm giữa 576 và dưới 768 pixel.

188
00:14:22,090 --> 00:14:25,600
Màn hình trung bình từ 768 đến 992,

189
00:14:25,600 --> 00:14:31,380
lớn từ 992 đến 1200 và bất cứ điều gì khoảng 1200 pixel chiều rộng

190
00:14:31,380 --> 00:14:34,685
được coi là một màn hình lớn thêm.

191
00:14:34,685 --> 00:14:39,390
Vì vậy, đây là cách mặc định Bootstrap Grid được cấu hình.

192
00:14:39,390 --> 00:14:43,570
Bây giờ, một khi bạn cảm thấy thoải mái với Bootstrap,

193
00:14:43,570 --> 00:14:48,595
bạn cũng có thể tự cấu hình các bộ phận này.

194
00:14:48,595 --> 00:14:50,770
Nhưng đối với khóa học này,

195
00:14:50,770 --> 00:14:56,210
chúng tôi sẽ ở lại với cấu hình mặc định mà bootstrap hỗ trợ.

196
00:14:56,210 --> 00:14:59,195
Bây giờ, hành vi lưới trong trường hợp này,

197
00:14:59,195 --> 00:15:01,825
là bất cứ điều gì được đặt ra cho thêm nhỏ,

198
00:15:01,825 --> 00:15:04,885
sẽ nằm ngang ở mọi thời điểm,

199
00:15:04,885 --> 00:15:09,235
đối với các bit cao hơn họ sẽ được thu gọn để 2start chiều rộng,

200
00:15:09,235 --> 00:15:13,040
nhưng ngang về các điểm ngắt.

201
00:15:13,040 --> 00:15:17,855
Chúng ta sẽ thấy cách này hoạt động trong một thời gian ngắn với một số ví dụ.

202
00:15:17,855 --> 00:15:24,980
Bây giờ, chúng tôi đã thấy việc sử dụng các container trong slide trước đó.

203
00:15:24,980 --> 00:15:28,545
Đối với màn hình nhỏ thêm,

204
00:15:28,545 --> 00:15:32,895
chiều rộng thùng chứa được tự động xác định bởi chiều rộng màn hình.

205
00:15:32,895 --> 00:15:34,575
Nhưng đối với nhỏ, trung bình,

206
00:15:34,575 --> 00:15:36,045
lớn và lớn,

207
00:15:36,045 --> 00:15:39,425
chiều rộng thùng chứa được quy định.

208
00:15:39,425 --> 00:15:42,600
Vì vậy, nếu bạn sử dụng div với một container lớp,

209
00:15:42,600 --> 00:15:46,105
sau đó cho màn hình nhỏ nó là 540 pixel.

210
00:15:46,105 --> 00:15:52,330
Vì vậy, bạn sẽ nhận thấy rằng nếu bạn có chiều rộng màn hình giữa 576 đến 768,

211
00:15:52,330 --> 00:15:56,485
nội dung của bạn sẽ được bố trí trong 540 pixel,

212
00:15:56,485 --> 00:16:00,670
sẽ được tập trung vào chiều rộng màn hình.

213
00:16:00,670 --> 00:16:08,435
Vì vậy, không gian còn sót lại sẽ được để lại dưới dạng lề ở hai bên của nội dung này.

214
00:16:08,435 --> 00:16:12,795
Tương tự như vậy, đối với môi trường nó là 720 pixel và vân vân.

215
00:16:12,795 --> 00:16:17,640
Bây giờ, sau đó bạn chỉ định có bao nhiêu cột mỗi nội dung chiếm.

216
00:16:17,640 --> 00:16:20,885
Sau đó, các tiền tố lớp cột mà bạn sẽ sử dụng

217
00:16:20,885 --> 00:16:26,670
là.col cho thêm nhỏ, .col-sm cho nhỏ,

218
00:16:26,670 --> 00:16:29,420
tất cả các cách để thêm lớn.

219
00:16:29,420 --> 00:16:31,625
Nếu bạn chỉ định một cái gì đó với.col-md,

220
00:16:31,625 --> 00:16:36,530
sau đó áp dụng cho các màn hình trung bình đến siêu lớn.

221
00:16:36,530 --> 00:16:41,785
Vì vậy, bất cứ khi nào bạn chỉ định bất kỳ col- và một số số,

222
00:16:41,785 --> 00:16:47,895
sau đó áp dụng cho rằng kích thước màn hình cụ thể và tất cả mọi thứ về kích thước màn hình đó.

223
00:16:47,895 --> 00:16:51,035
Bây giờ, trong tất cả các trường hợp kích thước màn hình,

224
00:16:51,035 --> 00:16:54,955
số cột được xác định là 12 cột.

225
00:16:54,955 --> 00:17:02,345
Lưới trong trường hợp bootstrap được thiết kế là 12 cột và đó là cấu hình,

226
00:17:02,345 --> 00:17:04,830
nhưng giá trị mặc định là 12 cột.

227
00:17:04,830 --> 00:17:10,355
Lý do để chọn 12 là 12 là một bội số tốt của hai, ba,

228
00:17:10,355 --> 00:17:11,755
bốn và như vậy.

229
00:17:11,755 --> 00:17:14,965
Vì vậy, nó cung cấp cho bạn rất nhiều sự linh hoạt

230
00:17:14,965 --> 00:17:19,065
về số cột bạn chọn để bố trí nội dung của bạn.

231
00:17:19,065 --> 00:17:22,345
Giữa mỗi cột, vì vậy nếu bạn đặt

232
00:17:22,345 --> 00:17:25,510
ra hai phần nội dung cạnh nhau với divs của họ,

233
00:17:25,510 --> 00:17:31,035
giữa hai phần nội dung họ sẽ là một máng xối nhỏ sẽ được để lại.

234
00:17:31,035 --> 00:17:37,255
Khoảng trắng trống mà sẽ được để lại chiều rộng của máng xối,

235
00:17:37,255 --> 00:17:41,030
mà chỉ là 30 pixel theo mặc định.

236
00:17:41,030 --> 00:17:45,855
Vì vậy, 15 pixel là từ một phần nội dung và 15 pixel từ phần nội dung khác.

237
00:17:45,855 --> 00:17:48,600
SumTotal cùng 30 pixel

238
00:17:48,600 --> 00:17:53,470
khoảng trắng sẽ được để lại giữa hai phần nội dung.

239
00:17:53,470 --> 00:17:57,465
Hãy suy nghĩ về cách bố cục cột báo

240
00:17:57,465 --> 00:18:01,530
được thực hiện và bạn bắt đầu thấy sự tương ứng giữa

241
00:18:01,530 --> 00:18:04,970
bố cục cột báo được thực hiện và cách

242
00:18:04,970 --> 00:18:10,815
lưới của bootstrap thực hiện bố cục nội dung trên sân đó.

243
00:18:10,815 --> 00:18:14,725
Lưới của Bootastrap cho phép bạn thực hiện nội dung cấp độ tiếp theo,

244
00:18:14,725 --> 00:18:20,710
vì vậy bạn có thể kèm theo nội dung bên trong nội dung và sau đó thực hiện bố cục nội dung lồng nhau.

245
00:18:20,710 --> 00:18:23,790
Ngoài ra, nó hỗ trợ bù đắp.

246
00:18:23,790 --> 00:18:28,712
Chúng ta sẽ thấy việc sử dụng các bù đắp cũng trong một số ví dụ sau đó.

247
00:18:28,712 --> 00:18:36,555
Vì vậy, chúng ta hãy nhìn vào ví dụ đầu tiên của chúng tôi về cách bạn sẽ áp dụng các lớp cột bootstraps,

248
00:18:36,555 --> 00:18:41,515
và làm thế nào họ sẽ thực sự được hiển thị trên các kích thước màn hình khác nhau.

249
00:18:41,515 --> 00:18:47,310
Dưới đây là một ví dụ về một tình huống mà tôi áp dụng cho hai divs,

250
00:18:47,310 --> 00:18:53,510
cột gạch nối 12 và sau đó cột gạch nối sm năm cho

251
00:18:53,510 --> 00:18:56,050
phần màu đỏ của nội dung và cho

252
00:18:56,050 --> 00:19:00,980
một trong những khác tôi áp dụng cột gạch nối 12 và cột sm bảy.

253
00:19:00,980 --> 00:19:06,045
Vì vậy, cách nội dung này sẽ được bố trí là cho

254
00:19:06,045 --> 00:19:10,690
các màn hình nhỏ thêm, hai phần nội dung sẽ được xếp chồng lên nhau trên đầu kia.

255
00:19:10,690 --> 00:19:15,450
Vì vậy, màu đỏ sẽ được xếp chồng lên nhau trên đầu trang của biển màu xanh lá cây một.

256
00:19:15,450 --> 00:19:19,010
Nhưng đối với màn hình nhỏ đến lớn,

257
00:19:19,010 --> 00:19:22,310
hai phần nội dung sẽ được đặt cạnh nhau.

258
00:19:22,310 --> 00:19:27,490
Lý do cho điều này là bởi vì chúng tôi đã nói cột sm năm và cột sm bảy cho hai.

259
00:19:27,490 --> 00:19:31,510
Vì vậy, đối với nhỏ đến lớn, chúng được đặt cạnh nhau để

260
00:19:31,510 --> 00:19:36,210
nội dung màu đỏ sẽ chiếm

261
00:19:36,210 --> 00:19:45,945
5 cột ngoài cùng bên trái và nội dung màu xanh biển sẽ chiếm 7 cột bên phải của hàng của bạn,

262
00:19:45,945 --> 00:19:50,440
tất cả các cách từ kích thước màn hình nhỏ đến cực lớn.

263
00:19:50,440 --> 00:19:55,605
Vì vậy, đây là cách chúng tôi sẽ chỉ định bố cục nội dung cho kích thước màn hình khác nhau.

264
00:19:55,605 --> 00:20:00,220
Bootstrap cũng cung cấp các lớp học bổ sung được gọi là

265
00:20:00,220 --> 00:20:07,055
các lớp học nối thứ tự cho phép bạn sắp xếp lại nội dung trên màn hình.

266
00:20:07,055 --> 00:20:11,440
Vì vậy, ví dụ, nếu bạn áp dụng một thứ tự sm đầu tiên,

267
00:20:11,440 --> 00:20:15,200
một thứ tự một số lớp cuối cùng để divs,

268
00:20:15,200 --> 00:20:19,265
như được hiển thị trong ví dụ ở đây, trong trường hợp này,

269
00:20:19,265 --> 00:20:26,160
div mà bạn áp dụng thứ tự sm cuối cùng sẽ được đẩy sang

270
00:20:26,160 --> 00:20:29,390
phía bên phải của màn hình và thứ tự

271
00:20:29,390 --> 00:20:33,125
sm div đầu tiên sẽ được đẩy sang phía bên trái của màn hình.

272
00:20:33,125 --> 00:20:38,570
Vì vậy, áp dụng các lớp thứ tự này cho phép bạn sắp xếp lại nội dung trên kịch bản.

273
00:20:38,570 --> 00:20:45,000
Không chỉ thế này, thứ tự sm cũng cho phép bạn chỉ định cùng một thứ tự sm một để

274
00:20:45,000 --> 00:20:51,750
đặt hàng sm 12 để xác định thứ tự mà nội dung cần được hiển thị trên màn hình.

275
00:20:51,750 --> 00:20:53,850
Vì vậy, bằng cách sử dụng một số lớn hơn,

276
00:20:53,850 --> 00:20:57,395
bạn có thể dịch chuyển nội dung sang phía bên phải của

277
00:20:57,395 --> 00:21:01,795
hàng và một số nhỏ hơn sẽ dịch chuyển nội dung sang phía bên trái của hàng.

278
00:21:01,795 --> 00:21:05,785
Chúng ta sẽ thấy một ví dụ về điều này cũng trong bài tập.

279
00:21:05,785 --> 00:21:10,850
Sự hỗ trợ thú vị hỗn hợp mà Bootstrap Grid mang lại với việc sử dụng

280
00:21:10,850 --> 00:21:16,195
bố cục Flexbox là sự liên kết theo chiều dọc của nội dung.

281
00:21:16,195 --> 00:21:19,530
Các phiên bản Bootstrap trước đó,

282
00:21:19,530 --> 00:21:22,315
như Bootstrap 3 và trước đó,

283
00:21:22,315 --> 00:21:27,915
không có khả năng làm căn chỉnh theo chiều dọc của nội dung.

284
00:21:27,915 --> 00:21:34,870
Với việc sử dụng Flexbox để thiết kế Bootstrap Grid trong Bootstrap four,

285
00:21:34,870 --> 00:21:41,365
chúng tôi có được sự linh hoạt mà CSS Flexbox mang lại trong điều kiện làm căn chỉnh dọc.

286
00:21:41,365 --> 00:21:46,295
Vì vậy, nếu bạn muốn nội dung được trung tâm theo chiều dọc,

287
00:21:46,295 --> 00:21:48,370
sau đó đến hàng,

288
00:21:48,370 --> 00:21:52,765
bạn sẽ áp dụng các lớp được gọi là “align items center”.

289
00:21:52,765 --> 00:21:55,585
Vì vậy, trong trường hợp này, bất kể nội dung được đặt ra,

290
00:21:55,585 --> 00:22:00,750
sẽ được đặt ra thẳng đứng liên kết trong hàng cụ thể đó.

291
00:22:00,750 --> 00:22:03,560
Vì vậy, nội dung mà chiếm

292
00:22:03,560 --> 00:22:08,780
chiều cao lớn nhất sẽ là một trong đó những người còn lại sẽ được

293
00:22:08,780 --> 00:22:16,905
căn chỉnh khi nó được đặt ra trong hàng đó hoặc nếu bạn xác định trước chiều cao của hàng,

294
00:22:16,905 --> 00:22:24,935
sau đó tất cả các nội dung sẽ được tập trung theo chiều dọc trong hàng cụ thể đó ở đó.

295
00:22:24,935 --> 00:22:30,795
Không chỉ vậy, Bootstrap của Grid còn hỗ trợ sự liên kết ngang của nội dung.

296
00:22:30,795 --> 00:22:32,400
Hãy nhìn vào một ví dụ.

297
00:22:32,400 --> 00:22:35,060
Vì vậy, nếu bạn chỉ định nội dung của bạn như thế này.

298
00:22:35,060 --> 00:22:40,320
Nói, bạn có ba cột và một trong những đầu tiên bạn chỉ định div class cột ba,

299
00:22:40,320 --> 00:22:44,140
sau đó là giữa một bạn sẽ nói div class cột tự động.

300
00:22:44,140 --> 00:22:47,010
Tôi sẽ quay trở lại cột tự động trong một thời gian ngắn.

301
00:22:47,010 --> 00:22:50,045
Và một trong những bên phải nói cột lớp div 3.

302
00:22:50,045 --> 00:22:53,065
Vì vậy, trong trường hợp này, những gì chúng tôi đang chỉ định là

303
00:22:53,065 --> 00:22:58,540
các phần bên trái và bên phải của nội dung sẽ chiếm ba cột mỗi.

304
00:22:58,540 --> 00:23:02,120
Ở giữa, khi tôi nói, “cột tự động”,

305
00:23:02,120 --> 00:23:07,200
nó có nghĩa là số cột mà div cụ thể này

306
00:23:07,200 --> 00:23:14,090
chiếm sẽ được tự động xác định bởi nội dung được bao bọc bên trong đó.

307
00:23:14,090 --> 00:23:16,840
Vì vậy, dựa trên nội dung,

308
00:23:16,840 --> 00:23:21,710
số cột bị chiếm bởi div sẽ tự động điều chỉnh chính nó.

309
00:23:21,710 --> 00:23:25,070
Trong trường hợp cụ thể này, trong cách bố trí này,

310
00:23:25,070 --> 00:23:31,040
nội dung cụ thể đó đang được chứa trong bốn cột.

311
00:23:31,040 --> 00:23:34,985
Vì vậy, bây giờ bạn có bốn cột được sử dụng bởi div trung tâm,

312
00:23:34,985 --> 00:23:38,020
ba cột bên trái và ba cột bên phải.

313
00:23:38,020 --> 00:23:40,650
Vì vậy, tổng hợp tổng cộng, bạn có 10 cột.

314
00:23:40,650 --> 00:23:43,730
Vì vậy, bạn có hai cột được để trống.

315
00:23:43,730 --> 00:23:46,070
Bây giờ, nếu bạn chỉ định cho hàng,

316
00:23:46,070 --> 00:23:50,165
bạn chỉ định biện minh cho trung tâm nội dung, sau đó,

317
00:23:50,165 --> 00:23:54,570
toàn bộ nội dung trong hàng cụ thể này sẽ được

318
00:23:54,570 --> 00:23:59,365
căn giữa đối với hàng ngang.

319
00:23:59,365 --> 00:24:02,080
Bạn cũng có thể có nội dung trái căn cứ,

320
00:24:02,080 --> 00:24:05,584
phải căn cứ và một vài tùy chọn khác.

321
00:24:05,584 --> 00:24:09,260
Chi tiết nằm trong tài liệu bootstraps.

322
00:24:09,260 --> 00:24:13,755
Bootstrap cũng cho phép bạn thực hiện bù đắp cột.

323
00:24:13,755 --> 00:24:16,725
Làm thế nào để làm việc này? Hãy nhìn vào một ví dụ.

324
00:24:16,725 --> 00:24:18,710
Trong cột này bù đắp,

325
00:24:18,710 --> 00:24:21,320
chúng ta có thể chỉ định một phần của nội dung,

326
00:24:21,320 --> 00:24:27,750
thêm vào đó nếu chúng ta áp dụng các lớp như offset gạch nối sm một.

327
00:24:27,750 --> 00:24:33,585
Những gì chúng tôi đang chỉ định là cho các màn hình nhỏ đến lớn,

328
00:24:33,585 --> 00:24:38,425
phần nội dung này nên được dịch chuyển sang phải bởi một cột.

329
00:24:38,425 --> 00:24:41,970
Vì vậy, khi nội dung này được đặt ra, như bạn có thể thấy,

330
00:24:41,970 --> 00:24:49,560
cột ngoài cùng bên trái được để trống và nội dung được dịch chuyển sang phải bởi một cột.

331
00:24:49,560 --> 00:24:52,925
Và bạn có thể bố trí nội dung còn lại ở phía bên phải.

332
00:24:52,925 --> 00:24:55,860
Vì vậy, tổng cộng, bạn có thể thấy rằng hai divs sẽ

333
00:24:55,860 --> 00:24:59,670
chiếm 11 cột nhưng một cột offsetted ở bên phải.

334
00:24:59,670 --> 00:25:05,910
Vì vậy, đó là cách chúng ta có thể kiểm soát bố cục của nội dung bằng cách sử dụng một cột bù.

335
00:25:05,910 --> 00:25:07,380
Vì vậy, như bạn có thể thấy,

336
00:25:07,380 --> 00:25:11,280
sử dụng các thông số kỹ thuật kích thước cột

337
00:25:11,280 --> 00:25:13,540
,

338
00:25:13,540 --> 00:25:15,975
sự liên kết dọc và ngang, bù đắp, đẩy và kéo,

339
00:25:15,975 --> 00:25:18,635
và flex đầu tiên và flex cuối cùng,

340
00:25:18,635 --> 00:25:23,925
chúng tôi có thể nhận được rất nhiều kiểm soát về cách chúng tôi bố trí

341
00:25:23,925 --> 00:25:29,825
nội dung cho độ rộng màn hình khác nhau và kích thước màn hình khác nhau .

342
00:25:29,825 --> 00:25:36,800
Bootstrap đi xa hơn nữa bằng cách cho phép bạn làm tổ nội dung bên trong divs.

343
00:25:36,800 --> 00:25:39,585
Vì vậy, ví dụ, nếu bạn chỉ định hai divs,

344
00:25:39,585 --> 00:25:43,130
như bạn thấy với cột sm năm và cột sm bảy,

345
00:25:43,130 --> 00:25:45,725
hai nội dung sẽ được đặt ra như đã thấy ở đây.

346
00:25:45,725 --> 00:25:48,265
Bây giờ, bên trong div bên phải,

347
00:25:48,265 --> 00:25:50,630
tôi một lần nữa có thể đi vào và chia

348
00:25:50,630 --> 00:25:58,080
chiều rộng của div thành một hàng và sau đó hàng đó sẽ tự động cung cấp cho tôi

349
00:25:58,080 --> 00:26:04,960
một 12 cột cho phần đó của màn hình và sau đó tôi có thể làm bố trí bằng cách sử dụng làm

350
00:26:04,960 --> 00:26:13,330
tổ của divs và làm bố trí cho các phần khác nhau của cột đó .

351
00:26:13,330 --> 00:26:15,595
Vì vậy, làm tổ như thế này,

352
00:26:15,595 --> 00:26:23,570
mang đến cho bạn sự linh hoạt hơn trong cách bạn bố trí nội dung trong quảng cáo của bạn.

353
00:26:23,570 --> 00:26:27,910
Với tất cả các cuộc thảo luận về Bootstrap Grid System và cách

354
00:26:27,910 --> 00:26:34,280
Bootstrap Grid hỗ trợ nhiều cách khác nhau

355
00:26:34,280 --> 00:26:39,670
để đặt ra nội dung, chúng ta sẽ bây giờ, chuyển sang tập tiếp theo của chúng tôi các bài tập.

356
00:26:39,670 --> 00:26:45,820
Chúng tôi sẽ áp dụng lưới Bootstrap để trang index.html của chúng tôi

357
00:26:45,820 --> 00:26:52,770
để làm bố trí nội dung bên trong hoặc trang index.html.

358
00:26:52,770 --> 00:26:57,350
Chúng tôi cũng sẽ sử dụng một số lớp CSS tùy chỉnh.