Bootstrap 常用组件
2016-12-16 15:09:23 0 举报AI智能生成
bootstrap
作者其他创作
大纲/内容
表格
div.table-responsive 表格自适应
<table>...<table>
.table- condensed 密度变小
.table-bordered 边框线
.table-hover 鼠标经过变色
.table-striped 隔行变色效果
<th></th>
表头
表头
<tr></tr>
行
行
<td></td>
列
列
<input type="checkbox"> 复选框
列表
list-unstyled 清除样式
.list-inline 水平显示
列表组合框
.list-group ( ul div都可以)
.list-group-item
.active 激活样式
.list-group-item-heading 头部
.list-group-item-text 正文
.list-group-item-text list-group-item-text-danger 加样式
徽章样式 <span class="badge">12</span>
- 办公设备33
- 右边的数字样式
图片
.img-ground 圆角
.img-circle 圆形
.img-thumbnail 缩略图
.img-responsive 自适应
表单
布局
垂直
水平
<form class="form-horizontal">
行内
<form class="form-inline">
样式
.form-froup 分组
label.control-label
.form-control 表单控件/样式
输入框分组
div.input-group
span.input-group-addon 左侧小图标
input.form-cantrol 表单
span.input-group-btn 按钮
label 文字样式
class = 'label label-danger'
按钮
按钮
btn
btn-xxx
default
primary
danger
...
btn-lg 变大
btn-sm 变小
btn-xs 极小
btn-block 块级按钮
按钮分组
工具条 div.btn-toolbar
div.btn-group
div.btn-group-vertical 竖列按钮
Media Object
媒体对象
媒体对象
div.media
div.media-left
.media-object
div.media-body
.meidia-heading
图标 font-awesome
引用样式文件 font-awesome.min.css
应用 <i class="fa fa-xx">
面板 panel
div.panel panel-default
设置panel及样式
设置panel及样式
.panel-heading
.panel-body
.panel-footer
.clearfix
清除浮动 导航
ul.nav 标签页
.nav-tabs
li.active 默认激活
.nav-pills
按钮样式
按钮样式
.nav-stacked
竖列显示
竖列显示
导航条
nav.navbar navbar-default
div.navbar-header 显示品牌
.navbar-brand
汉堡菜单
button.navbar-toggle
横线 span.icon-bar
data-target= "#id "
data-toggle = " collapse" 折叠
菜单 ul.nav navbar-nav
li 菜单项
排列
.navbar-left
.navbar-right
<input placehoder=" ** "> 输入栏内显示占位符
class=" sr-only "隐藏
.disable=" disable " 禁用
0 条评论
下一页
