Tự học Bootstrap - Cơ bản - bài 21 - Menu điều hướng - Lớp học Vi Tính - khóa học vi tính văn phòng

Các thanh điều hướng

01 thanh điều hướng là 01 thanh được gắn ở phần top của trang.

Với Bootstrap, 01 thanh điều hướng có thể thu phóng theo kích thước màn hình.

01 thanh điều hướng được tạo bởi lớp

<nav
class="navbar navbar-default">

Ví dụ sau thêm 01 thanh điều hướng vào phần top của trang web:

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
...

Ghi chú: tất cả ví dụ trong phần này sẽ tạo 01 thanh điều hướng có thể chiếm nhiều diện tích đối với màn hình nhỏ (tuy vậy, thanh điều hướng sẽ nằm trên 01 đường thẳng đối với màn hình lớn – bởi vì Bootstrap có tính tương thích). Vấn đề mà hình nhỏ sẽ được giải quyết trong ví dụ cuối của bài này.

Inverted Navigation Bar

Nếu bạn không thích kiểu thanh menu điều hướng truyền thống , Bootstrap cung cấp 01 thanh điều hướng màu đen:

Chỉ thay đổi lớp

.navbar-default

thành lớp .navbar-inverse

Thanh điều hướng với menu Dropdown

Thanh điều hướng cũng có thể chứa menu dropdown.

Ví dụ sau thêm 01 menu dropdown cho nút "Page 1"

Ví dụ:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Right-Aligned Navigation Bar

Lớp .navbar-right được dùng canh lề phải cho nút trên thanh điều hướng.

Trong ví dụ sau chúng ta thêm 01 nút "Sign Up" và "Login" vào lề phải của menu điều hướng. Chúng ta cũng thêm 01 biểu tượng glyphicon trên 02 nút này.

Ví dụ:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

Nút trên menu điều hướng

Để thêm nút trên menu điều hướng , thêm lớp .navbar-btn trên 01 nút Bootstrap.

Ví dụ:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>

Form trên menu điều hướng

Để thêm 01 thành phần form trên thanh điều hướng, thêm lớp .navbar-form vào 01 phần tử form và thêm 01 input(s). Chú ý rằng chúng ta thêm 01 lớp

.form-group

vào thẻ div chứa thẻ input. Điều này sẽ thêm phần thụt lề nếu bạn chèn nhiều hơn 01 inputs (bạn sẽ học thêm về phần này trong bài Biểu Mẫu Forms).

Ví dụ:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>

Bạn cũng có thể dùng lớp

.input-group

và

.input-group-addon

để đính kèm 01 biểu tượng hoặc dòng chữ help kế bên vùng nhập liệu. Bạn sẽ học thêm về phần này trong bài Bootstrap Inputs.

Navbar Text

Dùng lớp

.navbar-text

để canh giữa theo chiều dọc bất kỳ phần tử nào bên trong menu điều hướng mà không phải là siêu liên kết (đảm bảo sẽ được thêm vào lùi dòng và màu sắc phù hợp).

Ví dụ:

Cố định thanh menu điều hướng

Menu điều hướng cũng có thể đặt cố định ở đỉnh hoặc đáy của trang web.

01 thanh menu điều hướng được đặt cố định sẽ không bị ảnh hưởng khi bạn cuộn trang web.

Lớp

.navbar-fixed-top

làm cho menu điều hướng đặt ở đỉnh trang web.

Ví dụ:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Lớp

.navbar-fixed-bottom

đặt thanh menu điều hướng ở đáy trang web.

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Thu phóng thanh menu điều hướng

Đối với màn hình nhỏ thanh điều hướng chiếm qua nhiều diện tích.

Vì thể chúng ta nên ẩn menu điều hướng và chỉ hiển thị khi cần.

Trong ví dụ sau menu điều hướng được thay bằng 01 nút 03 sọc ở góc phải. Chỉ khi ta bấm vào thanh menu điều hướng mới hiện ra:

Ví dụ:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48

NTM Solutions

Lớp học Vi Tính

Chủ Nhật, 2 tháng 4, 2017