-------
Phần 40. Nav,
Navbar trong Bootstrap
Đây là clip số 19: Nav - Navigation - menu
Nav giúp tạo menu đẹp hơn, dễ hơn và nhanh hơn.
Ví dụ, class=“nav nav-tabs”.
<div
class="container">
<div
class="row">
<div
class="col-md-12">
<ul
class="nav nav-tabs">
<li><a
href="">Item1</a></li>
<li
class="active"><a
href="">Item2</a></li>
<li><a
href="">Item3</a></li>
</ul>
</div>
</div>
</div>
Ví dụ, class=“nav nav-pills”
<div
class="container">
<div
class="row">
<div
class="col-md-12">
<ul
class="nav nav-pills">
<li><a
href="">Item1</a></li>
<li
class="active"><a
href="">Item2</a></li>
<li><a
href="">Item3</a></li>
</ul>
</div>
</div>
</div>
Ví dụ, menu dọc: class = “nav nav-tabs nav-stacked”. Để làm
nổi bật phần nội dung: class=“well”.
<div
class="container">
<div class="row">
<div
class="col-md-3">
<ul
class="nav nav-pills nav-stacked">
<li
class="active"><a
href="">Item1</a></li>
<li><a
href="">Item2</a></li>
<li><a
href="">Item3</a></li>
</ul>
</div>
<div
class="col-md-9">
<p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Velit ex sunt, alias ea
excepturi repellendus voluptatum nihil praesentium porro temporibus ad, ab quos
autem magnam eum optio possimus dolore incidunt natus aliquid atque dolorem
repellat pariatur ut ullam. Deleniti assumenda, exercitationem architecto sed
ut perferendis, non expedita obcaecati. Doloribus, nam.</p>
</div>
</div>
</div>
Đây là clip số 20: Navbar – thanh menu
Nav để tạo menu, navbar để tạo thanh menu.
Sử dụng thẻ nav của HTML5 kết hợp với các class của
Bootstrap để tạo navbar.
Thanh menu màu xám: <nav class="navbar
navbar-default"></nav>
Thanh menu màu đen: <nav class="navbar
navbar-inverse"></nav>
Để căn giữa một phần tử, đưa phần tử đó vào trong <div
class=“container”>
Trong Sublime Text, sử dụng phím tắt “ctrl+shift+D” để
copy/paste một dòng.
Thanh menu gồm hai phần: navbar-header và navbar-collapse, mục
đích là để khi thu nhỏ màn hình thì phần navbar-header được giữ nguyên, còn
phần navbar-collapse thì bị thu lại (ẩn đi), ví dụ:
<div id="header">
<div
class="container">
<nav
class="navbar navbar-inverse">
<div
class="navbar-header">
<a
href="#" class="navbar-brand">Cong ty ABC</a>
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse
collapse" id="main-menu">
<ul
class="nav navbar-nav navbar-right">
<li
class="active"><a
href="#">Content</a></li>
<li><a
href="#">Contact</a></li>
<li><a
href="#">About</a></li>
</ul>
</div>
</nav>
</div>
</div>
Để căn phải menu, dùng class=“navbar-right”
Để ẩn đi menu khi màn hình bị thu nhỏ, dùng
class=“collapse”.
Để thêm nút bấm, khi người dùng bấm vào nút này sẽ hiển thị
menu trong phần navbar-header, sử dụng đoạn mã sau:
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
Đọc thêm về class=“sr-only” tại đây: http://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3
Theo đó, sr là viết tắt của screen reader là trình đọc màn
hình. Vậy, đoạn mã <span class="sr-only">Toggle
navigation</span> để hỗ trợ cho trình đọc màn hình, nội dung của nó sẽ
không được hiển thị khi xem ở chế độ bình thường.
Đây là clip số 21: Navbar – thanh menu (tiếp theo)
Ba kiểu navbar:
- Navbar có độ rộng chiếm hết màn hình, di chuyển cùng với
phần nội dung
- Navbar có độ rộng chiếm hết màn hình, luôn cố định ở phía
trên khi di chuyển phần nội dung
- Navbar có độ rộng chiếm hết màn hình, luôn cố định ở phía dưới
khi di chuyển phần nội dung
Nếu không bao navbar bằng container, navbar sẽ có độ rộng
đúng bằng cửa sổ trình duyệt.
Sử dụng class=“navbar-static-top” để bỏ đi phần bo tròn hai
đầu của thanh menu.
Ví dụ, navbar có độ rộng chiếm hết màn hình, di chuyển cùng
với phần nội dung
<body style="min-height: 1000px">
<div
id="header">
<nav
class="navbar navbar-inverse navbar-static-top">
<div
class="navbar-header">
<a
href="#" class="navbar-brand">Cong ty ABC</a>
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
</div>
<div
class="navbar-collapse collapse" id="main-menu">
<ul
class="nav navbar-nav navbar-right">
<li
class="active"><a
href="#">Content</a></li>
<li><a
href="#">Contact</a></li>
<li><a
href="#">About</a></li>
</ul>
</div>
</nav>
</div>
Bao phần nội dung bên trong của navbar bằng container để
thực hiện căn giữa phần nội dung.
Sử dụng class=“navbar-fixed-top” để bỏ đi phần bo tròn hai
đầu của thanh menu, đồng thời cố định thanh menu luôn ở trên đầu trang. Tuy
nhiên, khi đó menu cũng sẽ che mất một phần nội dung của trang web. Vì vậy cần
phải thiết lập padding-top cho phần nội dung (padding-top cho thẻ body).
Ví dụ,
<body style="min-height: 1000px; padding-top:
60px">
<div
id="header">
<nav
class="navbar navbar-inverse navbar-fixed-top">
<div
class="container">
<div
class="navbar-header">
<a
href="#" class="navbar-brand">Cong ty ABC</a>
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
</div>
<div
class="navbar-collapse collapse" id="main-menu">
<ul
class="nav navbar-nav navbar-right">
<li
class="active"><a
href="#">Content</a></li>
<li><a
href="#">Contact</a></li>
<li><a
href="#">About</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<p>Lorem ipsum
dolor sit amet, </p>
<p>consectetur adipisicing
elit. </p>
<p>Dicta
dignissimos hic ex. Obcaecati magnam quae rerum nemo, sint sequi! Nostrum,
architecto culpa cumque quaerat? Laborum debitis dolores molestiae distinctio
sit!
Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Dicta dignissimos hic ex. Obcaecati magnam
quae rerum nemo, sint sequi! Nostrum, architecto culpa cumque quaerat? Laborum
debitis dolores molestiae distinctio sit!
</p>
</div>
Sử dụng class=“navbar-fixed-bottom” để bỏ đi phần bo tròn
hai đầu của thanh menu, đồng thời cố định thanh menu luôn ở phía cuối trang.
Đoạn mã sau sẽ chèn một form vào navbar:
<body style="min-height: 1000px; padding-top:
60px">
<div
id="header">
<nav
class="navbar navbar-inverse navbar-fixed-top">
<div
class="container">
<div
class="navbar-header">
<a
href="#" class="navbar-brand">Cong ty ABC</a>
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
</div>
<div
class="navbar-collapse collapse" id="main-menu">
<ul class="nav
navbar-nav">
<li
class="active"><a
href="#">Content</a></li>
<li><a
href="#">Contact</a></li>
<li><a
href="#">About</a></li>
</ul>
<div
class="navbar-form navbar-right">
<div
class="form-group">
<input
type="text" class="form-control"
placeholder="Email">
<button
type="submit" class="btn
btn-primary">Signup</button>
</div>
</div>
</div>
</div>
</nav>
</div>
Có thể thay <form> và <button> bằng thẻ
<a>:
<body style="min-height: 1000px; padding-top:
60px">
<div
id="header">
<nav
class="navbar navbar-inverse navbar-fixed-top">
<div
class="container">
<div
class="navbar-header">
<a
href="#" class="navbar-brand">Cong ty ABC</a>
<button
type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#main-menu">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div
class="navbar-collapse collapse" id="main-menu">
<ul
class="nav navbar-nav">
<li
class="active"><a
href="#">Content</a></li>
<li><a
href="#">Contact</a></li>
<li><a
href="#">About</a></li>
</ul>
<div
class="navbar-right">
<a
href="#" class="btn btn-primary
navbar-btn">Signup</a>
<a
href="#" class="btn btn-default
navbar-btn">Login</a>
</div>
</div>
</div>
</nav>
</div>
Sử dụng class=“navbar-btn” để căn đều trên-dưới cho một nút
trong navbar. Ví dụ: <a href="" class="btn btn-primary
navbar-btn">Signup</a>
Giảm tầm quan trọng của Login so với Signup. Ví dụ: <a
href="" class="btn btn-default
navbar-btn">Login</a>
Đây là clip số 22: giới thiệu một số component khác
Vào đây để đọc và học cách sử dụng các component: http://getbootstrap.com/components/
Thử trải nghiệm một website mẫu, để có thêm động lực học
tiếp những kĩ thuật và công nghệ mới.
-----------
Cập nhật [12/10/2017][19/10/2016]
-----------