Bootstrap 组件之 Nav
一、简介
Nav 指导航页。这里 是一个线上例子。
使用了 .nav
的标签就是一个 Nav。下面举例。
{注意} 记住,下面的几种导航页都依赖
.nav
。
二、导航页
添加 .nav-tabs
。
<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages</a></li>
</ul>
三、胶囊式导航页
将 .nav-tabs
换为 nav-pills
。
<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages</a></li>
</ul>
四、堆叠胶囊式导航页
添加 .nav-stacked
.
<ul class="nav nav-pills nav-stacked"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a href="#">Messages</a></li>
</ul>
五、禁用的链接
在 <li>
上添加 .disabled
。
{注意}
.disabled
只改变<a>
的外观,不改变功能——链接依然有效。
六、带下拉菜单的导航页
<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li><li role="presentation"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" 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><li role="separator" class="divider"></li><li><a href="#">4</a></li></ul></li>
</ul>
实现下拉菜单必需的两个标签属性:
- 在
<a>
上,添加data-toggle="dropdown"
。 - 在
<ul>
上,添加class="dropdown-menu"
。
七、参考链接
http://getbootstrap.com/components/#nav
(完)
转载于:https://www.cnblogs.com/zhangbao/p/6559036.html
Bootstrap 组件之 Nav相关推荐
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
阅读目录 七.多值输入组件manifest 1.效果展示 2.源码说明 3.代码示例 八.文本框搜索组件bootstrap-typeahead 1.效果展示 2.源码说明 3.代码示例 九.boots ...
- Bootstrap组件福利篇:十二款好用的组件推荐
阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...
- Bootstrap 组件
2.Bootstrap 组件 Bootstrap组件是Bootstrap框架的核心之一.可以利用Bootstrap组件构建出绚丽的页面 常用的组件:Icon图标(Glyphicon).下拉菜单(Dro ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
- BootStrap 组件和样式
BootStrap 简介 概念: 课程目标: 响应式布局技术 了解BootStrap前端框架 二.BootStrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优 ...
- Bootstrap组件_导航
标签页注意 .nav-tabs 类依赖 .nav 基类.<!DOCTYPE html> <html lang="en"> <head><m ...
- bootstrap组件
一.Bootstrap常用的组件: icon图标,下拉菜单,导航,导航条,输入框,缩略图,媒体对象,列表组,分页导航. 二.小图标: 1.bootstrap中内置提供了250多种小图标. 2.语法:首 ...
- CSS day_13(6.28) Boot常用组件(nav、tab、分页)Sass介绍
一.组件 nav导航 .nav整个导航的外层,flex属性和去掉标识符的属性 .nav-item细微的间距调整 .nav-link每一个项之间大部分样式内容的调整 .active当前被激活的导航签 & ...
- Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
最新文章
- 客户端程序自动更新(升级)的方式
- Java笔记-对称加密AES的使用
- ad服务器修改域名,ad服务器改域名
- 大数据系统架构是什么
- Matlab线性规划
- 怎樣制作线段动画_PPT如何制作简易动画
- 服务器系统装驱动精灵,云服务器安装驱动精灵
- 英语口语软件测试满分多少分,小学生英语口语测试评分标准
- 图像处理 - ImageMagick 简单介绍与案例
- 【技术贴】网页部分图片显示x红叉,网页图片不显示,网页图片显示异常,网页图片打不开。...
- 乔布斯全新采访曝光:吐槽微软,回应争议,还要把Mac扔出窗外,然而…
- Oracle配置本地网络服务器测试不成功,无监听程序
- 修改360浏览器主页
- panda是删除行_pandas删除包含指定内容的行
- 选择题汇总4(括号里填的答案都是对的,不用管下面那个答案正确与错误,因为作者懒得删了)
- Linux内核中的IPSEC实现2
- 在窗口程序中打开控制台
- 简易交通灯控制电路设计
- Linux平台模拟ATM机系统
- 《有限与无限的游戏》第一章 世上至少有两种游戏:经典摘抄(3)
热门文章
- 总结 | 深度学习之Pytorch入门教程
- 《图解深度学习》图书及代码,16章带你无障碍深度学习
- 独家分享| 2019年校招大厂算法自己经历和好友经验(大疆,百度,腾讯……)
- python计算最大回撤_最大回撤线性算法实现
- HTML中制作循环广告条,一种循环展示广告的广告箱的制作方法
- python泰坦尼克号数据预测_机器学习入门之Python机器学习:泰坦尼克号获救预测一...
- java11和13_Java1113
- React Native (一) react-native-video实现音乐播放器和进度条的功能
- Typora的图片根目录设置,
- java.util.base64报错解决