Chúng tôi vừa hoàn thành một cuộc thảo luận về tầm quan trọng của việc cung cấp điều hướng trong trang web của bạn.
Chúng tôi cũng xem xét một số cách khác nhau mà chúng tôi có thể cung cấp điều hướng trong một trang web.
Bây giờ là lúc chúng ta nhìn vào bootstrap và nhìn vào các thành phần
mà bootstrap cung cấp cho phép chúng tôi thêm điều hướng vào các trang web của chúng tôi.
Hai thành phần quan trọng từ bootstrap là Navbar và Breadcrumbs.
Chúng ta sẽ xem xét cả hai trong số này trong bài tập này.
Hãy bắt đầu bằng cách thêm thanh điều hướng vào đầu trang web của chúng tôi.
Chúng ta có thể làm điều đó bằng cách sử dụng các thành phần Navbar là một phần của bootstrap.
Vậy, làm thế nào để bắt đầu?
Chúng tôi đi đến phần thân của trang HTML của chúng tôi.
Vì vậy, ở đây, tôi có index.HTML mở.
Và ở phía trên,
tôi sẽ thêm vào một phần tử bằng cách sử dụng thẻ HTML nav đó.
Bây giờ thẻ HTML nav được thiết kế để cung cấp điều hướng.
Vì vậy, chúng ta hãy tận dụng lợi thế của thẻ này và xây dựng thanh điều hướng của chúng tôi bằng cách sử dụng thẻ nav.
Vì vậy, bây giờ, ở trên cùng,
tôi sẽ thêm vào thẻ này,
đặt nav và xây dựng thanh điều hướng xung quanh thẻ nav này.
Vì vậy, một khi chúng ta thêm thẻ nav này vào index.HTML,
sau đó chúng ta có thể đi trước và sau đó áp dụng các lớp bootstraps để thẻ nav này.
Vì vậy, tôi áp dụng navbar lớp.
Vì vậy, lớp navbar trong bootstrap cho phép tôi tạo ra một thanh điều hướng.
Có rất nhiều cách khác nhau để tùy chỉnh thanh điều hướng,
mà chúng ta có một cái nhìn như các lớp bổ sung sẽ thêm vào thẻ nav này.
Cùng với navbar,
chúng tôi cũng thêm vào lớp tiếp theo đó là navbar-tối.
Bây giờ tôi muốn thanh điều hướng của tôi có màu tối,
với nền tối hơn.
Bởi vì nó đi rất tốt với trang web mà tôi vừa thiết kế.
Chúng ta có thể có ánh sáng navbar-light,
đó là một thanh điều hướng màu nhẹ hơn.
Vì vậy, bạn có thể chọn để sử dụng một trong hai trong số họ trong trang web của bạn.
Lớp tiếp theo mà tôi sẽ sử dụng là lớp navbar-expand-sm.
Bây giờ, và cũng có thể, tôi sẽ chỉ định kích thước màn hình bên
dưới mà hành vi có thể chuyển đổi đi vào tồn tại.
Bây giờ, khi tôi nói navbar-expand-sm,
điều đó có nghĩa là đối với các màn hình nhỏ và thêm nhỏ,
navbars này sẽ trở thành một navbar có thể bật. Có
nghĩa là, nó sẽ bị thu gọn trong các kích cỡ màn hình.
Bạn sẽ sớm tìm hiểu cách thức hoạt động này,
khi chúng ta nhìn vào cách chúng ta có thể thêm
plugin sụp đổ vào navbar để kích hoạt loại hành vi đó.
Vì vậy, cùng với một navbar có thể
chuyển đổi sm, tôi sẽ áp dụng một màu nền cho navbar ban đầu,
đó sẽ là bg-chính.
Bây giờ bg-chính là màu chính được xác định trong bootstrap của bạn.
Theo mặc định, đây là một phiên bản của màu xanh được sử dụng bởi bootstraps.
Vì vậy, tôi sẽ bắt đầu với điều đó như là màu chính của tôi.
Sau đó, tôi sẽ tùy chỉnh màu của navbar của tôi bằng cách sử dụng một số lớp CSS.
Ngoài ra, tôi cũng sẽ áp dụng
một lớp khác gọi là fixed-top để thanh điều hướng đó.
Những gì cố định đầu làm, là nó sửa thanh điều hướng lên phía trên cùng
của cửa sổ trình duyệt nơi trang web này đang được hiển thị.
Ngay cả khi bạn cuộn trang ướt của bạn,
thanh điều hướng vẫn còn ở đầu trang.
Bạn có thể chỉ cần sử dụng đáy cố định để sửa
thanh điều hướng xuống dưới cùng của cửa sổ trình duyệt của bạn hoặc bạn có thể nói, đầu tĩnh.
Và cũng có thể, bạn chỉ có thể không sử dụng lớp này.
Nếu bạn không sử dụng nó,
sau đó thanh điều hướng của bạn cũng sẽ cuộn khi trang web của bạn được cuộn lên trên.
Trong trang web của tôi, tôi chọn giữ thanh điều hướng cố định ở đầu trang.
Có rất nhiều tùy chọn khác có
sẵn mà bạn có thể tìm thấy trong tài liệu bootstraps.
Vì vậy, đây là một ví dụ về việc sử dụng thanh điều hướng.
Bây giờ ngoài ra, bên trong thanh điều hướng,
tôi sẽ kèm theo bất kỳ nội dung
nào sẽ được sử dụng trong thanh điều hướng bên trong một vùng chứa.
Vì vậy, đây là nơi tôi sẽ sử dụng một phần tử div ở đây
và áp dụng các lớp container để phần tử div này.
Vì vậy, bất cứ điều gì được bao bọc bên trong đó,
sẽ bị hạn chế ở cùng độ rộng như phần còn lại của trang Web của tôi.
Như bạn nhớ lại, tôi đã sử dụng lớp chứa để
xác định chiều rộng của nội dung trong trang web của tôi,
vì vậy tôi sẽ áp dụng tương tự cho thanh điều hướng của tôi cũng,
do đó thông tin thanh điều hướng của tôi sẽ được
hiển thị trong cùng chiều rộng với phần còn lại của trang web của tôi.
Bạn có thể chọn không sử dụng lớp chứa trong thanh điều hướng, Trong trường hợp đó,
nội dung của thanh điều hướng sẽ trải rộng trên toàn bộ chiều rộng của màn hình của bạn.
Bên trong thanh điều hướng,
tôi sẽ thêm một lớp vào một thẻ ở đây.
Lớp học này mà tôi gọi là navbar-thương hiệu,
cho phép tôi hiển thị một số thông tin như một thông tin thương hiệu trong thanh điều hướng của tôi.
Vì vậy, nếu bạn có một công ty ví dụ,
bạn có thể hiển thị tên của công ty của bạn hoặc
logo của công ty của bạn bằng cách sử dụng thương hiệu navbar-
để sẽ được hiển thị nổi bật trong thanh điều hướng của bạn.
Rõ ràng, khi bạn truy cập nhiều trang web,
bạn sẽ thấy rằng tên của công ty là một nơi nào đó có thể nhìn thấy
trong thanh điều hướng của trang web đó.
Vì vậy, để tôi thêm vào đó một thương hiệu navbar-.
Điều này cũng có thể được siêu liên kết đến trang chủ của trang web của bạn.
Vì vậy, tôi sẽ để nó ở đó.
Trong các trang còn lại trên trang web của
tôi, tôi sẽ chỉ thêm href để đưa tôi trở lại trang index.HTML,
đó là trang chủ.
Và bên trong đây tôi sẽ thêm vào tên của nhà hàng của tôi.
Hãy lưu các thay đổi và đi và
xem nhanh trạng thái hiện tại của thanh điều hướng của tôi.
Đi đến trang web trong trình duyệt,
bây giờ bạn có thể thấy thanh điều hướng hiển thị trên trang web của tôi trong trình duyệt.
Thanh điều hướng bây giờ là ở đầu trang và bạn
có thể thấy rằng khi tôi cuộn trang của tôi,
thanh điều hướng vẫn còn ở trên cùng bởi vì tôi đã sử dụng lớp cố định hàng đầu.
Bạn cũng có thể thấy
thương hiệu navbar-cho phép tôi hiển thị tên của nhà hàng ở đó.
Sau đó tôi sẽ thay thế nó bằng logo cho nhà hàng này.
Bạn nhận thấy rằng thanh điều hướng được bao phủ một phần trong Jumbotron.
Bạn sẽ sửa chữa điều đó một chút sau đó bằng cách sử dụng một số tùy biến CSS.
Điều tiếp theo mà tôi sẽ làm là thêm một vài liên kết vào thanh điều hướng của tôi,
để các liên kết này sẽ dẫn tôi đến các trang khác trong trang web của tôi.
Vậy làm thế nào để chúng ta làm điều đó?
Quay trở lại index.HTML,
Tôi sẽ thêm vào một ul ở đây,
trong đó tôi sẽ khai báo
tất cả các liên kết khác nhau mà sẽ được hiển thị trong hộp điều hướng của tôi.
Vì vậy, ul này mà tôi sẽ áp dụng các lớp như navbar-nav.
Vì vậy, đây là lớp học sẽ giúp tôi xác định
tập hợp các liên kết sẽ được bao gồm trong thanh điều hướng của tôi.
Và các liên kết này sẽ được hiển thị theo chiều ngang bên trong thanh điều hướng của tôi.
Các mr autoclass mà tôi cũng đã áp dụng cho ul,
được sử dụng để xác định lề phải.
Vì vậy, đây là một lớp tiện ích có sẵn
trong bootstrap cho phép tôi xác định lề phải.
Vì vậy, nếu tôi nói, mr-auto,
ý nghĩa của nó là ở phía bên phải,
lề phải nên được thiết lập càng nhiều càng tốt.
Vì vậy, điều đó có nghĩa là nội dung sẽ được đẩy càng trái
càng tốt trong thanh điều hướng.
Bên trong danh sách không có thứ tự này,
tôi có thể sử dụng các yếu tố danh sách để bao gồm
các liên kết khác nhau mà sẽ là một phần của thanh điều hướng của tôi.
Vì vậy, trong đó, tôi sẽ thêm vào một vài liên kết ở đó
và tôi sẽ bắt đầu bằng cách xác định một trong những đầu tiên có liên kết.
Đối với mọi mục danh sách trong thanh điều hướng của
bạn, bạn sẽ áp dụng các lớp như mục điều hướng.
Điều này cho phép các mục danh sách được hiển thị theo chiều ngang dưới dạng liên kết trong thanh điều hướng của tôi.
Và sau đó bên trong đây,
sau đó tôi có thể sử dụng một thẻ để thêm vào
liên kết thực tế sẽ là một phần của thanh điều hướng của tôi.
Vì vậy, bên trong đó tôi sử dụng một thẻ với
liên kết nav-class và điều này cũng cho phép tôi sử dụng href.
Thuộc tính để xác định liên kết ở đó.
Và cái đầu tiên mà tôi sẽ bao gồm là Home.
Vì vậy, điều này sẽ bao gồm một mục được gọi là Trang chủ trong thanh điều hướng này.
Để tôi sao chép lại rồi dán nó.
Và sau đó chúng tôi sẽ chỉnh sửa một số trong số này bởi vì tôi muốn thêm
bốn cái khác nhau vào thanh điều hướng của tôi.
Người đầu tiên là Home.
Người thứ hai sẽ là About.
Thứ ba sẽ là Menu mà tôi sẽ xây dựng như một phần của khóa học tiếp theo.
Và người cuối cùng sẽ là Liên hệ.
Một trang web công ty điển hình sẽ có các liên kết như thế này trong thanh điều hướng của nó.
Vì vậy, với việc thêm hai,
bây giờ những gì tôi có thể làm là
chúng ta có thể xác định rõ ràng một trong những liên kết này là liên kết hoạt động, có
nghĩa là khi bạn đang ở trên trang cụ thể đó,
liên kết cụ thể đó có thể được đánh dấu.
Vì vậy, để làm điều đó, chúng tôi sẽ áp dụng ở đây lớp được gọi là hoạt động cho một trong những mục danh sách này.
Trong trường hợp này, vì đây là trang index.html,
tôi đang áp dụng lớp hoạt động cho liên kết nhà ở đó.
Điều này khá nhiều hoàn thành thanh điều hướng của tôi trong trang index.HTML.
Một điều nhỏ mà tôi muốn sửa chữa ở đây là liên kết Giới thiệu,
tôi muốn liên kết nó với
trang aboutus.HTML mà chúng tôi đã đưa vào trang web của chúng tôi,
bởi vì đó là nơi tôi muốn nó dẫn đầu.
Chúng ta hãy đi và xem nhanh thanh điều hướng của chúng tôi về phần này.
Quay trở lại thanh điều hướng của chúng tôi,
bạn có thể ngay lập tức thấy kết quả của việc đưa các
mục đó vào danh sách không có thứ tự ở đó.
Vì vậy, bạn thấy Trang chủ,
Giới thiệu, Menu và Liên hệ ở đó,
và mỗi người trong số họ là một liên kết nhưng đây là một mục điều hướng ở đây.
Và lưu ý cách Trang chủ được đánh dấu ở đây vì việc sử dụng lớp hoạt động.
Vì vậy, nếu tôi bấm vào About,
nó sẽ đưa tôi đến sân About.
Kìa, kìa, chúng ta ở đó.
Nhưng tôi nhận ra rằng tôi không có một cách để quay trở lại,
vì vậy điều đó có nghĩa là tôi cũng cần phải giao thanh điều hướng này cho trang aboutus.HTML.
Chúng tôi sẽ đến đó trong một thời gian ngắn.
Bây giờ, tôi sẽ nhanh chóng điều hướng bằng cách sử dụng nút trở lại của
trình duyệt của tôi trở lại trang index.HTML của tôi.
Một điều mà tôi cũng muốn chứng minh cho bạn là làm thế nào
thanh điều hướng này sẽ sụp đổ cho kích thước màn hình nhỏ và nhỏ hơn.
Vì vậy, hãy bật chế độ xem bằng cách sử dụng Chế độ xem Responsive,
và sau đó cho phép tôi đi đến Galaxy S5.
Và tôi nhận thấy rằng khi tôi sử dụng Galaxy S5 như thế này,
bạn có thể thấy rằng điều này đang được hiển thị sớm hơn nó đã bao gồm màn hình.
Đó không phải là hành vi mà tôi muốn.
Tôi muốn có thể che giấu điều này khi tôi đang xem điều này trên một màn hình nhỏ và nhỏ hơn.
Và sau đó có lẽ tôi thêm một nút ở đây mà tôi có thể sử dụng
để bật và tắt hiển thị các liên kết này.
Bạn đã thấy những điều như vậy trong các trang web di động.
Làm thế nào để chúng ta làm điều này trong bootstrap?
Chúng ta hãy đi đến bước đó tiếp theo.
Quay trở lại thanh điều hướng của chúng tôi ở đây.
Hãy để tôi thêm vào một nút ở đó,
mà sẽ hoạt động như nút chuyển đổi để hiển thị và ẩn các
liên kết của tôi từ thanh điều hướng của tôi khi nó được hiển thị trên màn hình thông minh và nhỏ.
Vì vậy, để thêm vào đó,
hãy để tôi thêm vào một nút và áp dụng một số lớp học để nút này.
Chúng ta sẽ thảo luận thêm về các nút trong bootstrap trong bài học tiếp theo.
Nhưng để thêm một nút trong bootstrap,
bạn sẽ áp dụng các lớp cho nút đặc biệt này như navbar-toggle.
Vì vậy, đây là một navbar-toggle.
Vì vậy, như tên của nó,
bạn đã bắt đầu hiểu những gì nút này sẽ làm trong trường hợp này.
Và sau đó tôi sẽ thêm các loại như nút để chỉ ra rằng điều này đang hoạt động như một nút.
Và sau đó chuyển đổi dữ liệu như sự sụp đổ.
Bây giờ, thuộc tính chuyển đổi dữ liệu này mà bạn sẽ thấy ở đây thực sự là
một sử dụng thành phần JavaScript trong bootstrap.
Chúng ta sẽ nhìn vào dữ liệu này gạch nối thanh loại thuộc tính hơn trong mô-đun tiếp theo,
nơi chúng ta sẽ xem xét các thành phần JavaScript bootstraps.
Thanh điều hướng đòi hỏi một trong những thành phần JavaScript để có thể
bật và tắt các liên kết của tôi trong thanh điều hướng của tôi, Vì vậy,
đó là lý do tại sao tôi nhanh chóng giới thiệu khái niệm này ở đây,
nhưng chúng tôi sẽ trở lại để kiểm tra các
thành phần JavaScript bootstraps này nhiều hơn trong mô-đun tiếp theo.
Vì vậy, chuyển đổi dữ liệu sụp đổ và
sau đó là dữ liệu mục tiêu là #Navbar.
Bây giờ, tôi sẽ giới thiệu một div với ID như navbar.
Vì vậy, khi tôi chỉ định một ngày hoặc mục tiêu #Navbar,
mà đề cập đến ID của phần tử khác đó sẽ là
mục tiêu của nút đặc biệt này ở đây.
Vì vậy, đó là phần mà tôi thêm vào dưới cùng.
Và cũng có thể, tôi muốn nút hiển thị một cái gì đó ở đây.
Và thông thường, khi bạn nhìn thấy các loại nút này trong các trang web di động,
nó sẽ chứa các dòng miễn phí ở đó,
do đó, thường được gọi là biểu tượng chuyển đổi Navbar-toggle.
Vì vậy, tôi sẽ bao gồm một biểu tượng đặc biệt
được bao gồm trong bootstrap, được gọi là biểu tượng navbar-toggle.
Vì vậy, nếu tôi áp dụng lớp này để span tag,
sau đó sẽ giới thiệu một biểu tượng navbar-toggle để nút của tôi ở đây.
Vì vậy, điều đó giới thiệu một nút.
Chúng ta sẽ xem xét nó trông như thế nào trong một thời gian ngắn.
Bây giờ, khi tôi nhấp vào nút này,
tôi muốn có thể hiển thị và ẩn các liên kết này.
Để cho phép tôi làm điều đó,
những gì tôi sẽ làm là bao quanh ul này với một div ở đây.
Vì vậy, tôi sẽ đi vào và giới thiệu một div xung quanh ul này.
Và để div này,
tôi sẽ áp dụng các lớp như sụp đổ,
và sau đó navbar-sụp đổ, và sau đó tôi cung cấp cho nó một ID như Navbar.
Bây giờ, bạn đang bắt đầu thấy sự tương quan giữa
các lớp này và ID và những gì tôi tuyên bố trong chuyển đổi dữ liệu và mục tiêu dữ liệu.
Vì vậy, ở đây mục tiêu dữ liệu tôi chỉ định là #Navbar và do đó ID được đưa ra cho div này là navbar.
Và tôi chỉ định chuyển đổi dữ liệu là sự sụp đổ.
Thu gọn là một trong những thành phần JavaScript bootstraps
, chúng ta sẽ xem xét chi tiết hơn trong mô-đun tiếp theo.
Vì vậy, kèm theo điều này bên trong div cho màn hình nhỏ và thêm nhỏ,
điều này sẽ được ẩn theo mặc định,
nhưng khi tôi nhấp vào nút,
nội dung của div này sẽ được tiết lộ trên màn hình.
Hãy để tôi cũng thêm một mr-auto vào một lớp navarbar-thương hiệu ở đó để
tôi tự động giới thiệu một lề phải đủ để navbar- thương hiệu này.
Bây giờ, chúng ta hãy đi và nhìn vào điều này trong trình duyệt của chúng tôi.
Đi đến trình duyệt, bây giờ bạn có thể thấy làm thế nào
navbar của tôi bị thu gọn trên kích thước màn hình nhỏ và nhỏ hơn.
Và chú ý nút này ở phía bên trái.
Khi tôi nhấp vào nút, các
liên kết trong thanh điều hướng của tôi sẽ được hiển thị và ẩn.
Đây là hành vi mà tôi muốn thực hiện đáp ứng thanh điều hướng của tôi.
Nếu tôi chuyển sang
màn hình bình thường, lớn hơn, thanh điều hướng sẽ được hiển thị hoàn toàn bao gồm các liên kết.
Nhưng khi tôi xem cùng một điều trên một màn hình nhỏ hơn như thế này,
sau đó các liên kết thanh điều hướng được ẩn đằng sau
nút này và sau đó sẽ được bật và tắt bằng cách nhấp vào nút đó.
Vì vậy, đó là hành vi đáp ứng mà bạn có thể
xây dựng vào thanh điều hướng của bạn trên trang web của bạn.
Bây giờ chúng tôi đã hoàn thành thanh điều hướng trên trang index.HTML của
tôi, tôi muốn có thể giới thiệu cùng một thanh điều hướng đến trang aboutus.HTML.
Trước khi chúng tôi đến đó, chúng ta hãy đi đến chân trang ở đây.
Và sau đó bạn nhận thấy rằng ở chân trang,
chúng tôi có những liên kết này.
Tôi muốn có thể cập nhật liên kết này cũng để trỏ
đến aboutus.HTML để ngay cả bằng cách nhấp vào liên kết trong chân trang của
tôi, tôi vẫn sẽ đi đến trang về.
Bây giờ, quay trở lại đây,
những gì tôi sẽ làm chỉ đơn giản là sao chép mã này của thanh điều hướng này từ đây.
Và sau đó, đi đến trang aboutus.HTML và sau đó dán vào trang aboutus.HTML của tôi.
Không chỉ vậy, tôi cần phải làm một số điều chỉnh này,
bởi vì điều này bây giờ là trong trang aboutus.HTML.
Vì vậy, rõ ràng, có một vài điều mà tôi cần phải cập nhật.
Đầu tiên và quan trọng nhất, điều này navbar-thương hiệu mà nên dẫn tôi trở
lại trang chủ của tôi bây giờ nên được cập nhật như index.HTML ở đây.
Và sau đó, mục danh sách ở đây bây giờ là thứ hai trang chủ một lần nữa,
Tôi muốn cập nhật mà index.HTML có và sau đó liên kết thứ hai để về,
bởi vì đây là trang aboutus.HTML,
Tôi sẽ đặt nó trở lại mà băm đó và sau đó tôi sẽ loại bỏ
các lớp hoạt động từ đầu tiên mục và sau đó áp dụng các lớp hoạt động cho mục thứ hai,
bởi vì đây là trang Giới thiệu và vì vậy mà nên là một trong đó được đánh dấu.
Một lần nữa, đi đến chân trang của Trang Giới thiệu.
Trong chân trang, tôi sẽ thực hiện các cập nhật tương tự cho các liên kết ở đây để
Trang chủ sẽ dẫn tôi trở lại index.HTML và sau đó cho phép tôi lưu các thay đổi.
Vì vậy, bây giờ About Page của tôi cũng được cập nhật một cách chính xác.
Đi đến trình duyệt,
bây giờ bạn có thể thấy rằng tôi đang ở trên Trang chủ của tôi và sau đó khi tôi nhấp vào trang about,
tôi sẽ đi đến Trang About.
Lưu ý làm thế nào mà cùng một thanh điều hướng được hiển thị trong Giới thiệu Trang, vì
vậy bạn có về được đánh dấu bởi vì tôi
áp dụng các lớp hoạt động để đó và sau đó
tôi có thể quay trở lại Trang chủ của tôi hoặc bằng cách nhấp vào narvar-thương hiệu hoặc Trang chủ.
Vì vậy, chúng ta hãy nhấp vào narvar-thương hiệu và chúng tôi đang trở lại trong trang
chủ hoặc trang chủ của chúng tôi hoặc index.HTML.
Vì vậy, bây giờ điều hướng được thiết lập chính xác cả trong Trang chủ và trong Trang Giới thiệu. Một
vài điều bổ sung mà tôi sẽ làm là để áp dụng nếu bạn thấy
nó là lớp mà tôi có thể thay đổi màu sắc của navbar của tôi
và tôi cũng muốn thêm
một breadcrumb vào này About Page và do đó breadcrumb cũng sẽ cung cấp cho tôi một cách khác
để điều hướng trở lại Trang chủ của tôi và cũng sẽ cho biết
hệ thống phân cấp trong trang web của tôi nơi tôi đang ở tại thời điểm này.
Vì vậy, hãy làm hai bước tiếp theo.
Quay trở lại trình soạn thảo đó trong styles.css.
Tôi sẽ thêm vào một vài lớp học nữa ở đây.
Bạn nhận thấy rằng navbar của tôi đang giấu một phần của jumbotron.
Để tránh điều đó,
những gì tôi sẽ làm là với cơ thể của tôi,
tôi sẽ đưa ra một đệm 50 điểm ảnh ở trên
cùng để những 50 điểm ảnh sẽ được để lại cho thanh điều hướng để trang trải.
Bất cứ khi nào bạn đang sử dụng thanh điều hướng trên cùng cố định, bạn
nên đưa phần đệm này vào nội dung
trang web của bạn để điều hướng không bao gồm
phần tử trên cùng trong nội dung trang web của bạn.
Vì vậy, những người còn lại tôi sẽ để lại như là
zero pixel và cũng là z-index cho cơ thể của tôi là zero.
Từ kiến thức của bạn về CSS bạn hiểu những gì z-index không
và một trong những tiếp theo tôi sẽ làm là tôi sẽ
quá tải lớp navbar-tối bằng cách thêm vào một màu sắc hơn cho
lớp navbar và màu sắc mà tôi sẽ
chọn là 512DA8.
Đây là một màu tím sẫm có vẻ rất tốt trong trang web của tôi.
Thật vậy, Nếu bạn có quan tâm nơi tôi tìm thấy màu sắc này bạn có thể truy cập
www.android.com và sau đó tìm kiếm tài liệu của họ cho thiết kế vật liệu và ở đó,
họ có gợi ý về cách màu sắc có thể được sử dụng
trong ứng dụng Android của bạn nhưng điều tương tự áp dụng ngay cả đối với một trang web,
vì vậy đó là nơi tôi đã đi và chọn những màu sắc này để được sử dụng trong trang web của tôi.
Vì vậy, áp dụng điều này, bây giờ khi
tôi làm điều này, tôi phải quay trở lại trang index.HTML của tôi và
sau đó từ navbar tôi nên loại bỏ bg-chính này.
Nếu không, màu sắc mà tôi đề xuất trong CSS sẽ không được áp dụng cho điều này.
Tương tự như vậy, đi đến trang aboutus.HTML và sau đó di chuyển đến
navbar và sau đó loại bỏ bg-chính từ đó cũng.
Bây giờ, trong khi tôi đang ở trong trang aboutus.HTML,
hãy để tôi giới thiệu một breadcrumb vào container của tôi,
hàng đầu tiên của container của tôi ở đó.
Vì vậy, đây là nơi tiêu đề Giới thiệu về chúng tôi đã
có, vì vậy tôi sẽ đi vào và giới thiệu một ol.
Tôi chỉ sử dụng thẻ ol như một cách để giới thiệu breadcrumb.
Bạn có thể sử dụng ngay cả một div cho điều này và nó vẫn sẽ làm việc tốt.
Nó chỉ như vậy xảy ra rằng ví dụ trên bootstraps tài liệu sử dụng một ol vì vậy,
Tôi gắn bó với điều đó ngay cả một div đơn giản cũng sẽ làm việc tốt ở đây.
Vì vậy, tôi nói ol lớp col-12 breadcrumb.
Vì vậy, các lớp breadcrumb áp dụng và
không phải là col-12 nghĩa là kéo dài toàn bộ màn hình.
Và bên trong đó, tôi sẽ đi vào và thêm hai mục danh sách.
Bây giờ bạn thấy lý do tại sao việc sử dụng ol là hữu ích ở đây,
bởi vì tôi có thể sử dụng các mục danh sách để mô tả các mục breadcrumb.
Vì vậy, breadcrumb item ở đây,
vì vậy tôi bao gồm một breadcrumb item và sau đó bên trong đó tôi sẽ sử dụng
thẻ A để xác định một liên kết trở lại Trang chủ của tôi.
Vì vậy, tôi nói, “A” và sau đó A này,
tôi cung cấp cho href như index.HTML và sau đó
bao gồm rằng vào breadcrumb đầu tiên của tôi và sau đó sau này,
một trong những tiếp theo mà tôi sẽ bao gồm là một danh sách mục và mục
danh sách thứ hai tôi sẽ áp dụng các lớp như breadcrumb item và hoạt động.
Vì vậy, lưu ý việc sử dụng các lớp hoạt động ở đây và sau đó bên trong đó tôi sẽ nói “về
chúng tôi” Tôi không cần một liên kết ở đây bởi vì tôi đã có trên trang vì
vậy mà không cần phải được bao gồm cho mục danh sách này.
Hãy lưu các thay đổi,
vì vậy bạn có thể xem cách breadcrumb đã được giới thiệu vào
trang Giới thiệu cụ thể này ở đây.
Chúng ta hãy đi và xem trang web kết quả.
Đi đến trang web của tôi, bây giờ bạn có thể thấy rằng màu sắc của navbar
bây giờ đã thay đổi sang màu tím đậm được giới thiệu
thông qua CSS và điều này trông đẹp trên màn hình ở đây.
Màu tím đậm, tiếp theo là một màu tím nhạt hơn và sau đó ở
phía dưới thậm chí còn nhẹ hơn màu tím cho chân trang của tôi.
Vâng, tôi không phải là nhà thiết kế,
nhưng đây là điều tốt nhất mà tôi có thể đưa ra về việc thêm gần với các trang web.
Như bạn đã biết từ lịch sử đàn ông là người mù màu.
Vì vậy, chúng tôi có hương vị rất kém về màu sắc.
Nếu bạn kết hôn với vợ bạn chắc chắn sẽ nhắc nhở bạn về điều đó.
Hãy đi đến Trang Giới thiệu và xem nó trông như thế nào.
Vì vậy, đây là Trang Giới thiệu và trong Trang Giới thiệu bạn có thể
thấy navbar với màu sắc chính xác ở
đó và lưu ý breadcrumb bao gồm trong Giới thiệu về chúng tôi xuống đây.
Vì vậy, bạn có thể thấy Trang chủ dẫn bạn trở lại trang chỉ mục và
sau đó Giới thiệu về chúng tôi như bạn thấy chúng tôi áp dụng liên kết hoạt
động, lớp hoạt động để trang này.
Vì vậy, đó là cách hiển thị Giới thiệu và Trang chủ.
Vì vậy, đây là phong cách breadcrumb mặc định được sử dụng
trong bootstrap và nếu tôi nhấp vào Trang chủ tôi sẽ quay trở lại Trang chủ của tôi.
Với điều này, chúng tôi hoàn thành bài tập này trên navbar và breadcrumbs.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp “navbar và breadcumbs.”