Bootstrap导航条

Bootstrap导航条

---

基础导航条

1.新建一个web项目ch15，复制ch14相关的css、js等文件的内容。

2.基础导航用法实例

<h1>基础导航</h1>

<nav class="navbar navbar-default">

//导航条默认是圆角并带有背景

<div class="navbar-header">

<a href="#" class="navbar-brand">导航</a>

//加一个导航条样式"navbar-brand"，比较醒目。

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

</nav>

3.运行效果

---

导航条中的表单

1.导航中添加表单的实例

<h1>导航 中加表单</h1>

<nav class="navbar navbar-default">

<div class="navbar-header">

<a href="#" class="navbar-brand">导航</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

<form class="navbar-form navbar-right" style="margin-right: 20px;">

//定义一个样式"navbar-form "，此时文本框和文本水平排列。

//"navbar-right"表单在导航的右边

<div class="form-group">

<input type="text"  class="form-control"/>

//对于这个文本框，我们可以加上"form-control"，此时文本框变成圆角形式。

</div>

<button type="button" class="btn btn-danger">搜索</button>

//给按钮一个样式"btn btn-danger",此时搜索按钮变成红色。

</form>

</nav>

2.运行效果

---

导航条中的文本、链接、按钮

1.导航中出现文本、链接、按钮实例

<h1>导航 中加文本、链接、按钮</h1>

<nav class="navbar navbar-default">

<div class="navbar-header">

<a href="#" class="navbar-brand">导航</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

<p class="navbar-text">文本</p>

<a href="#" class="navbar-link">链接</a>

<button type="button" class="btn btn-default navbar-btn">按钮</button>

</nav>

2.运行效果

---

顶部固定和底部固定

1.顶部固定的导航条实例

在body中设置

<h1>顶部固定</h1>

<nav class="navbar navbar-default navbar-fixed-top">

//顶部固定只需要在<nav>标签里加一个“navbar-fixed-top”属性设置

<div class="navbar-header">

<a href="#" class="navbar-brand">导航</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

<p class="navbar-text">文本</p>

<a href="#" class="navbar-link">链接</a>

<button type="button" class="btn btn-default navbar-btn">按钮</button>

</nav>

2.运行效果

这是之前的运行效果

刷新一下，顶部固定的这个导航跑到最顶部了，并且它把我们的基础导航给覆盖掉了。所以，一旦设了navbar-fixed-top顶部固定，它的导航条就会跑到顶部覆盖原来顶部的东西。

因此，我们可以在头文件中设置

<style type="text/css">

body{ padding-top: 70px;}

//默认导航条系统设置的是50像素，我们给它设置为70像素，

</style>

运行效果：

---

.navbar-static-top

1.设置全屏方角导航

<h1>合屏方角导航</h1>

<nav class="navbar navbar-default navbar-static-top">

//导航条默认是圆角，navbar-static-top设置全屏方角导航

<div class="navbar-header">

<a href="#" class="navbar-brand">导航</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

</nav>

2.运行效果