So verwenden Sie die Bootstrap-Responsive-Navigationsleistenvorlage-js-Tutorial-php.cn

So verwenden Sie die Bootstrap-Responsive-Navigationsleistenvorlage

php中世界最好的语言

Freigeben： 2018-04-14 15:56:05

Original

1725 Leute haben es durchsucht

Dieses Mal erkläre ich Ihnen, wie Sie die Vorlage für die responsive Navigationsleiste Bootstrap verwenden Tatsächlicher Kampf Werfen wir einen Blick auf den Fall.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

<!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>

Nach dem Login kopieren

Empfohlene Lektüre:

So verwenden Sie anonyme JS-Funktionen

Detaillierte Erläuterung der Verwendung von V-On-Ereignissen in Vue.js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Bootstrap-Responsive-Navigationsleistenvorlage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!