Bootstrap 常用组件
2016-12-16 15:09:23 0 举报
AI智能生成
登录查看完整内容
bootstrap
作者其他创作
大纲/内容
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>
ul class=\"list-group\" style=\
图片
.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-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 条评论
回复 删除
下一页