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

PS: Nếu bạn nào muốn thưởng thức các loại hải sản tươi ngon hết ý cùng giá cả phải chăng, được đánh bắt từ vùng biển Cô Tô, Quan Lạn, Vân Đồn - Quảng Ninh, vui lòng liên hệ với mình nhé. Cảm ơn các bạn đã ủng hộ!

 

                                                HẢI SẢN VÂN ĐỒN 399

                             Chuyên bán buôn, bán lẻ hải sản tươi sống, hải sản khô, hải sản 1 nắng

                                   (Ốc móng tay Cô Tô, Sá sùng Quan Lạn, Mực tươi Cô Tô,...)

                         - Cơ sở 1: Số nhà 399, Lý Anh Tông, Thị trấn Cái Rồng, Vân Đồn, Quảng Ninh
                         - Cơ sở 2: Ngõ 184, Hoàng Quốc Việt, Cầu Giấy, Hà Nội
                         - ĐT: 0985.286.522
                         - Website: http://vandon.com.vn/haisan
                         - Email: [email protected]

                  
                  

 


Ngôn ngữ

TÌM KIẾM

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