使用Bootstrap组件【上篇】
来源：互联网 发布：长得帅的男生知乎 编辑：程序博客网 时间：2024/04/29 07:42
学习要点
- 下拉菜单
- 按钮
- 导航
- 选项卡
- 标签与徽章
1) 下拉菜单
快速定义简单的下拉菜单
<div class="dropdown"> <!-- data-toogle="dropdown" 触发 --> <a href="#" class="btn btn-large" data-toggle="dropdown">激活按钮<i class="icon-arrow-down"></i></a> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> </ul></div><!-- nav 去除list-style样式 --><!-- nav-pills 行内显示--><ul class="nav nav-pills"> <li class="dropdown">首页</li> <li class="dropdown">新闻</li> <li class="dropdown">视频</li> <li class="dropdown"> <!-- dropdown-toggle 表示下拉箭头的颜色 --> <!-- data-toggle="dropdown" 触发下拉 --> <!-- caret 下拉图标 --> <!-- PS dropup 向上弹出菜单 --> <a class="dropdown-toggle" data-toggle="dropdown" href="#">体育<b class="caret"></b></a> <!-- 自动隐藏子菜单 --> <ul class="dropdown-menu"> <!-- dropdown-submenu 二级菜单 --> <!-- pull-left 向左弹出下拉菜单 --> <li class="dropdown-submenu pull-left"> <a href="#">NBA</a> <!-- pull-right表示子菜单与父菜单右边对齐，这里换成默认的pull-left --> <ul class="dropdown-menu pull-left"> <li><a href="#">骑士</a></li> <li><a href="#">热火</a></li> <li><a href="#">雷霆</a></li> <!-- divider 分割线 --> <li class="divider"></li> <li><a href="#">快船</a></li> <li><a href="#">马刺</a></li> </ul> </li> <!-- disabled 禁用 --> <li class="disabled"><a href="#">拳击</a></li> <li><a href="#">西甲</a></li> </ul> </li></ul>2) 按钮
简单的按钮组
<!-- btn-group-vertical 垂直布局 --><div class="btn-group"> <p class="btn">按钮(p)</p> <li class="btn">按钮(li)</li> <span class="btn">按钮(span)</span> <a class="btn">按钮(a)</a></div><!-- btn-toolbar 按钮导航条 --><div class="btn-toolbar text-center"> <!-- 按钮组 --> <div class="btn-group"> <i class="btn"><i class="icon-step-backward"></i></i> <i class="btn"><i class="icon-backward"></i></i> </div> <div class="btn-group"> <i class="btn">1</i> <i class="btn">2</i> <i class="btn">...</i> <i class="btn">3</i> <i class="btn">4</i> </div> <div class="btn-group"> <i class="btn"><i class="icon-forward"></i></i> <i class="btn"><i class="icon-step-forward"></i></i> </div></div><!-- btn-group 按钮组 --><!-- dropup 上拉菜单 --><div class="btn-group dropup" style="position: absolute; top: 200px; left:100px;"> <a class="btn" href="#">按钮下拉菜单</a> <!-- 下拉指示条 --> <a class="btn" href="#" data-toggle="dropdown"><i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">下拉菜单1</a></li> <li><a href="#">下拉菜单2</a></li> <li><a href="#">下拉菜单3</a></li> <li><a href="#">下拉菜单4</a></li> </ul></div><!-- nav-tabs 选项卡导航条 --><!-- nav-pills 胶囊式导航条 --><!-- pull-right 向右对齐 --><!-- nav-stacked 堆叠效果，即垂直布局 --><div class="nav nav-stacked nav-pills"> <li class="active"><a href="#">首页</a></li> <!-- disabled 禁用 --> <li class="disabled"><a href="#">体育</a></li> <li><a href="#">新闻</a></li></div><!-- nav-tabs 选项卡布局 --><div class="nav nav-tabs"> <!-- active 激活状态 --> <li class="active"><a href="#">首页</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">体育 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">篮球</a></li> <li><a href="#">足球</a></li> <li><a href="#">排球</a></li> <li><a href="#">橄榄球</a></li> </ul> </li> <li><a href="#">彩票</a></li></div><!-- nav-tabs 选项卡布局 --><!-- nav-list 列表式布局 --><div class="nav nav-list"> <!-- active 激活状态 --> <li class="active"><a href="#">首页</a></li> <li> <a href="#" >体育</a> <ul class="nav nav-list"> <li><a href="#">篮球</a></li> <li><a href="#">足球</a></li> <li><a href="#">排球</a></li> <li><a href="#">橄榄球</a></li> </ul> </li> <li><a href="#">彩票</a></li></div><!-- tabbable 兼容早期IE 可布局 --><!-- tabs-left 靠左布局 --><!-- tabs-right 靠右布局 --><!-- tabs-below 靠下布局 要改变nav-tabs(后) 和 tab-content(先)的位置--><div class="tabbable tabs-left"> <!-- nav 设置list-style为none --> <!-- nav-tabs 选项卡布局 --> <ul class="nav nav-tabs"> <!-- href="#tab1"与下面的id="tab1"对应 --> <!-- data-toggle="tab"触发选项卡 --> <li><a href="#tab1" data-toggle="tab">首页</a></li> <li class="active"><a href="#tab2" data-toggle="tab">体育</a></li> <li><a href="#tab3" data-toggle="tab">新闻</a></li> </ul> <!-- tab-content 选项卡的内容 --> <div class="tab-content"> <!-- tab-pane 子内容框 --> <!-- fade 淡入淡出 --> <div class="tab-pane fade" id="tab1"><img src="img/1.png"></div> <div class="tab-pane active" id="tab2"><img src="img/2.png"></div> <div class="tab-pane fade" id="tab3"><img src="img/3.png"></div> </div></div><div class="navbar"> <div class="navbar-inner"> <!-- brand 网站名区域 --> <a href="#" class="brand">小炮子子</a> <ul class="nav"> <li><a href="#">首页</a></li> <!-- divider-vertical 树立分割线 --> <li class="divider-vertical"></li> <li><a href="#">首页</a></li> <li class="divider-vertical"></li> <li><a href="#">首页</a></li> <li class="divider-vertical"></li> <li><a href="#">首页</a></li> </ul> <!-- navbar-search 导航搜索--> <!-- form-search 表单搜索 --> <!-- pull-left 向左对齐 --> <form class="navbar-search form-search pull-left"> <input type="text" class="span3 search-query"> <input type="submit" class="span1 btn" value="查询"> </form> </div></div><div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="dropdown"> <a data-toggle="dropdown" href="#">微博 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">好友1</a></li> <li><a href="#">好友2</a></li> <li><a href="#">好友3</a></li> <li><a href="#">好友4</a></li> </ul> </li> </ul> </div></div><!-- navbar-fixed-top 置顶导航条，随着滚动条下拉不变 --><!-- navbar-fixed-bottom 置底导航条，随着滚动条下拉不变 --><!-- navbar-inverse 反色效果 --><div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <ul class="nav"> <a class="brand" href="#">置顶导航条</a> <form class="navbar-search form-search pull-left"> <input type="text" class="search-query span3"> <input type="submit" class="span1 btn" value="提交"> </form> </ul> </div></div><div style="height: 2000px; border: 1px solid red; margin: 10px">响应式导航
<div class="navbar"> <div class="navbar-inner"> <a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">响应式布局</a> <ul class="nav nav-collapse collapse navbar-responsive-collapse"> <li class="active"><a href="#">首页</a></li> <li ><a href="#">首页</a></li> <li ><a href="#">首页</a></li> </ul> </div></div>4) 标签与徽章
<span class="label">标签样式，圆角外观，默认</span><span class="label label-info">标签样式，圆角外观， 信息</span><span class="label label-important">标签样式，圆角外观，重要</span><span class="label label-success">标签样式，圆角外观，成功</span><span class="label label-warning">标签样式，圆角外观，警告</span><span class="label label-inverse">标签样式，圆角外观，反向</span><br/><span class="badge">标签样式，椭圆外观，默认</span><span class="badge badge-info">标签样式，椭圆外观， 信息</span><span class="badge badge-important">标签样式，椭圆外观，重要</span><span class="badge badge-success">标签样式，椭圆外观，成功</span><span class="badge badge-warning">标签样式，椭圆外观，警告</span><span class="badge badge-inverse">标签样式，椭圆外观，反向</span> 0 0
- 使用Bootstrap组件【上篇】
- Bootstrap alert组件使用
- 使用 Bootstrap Typeahead 组件
- 使用Bootstrap组件【下篇】
- BootStrap简单组件使用
- 使用 Bootstrap Typeahead 组件
- Bootstrap Typeahead 组件的使用
- 使用bootstrap框架日期组件
- 使用 Bootstrap Typeahead 组件 二
- Bootstrap分布组件使用介绍
- Bootstrap 使用清单组组件创建价格表
- bootstrap ace treeview组件的使用
- bootstrap气泡组件popover的使用
- Bootstrap-fileinput组件封装及使用
- Bootstrap-------------之Typeahead 组件,配合elasticsearch使用
- bootstrap(组件)
- Bootstrap 组件
- bootstrap 组件
- SpringMVC 使用 @Value获取properties文件中的属性值
- Android样式的开发:shape
- POJ １６１１ The Suspects
- 【VC图像处理】直方图均衡化
- js 自定义hashmap
- 使用Bootstrap组件【上篇】
- [Zookeeper系列一]Zookeeper应用介绍与安装部署
- 第10课：Spark Streaming源码解读之流数据不断接收全生命周期彻底研究和思考
- centos 安装eclipse 配置tomcat
- 《Android 之美 从0到1 -- 高手之路》
- iOSwebView修改字体大小字体颜色背景颜色
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
- web项目中各种路径的获取
- JMS学习(三)
