Hướng dẫn tạo Menu Responsive sử dụng HTML5 + Bootstrap

Bạn muốn lập trình một website có thể hiển thị tốt trên tất cả các thiết bị bằng HTML5? Bootstrap có thể giúp bạn tạo ra một Website Responsive bằng cách sử dụng thư viện CSS và JS của nó, thay vì bạn phải tự viết. Bài viết này mình sẽ hướng dẫn bạn cách tạo môt Menu Responsive sử dụng HTML5 và Bootstrap.

 

 

Để thực hành theo những hướng dẫn được cung cấp trong bài viết này, bạn cần tạo 1 tệp tin index.html chuẩn ( Bạn có thể tải về các tệp tin thực hành tại đây ):

Tệp tin index.html có bố cục cơ bản như trong hình:

Để có thể sử dụng thư viện CSS của Bootstrap, bạn cần khai báo trong thẻ <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Để có thể sử dụng các thư viện JS của Bootstrap, bạn cần khai báo trong thẻ <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Chú ý: Bạn cần khai báo sử dụng thư viện Jquery trước thư viện JS của Bootstrap

Tiếp đó, bạn cần khai báo trong thẻ <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nếu bạn không khai báo thẻ Viewport trên, trang web của bạn có thể sẽ hiển thị như hình dưới:


Khi đó, nội dung trên trang web của bạn sẽ nhỏ và khó đọc hơn khi sử dụng thẻ Viewport:

 Sau khi thêm các dòng mã vào tệp tin index.html, bạn sẽ có:

Tiếp tục, trong phần thẻ <body>, bạn sẽ thêm vào đoạn mã:

<header>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="container">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">

          <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="collapse navbar-collapse" id="collapse">

        <ul class="nav navbar-nav navbar-right">

           <li class="active"><a href="#">Home</a></li>

           <li><a href="#">For Beginners</a></li>

           <li><a href="#">Tutorials</a></li>

           <li><a href="#">Themes</a></li>

           <li><a href="#">Plugins</a></li>

        </ul>

      </div>

    </div>

  </nav>

</header>

Trong đó:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">

    <span class="sr-only">Toggle navigation</span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

</button>

 Đoạn mã trên sẽ giúp bạn hiển thị nút lựa chọn các mục trong Menu trên màn hình điện thoại và máy tính bảng, thay vì hiển thị hết tất cả các mục trên PC:

 Và đoạn mã:

<div class="collapse navbar-collapse" id="collapse">

    <ul class="nav navbar-nav navbar-right">

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">For Beginners</a></li>

        <li><a href="#">Tutorials</a></li>

        <li><a href="#">Themes</a></li>

        <li><a href="#">Plugins</a></li>

    </ul>

</div>

Hiển thị các mục trong Menu bao gồm: Home, For Beginners, Tutorials, Themes, và Plugins.

Và đây là toàn bộ mã HTML trong tệp tin index.html:

Khi đó, trang index.html sẽ hiển thị Menu Responsive như hình dưới đây với phiên bản Web và phiên bản Mobile ( Bạn có thể kiểm tra tính năng Responsive bằng cách thu nhỏ cửa sổ trình duyệt Web lại ):

Qua bài viết này, bạn đã có thể tạo được Menu Responsive. Bài viêt kế tiếp sẽ hướng dẫn bạn cách tùy chỉnh Menu theo ý bạn. 

 

Save


Ngôn ngữ

Theo dõi Youtube

 

TÌM KIẾM

Sắm Tết trên Lazada

Hải sản Vân Đồn

 

Chào mừng bạn đến với chuyên mục

giới thiệu và cung cấp các mặt hàng

hải sản của Vân Đồn. Hải sản Vân Đồn

- Quảng Ninh | Tươi ngon, bổ dưỡng

và đảm bảo với giá cả phải chăng.

» Xem trang....