Bootstrap导航

来源：互联网发布：西南大学网络教育平台编辑：程序博客网时间：2024/05/16 12:29

Bootstrap导航

选项卡导航.nav .nav-tabs

1.新建一个web项目ch14，把ch13中的这些css文件、js文件拷贝过来。

2.打开ch14中的demo01.html。

3.设置选项卡的导航

//首先给一个类选择器，注意nav和btn不一样，btn按钮会有固定的样式。

//而nav要给一个附加的样式，来告诉它是什么样的导航条效果。

//设置默认被激活的样式

//禁用掉这个超链接

</ul>

4.运行效果

胶囊式选项卡导航.nav .nav-pills

1.胶囊式选项卡导航实例

//胶囊式，当鼠标移上去的时候是有背景色的并且是带弧度的圆角。

</ul>

2.运行效果

堆叠式导航.nav .nav.pills .nav-stacked

1.堆叠式导航实例

<h1>胶囊式竖直</h1>

</ul>

2.运行效果

自适应导航.nav-justified

1.自适应导航实例

//实际上就是把三格<li>设成了table模式

//这四个导航按钮就占满我们的整个容器。

</ul>

2.运行效果

分隔符

1.分隔符实例

<h1>胶囊式竖直</h1>

//设置分隔符

</ul>

2.运行效果

禁用

禁用就是设置disable激活是active。例如：

二级导航

1.二级导航实例

//二级导航就是当鼠标移到这个导航按钮上会有下拉菜单弹出

//胶囊式

<li>

//在这个<li>上嵌套一个<ul>

//把这个“首页”作为下拉菜单的按钮来用，因此要增加这些样式。

//在这个<ul>上设置一个dropdown-menu下拉菜单的样式

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

//设置三个子菜单

</ul>

</li>

</ul>

</div>

2.运行效果

0 0