Trong các bài giảng trước đây,
chúng ta đã tìm hiểu về thiết kế đáp ứng và hệ thống lưới bootstrap.
Chúng tôi đã thấy làm thế nào lưới bootstrap cho phép chúng tôi thiết kế các trang web đáp ứng.
Đã đến lúc chúng ta chuyển sang bài tập tiếp theo.
Chúng tôi sẽ bắt đầu làm việc với trang html chỉ mục mà chúng tôi đã tạo ra trong
bài tập trước đó của chúng tôi và áp dụng các lớp lưới bootstrap để làm cho nó đáp ứng.
Hãy xem nhanh trang web của chúng tôi trong trình duyệt chúng tôi thấy rằng
nó vẫn còn khủng khiếp mặc dù các phông chữ đã được cải thiện một chút,
và bây giờ chúng tôi đang sử dụng các phông chữ mặc định bootstraps.
Bây giờ hãy thử và áp dụng các lớp lưới bootstrap để index.html để cải thiện bố cục của nó.
Đi đến trang index.html,
hãy để tôi nhanh chóng thu hút sự chú ý của bạn đến dòng cụ thể này trong
trang index.html mà chúng tôi đã bao gồm trong bài tập trước đó.
Tôi đã đề cập đến dòng này,
sau đó chúng tôi đã nói về hệ thống lưới bootstrap.
Vì vậy, ở đây, chúng ta thấy rằng chúng ta đã chỉ định các thẻ meta với một cổng xem và nội dung,
chiều rộng như chiều rộng thiết bị,
và quy mô ban đầu một và thu nhỏ để phù hợp với không.
Vì vậy, thẻ meta này cho phép chúng
tôi làm cho trang web của chúng tôi đáp ứng bằng cách nhìn vào ký tự cổng xem.
Tiến tới bước tiếp theo.
Chúng tôi sẽ cuộn xuống cơ thể của trang index.html này,
và sau đó tìm kiếm div đầu tiên mà đi ngay bên dưới thẻ tiêu đề có,
để div này bạn sẽ áp dụng các container lớp.
Chúng ta đã tìm hiểu về lớp container trong bài giảng trước đó.
Vì vậy, một khi chúng tôi áp dụng các lớp container,
sau đó tham gia một cái nhìn vào trang web của chúng tôi, chúng tôi thấy
rằng một phần của nội dung ngay tại đó đã thích nghi chính nó.
Hãy nhìn vào sự khác biệt giữa nội dung ở đây và nội dung bên dưới đây.
Bây giờ nội dung này xuống dưới đây,
nằm ở chân trang index.html của chúng tôi và nội dung này nằm trong tiêu đề.
Nhưng nội dung đó ở giữa là nội dung thực tế của trang web của chúng tôi,
đó là bên trong div mà chúng tôi áp dụng các container.
Vì vậy, áp dụng lớp chứa bạn ngay lập tức có thể thấy rằng chiều rộng của trang trong
đó nội dung của chúng tôi được đặt ra bây giờ đã
thu hẹp và sau đó bạn có một số không gian còn lại ở hai bên,
vì vậy với chiều rộng container này là một container kích thước cố định,
nội dung của chúng tôi sẽ được cố định này chiều rộng đặc biệt
trên màn hình để lại đủ lề ở hai bên như không gian trắng.
Hãy áp dụng cùng một lớp chứa cho cả đầu trang và chân trang cũng,
và sau đó xem nội dung thay đổi như thế nào.
Quay trở lại trang web của chúng
tôi, những gì tôi sẽ làm bây giờ là cho nội dung bên
trong ở đây, div bên trong container,
Tôi sẽ áp dụng các lớp như lớp hàng ở đây,
để đầu tiên này,
và tôi sẽ chỉ đơn giản là sao chép này.
Tôi sẽ áp dụng tương tự cho div thứ hai ở đây được xếp hàng cho div,
và cũng di chuyển xuống và sau đó đến div thứ ba ở đây,
Tôi cũng áp dụng các lớp hàng ở đây.
Vì vậy, bây giờ, nội dung bên trong lớp chứa ngoài cùng này,
bây giờ được chia thành ba hàng,
vì vậy bất cứ điều gì bên trong ở đây sẽ
là một hàng, bất cứ điều gì bên trong đây,
sẽ là hàng thứ hai và hàng ở đây sẽ là hàng thứ ba.
Sau đó chúng tôi sẽ áp dụng các lớp cột này.
Bây giờ chúng ta hãy chuyển sang tiêu đề trong cơ thể index.html của chúng tôi.
Và để tiêu đề, tôi sẽ áp dụng một lớp được gọi là jumbotron.
Thành phần jumbotron cho phép bạn thiết lập
nội dung bên trong jumbotron từ phần còn lại của trang.
Chúng tôi sẽ thấy kết quả trong một thời gian ngắn khi chúng tôi tại trang web kết quả.
Bây giờ, để div bên trong tiêu đề này,
tôi sẽ áp dụng các lớp như container,
do đó bất cứ điều gì là bên trong nội dung
sẽ được bây giờ hạn chế bởi chiều rộng container có.
Tương tự như vậy, di chuyển xuống chân trang
ở đây, trong chân trang cũng,
div đầu tiên bên trong chân trang,
tôi sẽ áp dụng các lớp như container.
Và div bên trong đó,
Tôi sẽ áp dụng các lớp như hàng có,
để div bên trong đó.
Vì vậy, div này sẽ đưa chúng ta tất cả các cách để div đặc biệt này ở đây.
Và sau đó div tiếp theo cũng đó là ngay dưới đây,
Tôi sẽ áp dụng các lớp như hàng.
Vì vậy, bây giờ chân trang của tôi chứa hai hàng ở đây,
chúng tôi sẽ phong cách nội dung bằng cách sử dụng cột,
lớp học trong một thời gian ngắn.
Đi đến tiêu đề cũng,
tôi sẽ áp dụng các lớp hàng để div thứ hai bên trong div container ở đây.
Vì vậy, div này phù hợp với tôi đã có điều này,
sẽ là một hàng duy nhất trong tiêu đề.
Chúng ta hãy xem trang web kết quả của chúng tôi.
Đi đến trang web của chúng tôi,
bây giờ bạn có thể thấy rằng nội dung tiêu đề bây giờ được đặt ngoài
phần còn lại bên trong hộp màu xám này trên đầu trang ở đây.
Nhưng bản thân nội dung bây giờ được xếp hàng với nội dung dưới đây.
Bây giờ, đây là kết quả của việc sử dụng container.
Di chuyển đến chân trang,
bây giờ bạn có thể thấy rằng nội dung chân trang cũng được xếp hàng bên trong vùng chứa.
Nhưng trang vẫn trông không tuyệt vời,
bây giờ chúng ta sẽ áp dụng các lớp cột cho các divs bên trong bây giờ.
Quay trở lại trang index.html,
bây giờ chúng ta sẽ bắt đầu áp dụng các lớp cột.
Vì vậy, đi đến tiêu đề, để div bên trong thứ hai bên trong jumbotron đây,
hãy để tôi áp dụng một lớp như cột 12, cột sm-6.
Vì vậy, ở đây nội dung trong
div đầu tiên này sẽ chiếm toàn bộ hàng cho kích thước màn hình nhỏ thêm,
và sau đó sẽ chiếm một nửa hàng vì vậy đó là lý do tại sao cột
sm-6 cho kích thước màn hình nhỏ đến thêm lớn.
Bây giờ, tương tự cho div thứ hai ở đây,
mặc dù nó không chứa bất kỳ nội dung có,
tôi sẽ xác định các lớp cột ở đây như cột 12 và sau đó cột sm.
Vì vậy, lưu ý rằng ở đây bằng cách xác định cột 12,
tôi rõ ràng nói rằng đối với kích thước màn hình nhỏ thêm bất cứ nội dung là
bên trong div này sẽ được xếp chồng lên nhau bên dưới nội dung về ở đây.
Và sau đó đối với kích thước màn hình nhỏ đến cực lớn,
nội dung này sẽ chiếm số lượng
cột còn sót lại trong hàng cho kích thước màn hình nhỏ đến cực lớn.
Vì vậy, ở đây trong trường hợp này vì sáu cột được chiếm bởi nội dung này,
điều này sẽ nhận được sáu cột còn lại ở đó.
Di chuyển xuống hàng nội dung ở đây,
cho nội dung ở đây,
vì vậy đối với nội dung đầu tiên này,
mà là một nhãn ở đây,
tôi sẽ áp dụng các lớp học như cột 12,
cột sm-4, cột md-3.
Vì vậy, nói rằng đối với kích thước màn hình nhỏ thêm,
điều này sẽ chiếm toàn bộ hàng, cho nhỏ,
nó sẽ chiếm cột đầy đủ,
và sau đó cho trung bình đến cực lớn,
nó sẽ chiếm ba cột trong hàng.
Bây giờ, vì vậy phần còn lại sẽ bị chiếm đóng bởi nội dung xuống dưới đây,
do đó, tôi sẽ áp dụng các lớp như col,
chỉ ra rằng điều này sẽ được xếp chồng lên nhau bên dưới
nội dung ở đây trong các kích thước màn hình nhỏ thêm,
và sau đó tôi sẽ nói cột sm,
vì vậy điều đó có nghĩa rằng điều này sẽ chiếm còn lại tám cột ở đây, bởi
vì bốn cột được đưa lên bởi cái này,
và sau đó chúng ta sẽ nói cột md,
do đó, có nghĩa là điều này sẽ chiếm
chín cột còn lại vì ba cột được đưa
lên cho kích thước màn hình trung bình đến cực lớn bởi nội dung ở trên đây.
Bây giờ tôi đã xác định cho hàng nội dung đầu tiên,
tôi sẽ lấy cùng một cột lớp ứng dụng ở đây,
và sau đó áp dụng cho hàng thứ hai ở đây,
và cũng là hàng nội dung thứ ba ở đây.
Tương tự như vậy, tôi sẽ sao chép một trong những này và sau đó áp dụng tương tự cho
các divs nội dung xuống dưới đây.
Vì vậy, bây giờ chúng tôi đã cấu hình cả tiêu đề và các cột nội dung ở đó.
Bây giờ chúng ta hãy di chuyển xuống chân trang.
Trong chân trang, bạn sẽ nhận thấy rằng div này chứa ba divs bên trong đây,
vì vậy đối với mỗi trong ba divs bên trong đây,
tôi sẽ áp dụng các lớp cột tương ứng.
Vì vậy, đối với người đầu tiên, trong
đó có liên kết đến các trang khác nhau mà sẽ tạo thành một phần của trang web này,
tôi sẽ áp dụng một lớp cột,
như cột bốn, cột sm-2 ở đây.
Vì vậy, có nghĩa là đối với kích thước màn hình nhỏ,
điều này sẽ chiếm bốn cột và cho nhỏ đến lớn,
nó sẽ chỉ chiếm hai cột ở đây.
Sau đó, cho thứ hai,
div thứ hai trong đó tôi sẽ áp dụng các lớp như cột bảy.
Vì vậy, chú ý rằng tôi có bốn ở đây và sau đó bảy ở đây,
do đó tổng số chiếm 11 cột.
Tôi đã để lại một cột trống.
Tôi sẽ trở lại sau để áp dụng một bù đắp để chăm sóc cột thêm.
Vì vậy, đây là cột bảy,
và sau đó col-sm-5 đến cột thứ hai.
Đây là hai cộng năm, bảy.
Vì vậy, tôi vẫn còn năm cột còn lại,
mà tôi có thể sử dụng cho div thứ ba ở đây.
Bây giờ cho kích thước màn hình nhỏ thêm,
hai nội dung này sẽ được đặt cạnh nhau,
và sau đó div này có chứa liên kết đến
một trang web truyền thông xã hội sẽ được trong một hàng riêng biệt xếp chồng lên nhau dưới đây.
Nhưng đối với kích thước màn hình nhỏ đến lớn, màn
hình đầu tiên sẽ chiếm hai cột,
thứ hai sẽ chiếm năm và phần còn lại sẽ được
đưa lên bởi các liên kết truyền thông xã hội ở đây.
Vì vậy, đối với thứ ba,
tôi sẽ áp dụng các lớp
như col-12 col-sm-4 ở đây.
Vì vậy, col-12 col-sm-4, có nghĩa là điều này sẽ chiếm
một tập hợp riêng biệt của 12 cột
xếp chồng lên nhau bên dưới nội dung trước đó cho kích thước màn hình nhỏ
thêm, nhưng đối với nhỏ đến cực lớn nó sẽ chiếm bốn cột.
Vì vậy, ở đây chúng ta là bốn cộng năm,
chín cộng với hai 11.
Vì vậy, một cột vẫn còn sót lại cho nhỏ đến cực lớn.
Vì vậy, đó là cách tôi sẽ áp dụng cột đó gần nhất với điều này.
Bây giờ, chúng tôi vẫn có một trong những bên dưới đây, nơi chúng tôi chứa bản quyền đối với điều này.
Tôi sẽ áp dụng các lớp như cột tự động, có
nghĩa là nội dung này sẽ chiếm
chỉ đủ cột như là yêu cầu của nội dung ở đó.
Sau đó bạn sẽ thấy rằng tôi sẽ định vị nội dung này ở trung tâm
của màn hình do đó sử dụng một lớp CSS bootstrap.
Chúng ta sẽ đến với điều đó trong bài tập tiếp theo.
Vì vậy, với điều này, chúng tôi đã áp dụng các lớp cột khác nhau cho tiêu đề
, nội dung và chân trang.
Đây là thời điểm tốt để chúng tôi lưu các thay đổi và sau đó đi và
xem trang được cập nhật được lập chỉ mục hoặc HTML.
Hãy xem trang index.html của chúng tôi,
bạn sẽ nhận thấy làm thế nào trong tiêu đề đó là Jumbotron,
nội dung bây giờ chỉ chiếm một nửa màn hình ở đó.
Nửa còn lại của màn hình của hàng cụ thể này bây giờ được để trống.
Đi xuống hàng nội dung,
bạn thấy rằng nhãn ở phía bên trái chiếm
ba hoặc bốn cột tùy thuộc vào kích thước màn hình đang sử dụng
và phần còn lại đang bị chiếm bởi phần còn lại của nội dung.
Vì vậy, ở đây chúng tôi có một
hàng, hàng thứ hai, và hàng thứ ba.
Và sau đó chân trang ở đây bạn có thể thấy rằng các liên kết ở phía bên trái,
các liên kết khác ở giữa,
và sau đó các liên kết truyền thông xã hội ở phía bên phải.
Vì vậy, đây là cho một màn hình kích thước trung bình.
Bây giờ nếu bạn muốn xem cùng một chế độ xem cho một kích thước màn hình nhỏ hoặc nhỏ,
nếu bạn đang sử dụng Chrome,
thì Chrome có các công cụ nhà phát triển mà bạn có thể
bật bằng cách nhấp vào các công cụ nhà phát triển xem
và khi các công cụ phát triển xuất hiện,
bạn sẽ nhận thấy, hãy để tôi giảm kích thước ở đây.
Bạn sẽ nhận thấy điều này nhỏ để các cửa sổ ở đó.
Vì vậy, nhấp vào đó sẽ bật chế độ xem phản hồi cho các trang web này ở đó.
Vì vậy, bạn có thể thấy rằng trong đây quan điểm của cùng một trang web này trên một điểm ảnh đến trang web,
đó là 411 x 731 trong chế độ chân dung,
do đó, tương ứng với một kích thước màn hình nhỏ,
vì vậy bạn có thể thấy cách nội dung được đặt ra.
Vì vậy, bạn có thể thấy nội dung Jumbotron ở
đó và sau đó là phần còn lại của nội dung dưới đây.
Và sau đó xuống chân trang.
Vì vậy, trong chân trang, bạn có thể thấy các liên kết và quảng cáo đã đặt cạnh nhau như thế nào.
Bây giờ giảm kích thước màn hình để chúng ta có thể thấy làm thế nào mà chân trang được đặt ra ở đây.
Phần còn lại, bạn có các liên kết ở phía bên trái,
bạn có địa chỉ ở phía bên phải,
và sau đó các mạng xã hội liên kết xuống dưới trong một hàng riêng biệt ở đây,
và sau đó là bản quyền ở phía dưới đó.
Vì vậy, đây là quan điểm thú vị mà chúng ta thấy cho kích thước màn hình nhỏ thêm.
Quay trở lại mã của chúng tôi ở đây,
tôi sẽ bây giờ áp dụng các lớp học thứ tự và bù đắp cho
nội dung này để hiển thị nội dung một cách hơi khác nhau.
Vì vậy, đi đến hàng nội dung ở đây,
cho hai divs ở đây có chứa nội dung,
tôi sẽ áp dụng các lớp như
trật tự SM-last cho hàng đầu tiên ở đây.
Và sau đó cho rằng một xuống dưới đây tôi sẽ áp dụng trật tự sm đầu tiên để hàng xuống đây.
Vì vậy, có nghĩa là khi nội dung
này được hiển thị, nội dung này sẽ được kéo sang phía bên trái của màn hình và sau đó
cột này sẽ được đẩy sang phía bên phải của màn hình.
Vì vậy, điều này sẽ được đặt hàng ở phía bên phải và điều này sẽ được đặt hàng ở phía bên trái.
Như tôi đã giải thích về các mệnh đề thứ tự trong bài giảng trước đó.
Tương tự như vậy từ hàng thứ hai,
tôi sẽ để nó như vậy nhưng từ hàng thứ ba tôi sẽ áp dụng
cùng một tập hợp các lớp học thứ tự.
Vì vậy, tôi sẽ đi đến hàng thứ ba ở đây,
và sau đó áp dụng lệnh SM-last cho cái này,
và sau đó tôi sẽ áp dụng lệnh SM-first cho cái này.
Và vì vậy cái này một lần nữa sẽ được sắp xếp lại
sao cho nội dung này sẽ xuất hiện
ở phía bên trái và nội dung này sẽ xuất hiện ở phía bên phải.
Đây chỉ là một cách để định vị nội dung một cách thú vị hơn một chút.
Bây giờ di chuyển xuống chân trang ở đây,
bây giờ tôi sẽ áp dụng một lớp bù ở đây.
Vì vậy, lưu ý rằng tôi đã đề cập rằng hai cột này sẽ chiếm bốn cộng bảy, 11.
Vì vậy, một cột là còn sót lại.
Vì vậy, tôi sẽ áp dụng một lớp offset-1 cho một trong những này.
Vì vậy, có nghĩa là nội dung này trên div này sẽ được đẩy ngay bởi một cột ở đây.
Tương tự như vậy kể từ khi tôi nói bù đắp một,
điều này sẽ được áp dụng cho thêm nhỏ tất cả các cách lên đến kích thước màn hình lớn thêm.
Và đó là việc sử dụng lớp offset.
Vì vậy, bây giờ chúng tôi đã thực hiện các thay đổi, chúng ta
hãy lưu các thay đổi và sau đó đi và xem trang web của chúng tôi trong trình duyệt.
Quay lại trình duyệt đó,
bây giờ bạn thấy tiêu đề như thế nào trước đây,
nhưng trong hàng nội dung đầu tiên,
bạn thấy rằng nội dung này đã được đẩy sang
bên trái và nhãn sang bên phải.
Hàng thứ hai là khác nhau đã được duy trì giống như trước đây.
Nhưng đối với thứ ba bạn sẽ thấy rằng điều này đã được
đẩy sang bên phải và điều này đã được đẩy sang bên trái.
Vì vậy, đó là việc sử dụng các đơn đặt hàng-SM-cuối cùng và đặt hàng-SM-đầu tiên lớp là có.
Bây giờ đi đến chân trang,
bây giờ bạn thấy rằng nội dung trong div đầu tiên ở đây đã được đẩy ngay bởi một cột,.
Vì vậy, bạn có thể thấy rằng có một cột của khoảng trắng ở đây,
và điều này không được đẩy đúng và những cái còn lại đã được định dạng cho phù hợp.
Vì vậy, với điều này, chúng tôi hoàn thành các thay
đổi đối với trang index.html của chúng tôi hoặc trang bổ sung cho bài tập cụ thể này.
Với điều này, chúng tôi hoàn thành bài tập đặc biệt này.
Trong bài tập này, chúng tôi đã xem xét việc sử dụng các
lớp chứa, hàng và cột để thiết kế trang web của chúng tôi đẹp hơn một chút.
Trong phần thứ hai của bài tập mà sẽ theo sau này,
chúng tôi sẽ thêm nhiều hơn để cố gắng và cải thiện cách các trang web này được hiển thị.
Nó vẫn không phải là sự hài lòng của tôi.
Rõ ràng, vẫn còn chỗ để cải thiện.
Đây có thể là thời điểm tốt để bạn thực hiện một nhận xét git với
thông điệp Bootstrap Grid Part One.