Bootstrap 组件:导航组件的使用

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

Bootstrap 中的导航组件都依赖同一个.nav类,状态类也是共用的。改变修饰类可以改变样式。

注意:

1. 在标签页上使用导航需要依赖 JavaScript 标签页插件
2. 确保导航组件的可访问性

如果你在使用导航组件实现导航条功能,必须在<ul>的最外侧的逻辑父元素上添加role="navigation"属性,或者用一个<nav>元素包裹整个导航组件。

标签页

基本的导航元素:标签导航。基于ul、li而来,给ul添加 class\="nav nav-tabs" 即可。选中的li添加 class ="active"即可。注意.nav-tabs类依赖.nav基类。

<ul class="nav nav-tabs">
        <li role="presentation" class="active"><a>Home</a></li>
        <li role="presentation"><a>Messages</a></li>
        <li role="presentation"><a>company</a></li>
        <li role="presentation"><a>Profile</a></li>
</ul>

1.png


胶囊式标签页

用 class .nav-pills 代替 .nav-tabs 就可应用胶囊样式

<ul class="nav nav-pills">
        <li role="presentation" class="active"><a>Home</a></li>
        <li role="presentation"><a>Messages</a></li>
        <li role="presentation"><a>company</a></li>
        <li role="presentation"><a>Profile</a></li>
</ul>

2.png

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加.nav-stacked类,其效果如下:

3.png

面包屑导航

使用类.breadcrumb在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的:beforecontent属性添加了。

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">消息列表</a></li>
    <li class="active">消息详情</li>
</ol>

12.png


禁用的链接

给导航选项元素添加 class\="disabled" 就可禁用链接,从而实现 链接为灰色且没有鼠标悬停效果。

注意:

链接功能不受到影响,这个类只改变<a>的外观,不改变功能。可以自己写 JavaScript 禁用这里的链接。

<ul class="nav nav-pills">
        <li role="presentation" class="active"><a>Home</a></li>
        <li role="presentation" class="disabled"><a>Messages</a></li>
        <li role="presentation"><a>company</a></li>
        <li role="presentation"><a>Profile</a></li>
</ul>

4.png


添加下拉菜单

1. 带下拉菜单的标签页

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a>Home</a></li>
    <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              Messages
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
        </ul>
    </li>
    <li role="presentation"><a>company</a></li>
    <li role="presentation"><a>Profile</a></li>
</ul>

5.png

2. 带下拉菜单的胶囊式标签页

用 class .nav-pills 代替 .nav-tabs 就可应用胶囊样式。

6.png


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
64 0
|
前端开发 容器
|
前端开发 容器
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
5月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
48 1
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(九):折叠 & 导航
Bootstrap 5 保姆级教程(九):折叠 & 导航
N..
|
6月前
|
开发框架 前端开发 UED
bootstrap导航
bootstrap导航
N..
47 0
|
6月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
6月前
|
前端开发
bootstrap组件
bootstrap组件