Home >Web Front-end >JS Tutorial >How to use bootstrap responsive navigation bar template

How to use bootstrap responsive navigation bar template

php中世界最好的语言Original: 2018-04-14 15:56:051703browse

This time I will bring you bootstrapHow to use the responsive navigation bar template, what are the precautions when using the bootstrap responsive navigation bar template, the following is the actual combat Let’s take a look at the case.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  <!-- 设置距离顶部的距离，固定定位会挡住内容区 -->
  <style type="text/css">
    body{
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <p class="navbar navbar-inverse navbar-fixed-top" id="menu-nav">
    <p class="container">
      <p class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <!-- sr-only仅阅读器能见实际不会呈现在页面上 -->
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">浏览器</a>
      </p>
      <p class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#ad-carousel">综述</a></li>
          <li><a href="#summary-container">简述</a></li>
          <!-- 下拉菜单 -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <!-- href="#feature-tab"绑定详情页ID可定位 data-tab可以使用TAB切换选项 -->
              <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>
              <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>
              <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>
              <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>
              <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>
            </ul>
          </li>
          <li>
            <a href="#" data-toggle="modal" data-target="#about-modal">关于</a>
          </li>
        </ul>
      </p>
    </p>
  </p>
  <!-- 弹出框 放在body下保证层级最高-->
  <p class="modal fade" id="about-modal">
    <p class="modal-dialog">
      <p class="modal-content">
        <p class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title" id="myModalLabel">标题</h4>
        </p>
        <p class="modal-body">文本</p>
        <p class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">提交</button>
        </p>
      </p>
    </p>
  </p>
  <h1 class="text-center">你好</h1>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use bootstrap responsive navigation bar template

Related articles