bootstrap组件学习
2016-04-08 12:18
513 查看
转自http://v3.bootcss.com/components/
矢量图标的用法
可同button结合使用
alert 组件中所包含的图标是用来表示这是一条错误消息的。
下拉菜单
在父元素中设置dropdown或者dropup类属性(其他可将父元素的position设置为relative的都可),将父元素的position设置为relative,这样下拉列表即可通过设置position为absolute,同父元素进行绝对定位。
下拉触发按钮设置data-toggle='dropdown'属性,插件会根据此属性查找触发按钮,并添加相关监听事件。
下拉列表设置dropdown-menu类属性,插件会搜寻触发按钮的父元素内的所有dropdown-menu,并同器触发事件管理。
.dropdown-menu-left
.dropdown-menu-right
.dropdown-header列表标题
按钮组
.btn-toolbar按钮组的组
.btn-group按钮组
.btn-group-vertical垂直排列按钮组
.btn-group-justified两端对齐按钮组
.btn-group-(lg|sm|xs)按钮组大小
按钮组也可以实现下拉菜单,同原下拉菜单的实现一样。
输入框组
.input-group里面增加元素
.input-group-addon,span文字或者input内容,可以使用此属性。
.input-group-btn,button使用此属性,因为有以下不兼容性问题,比如input-group-addon的内边距会导致显示问题。
使用.input-group-btn可实现按钮下拉菜单功能。
导航
.nav
.nav-tabs为标签式
.nav-pills为胶囊式
.nav-stacked为垂直堆叠式
.nav-justified为两端对齐式
导航条
.navbar
.navbar-default默认导航条颜色
.navbar-inverse反色导航条
导航内容<ul class="nav navbar-nav"></ul>
品牌图标<div class="navbar-header"></div>
表单<form class="navbar-form"></form>
按钮<button class="navbar-btn"></button>
文字<p class=".navbar-text"></p>
非导航连接<a class="navbar-link"></a>
.navbar-left和.navbar-right用于对齐
.navbar-fixed-(top|bottom)让导航条固定在顶部或底部
路径导航(breadcrumb)
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页、翻页
在<nav>元素中使用ul显示分页信息,ul使用
ul使用.pager,显示翻页样式
<nav>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</nav>
标签、徽章
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="badge">
警告
可关闭的警告
警告框中的连接.alert-link
进度条
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.progress-bar-striped
.active动态的
还有媒体对象(.media .media-list .media-left .media-object .media-heading .media-body)
列表组(.list-group .list-group-item .list-group-item-(success|info|warning|danger) .list-group-item-heading .list-group-item-text)
面板(.panel .panel-(success|info|warning|danger) .panel-heading .panel-title .panel-body .)
bootstrap组件学习
矢量图标的用法
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
可同button结合使用
alert 组件中所包含的图标是用来表示这是一条错误消息的。
<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>
下拉菜单
在父元素中设置dropdown或者dropup类属性(其他可将父元素的position设置为relative的都可),将父元素的position设置为relative,这样下拉列表即可通过设置position为absolute,同父元素进行绝对定位。
下拉触发按钮设置data-toggle='dropdown'属性,插件会根据此属性查找触发按钮,并添加相关监听事件。
下拉列表设置dropdown-menu类属性,插件会搜寻触发按钮的父元素内的所有dropdown-menu,并同器触发事件管理。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div>
.dropdown-menu-left
.dropdown-menu-right
.dropdown-header列表标题
<li role="separator" class="divider"></li>分割线
按钮组
.btn-toolbar按钮组的组
.btn-group按钮组
.btn-group-vertical垂直排列按钮组
.btn-group-justified两端对齐按钮组
.btn-group-(lg|sm|xs)按钮组大小
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
按钮组也可以实现下拉菜单,同原下拉菜单的实现一样。
输入框组
.input-group里面增加元素
.input-group-addon,span文字或者input内容,可以使用此属性。
.input-group-btn,button使用此属性,因为有以下不兼容性问题,比如input-group-addon的内边距会导致显示问题。
使用.input-group-btn可实现按钮下拉菜单功能。
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>[/code]
导航
.nav
<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为胶囊式
.nav-stacked为垂直堆叠式
.nav-justified为两端对齐式
导航条
.navbar
.navbar-default默认导航条颜色
.navbar-inverse反色导航条
导航内容<ul class="nav navbar-nav"></ul>
品牌图标<div class="navbar-header"></div>
表单<form class="navbar-form"></form>
按钮<button class="navbar-btn"></button>
文字<p class=".navbar-text"></p>
非导航连接<a class="navbar-link"></a>
.navbar-left和.navbar-right用于对齐
.navbar-fixed-(top|bottom)让导航条固定在顶部或底部
路径导航(breadcrumb)
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页、翻页
在<nav>元素中使用ul显示分页信息,ul使用
pagination类属性
ul使用.pager,显示翻页样式
<nav>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</nav>
标签、徽章
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="badge">
警告
<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
可关闭的警告
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
警告框中的连接.alert-link
进度条
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div> </div>
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.progress-bar-striped
.active动态的
还有媒体对象(.media .media-list .media-left .media-object .media-heading .media-body)
列表组(.list-group .list-group-item .list-group-item-(success|info|warning|danger) .list-group-item-heading .list-group-item-text)
面板(.panel .panel-(success|info|warning|danger) .panel-heading .panel-title .panel-body .)
相关文章推荐
- bootstrap全局CSS样式学习
- Bootstrap-panel
- 关于bootstrap-fileinput
- 关于bootstrap-fileinput
- 结构-行为-样式-Bootstrap笔记
- Bootstrap起步介绍
- bootstrap编码规范
- does not match bootstrap parameter
- bootstrap框架功能总结
- bootstrap-fileInput
- bootstrap 2.3版与3.0版的使用区别
- 好用的自适应表格插件-bootstrap table (支持固定表头)
- Bootstrap 警告框自动关闭
- bootstrap 3 navrbar实现置顶并滚动监听
- 基于javascript bootstrap实现生日日期联动选择
- 基于javascript bootstrap实现生日日期联动选择
- bootstrap学习网站
- bootstrapTable
- Bootstrap学习笔记—做一个简单的缩略图
- Bootstrap学习笔记—做一个简单的底部导航条