Toggle navigation
菜菜小站
菜菜小站
前端开发
前端开发
前端基础
bootstrap
JavaScript
后端开发
后端开发
php开发
laravel
数据库
编辑器
git
服务器
服务器
https
cos云存储
ubuntu
homestead
微信开发
微信开发
微信小程序
python开发
python开发
python基础
关于
bootstrap--components（五）--nav导航
作者：
菜菜子
|
时间：2017-02-20 16:46:00 |
分类：
前端开发
,
bootstrap
|
访问: 158 次|
评论：
0 评论
```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>nav导航</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!--<link rel="stylesheet" href="../css/bootstrap.min.css">--> </head> <body style="margin:20px"> <p> 1.最初状态下的导航应当使用ul>li </p> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">关于</a></li> </ul> <br><br><br> <p> 2.导航条---为ul添加.nav样式 </p> <p> 不要将 role 属性添加到 ul 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。 </p> <ul class="nav"> <li role="presentation"><a href="#">首页</a></li> <li role="presentation"><a href="#">新闻</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> <p> 3.标签页导航条（横着的导航条）---为ul添加.nav和.nav-tabs， .nav-tabs 类依赖 .nav 基类。 </p> <p> 如果需要让被点击以后的li是激活状态可使用js为点击以后的li添加class="active"样式 </p> <ul class="nav nav-tabs"> <li role="presentation"><a href="#">首页</a></li> <!--<li><a href="#">我是被激活状态，点其他地方不会变换，最好通过js来实现</a></li>--> <li role="presentation"><a href="#">新闻</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> <br><br><br><br> <p> 4.胶囊式标签页，HTML 标记相同，但使用 .nav-pills 类 </p> <ul class="nav nav-pills "> <!--添加了.active样式的li很不一样，背景会变成蓝色--> <!--<li><a href="#">我是被激活状态下的li，背景为蓝色</a></li>--> <li role="presentation"><a href="#">首页</a></li> <li role="presentation"><a href="#">新闻</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> <p> 垂直式胶囊标签页，为胶囊标签ul添加nav-stacked样式 </p> <ul class="nav nav-pills nav-stacked"> <!--添加了.active样式的li很不一样，背景会变成蓝色--> <!--<li role="presentation"><a href="#">我是被激活状态下的li，背景为蓝色</a></li>--> <li role="presentation"><a href="#">首页</a></li> <li role="presentation"><a href="#">新闻</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> <br><br><br><br> <p> 5.被禁用的导航，为li添加disabled样式 </p> <ul class="nav nav-pills"> <li role="presentation" class="disabled"><a href="#">禁用</a></li> <li role="presentation"><a href="#">新闻</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> <br><br><br><br> <p> 6.为导航添加下拉菜单 </p> <p> 6.1带下拉菜单的标签页 </p> <ul class="nav nav-tabs"> <li class="active"><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <!--下拉框--> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 下拉 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li role="presentation"><a href="#">下拉1</a></li> <li role="presentation"><a href="#">下拉2</a></li> <li role="presentation"><a href="#">下拉3</a></li> </ul> </li> <!--下拉框结束--> </ul> <p> 6.2带下拉菜单的胶囊式标签页 </p> <p> 胶囊式标签页与上面的不同在于上面的ul使用.nav-tabs,而这里使用.nav-pills，与上面最大的区别在于激活状态下背景是蓝色 </p> <ul class="nav nav-pills"> <li class="active"><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <!--下拉框--> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 下拉 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li role="presentation"><a href="#">下拉1</a></li> <li role="presentation"><a href="#">下拉2</a></li> <li role="presentation"><a href="#">下拉3</a></li> </ul> </li> <!--下拉框结束--> </ul> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!--<script src="../js/jquery.js"></script>--> <!-- Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.js"></script> <!--<script src="../js/bootstrap.js"></script>--> </body> </html> ```
标签：
bootstrap
,
前端框架
还不快抢沙发
添加新评论
昵称（必填）
邮箱（必填）
网站（选填）
内容（必填）
提交评论
最新文章
laravel-admin自定义提示
laravel5.5中使用vue（几条神奇的命令）
laravel-自写分页类
让laravel-admin本地存储携带域名信息
重写laravel-admin图片上传功能（获取图片宽高）
在laravel-admin中使用wangEditor编辑器图片上传功能
laravel 测试-基本用法
最新回复
菜菜子: 你php.ini文件有没有修改上传文件限制
清风: 感谢前辈的插件，非常好用。使用中遇到了一个问题，上传3...
qwer121: 解压后，文件夹为cosUploadV5-master的...
qwer121: 开启的时候显示“Server Error”是啥意思呢？？
菜菜子: 这个应该不太现实，如果有人开发过v4的wp包请发我邮箱...
开心网: 博主大神，能不能开发个v5的wordpress的？现在...
菜菜子: 在浏览器中预览....
111: 不行啊。
iNathan: 刚刚到家，安装上了，非常好用，完美~
菜菜子: 能用吗？
标签
bootstrap
前端框架
laravel5
gd库
微信小程序
laravel
laravel-admin
表单
https
git
wamp配置
ajax
cos小工具
cos
cos插件
微信支付
邮件发送
腾讯云
sql语言
typecho
数组
破解
编辑器
vue
homestead
刷新
加密处理
验证码
悬浮框
权限控制
jwt
markdown
ubuntu
shell
mysql
elasticsearch
ui
任务调度
定时任务
deployer
linux
gogs
反向代理
ftp
测试
分页
larave
归档
2018年06月
2018年05月
2018年04月
2018年03月
2017年09月
2017年06月
2017年05月
2017年04月
2017年03月
2017年02月
2017年01月
2016年12月
2016年11月
友情链接
上流阁
Jerry的编程之路
空位
//