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
- php中世界最好的语言original
- 2018-04-14 15:56:051575parcourir
Cette fois, je vais vous expliquer comment utiliser le modèle de barre de navigation réactive bootstrap Quelles sont les précautions pour utiliser le modèle de barre de navigation réactive bootstrap. combat réel Jetons un coup d'œil au cas.
<!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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment utiliser les fonctions anonymes JS
Explication détaillée de l'utilisation des événements v-on dans Vue.js
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!