二、bootstrap3表单元素
(约定:.class相当于class=“class”,例如:.container相当于class=“container”)
1.表单的基本结构
(1)向父元素<form>添加role=“form”;
(2)把表单元素控件放在一个带有class=“form-group”的<div>中;
(3)向所有的文本元素<input>,<select>,<textarea>等添加.form-control;
2.内联表单
在<form>里添加.form-inline。
3.水平表单
在<form>里添加.horizontal,向<label>标签里添加.control-label
4.复选框和单选
若要使标签和一系列的复选单选显示在同一行则使用.checkbox-inline或.radio-inline。
5.选择框(select)
一般要与<option>连用;若要实现多选设置则multiple=“multiple”。
6.静态控件
需要在一个水平表单内的表单标签后放置纯文本时,在<p>上使用.form-control-static。
7.表单控件状态
focus,disabled, .has-warning ; .has-error; .has-success;
图标提示:在验证样式的容器里即父元素上加.has-feedback 在<input>后添加<span> 并指定对应样式即可
8.按钮
按钮样式:
.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link
大小:.btn-lg .btn-sm .btn-xs
状态:.active .hover .disabled
9.图片
.img-rounded圆角图片 ..img-responsive响应式图片 .img-circle圆形图片 .img-thumbnail缩略图
bootstrap内置图片的使用:<span class="glyphicon glyphicon-*"><span>
10.输入框组
(1)把标签元素放置在.input-group的容器当中;
(2)在输入框中添加元素则用.input-group-addon样式的<span>;
11.bootstrap下拉菜单
(1)使用.dropdown的容器包裹整个下拉菜单
(2)使用2个<button>,第一个<button>定义基础样式
(3)第二个<button>,定义基础样式并且其后添加.dropdown 还要有data-toggle=“dropdown”;
(4)在<button>按钮的同级添加一个<ul>,并给起样式.dropdown-menu
分割线:在空的<Li>中添加样式.divider
菜单分类标题:在<ul>菜单中空的<li>里添加.drop-header
对齐方式:一般用于<ul>中,在.dropdown-menu后添加.pull-right或.dropdown-menu-right
菜单状态:.hover .focus .active .disabled
11.按钮组
.btn-group
.btn-toolbar
.btn-gronp-vertical
等分按钮:在原有的.btn-group后新增.btn-group-justified。
<span class=“caret”></span>:下拉小箭头。