Cấp bậc tác giả:

HTML

Responsive Navigation Menu sử dụng Twitter Bootstrap 3.0

Được viết bởi QuangIT ngày 03/09/2014 lúc 09:44 AM
Trong các phiên bản tiếp theo của Bootstrap, có rất ít thay đổi trong các lớp Menu điều hướng css.
  • 0
  • 16370
Tải tệp tin: Click ở đây

Responsive Navigation Menu sử dụng Twitter Bootstrap 3.0

ImageProxy.jpg

Hướng dẫn này giải thích làm thế nào để tạo ra menu Twitter Bootstrap 3.2.0 

1. Tải về Bootstrap 3.2.0. Tải về phiên bản mới nhất của jquery.
2. Giải nén tập tin tải về và tạo ra file html mới trong cùng thư mục.

ImageProxy2.png

Tôi đã đặt thư viện jquery trong thư mục js. 

3. Sao chép và dán mã dưới đây trong file html.

<!DOCTYPE html>
<!-- saved from url=(0040)http://getbootstrap.com/examples/navbar/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Navigation Menu using Twitter Bootstrap 3">
    <meta name="author" content="Priyadarshini">
    

    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <!-- Static navbar -->
      <div class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-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="navbar-collapse collapse" style="height: 1px;">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="">Pricing</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Latest Products</a></li>
                <li><a href="#">Popular Products</a></li>
                </ul>
              </li>          
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Personal Membership</a></li>
                  <li><a href="#">Premium Membership</a></li>
                </ul>
              </li>
              <li><a href="#">Offers</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script> 

</body></html>

Trong các phiên bản trước, để đạt đáp ứng thiết kế web chúng ta phải sử dụng tập boostrap.responsive.css. Nhưng bây giờ chỉ cần một tập tin css duy nhất (bootstrap.min.css). 

Mở tập tin html trong trình duyệt bất kỳ và thay đổi kích thước để xem cách hiển thị menu điều hướng cho các kích cỡ màn hình khác nhau.

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML