recherche

Maison  >  Article  >  interface Web  >  Comment utiliser le modèle de barre de navigation réactive bootstrap

Comment utiliser le modèle de barre de navigation réactive bootstrap

小云云
小云云original
2018-01-18 13:18:101724parcourir

Cet article présente principalement en détail l'utilisation du modèle de barre de navigation réactive bootstrap, y compris les menus déroulants et les effets de boîtes contextuelles. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde. 


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

Recommandations associées :

Comment utiliser js+css3 pour créer un exemple de code de barre de navigation réactif, explication détaillée

Implémentation CSS3+Js de la méthode de barre de navigation réactive

Exemple de barre de navigation réactive BootStrap introduction_javascript skills

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：v-on dans le composant Vue.js lie des événements personnalisésArticle suivant：v-on dans le composant Vue.js lie des événements personnalisés

Articles Liés

Voir plus