bootstrap-垂直胶囊式标签页
2017-02-15 11:04
274 查看
说明
![](https://s3.51cto.com/wyfs02/M00/8D/9A/wKioL1ijxUajk8CQAAARCf-Ko_A912.png-wh_500x0-wm_3-wmp_4-s_2378032486.png)
通过 .nav-stacked 类,实现垂直方向堆叠排列的胶囊标签页示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <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> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>输出
![](https://s3.51cto.com/wyfs02/M00/8D/9A/wKioL1ijxUajk8CQAAARCf-Ko_A912.png-wh_500x0-wm_3-wmp_4-s_2378032486.png)
相关文章推荐
- bootstrap-胶囊式标签页
- bootstrap历练实例: 垂直胶囊式的导航菜单
- Bootstrap 3 按钮标签实例代码
- Bootstrap历练实例:响应式标签页
- Bootstrap每天必学之标签页(Tab)插件
- Bootstrap实现的标签页内容切换显示效果示例
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- Bootstrap模态框水平垂直居中与增加拖拽功能
- 使用bootstrap标签页
- bootstrap学习总结-03 常用标签1
- Bootstrap面包屑导航、分页、标签、徽章
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- Bootstrap 路径分页标签和徽章组件(七)
- 第二章 使用Bootstrap的准备-tab标签小案例 笔记3
- Bootstrap按钮组嵌套、垂直排列、两端对齐
- bootstrap学习1-- 全局CSS之 h1 -h6标签的使用
- Bootstrap php制作动态分页标签
- 兄弟标签中文字和图片垂直居中
- Bootstrap源码解读标签、徽章、缩略图和警示框(8)
- 把HTML标签设置成水平或垂直居中的二种方案除IE6外都兼容