Chúng tôi sẽ tiếp tục với bài tập lưới bootstrap
mà chúng tôi đã bắt đầu trong bài tập trước đó.
Chúng tôi sẽ làm một vài điều nữa để
trang index.html của chúng tôi để cải thiện bố cục của nó.
Chúng tôi sẽ sử dụng một số lớp CSS tùy chỉnh và thêm một số màu vào
trang index.html của chúng tôi bằng cách sử dụng các lớp CSS tùy chỉnh.
Điều tiếp theo mà tôi sẽ làm là đi xuống chân trang và cho UL này ở đây,
bạn sẽ nhận thấy rằng danh sách này khi bạn nhìn vào
trang web của chúng tôi được hiển thị trong trang web bằng cách sử dụng danh sách dấu đầu dòng này ở đây.
Tôi không quá hài lòng với danh sách dấu đầu dòng này,
tôi muốn loại bỏ các điểm đầu dòng và sau đó chỉ đơn giản là hiển thị chúng như là chỉ có các liên kết có.
Vì vậy, để làm điều đó, tôi sẽ sử dụng một phong cách danh sách gọi là
list- unstyled và áp dụng điều đó vào thẻ UL đó.
Quay trở lại trang web của chúng tôi,
để thẻ UL này ở chân trang,
tôi sẽ áp dụng các lớp như danh sách unstyled,
và điều này sẽ loại bỏ những viên đạn ở phía trước của những liên kết đó.
Bây giờ, hãy để tôi thêm một vài lớp CSS tùy chỉnh vào trang index.html.
Để làm điều đó, bây giờ chúng ta sẽ tạo một thư mục ở đây và đặt tên nó như là thư mục CSS ở đây.
Bên trong thư mục CSS,
tôi sẽ tạo ra một tập tin mới và đặt tên cho tập tin là styles.css.
Bây giờ, bên trong tập tin styles.css,
bây giờ tôi có thể thêm một số lớp CSS để tạo kiểu trang của chúng tôi.
Hãy để tôi thêm một số lớp CSS ở đây.
Vì vậy, tôi sẽ thêm lớp đầu tiên của tôi như là tiêu đề hàng.
Vì vậy, như tên của nó,
lớp này tôi đang áp dụng cho tiêu đề.
Và sau đó, tôi sẽ áp dụng các lề như
zero pixel auto và
sau đó padding như zero pixel auto.
Vì vậy, điều này là dành cho tiêu đề hàng.
Vì vậy, tôi sẽ có zero margin và zero padding cho tiêu đề hàng.
Và sau đó cho các nội dung hàng,
vì vậy tôi sẽ thêm một lớp CSS được gọi là hàng nội dung.
Và sau đó cho điều này, tôi sẽ thêm lề zero pixel tự động,
và sau đó padding có nó ở 50 pixel,
zero pixel, 50 và zero pixel.
Sau đó, tôi sẽ thêm một đường viền ở
dưới cùng của hàng của tôi ở đây.
Và sau đó, biên giới tôi sẽ cho nó một điểm ảnh và sau đó gọi nó là một sườn núi.
Và tôi sẽ thiết lập chiều cao tối thiểu là 400 pixel cho nội dung ở đây.
Bằng cách đó, trang web của tôi sẽ trông đẹp hơn trên màn hình.
Bây giờ điều này một lần nữa, bạn phải thử và
xem cho đến khi bạn hài lòng với cách trang được đặt ra.
Bây giờ cũng, tôi sẽ bao gồm
một lớp khác được gọi là chân trang mà như bạn có thể đã đoán,
tôi sẽ áp dụng cho chân trang và tôi
sẽ áp dụng một màu nền cho chân trang như D1C4E9.
Nếu bạn hỏi tôi làm thế nào tôi chọn màu sắc,
tôi chỉ nhìn lên màu sắc và sau đó tôi đã hài lòng với màu sắc đó.
Bạn có thể chọn bất kỳ màu nào bạn muốn áp dụng,
nhưng màu này có vẻ tốt cho tôi.
Vì vậy, tôi đã thêm màu đó.
Và đối với phần đệm, cho chân trang,
tôi sẽ thêm 20 pixel và zero pixel.
Bây giờ, một khi tôi đã thêm phong cách này vào tập tin CSS của tôi,
cho phép tôi áp dụng các tập tin CSS vào trang index.html.
Tôi sẽ đến trang index.html.
Rõ ràng, tôi cần phải sử dụng tập tin CSS đó bên trong trang index.html của tôi.
Vì vậy, ngay sau khi tập tin CSS bootstrap,
tôi sẽ làm một liên kết và bảng phong cách,
và đây là tập tin style.css ở đó.
Vì vậy, đó là nơi tập tin CSS của tôi được lưu trữ.
Vì vậy, tôi sẽ bao gồm điều đó vào trang index.html của tôi.
Bây giờ, tôi sẽ đi vào cơ thể và áp dụng các lớp học mà tôi vừa tạo ra.
Vì vậy, đi đến tiêu đề,
tôi sẽ áp dụng các lớp tiêu đề hàng để div trong tiêu đề.
Sau đó, đối với nội dung,
tôi sẽ áp dụng các lớp nội dung hàng cho các hàng ở đó.
Vì vậy, với ba hàng trong nội dung,
tôi áp dụng lớp nội dung hàng và sau đó đi xuống chân trang,
vào thẻ chân trang,
tôi sẽ áp dụng chân trang lớp ở đây,
và sau đó lưu các thay đổi.
Chúng ta hãy đi và xem trang đó ngay bây giờ. Truy
cập trang web của bạn,
chúng tôi đã bắt đầu thấy một số thay đổi thú vị đối với trang web.
Vì vậy, bây giờ bạn có thể thấy rằng nội dung
trong trang web đã được đặt ra một chút sạch hơn.
Đó là dưới cùng biên giới mà chúng tôi thêm vào nội dung hàng,
vì vậy bạn có thể thấy rằng có đủ tách giữa các hàng mặc dù
nội dung của các hàng vẫn được định vị về phía trên cùng trong các hàng,
vì vậy bạn có ba hàng này và sau đó nhìn vào chân trang,
chân trang bây giờ có mua lại màu nền mà tôi đã áp dụng,
và nhận thấy cách các liên kết được tạo kiểu với danh sách không có kiểu ở phía bên trái ở đây.
Chúng tôi chưa hoàn tất, chúng tôi đã thực hiện một vài thay đổi cho trang index.html,
và sau đó quay lại và có một cái nhìn vào kết quả cuối cùng của bài tập này.
Quay trở lại biên tập viên của bạn,
tôi sẽ thêm một vài lớp CSS vào cấu trúc phong cách của tôi,
nó là một tập tin, vì vậy tôi sẽ đi vào đó và sau đó thêm một lớp được gọi là Jumbotron.
Vì vậy, bạn sẽ thấy rằng chúng tôi đã áp dụng Jumbotron vào tiêu đề của chúng tôi ở đó.
Bây giờ, nếu tôi thêm nhiều thuộc tính cho lớp Jumbotron
này ở đây, điều này sẽ được áp dụng cho Jumbotron,
ngoài Jumbotron mặc định chuẩn mà bootstrap đã bao gồm.
Tôi sẽ thêm vào một vài điều nữa,
tôi sẽ thêm vào một đệm của
70 và 30 pixel trên môi trường xung quanh của nó,
và sau đó một lề của zero pixel tất cả xung quanh,
và tôi sẽ thiết lập nền của điều này để 9575CD.
Đây là một phần của một màu tím đậm hơn mà dường như đi rất tốt trên Jumbotron.
Một lần nữa, bằng cách thử nghiệm và sai lầm,
tôi đã chọn màu đó,
và cũng là màu văn bản như màu trắng hoa.
Vì vậy, đối với Jumbotron,
chúng tôi sẽ áp dụng những lớp học đó, và cũng có thể,
tôi sẽ áp dụng một lớp nữa cho lớp địa chỉ.
Chúng tôi có một địa chỉ ở chân trang,
vì vậy tôi sẽ thay đổi kích thước phông chữ đó đến 80 phần trăm,
một phông chữ nhỏ hơn một chút so với phông chữ bình thường,
và lề, tôi sẽ cung cấp cho nó một điểm ảnh zero,
và màu sắc, tôi sẽ sử dụng zero F,
zero F, zero F,
và sau đó lưu các thay đổi.
Vì vậy, vài lớp CSS thêm vào,
chuyển đổi trở lại index.html.
Những gì tôi sẽ làm bây giờ,
là đi đến các hàng nội dung và sau đó
tôi sẽ cố gắng và vị trí nội dung này ở giữa,
theo chiều dọc trong hàng đó.
Đây là nơi tôi sẽ có sự giúp đỡ của sự
liên kết dọc mà lưới bootstrap hỗ trợ thông qua hỗ trợ Flexbox.
Để làm điều đó, tôi sẽ nói align-items-trung tâm,
vì vậy đây là lớp khác mà tôi cần phải thêm, align-items-trung tâm.
Và tôi sẽ thêm điều đó vào hai hàng còn lại cũng,
thẳng hàng mục trung tâm đến hàng thứ hai và thứ ba,
và điều đó nên làm một biện minh thẳng đứng của nội dung của các hàng.
Chúng ta sẽ thấy kết quả trong một phút.
Đi xuống chân trang.
Ở chân trang, bạn thấy rằng chúng tôi đã sử dụng
cột tự động cho nội dung bản quyền này ở đó.
Bây giờ, tôi sẽ định vị này ngay ở giữa theo chiều ngang
bằng cách sử dụng lớp trung tâm vừa phải,
vì vậy có một nội dung biện minh và một vài lớp khác ở đó.
Tôi sẽ sử dụng để Justify-content-center lớp học cho điều đó.
Điều đó về cơ bản sẽ định vị cột đó ở giữa hàng ở đó. Điều
đó áp dụng cho điều đó, và sau đó,
một chút thay đổi mà tôi sẽ làm,
là để div bên trong này có,
Tôi sẽ áp dụng một lớp như trung tâm văn bản để rằng,
do đó các liên kết được tập trung trên màn hình.
Với những thay đổi này, chúng ta hãy đi và xem trang web,
ở cuối bài tập này.
Đi đến trang web của
chúng tôi, trang web của chúng tôi đã bắt đầu nhìn tốt hơn bây giờ,
vì vậy bây giờ bạn có thể thấy rằng Jumbotron bây giờ được phong cách với một màu nền mới,
đó là một chút màu tím đậm
ở đó, và các chữ cái bây giờ là màu trắng hoa, một
chút thụt vào đó,
sau đó Bây giờ bạn có thể thấy rằng nội dung trong các hàng nội dung bây giờ là trung tâm theo chiều dọc,
cho ba hàng nội dung.
Đây là việc sử dụng trung tâm align-items-mà chúng tôi áp dụng cho các hàng ở đó.
Sau đó, đi đến chân trang,
bây giờ bạn có thể thấy rằng bản quyền này bây giờ là hợp lý cho trung tâm của màn hình.
Hãy nhìn vào cách các liên kết ở đây đã được tập trung.
Tôi nhận ra rằng tôi muốn cũng định vị này theo chiều dọc trung tâm đến hàng cụ thể này,
vì vậy chúng ta hãy đi và áp dụng một lớp nữa để di chuyển này đến
trung tâm của hàng cụ thể này theo chiều dọc.
Vì vậy, để làm điều đó, quay trở lại chỉ mục.
html, trong chân trang cho rằng cột cụ thể có chứa những,
tôi sẽ áp dụng các lớp như align-self-center.
Điều này nên được áp dụng cho div mà sử dụng các lớp cột.
Với điều này, nội dung cụ thể đó sẽ được căn chỉnh với trung tâm của hàng.
Nội dung còn lại sẽ vẫn ở trên cùng.
Chúng ta hãy xem xét cuối cùng ở chân trang.
Đi đến chân trang trong trang web của chúng tôi,
bây giờ bạn có thể thấy cách này đã được đặt theo chiều dọc ở giữa.
Hai phần của nội dung vẫn được căn chỉnh vào đầu hàng,
đó là tốt bởi vì có vẻ ổn trên trong đó,
nhưng cái này tôi đã kéo nó xuống theo chiều dọc đến trung tâm của hàng cụ thể này.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã thấy việc sử dụng các lớp CSS tùy chỉnh,
và cũng sử dụng một số lớp học để
biện minh cho nội dung theo chiều ngang và chiều dọc trong hàng của chúng tôi.
Đây là thời điểm tốt để bạn thực hiện một bình luận tốt với thông điệp,
Bootstrap grid, phần hai.