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..
67 0
|
9天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状,使界面更加美观。通过添加 `.nav-justified` 类,可以使导航项等宽对齐,适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航,而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。
|
10天前
Bootstrap5 导航2
导航对齐方式:使用 `.justify-content-center` 类可使导航居中显示,使用 `.justify-content-end` 类可使导航右对齐。垂直导航:使用 `.flex-column` 类可创建垂直导航。
|
10天前
Bootstrap5 导航1
Bootstrap5 导航简介:使用 .nav 类创建水平导航栏,.nav-item 类应用于每个列表项,.nav-link 类用于每个链接。示例代码展示了如何实现这一功能,包括禁用状态的链接。
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
5月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
85 1
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(九):折叠 & 导航
Bootstrap 5 保姆级教程(九):折叠 & 导航
下一篇
无影云桌面