bootstrap基础知识（四）－－导航条

导航条

导航条和导航一样也是独立的组件

1）基础导航条

使用方法：

1）先在ul的nav后添加类名“navbar－nav”

2）然后在外面添加一个容器（div）并添加类名“navbar－default”

2）加入导航标题

在容器中添加一个新的名为“nav－header”的容器并在其中添加名为“nav－brand”的a标签

代码如下：

　</div>

</ul>

</div>

二级导航栏

使用方法：

在li中添加dropdown，然后嵌套ul

如下代码：

<li><a href="##">JavaScript</a></li>

</ul>

</li>

3）带搜索条表单

在装有navbar的div中添加一个类名为navbar－form的表单

同样提供navbar－left以及navbar－right类名放在navbar－form后表示左对齐或者右对齐

4）导航栏按钮，文本，普通链接

添加类名

按钮：navbar－btn

文本：navbar－text

普通链接：navbar－link

　</div>

<a href="##" class="navbar-text">Navbar Text</a>

</div>

</div>（鼠标悬浮时带有下划线）

　</div>

<li><a href="##" class="navbar-text">Navbar Text</a></li>

</ul>

</div>（纯文本不带下划线）

5）固定导航条

在设定容器时，在nav nav－default后添加类名

navbar－fixed－top（固定在浏览器顶端）

navbar－fixed－bottom（固定在浏览器底部）

存在问题：页面主内容顶部或底部都被固定导航条遮住

解决法一：

body {

padding-top: 70px;/*有顶部固定导航条时设置*/

padding-bottom: 70px;/*有底部固定导航条时设置*/

}

因为默认固定导航条高度为50px

解决法二：

把固定导航条放在所有内容前面

　…

</div>

　…

</div>

＊＊ 6）响应式导航条

适应屏幕大小的导航栏

使用方法：

1.在窄频时，需要折叠的内容被装在一个div中并且为这个div添加两个类名：collapse以及nav－collapse两个类名，然后为这个div添加一个class类名或者id

2.保证在窄屏时要显示的图标样式（固定写法）：

<span class="sr-only">Toggle Navigation</span>

</button>

3.为button添加data－target＝“.类名／ID名”（由需要折叠的div来决定）

需要折叠的div：

…

</ul>

</div>

窄频时显示图标：

...

</button>

或者：

需要折叠的div：

…

</ul>

</div>

窄频时，显示图标

...

</button>

完整代码：

<span class="sr-only">Toggle Navigation</span>

</button>

</div>

</ul>

</div>

7）反色导航条

将nav-default改成nav-inverse

只改变背景颜色以及文本

8）分页导航

带页码的导航

使用方法：

使用ul>li>a的结构

并在ul标签添加类名“pagination”

同样，可以在pagination后添加类名：pagination-lg（变大）或者pagination－sm（变小）

7）翻页导航

使用方法：

在ul中添加类名“pager”

注意：默认是居中

如果需要一个左边一个右边

就在相应的li中添加类名“previous”或者“next”

如下代码：

</ul>

8）标签

添加标签告诉用户额外信息如：new

bootstrap特意将这类标签效果提取出来成为一个标签组件使用lable来显示高亮

使用方法：

可以在span中添加类名lable以及样式lable－default

代码如下：

<h3>Example heading <span class="label label-default”>New</span></h3>

同样提供多种颜色：

label-default:默认，深灰色

label-primary:主要标签，深蓝色

lable-success:成功标签，绿色

label-info:信息标签，浅蓝色

label-warning:警告标签，橙色

label-danger:错误标签，红色

9)徽章

使用方法：在span中添加类名“badge”

可以在其后添加“pill－right”类名，使其悬浮在右侧

bootstrap基础知识（四）－－导航条

猜你喜欢