bootstrap练习笔记
1.关于导航栏 官网链接：http://v3.bootcss.com/components/#nav
结构大概是这样的：
nav标签标识导航栏
class为navbar 告诉BS这是一个导航条
navbar-default 标识引入默认的导航条样式
navbar-fixed-top 标识导航条在像下拉取页面的时候始终固定在顶端
Div.container标识导航栏要存放的内容
Div.navbar-header标识导航条的头部
Div.navbar-header>a.bavbar-brand标识链接品牌 一般在下面加一个img表示LOGO
ul.nav.navbar>li标识页面的导航条内容
Ul.navbar-right表示浮动在右边
ul.nav.navbar>li.active标识激活内容，也就是说在当前页添加背景
ul.nav.navbar>li>a标识导航连接
ul.nav.navbar>li>a>span.glyphicon glyphicon-XXX 表示引用官网提供的图标，用于放在链接前面
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand" style="padding: 0;">
<img src="img/logo.png" alt="网站LOGO">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span>
首页
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-list"></span>
资讯
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-file"></span>
案例
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-question-sign"></span>
关于
</a>
</li>
</ul>
</div>
</nav>
得到的结果如下
大屏：
小屏幕：
如果想要在小屏幕下将列表收缩起来，就要如下做：
1首先在div.navbar-header下添加一个按钮
Button.navbar-toggle表示按钮用于导航条切换显示或者隐藏
data-toggle=’collapse’标识切换的类型是 collapse
data-target=’#navbar-collapse’标识作用于制定的id
button原始按钮不好看，所以可以在其中增加好看的图标
例如：span.icon-bar
2既然按钮要作用于目标，所以要在导航条的div设置一个与之对应的id
class为 collapse navbar-collapse,并且用这个div将ul包裹起来
完整代码如下：
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand" style="padding: 0;">
<img src="img/logo.png" alt="网站LOGO">
</a>
<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>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top: 0">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home"></span>
首页
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-list"></span>
资讯
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-file"></span>
案例
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-question-sign"></span>
关于
</a>
</li>
</ul>
</div>
</div>
</nav>
结果显示如下:
大屏：
小屏幕：
点击右上方的按钮可以控制导航条的显示和隐藏