Bài tập tiếp theo của chúng tôi xem xét cách hiển thị nội dung trên trang web của chúng tôi.
Họ nhìn vào cách chúng tôi có thể bao gồm các bảng vào trang web của chúng tôi và cách chúng tôi có thể tạo kiểu cho
các bảng này bằng cách sử dụng các lớp học của Bootstrap để tạo kiểu bảng,
bao gồm thiết kế đáp ứng các bảng.
Chúng ta cũng sẽ xem xét một thành phần linh hoạt khác
có sẵn trong Bootstrap gọi là thẻ.
Thẻ cho phép bạn hiển thị nội dung theo hàng triệu cách.
Vì vậy, chúng ta sẽ xem xét hai cách khác nhau của việc sử dụng thẻ để hiển thị nội dung.
Sau đó, chúng ta sẽ thấy việc sử dụng thẻ một lần nữa và một lần nữa
cho các thiết kế trong tương lai của một số phần nhất định trên trang web của chúng tôi.
Để bắt đầu, hãy mở trang aboutus.html.
Chúng tôi sẽ chèn một bảng và hai thẻ
vào trang aboutus.html để hiển thị một số thẻ.
Đầu tiên, chúng ta hãy từ từ di chuyển xuống cho đến khi sau thẻ đó cho thông tin lãnh đạo,
và ngay tại đó tôi sẽ giới thiệu một div trong
đó tôi sẽ kèm theo bảng ở đây.
Vì vậy, tôi sẽ giới thiệu một hàng mới ở đây,
với lớp như hàng nội dung.
Và bên trong div này,
chúng tôi sẽ giới thiệu một cột sẽ lưu trữ bảng ở đây.
Vì vậy, tôi sẽ giới thiệu một cột, cột 12,
cột sm-9 và đóng div.
Và bên trong div, hãy để tôi đưa ra một tiêu đề ở đây
Sự kiện và số liệu và đóng h2.
Ngay sau đó, hãy để tôi giới thiệu một div,
rằng các lớp cột sm và cột sm-3 và đóng lại div đó có.
Ngay bây giờ chúng ta sẽ để lại div thứ hai trống.
Tôi sẽ điền vào bảng vào div đầu tiên ở đây và
sau đó chúng tôi sẽ có một cái nhìn nhanh chóng vào bảng sau khi tôi thêm vào mã cho bảng.
Vì vậy, ở đây tôi đã liệt kê trong mã cho bảng.
Chúng ta hãy nhìn nhanh vào bảng và sau đó chúng ta sẽ trở lại để thảo luận về mã này ở đây.
Đi tới trang Giới thiệu của chúng tôi mà chúng tôi đã làm việc từ trước đó,
sau phần Lãnh đạo Công ty,
bạn sẽ thấy một hàng mới ở đây giới thiệu bảng.
Vì vậy, lưu ý cách bảng được phong cách,
vì vậy chúng tôi có tiêu đề với một h2 bao gồm ở đó,
nhưng chúng ta hãy tập trung cụ thể vào bảng này.
Vì vậy, bạn thấy rằng bảng này đã được tạo kiểu
bằng cách sử dụng một số lớp Bootstrap được sử dụng để nâng cao bảng.
Tiêu đề đã được kết xuất với một nền tối,
và sau đó các quy tắc được thiết kế theo cách mà các hàng thay thế có
màu khác nhau để bạn có thể phân biệt rõ ràng các hàng của bảng này.
Đây là những gì trong thuật ngữ Bootstrap được gọi là bảng sọc.
Đây là một ví dụ về cách bạn có thể tạo kiểu cho một bảng.
Bây giờ thú vị, nếu bạn nhìn vào cùng một bảng trong một thiết bị nhỏ,
bạn sẽ nhận thấy rằng bảng vẫn còn
hiển thị ngoại trừ bảng này bây giờ trở nên có thể cuộn được.
Vì vậy, bất cứ điều gì có thể được hiển thị trong nội dung sẽ được hiển
thị và phần còn lại của bảng có thể được cuộn theo chiều ngang tại chỗ.
Vì vậy, đây là thành phần đáp ứng của Bootstrap hỗ trợ cho các bảng trong hành động.
Bây giờ chúng ta hãy đi và nhìn vào mã chính nó.
Bây giờ rõ ràng bảng này là khá đơn giản,
nó có một loạt các hàng và một số cột.
Vì vậy, bạn sẽ được mong đợi tôi sử dụng các
thẻ thứ, td và tr điển hình ở đó.
Chuyển đổi trở lại mã,
bạn sẽ nhận thấy rằng tôi bao quanh bảng này bên trong
div mà tôi đã áp dụng bảng lớp đáp ứng.
Vì vậy, đây là những gì làm cho bảng này đáp ứng để trên các
màn hình nhỏ hơn, bạn có thể cuộn theo chiều ngang bảng.
Bây giờ đối với bảng chính nó, hãy
chú ý làm thế nào tôi đã áp dụng hai lớp học.
Một là lớp bảng,
vì vậy đây là ghi đè lên các
hiển thị bảng mặc định trên các trình duyệt bằng cách cung cấp các lớp học riêng của Bootstrap.
Và cái thứ hai nói là tấm sọc.
Vì vậy, đây là những gì thiết kế một bảng với các hàng thay thế trong màu sắc khác nhau ở đây.
Sau đó, người đứng đầu chính nó,
vì vậy bạn có thể thấy rằng các tiêu đề được mô tả ở đây với lớp thead-tối,
vì vậy điều này làm cho đầu tối.
Và sau đó bạn sẽ thấy bảng vẽ chính nó được mô tả ở đây với các thẻ thứ ở đây.
Vì vậy, đây là định nghĩa bảng tiêu chuẩn.
Cơ thể của bảng chính nó là tiêu chuẩn html sử dụng tr,
và td, và các yếu tố thứ mà bạn đã quen thuộc với trong html5.
Vì vậy, đây là những gì bảng được xây dựng với,
và sau đó bạn đóng cơ thể bảng. Vì vậy, đó là về nó.
Vì vậy, tất cả chúng ta là duy nhất về Bootstrap chính nó là ứng dụng của các
lớp Bootstrap cụ thể này cho
các yếu tố bảng chính nó để phong cách nó hơn nữa,
để phù hợp với một trang web thiết kế Bootstrap.
Thành phần tiếp theo mà tôi sẽ thêm vào
trang aboutus.html là một thành phần thẻ trong Bootstrap.
Thành phần thẻ cho phép chúng tôi hiển thị nội dung
bằng cách đặt nó ngoài phần còn lại của nội dung đó.
Bây giờ ở đây, di chuyển đến hàng đầu tiên ở đây, ở
đó chúng tôi có lịch sử của chúng tôi trong
việc sử dụng div thứ hai, nhận thấy rằng div đầu tiên đã chiếm col-sm-6,
div thứ hai hiện đang trống.
Vì vậy, để div này,
tôi sẽ thêm vào lớp như col-sm.
Sau đó, đi vào div này tôi sẽ giới thiệu một div để thẻ lớp ở đây.
Vì vậy, bên trong những div,
tôi sẽ xây dựng thẻ của tôi để hiển thị một số nội dung ở đây.
Vì vậy, trong div này, chúng tôi sẽ giới thiệu một h3 rằng
lớp như thẻ tiêu đề bg-chính.
Vì vậy, bạn sẽ thấy rằng h3 này sẽ được hiển thị như
một tiêu đề thẻ với nền đó là chính
và sau đó văn bản trắng mà Bootstrap lớp sẽ xác định các văn bản được màu trắng.
Và sau đó bên trong h3 này,
tôi sẽ giới thiệu tiêu đề cho thẻ này ở đây
là 'Sự kiện At a Glance. '
Vì vậy mà tôi có thể hiển thị một số nội dung bên trong div này ở đây.
Bây giờ, để thẻ này,
tiếp theo tôi sẽ thêm vào một div bên trong
ở đây với các lớp như thẻ cơ thể,
và bên trong thẻ này cơ thể sẽ là
nội dung thực tế đã được hiển thị trong thẻ này.
Hãy lưu các thay đổi và sau đó đi và xem nhanh trang web của chúng tôi.
Đi đến trang web của chúng
tôi, chúng tôi đã có thể thấy thẻ hình thành trong trang web của chúng tôi,
vì vậy bạn có thể thấy rằng nửa bên trái bị chiếm bởi Lịch sử
và nửa bên phải bạn sẽ thấy thẻ được đưa vào vị trí.
Hãy thêm một số nội dung vào thẻ này.
Đi vào khối thẻ này,
bây giờ tôi sẽ sử dụng một danh sách mô tả
và danh sách mô tả này trong Bootstrap cho phép tôi
áp dụng các lớp hàng và cột cho nó và do đó định dạng nội dung bên trong.
Vì vậy, bên trong danh sách mô tả này,
Tôi sẽ thêm
vào dt rằng lớp và col-6 ở đây,
vì vậy có nghĩa là điều này sẽ chiếm sáu cột
bên trong danh sách mô tả này mà chính nó là một hàng ở đây.
Vì vậy, làm tổ như bạn thấy đi vào hình ảnh ở đây.
Vì vậy, để dt này,
Tôi sẽ thêm vào vì vậy tiêu đề mô tả này ở đây,
và sau đó dưới đây tôi sẽ thêm vào dd với
lớp col-6 ở đây và sau đó tôi có thể thêm trong một số bối cảnh ở đây.
Và dd ở đây.
Hãy lưu các thay đổi và xem nhanh thẻ của chúng tôi.
Đi đến thẻ của chúng tôi, bây giờ bạn có thể xem
danh sách mô tả cho phép tôi hiển thị thông tin như thế nào.
Bên trong thẻ của tôi, bạn có thể thấy phía bên trái và bên phải hiển thị rõ ràng.
Ở đây chúng tôi đang tận dụng lợi thế của danh sách mô tả và,
thêm vào thông tin ở đó.
Hãy để tôi hoàn thành các phần còn lại ở đây bằng cách thêm vào mã,
và sau đó quay lại và xem phiên bản cuối cùng của thẻ này.
Ở đây, bạn có thể thấy rằng tôi đã hoàn thành thêm vào
các phần còn lại của danh sách mô tả của tôi.
Chúng ta hãy đi và xem nhanh phiên bản cuối cùng của lá bài đó.
Hãy nhìn vào thẻ,
và làm thế nào nó được hình thành.
Ở đây, bây giờ bạn có thể thấy làm thế nào chúng ta có thể sử dụng một thẻ để hiển thị một
số nội dung trong trang web của chúng tôi và đặt nó
ngoài phần còn lại của nội dung vào trang Web.
Vì vậy, một thẻ là một thành phần rất linh hoạt cho phép chúng ta hiển thị nội dung như thế này.
Hãy tiếp tục với bài tập này,
thêm vào một thẻ khác vào trang web này.
Bây giờ chúng ta hãy trở lại trang aboutus.html của chúng tôi.
Và ngay bên dưới thẻ mà chúng tôi đã thêm trước đây,
tôi sẽ thêm vào một div khác với lớp “col-12" ở đây.
Và sau đó, bên trong div này,
Tôi sẽ xây dựng một thẻ ở đây để hiển thị một số thông tin bổ sung.
Vì vậy, bên trong div này,
tôi sẽ xây dựng một thẻ với
lớp “thẻ thẻ-cơ thể bg-ánh sáng.”
Vì vậy, bạn sẽ thấy rằng tôi đang áp dụng cả thẻ và thẻ cơ thể để cùng một div ở đây.
Vì vậy, điều đó có nghĩa rằng thẻ đặc biệt này sẽ không có
bất kỳ tiêu đề thẻ nhưng thay vào đó chỉ chứa thẻ cơ thể ở đây.
Và sau đó, cũng có thể, bg-light có nghĩa là nền sẽ có màu nhạt.
Phần nào của một màu xám được thêm vào nền.
Vì vậy, điều này cũng tìm kiếm thẻ này ngoài phần còn lại của nội dung ở đây.
Bây giờ, bên trong tấm thẻ này,
tôi sẽ sử dụng một mã khối để hiển thị một
số thông tin thú vị nhỏ ở đó.
Vì vậy, tôi sẽ sử dụng một blockquote.
Đây cũng là một thẻ HTML ở đây.
Và sau đó để điều này, tôi sẽ áp dụng các lớp blockquote của Bootstrap.
Vì vậy, Bootstrap phong cách blockquote này theo cách riêng của nó.
Vì vậy, chúng ta hãy đóng lại câu trích dẫn đó.
Và bên trong blockquote này,
tôi sẽ bao gồm một báo giá ở đây.
Vì vậy, tôi sẽ bắt đầu với một p,
và áp dụng một lớp được gọi là mb-0.
MB-0 là một lớp tiện ích mà Bootstrap cung cấp.
Điều này có nghĩa là không margin-bottom.
Đối với đặc biệt này, bất cứ điều gì nó được bao gồm trong thẻ p này,
chúng tôi sẽ có một lề dưới cùng của zero.
Và điều này giúp tôi hiển thị nội dung một cách chính xác ở đây.
Vì vậy, ở đây tôi sẽ thêm vào nội dung thực tế ở đó,
và sau đó đóng p này Vì vậy, p này chứa các báo giá thực tế.
Bây giờ, để báo giá này,
vì vậy bạn thấy rằng trong nội dung của bạn,
bạn cũng có thể bao gồm trích dẫn trong mã của bạn ở đó.
Vì vậy, để điều này, tôi cũng có thể thêm một chân trang với lớp học.
Vì vậy, hãy để tôi đẩy thụt lề chân trang.
Vì vậy, chân trang này cũng là một lớp mà blockquote hỗ trợ.
Vì vậy, bất cứ điều gì bạn bao gồm trong blockquote,
cùng với chân trang,
sẽ cho phép bạn hiển thị tác giả của báo giá này.
Vì vậy, ở đây tôi bao gồm các tác giả,
và sau đó một nữa.
Sử dụng trích dẫn, tôi thậm chí có thể trích dẫn nguồn gốc của báo giá này.
Vì vậy, bạn có thể thấy điều đó. Một
lần nữa, đây chỉ là một số trích dẫn mà tôi đang sử dụng chỉ để cho vui để cho bạn thấy,
cũng đồng thời minh họa,
làm thế nào blockquote hoạt động,
và cũng làm thế nào chúng ta có thể tạo ra một loại thẻ trong Bootstrap.
Vì vậy, với điều này, chúng tôi đã thêm vào trong mã để hiển thị blockquote ở đây.
Vì vậy, hãy để tôi xem nếu điều đó thay đổi,
và sau đó chúng tôi sẽ đi và xem cách báo giá này được hiển thị trong trang web của chúng tôi.
Đi đến trình duyệt, trong trang của chúng tôi,
bạn có thể thấy rằng lịch sử của chúng tôi và các sự kiện trong nháy mắt được hiển thị cạnh nhau.
Dưới đó, tôi có đoạn nội dung dài này ở đây.
Chúng ta hãy nhìn vào cùng một trang trong một màn hình nhỏ thêm.
Vì vậy, trong một màn hình nhỏ,
bạn có thể thấy rằng lịch sử và sự kiện được xếp chồng lên nhau,
và báo giá nằm ngay dưới đây trong thẻ riêng của nó.
Vì vậy, bạn có thể thấy hai thẻ,
một bên dưới khác ở đây,
và sau đó bảng chính nó được hiển thị ở phía dưới.
Vì vậy, bảng chính nó là một bảng có thể cuộn ở đây.
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.
Vì vậy, trong bài tập này,
chúng tôi đã học được về cách chúng tôi có thể sử dụng bảng và thẻ để hiển thị nội dung trong trang web của chúng tôi.
Bây giờ chúng tôi đã hoàn thành bài tập này,
đó là thời điểm tốt để thực hiện một cam kết git.