表格布局
BootStrap提供了垂直表单、内联表单、水平表单
基本表单的步骤:1、向父<form>元素添加role=“form”
2、把标签和控件放在一个带有class.form-group的<div>中
3、向所有的文本元素<input>、<textarea>和<select>添加class="form-control"
BootStrap支持最常见的表单控件,主要是:input、textarea、checkbox、radio、select。
BootStrap提供了所有原生的Html5的input类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、URL、search和tel
禁用一个输入框,添加disable属性即可
对<fieldset>添加disable属性来禁用<fieldset>
BootStrap按钮
任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。
以下样式可用于<a>,<button>,<input>:
类 | 描述 |
.btn | 为按钮添加基本样式 |
.btn-default | 默认、标准按钮 |
.btn-primary | 原始按钮样式 |
.btn-success | 成功的动作 |
.btn-info | 要弹出信息的按钮 |
.btn-danger | 危险动作的按钮操作 |
.btn-link | 按钮看起来像个链接 |
.btn-lg | 制作一个大按钮 |
.btn-xs | 一个超小按钮 |
.btn-sm | 一个小按钮 |
.btn-block | 块级按钮 |
.active | 按钮被点击 |
.disable | 禁用按钮 |
设置垂直方向的按钮.btn-group-vertical
设置自适应大小的按钮:.btn-group-justified
BootStrap图片
BootStrap提供了三个可对图片应用简单样式的class:
1、.img-rounded:添加border-radius:6px来获得图片圆角
2、.img-circle:添加border-radius:50%来让整个图片变成圆形
3、.img-thumbnail:添加一些内边距(padding)和一个灰色的边框
<img>类
类 | 描述 |
.img-rounded | 为图片添加圆角 |
.img-circle | 将图片变为圆形 |
.img-thumbnail | 缩略图功能 |
.img-responsive | 图片响应式 |
其他类
类 | 描述 |
.pull-left | 元素浮动到左边 |
.pull-right | 元素浮动到右边 |
.center-block | 设置元素为display:block并居中显示 |
.clearfix | 清除浮动 |
.show | 强制元素显示 |
.hidden | 强制元素隐藏 |
.sr-only | |
.sr-only-focusacble | 与.sr-only类结合使用,在元素获取焦点时 |
.text-hide | 将页面元素所包含的文本内容替换为背景图 |
.close | 显示关闭按钮 |