Trong bài tập này, chúng ta sẽ khám phá điều hướng dựa trên tab của Boo
tstrap, hỗ trợ Bootstrap cho các tab,
và cách các tab có thể được sử dụng để tổ chức nội dung trên trang web của bạn.
Và cách bạn có thể điều hướng từ tab này sang tab khác,
sau đó tiết lộ nội dung trong mỗi tab đó trong trang web.
Bây giờ, bạn sẽ ở đây thấy tôi sử dụng lớp nav,
và sau đó tiếp tục đủ điều kiện nó bằng cách sử dụng lớp nav tab.
Cách tiếp cận tương tự cũng có thể được sử dụng với các viên thuốc nav
mà chúng tôi đã xem xét trong bài giảng trước đó.
Để bắt đầu với bài tập này,
chúng ta sẽ đi vào trang aboutus.html.
Và ngay tại đó,
nơi mà chúng ta có nội dung lãnh đạo công ty ở đó
, sau h2, tôi sẽ giới thiệu điều hướng theo tab.
Vì vậy, đây là nơi tôi sẽ làm cho sử dụng ul với lớp nav nav-tab.
Vì vậy, bạn đã thấy rằng trước đó khi chúng tôi xây dựng thanh điều hướng,
chúng tôi cũng sử dụng ul bên trong thanh điều hướng để xác định các mục điều hướng ở đó.
Cách tiếp cận tương tự ở đây, ngoại trừ
việc ở đây chúng ta sẽ sử dụng ul với nav và các tab nav ở đây.
Vì vậy, bên trong ul này,
chúng tôi sẽ xây dựng cấu trúc điều hướng cho điều hướng tab này ở đây.
Vì vậy, trong đó, tôi sẽ sử dụng các mục danh sách với các lớp nav-item,
và xây dựng các điều hướng xung quanh mục danh sách này.
Vì vậy, điều này giới thiệu mục đầu tiên vào các tab nav của tôi.
Ngay sau đó, bên trong đó tôi sẽ giới thiệu một với lớp nav-liên kết hoạt động.
Vì vậy, cái này, như bạn thấy,
nếu bạn nhớ lại từ cách chúng tôi sử dụng ul với mục nav và liên kết nav.
Trong thanh điều hướng,
chúng ta đang thấy một cách tiếp cận tương tự ở đây.
Vì vậy, nav-mục hoạt động, và sau đó href.
Vì vậy, đây sẽ là một tham chiếu đến tab ngăn sau này,
trong đó sẽ có ID của peter đó,
và vai trò là tab cho điều này,
và tab chuyển đổi dữ liệu.
Vì vậy, bạn có thể thấy thành phần javascript của Bootstrap đi vào hình ảnh ở đây.
Và sau đó tôi sẽ nói Peter Pan,
và sau đó đóng một cái thẻ ở đó.
Vì vậy, điều này sẽ hoàn thành tab đầu tiên của chúng tôi trong điều hướng tab của chúng tôi.
Hãy để tôi hoàn thành phần còn lại của mã,
và sau đó chúng tôi sẽ quay lại và xem lại phần còn lại của mã ở đó.
Vì vậy, ở đây bạn có thể thấy rằng tôi đã hoàn thành cấu trúc điều hướng này ở đây.
Tương tự như vậy, tôi đang xác định các mục danh sách cho các nhà lãnh đạo công ty miễn phí còn lại ở đây.
Bây giờ, để tôi tiết kiệm sự thay đổi.
Và sau đó chúng ta hãy đi và xem nhanh trang web.
Chuyển sang trang web,
bây giờ bạn thấy cách sử dụng các tab nav mà chúng tôi đã tạo ra
cấu trúc điều hướng này ngay dưới sự lãnh đạo của công ty ở đây.
Vì vậy, cấu trúc điều hướng này có nghĩa là tôi sẽ có thể điều hướng và
xem từng chi tiết hơn bằng cách nhấp vào điều này.
Vì vậy, đó là cách điều hướng theo tab hoạt động ở đây.
Bây giờ, rõ ràng, nội dung của mỗi người trong số họ nên
chỉ hiển thị một cách thích hợp chi tiết của người đó ở đây.
Vì vậy, đây là nơi việc sử dụng nội dung tab
và các lớp ngăn tab sẽ có hiệu lực.
Và chúng ta sẽ kèm theo nội dung này bằng cách sử dụng nó.
Và sau đó buộc điều này với những điều hướng,
điều hướng tab ở đây,
để chỉ có một thông tin của lãnh đạo công ty duy nhất
được hiển thị trên màn hình tại một thời điểm.
Một khi chúng tôi hoàn thành thiết lập điều hướng theo tab
đó, sau đó chúng tôi sẽ di chuyển xuống nội dung thực tế ở đây.
Và sau đó bây giờ, tôi sẽ tổ chức lại nội dung này thành bốn ngăn tab riêng biệt,
mỗi ngăn sẽ được hiển
thị khi ngăn tab tương ứng được chọn trong điều hướng tab.
Vì vậy, để bắt
đầu, điều đầu tiên chúng tôi sẽ làm là đi vào và tách
từng người trong bốn nhà lãnh đạo công ty này thành bốn phần ở
đó, để tôi dễ dàng nhìn thấy những gì tôi đang làm.
Vì vậy, ở h3,
tôi cắt chúng thành bốn phần khác nhau,
và sau đó chúng tôi sẽ có thể làm việc với những thứ này.
Bây giờ tôi có một, hai, ba, bốn.
Vì vậy, nội dung này bây giờ cần phải được kèm theo bên trong một div
với nội dung tab lớp.
Vì vậy, tất cả nội dung này mà chúng tôi có cho
bốn nhà lãnh đạo công ty khác nhau nên được kèm theo bên trong một tab nội dung div có.
Vì vậy, bây giờ tôi đã kèm theo đó bên trong liên lạc tab.
Bây giờ, đối với mỗi người trong số họ,
tôi cần phải tạo ra một div khác với ngăn tab lớp và một số lớp bổ sung.
Và sau đó tổ chức liên lạc này.
Vì vậy, chúng ta hãy bắt đầu với cái đầu tiên.
Vì vậy, đối với các nhà lãnh đạo công ty đầu tiên,
tôi sẽ giới thiệu một div mới với vai trò như tabpanel.
Vì vậy, điều này phục vụ như là bảng điều khiển tab sẽ được hiển
thị khi điều hướng tab đầu tiên được chọn.
Và lớp tương ứng mà tôi cần phải áp dụng là tab-pane.
Vì vậy, đây là ngăn tab,
nội dung thực tế được chứa trong đó.
Và sau đó một lớp khác mà tôi áp dụng là mờ dần.
Vì vậy, lớp mờ dần cho phép nội dung này mờ dần vào.
Vì vậy, đây là một lớp hoạt hình mà Bootstrap hỗ trợ.
Ngoài ra, tôi áp dụng lớp này được gọi là chương trình.
Lớp show về cơ bản xác định
rằng nội dung cụ thể này sẽ được hiển thị khi trang được kết xuất lần đầu tiên.
Vì vậy, nó sẽ chỉ áp dụng lớp show cho ngăn tab đầu tiên,
các ngăn tab còn lại sẽ không có lớp show được áp dụng.
Và lớp cuối cùng mà tôi sẽ áp dụng là hoạt động bởi vì đây
là ngăn tab sẽ được hiển thị trong trang khi trang được kết xuất lần đầu tiên.
Ngoài ra, để điều hướng hoạt động,
tôi cần phải cung cấp cho điều này một và ID,
và kể từ khi tôi sử dụng hashtag Peter cho nội dung điều hướng tab,
vì vậy tôi sẽ áp dụng ID như Peter ở đây.
Và như vậy, khi điều này được đề cập đến trong một liên kết có với hashtag Peter,
đây là ngăn tương ứng mà tôi đang đề cập đến.
Bây giờ, những gì tôi sẽ làm là tôi sẽ sao chép div này từ đó.
Và sau đó tôi sẽ áp dụng div này vào thông tin của nhà lãnh đạo công ty thứ hai,
ngoại trừ việc đối với điều này tôi chỉ nên áp dụng ngăn tab và phù hợp.
Chương trình và hoạt động không nên được áp dụng cho ba người còn lại.
Và giấy tờ tùy thân ở đây phải là Danny cho tờ thứ hai.
Tôi sẽ chỉ đơn giản là sao chép mã này,
và sau đó dán nó cho các nhà lãnh đạo công ty thứ ba ở đây.
Và sau đó bảng điều khiển tab và bảng thứ ba là Agumbe.
Và người cuối cùng, một
lần nữa, tôi dán vào,
và sau đó ID nên được thay đổi thành Alberto,
và đóng div này ở đây.
Vì vậy, div này cho người cuối cùng nên được đóng cửa tại thời điểm đó.
Và điều đó sẽ chăm sóc bốn bảng tab mà tôi cần.
Đi vào và thụt lề nội dung này,
để tôi hài lòng,
nỗi ám ảnh của tôi là hài lòng ở đó.
Được rồi, điều đó hoàn thành việc tổ chức nội dung tab.
Bây giờ, chúng ta hãy lưu thay đổi và đi và
xem nhanh những gì trang web trông thích bây giờ.
Đến trang web của chúng tôi,
bây giờ bạn thấy rằng trang web của chúng tôi chỉ hiển thị nội dung tương ứng với CEO của họ.
Nếu bạn chuyển sang bất kỳ một trong những cái khác,
bạn sẽ thấy rằng thông tin tương ứng được hiển thị.
Và lưu ý cách thông tin này mờ dần khi bạn chọn người dùng cụ thể đó.
Nhưng, tất nhiên, nếu bạn hài lòng với điều này,
thì tốt, chúng ta có thể dừng lại ở thời điểm này.
Nhưng tôi muốn độc đáo xác định một tab thực sự xung quanh này.
Vì vậy, đây là nơi tôi sẽ áp dụng một vài thuộc tính CSS, thuộc
tính để tab đặc biệt này ở đây,
do đó nó là tốt đẹp,
cấu trúc tab sạch sẽ được định nghĩa ở đó.
Vì vậy, chúng ta hãy tạo ra một vài thuộc tính CSS cho việc này.
Bước cuối cùng, chuyển sang styles.css.
Sau khi navbar nghịch đảo,
tôi sẽ giới thiệu các lớp CSS cho nội dung tab,
vì vậy tôi chỉ định cho nội dung tab,
biên giới trái: 1px rắn DDD.
Và tôi sẽ áp dụng tương tự cho biên giới bên phải và phía dưới.
Tôi không cần phải áp dụng cho đầu trang vì đầu trang
đã được điều chỉnh bởi điều hướng tab.
Và sau đó để tôi đưa ra một padding của 10 pixel xung quanh,
và sau đó lưu các thay đổi.
Chúng ta hãy đi và xem trang web của chúng tôi sau này.
Chuyển trở lại trang của chúng tôi,
bây giờ bạn thấy một
cấu trúc giống như tab tốt đẹp, sạch sẽ được tạo ra.
Vì vậy, khi bạn điều hướng đến từng người trong số họ,
thông tin tương ứng được hiển thị một cách thích hợp trong tab riêng của nó.
Điều này hoàn thành bài tập này, nơi chúng tôi xem xét
việc sử dụng điều hướng theo tab cho trang web của chúng tôi.
Và sau đó chúng tôi đã thấy cách chúng tôi có thể tạo điều hướng tab và kèm theo các nội dung khác.
Đây cũng là thời điểm tốt để bạn thực hiện một Nhận xét Git với các tab tin nhắn.