计算机教程

当前位置:3522.com > 计算机教程 > 升级后的bootstrap3的navbar-brand、navbar-collapse、nav

升级后的bootstrap3的navbar-brand、navbar-collapse、nav

来源:http://www.4sports-uk.com 作者:3522.com 时间:2019-06-22 18:57

navbar-brandnavbar-collapsenavbar-togglenavbar-headerbootstrap3

1.引入js插件和bootstrap.min.js,bootrap.min.cs文件

1、升级后的bootstrap 3.0.2版本的

2.实现代码如下:

这次试验的是navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text、navbar-btn

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand logo"><img src="img/logo.png" alt="aaaaa"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
3522.com,</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
<li><a href="information.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
<li><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
<li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>

除了navbar-text、navbar-header新增的剩下的都是改名称的,

相对应的修改的名称:

.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn

本文由3522.com发布于计算机教程,转载请注明出处:升级后的bootstrap3的navbar-brand、navbar-collapse、nav

关键词: 3522.com

上一篇:快速了解Python中的装饰器,Python装饰器

下一篇:没有了