Trong bài trước chúng ta đã tìm hiểu cách sử dụng danh sách điều hướng trong Bootstrap 4 rồi phải không nào. Trong bài này chúng ta tiếp tục tìm hiểu về điều hướng nhưng là thanh điều hướng Navigation bar. Chúng ta cùng bắt đầu bài học để xem cách dùng thanh điều hướng (Navigation bar) trong Bootstrap 4 có ưu điểm gì hơn danh sách điều hướng nhé các bạn!
Thanh điều hướng Navigation Bars là gì?
Thanh điều hướng là một tiêu đề điều hướng được đặt ở đầu trang. Ví dụ:
Thanh điều hướng cơ bản (Basic Navbar)
Với Bootstrap 4, một thanh điều hướng có thể mở rộng hoặc thu gọn, tùy thuộc vào kích thước màn hình.
Thanh điều hướng tiêu chuẩn được tạo bằng lớp .navbar, theo sau là lớp thu gọn đáp ứng: .navbar-expand-xl | lg | md | sm
Để thêm các liên kết bên trong thanh điều hướng, hãy sử dụng phần tử <ul> với class = "navbar-nav". Sau đó, thêm phần tử <li> có lớp .nav-item theo sau là phần tử <a> có lớp .nav-link:
Ví dụ :
<! - Thanh điều hướng ngang màu xám sẽ trở thành nằm dọc trên màn hình nhỏ -> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Tin tức</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Thể thao</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Video clip</a> </li> </ul> </nav>
Thanh điều hướng dọc
Loại bỏ lớp .navbar-expand-xl | lg | md | sm để tạo thanh điều hướng dọc:
Ví dụ:
<nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Tin tức</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Thể thao</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Video clip</a> </li> </ul> </nav>
Căn giữa thanh điều hướng
Thêm lớp .justify-content-center vào để giữa thanh điều hướng.
Ví dụ sau sẽ căn giữa thanh điều hướng trên màn hình vừa, lớn và cực lớn. Trên màn hình nhỏ, nó sẽ được hiển thị theo chiều dọc và căn trái (vì lớp .navbar-expand-sm):
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Tin tức</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Thể thao</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Video clip</a> </li> </ul> </nav>
Tô màu cho thanh điều hướng
Để sử dụng thanh điều hướng có màu trong Bootstrap 4 chúng ta có thể sử dụng bất kỳ lớp .bg-color nào để thay đổi màu nền của thanh điều hướng (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)
Mẹo: Thêm màu văn bản trắng vào tất cả các liên kết trong thanh điều hướng với lớp .navbar-dark hoặc sử dụng lớp .navbar-light để thêm màu văn bản đen.
<nav class="navbar navbar-expand-sm bg-success navbar-dark justify-content-center"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Tin tức</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Thể thao</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Video clip</a> </li> </ul> </nav>
Trạng thái hoạt động (active) / bị vô hiệu hóa (disabled): Thêm lớp .active vào phần tử <a> để đánh dấu liên kết hiện tại hoặc lớp .disabled để cho biết rằng liên kết không thể nhấp được.
Biểu tượng (Logo) / thương hiệu (Brand)
Lớp .navbar-brand được sử dụng để làm nổi bật thương hiệu / logo / tên dự án trên trang của bạn:
Ví dụ:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>
Khi sử dụng lớp .navbar-brand trên hình ảnh, Bootstrap 4 sẽ tự động tạo kiểu hình ảnh cho vừa với thanh điều hướng theo chiều dọc.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand/logo --> <a class="navbar-brand" href="#"> <img src="https://media.hoc.tv/static/logo.png?t=5f284b314acf7" alt="logo" style="width:80px;"> </a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">PHP</a> </li> <li class="nav-item"> <a class="nav-link" href="#">HTML</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a> </li> </ul> </nav> <div class="container-fluid"> <h3>HocTV / Logo</h3> <p>Hoc TV chuyên trang học học nữa học mãi</p> </div>
Thu gọn thanh điều hướng (Collapsing The Navigation Bar)
Đây là việc làm rất thường xuyên, đặc biệt là trên màn hình nhỏ, bạn muốn ẩn các liên kết điều hướng và thay thế chúng bằng một nút sẽ hiển thị chúng khi nhấp vào.
Để tạo thanh điều hướng có thể thu gọn trong Bootstrap 4, hãy sử dụng nút có class = "navbar-toggler", data-toggle = "collapse" và data-target = "# thetarget". Sau đó, bọc nội dung thanh điều hướng (liên kết, v.v.) bên trong phần tử div với class="collapse navbar-collapse", theo sau là id khớp với mục tiêu dữ liệu của nút: "thetarget".
Ví dụ :
<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">CSS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Bootstrap 3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Bootstrap 4</a> </li> </ul> </div> </nav>
Navbar với menu xổ xuống Dropdown
Navbars cũng có thể chứa các menu xổ xuống dropdown.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">HTML</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Bootstrap </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Bootstrap 3</a> <a class="dropdown-item" href="#">Bootstrap 4</a> </div> </li> </ul> </nav>
Navbar Forms và Buttons
Trong Bootstrap 4 chúng ta có thể chèn Form và các nút nhấn vào thanh Navbar bằng cách sử dụng phần tử <form> với lớp class="form-inline"
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav>
Bạn cũng có thể sử dụng các lớp đầu vào khác, chẳng hạn như .input-group-prepend hoặc .input-group-append để đính kèm biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập. Bạn sẽ tìm hiểu thêm về các lớp này trong chương Bootstrap Inputs.
Ví dụ:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav>
Văn bản trên thanh điều hướng (Navbar Text)
Sử dụng lớp .navbar-text để căn chỉnh theo chiều dọc bất kỳ phần tử nào bên trong thanh điều hướng không phải là liên kết (đảm bảo đệm và màu văn bản phù hợp).
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">HTML</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text" style="color:magenta;"> Văn bản trên thanh điều hướng </span> </nav>
Thanh điều hướng cố định (Fixed Navigation Bar)
Thanh điều hướng cũng có thể được cố định ở đầu hoặc cuối trang.
Thanh điều hướng cố định vẫn hiển thị ở vị trí cố định (trên cùng hoặc dưới cùng) độc lập với cuộn trang.
- Lớp .fixed-top làm cho thanh điều hướng được cố định ở trên cùng:
- Sử dụng lớp .fixed-bottom để làm cho thanh điều hướng nằm ở cuối trang.
- Sử dụng lớp .sticky-top để làm cho thanh điều hướng cố định / ở trên đầu trang khi bạn cuộn qua nó. Lưu ý: Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là vị trí: tương đối).
Ví dụ:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">HTML</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CSS</a> </li> </ul> </nav> <div class="container"> Ta thường nghe: Kỷ Tín đem mình chết thay, cứu thoát cho Cao Đế; Do Vu chìa lưng chịu giáo, che chở cho Chiêu Vương; Dự Nhượng nuốt than, báo thù cho chủ; Thân Khoái chặt tay để cứu nạn cho nước. Kính Đức một chàng tuổi trẻ, thân phò Thái Tông thoát khỏi vòng vây Thái Sung; Cảo Khanh một bầy tôi xa, miệng mắng Lộc Sơn, không theo mưu kế nghịch tặc. Từ xưa các bậc trung thần nghĩa sĩ, bỏ mình vì nước, đời nào chẳng có? Ví thử mấy người đó cứ khư khư theo thói nhi nữ thường tình thì cũng đến chết hoài ở xó cửa, sao có thể lưu danh sử sách cùng trời đất muôn đời bất hủ được? Các ngươi vốn dòng võ tướng, không hiểu văn nghĩa, nghe những chuyện ấy nửa tin nửa ngờ. Thôi việc đời trước hẵng tạm không bàn. Nay ta lấy chuyện Tống, Nguyên mà nói: Vương Công Kiên là người thế nào? Nguyễn Văn Lập, tỳ tướng của ông lại là người thế nào? Vậy mà đem thành Điếu Ngư nhỏ tày cái đấu đương đầu với quân Mông Kha đường đường trăm vạn, khiến cho sinh linh nhà Tống đến nay còn đội ơn sâu! Cốt Đãi Ngột Lang là người thế nào? Xích Tu Tư tỳ tướng của ông lại là người thế nào? Vậy mà xông vào chốn lam chướng xa xôi muôn dặm đánh quỵ quân Nam Chiếu trong khoảng vài tuần, khiến cho quân trưởng người Thát đến nay còn lưu tiếng tốt! <p> <span style="color:magenta">Cuối trang!</span></p> </div>
Lời kết:
Thông qua các ví dụ trên đây chúng mình hi vọng các bạn đã nắm rõ được cách sử dụng thanh điều hướng trong Boostrap 4. Nếu có khó khăn hay chỗ nào chưa nắm rõ các bạn hãy comment bên dưới nhé. Cảm ơn các bạn đã theo dõi.
