Form-demo

平台按钮样式、背景、字体颜色整理

按钮颜色：

<button class="btn btn-sm btn-danger"><i class="glyphicon glyphicon-remove"></i>删除(btn-danger)</button>
<button class="btn btn-sm btn-info"><i class="glyphicon glyphicon-save"></i>导出(btn-info)</button>
<button class="btn btn-sm btn-success"><i class="glyphicon glyphicon-pencil"></i>修改(btn-success)</button>
<button class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-menu-hamburger"></i>分配(btn-warning)</button>
<button class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-plus"></i>新建(btn-primary)</button>

<button class="btn btn-sm btn-primary" id="test_btn01"><i class="glyphicon glyphicon-text-background"></i> 加载中（点击）</button>
$('#test_btn01').click(function(){ //给按钮‘#test_btn01’，添加加载中状态
    COM_TOOLS.loadingBtn.open($(this));
    setTimeout(function(){
        COM_TOOLS.loadingBtn.close('test_btn01');
    },2000);
});

文本颜色：

(text-primary)测试文本测试文本测试文本测试文本

(text-success)测试文本测试文本测试文本测试文本

(text-info)测试文本测试文本测试文本测试文本

(text-warning)测试文本测试文本测试文本测试文本

(text-danger)测试文本测试文本测试文本测试文本

<p class="text-primary">(text-primary)测试文本测试文本测试文本测试文本</p>
<p class="text-success">(text-success)测试文本测试文本测试文本测试文本</p>
<p class="text-info">(text-info)测试文本测试文本测试文本测试文本</p>
<p class="text-warning">(text-warning)测试文本测试文本测试文本测试文本</p>    
<p class="text-danger">(text-danger)测试文本测试文本测试文本测试文本</p>

背景颜色：

bg-danger

bg-info

bg-warning

bg-success

bg-primary

<p class="p-sm bg-danger">bg-danger</p>
<p class="p-sm bg-info">bg-info</p>    
<p class="p-sm bg-warning">bg-warning</p>   
<p class="p-sm bg-success">bg-success</p>
<p class="p-sm bg-primary">bg-primary</p>

栅格系统

.col-md-1

.col-md-8

.col-md-4

.col-md-6

html

<div class="container">    
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>    
</div>

宽度百分比：在超小屏幕下显示一行两列；在小屏幕（大于等于768px）下显示一行3列；在中等屏幕（大于等于992px）显示一行四列

.col-md-3.col-sm-4.col-xs-6

html

<div class="row test-grid">
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="clearfix visible-md-block visible-xs-block"></div>//注：当内容区域高度固定，此代码可省略；当内容区域高度不固定，可根据具体情况添加此代码
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
    <div class="col-md-3 col-sm-4 col-xs-6"><div class="test-box">.col-md-3.col-sm-4.col-xs-6</div></div>
</div>

默认面板样式

面板标题

面板内容

情景面板标题(panel-info)

面板内容

情景面板标题(panel-success)

面板内容

情景面板标题(panel-warning)

面板内容

情景面板标题(panel-danger)

面板内容

情景面板标题(panel-primary)

面板内容

html

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

默认表单样式

*文本框

*日期选择框

*下拉选项框

*单选框
1 2

*复选框
1 2 3

*文本域

html
js

<form>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>文本框</label>
        <input class="form-control input-sm" type="text" name="name11" id="name11" />
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>日期选择框</label>
        <div class="input-group date" id="name12_date">
            <input class="form-control input-sm" type="text" name="name12" id="name12" readonly/>
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </div>
    <div class="form-group"> 
        <label class="control-label"><span class="text-danger">*</span>下拉选项框</label>
        <select class="form-control input-sm" name="name13" id="name13">
            <option value="">- 请选择 -</option>
            <option value="1">1</option>
            <option value="1">2</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>单选框</label><br />
        <label class="checkbox-inline i-checks"><input type="radio" name="name14_01" value="1" checked> 1</label>
        <label class="checkbox-inline i-checks"><input type="radio" name="name14_01" value="2"> 2</label>
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>复选框</label><br />
        <label class="radio-inline i-checks"><input type="checkbox" name="name15_01[]" minlength="2" required value="1"> 1</label>
        <label class="radio-inline i-checks"><input type="checkbox" name="name15_01[]" minlength="2" required value="2"> 2</label>
        <label class="radio-inline i-checks"><input type="checkbox" name="name15_01[]" minlength="2" required value="3"> 3</label>
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>文本域</label>
        <textarea class="form-control" id="name15" name="name16" rows="5"></textarea>
    </div>
</form>

//使用了datetimepicker及icheck组件,需要添加对应的js及css    
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
<script src="../js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChecked', function(){  //如果使用了validate验证需要用一下代码
      $(this).closest('form').validate().element(this);
});

$('#name12_date').datetimepicker();
COM_TOOLS.select2_init('name13');

内联表单

*文本框

*日期选择框

*下拉选项框

*单选框 1 2

*复选框 1 2 3

*文本域

html
js

<form class="form-inline">
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>文本框</label>
        <input class="form-control input-sm" type="text" name="name17" id="name17" />
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>日期选择框</label>
        <div class="input-group date" id="name18_date">
            <input class="form-control input-sm" type="text" name="name18" id="name18" readonly/>
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>下拉选项框</label>
        <select class="form-control input-sm" name="name19" id="name19" style="width:200px;">
            <option value="">- 请选择 -</option>
            <option value="1">1</option>
            <option value="1">2</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>单选框</label>
        <label class="checkbox-inline i-checks"><input type="radio" name="name20_01" value="1" checked> 1</label>
        <label class="checkbox-inline i-checks"><input type="radio" name="name20_01" value="2"> 2</label>
    </div>
    <div class="form-group">
        <label class="control-label"><span class="text-danger">*</span>复选框</label>
        <label class="radio-inline i-checks"><input type="checkbox" name="name21_01[]" minlength="2" required value="1"> 1</label>
        <label class="radio-inline i-checks"><input type="checkbox" name="name21_01[]" minlength="2" required value="2"> 2</label>
        <label class="radio-inline i-checks"><input type="checkbox" name="name21_01[]" minlength="2" required value="3"> 3</label>
    </div>
    <div class="form-group">
        <label class="control-label" style="vertical-align:top;"><span class="text-danger">*</span>文本域</label>
        <textarea class="form-control" id="name29" name="name29" rows="5"></textarea>
    </div>
</form>

//使用了datetimepicker及icheck组件,需要添加对应的js及css    
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
<script src="../js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChecked', function(){  //如果使用了validate验证需要用一下代码
      $(this).closest('form').validate().element(this);
});
$('#name18_date').datetimepicker();
COM_TOOLS.select2_init('name19');

水平表单

*文本框

*日期选择框

下拉选项框

*单选框

1 2

*复选框

1 2 3

*文本域

html
js

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label"><span class="text-danger">*</span>文本框</label>
        <div class="col-sm-10"><input class="form-control input-sm" type="text" name="name30" id="name30" /></div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"><span class="text-danger">*</span>日期选择框</label>
        <div class="col-sm-10">
            <div class="input-group date" id="name31_date">
                <input class="form-control input-sm" type="text" name="name31" id="name31" readonly/>
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">下拉选项框</label>
        <div class="col-sm-10">
            <select class="form-control input-sm" name="name32" id="name32">
                <option value="">- 请选择 -</option>
                <option value="1">1</option>
                <option value="1">2</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"><span class="text-danger">*</span>单选框</label>
        <div class="col-sm-10">
            <label class="checkbox-inline i-checks"><input type="radio" name="name33_01" value="1" checked> 1</label>
            <label class="checkbox-inline i-checks"><input type="radio" name="name33_01" value="2"> 2</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"><span class="text-danger">*</span>复选框</label>
        <div class="col-sm-10">
            <label class="radio-inline i-checks"><input type="checkbox" name="name34_01[]" minlength="2" required value="1"> 1</label>
            <label class="radio-inline i-checks"><input type="checkbox" name="name34_01[]" minlength="2" required value="2"> 2</label>
            <label class="radio-inline i-checks"><input type="checkbox" name="name34_01[]" minlength="2" required value="3"> 3</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2  control-label"><span class="text-danger">*</span>文本域</label>
        <div class="col-sm-10">
            <textarea class="form-control" id="name35" name="name35" rows="5"></textarea>
        </div>
    </div>
</form>

//使用了datetimepicker及icheck组件,需要添加对应的js及css    
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
<script src="../js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChecked', function(){  //如果使用了validate验证需要用一下代码
      $(this).closest('form').validate().element(this);
});
$('#name31_date').datetimepicker();
COM_TOOLS.select2_init('name32');

多行两列DEMO

文本框

日期选择框

* 原生select

* select2组件

文本域

*单选框

1 2

自定义多选

*复选框

1 2 3

密码输入框

html
js

<form class="form-horizontal" id="t_form_02">
    <div class="form-group">
        <label class="col-sm-2 control-label">文本框</label>
        <div class="col-sm-4"><input class="form-control input-sm" type="text" name="name21" id="name21" /></div>
        <label class="col-sm-2 control-label">日期选择框</label>
        <div class="col-sm-4">
            <div class="input-group date" id="name22_date">
                <input class="form-control input-sm" type="text" name="name12" id="name22" readonly/>
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"><span class="text-danger">*</span> 原生select</label>
        <div class="col-sm-4">
            <select class="form-control input-sm" name="name23" id="name23">
                <option value="">- 请选择 -</option>
                <option value="1">1</option>
                <option value="1">2</option>
            </select>
        </div>
        <label class="col-sm-2 control-label"><span class="text-danger">*</span> select2组件</label>
        <div class="col-sm-4">
            <select class="form-control input-sm" name="name24" id="name24">
                <option value="">- 请选择 -</option>
                <option value="1">1</option>
                <option value="1">2</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">文本域</label>
        <div class="col-sm-4">
            <textarea class="form-control" id="name25" name="name25" rows="5"></textarea>
        </div>
        <label class="col-sm-2 control-label"><span class="text-danger">*</span>单选框</label>
        <div class="col-sm-4">
            <label class="checkbox-inline i-checks"><input type="radio" name="name26_01" value="1" checked> 1</label>
            <label class="checkbox-inline i-checks"><input type="radio" name="name26_01" value="2"> 2</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">自定义多选</label>
        <div class="col-sm-4">
            <div id="t_cus_mult">
                <div class="cus-mult-hide">
                    <input type="text" name="hideinp_id" id="hideinp_id" required="required"/>
                    <input type="text" name="hideinp_name" id="hideinp_name"/>
                </div>
                <div class="cus-mult-choice"></div>
                <button class="btn btn-sm btn-primary pull-right cus-mult-btn" type="button"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        <label class="col-sm-2 control-label"><span class="text-danger">*</span>复选框</label>
        <div class="col-sm-4">
            <label class="radio-inline i-checks"><input type="checkbox" name="name28_01[]" minlength="2" required value="1"> 1</label>
            <label class="radio-inline i-checks"><input type="checkbox" name="name28_01[]" minlength="2" required value="2"> 2</label>
            <label class="radio-inline i-checks"><input type="checkbox" name="name28_01[]" minlength="2" required value="3"> 3</label>
        </div>
    </div>
</form>

//使用了datetimepicker、select2、icheck组件，需要添加js和css    
<link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
<script src="../js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>

$('.i-checks').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
}).on('ifChecked', function(){  //如果使用了validate验证需要用一下代码
      $(this).closest('form').validate().element(this);
});    
    
$('#name22_date').datetimepicker();
COM_TOOLS.select2_init('name24');

var t_FN = COM_TOOLS.cus_mult_choice('t_cus_mult', function() {
    cumParentWinModal('信息渠道', '../htmldemo/iframe-demo/selectpage2.html', {
        "area": ['600px', '430px'],
        callback: {
            fn1: function(d) {
                t_FN.removeAll();
            },
            fn2: function(d) { //回显值
                t_FN.addItem(d.itemid, d.itemtext);
            }
        }
    });
}, 2, 'hideinp_id', 'hideinp_name');

多行两列（6:6）

标题标

标题标题

标题标题标

html

<div class="container-fluid">
    <form class="form-horizontal form-label-sm">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 text-right control-label ">标题标</label>
                    <div class="col-sm-10"><input type="text" placeholder="2:10" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-6">
                 <div class="form-group">
                    <label class="col-sm-2 text-right control-label ">标题标</label>
                    <div class="col-sm-10"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-3 text-right control-label ">标题标</label>
                    <div class="col-sm-9"><input type="text" placeholder="3:9" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-6">
                 <div class="form-group">
                    <label class="col-sm-3 text-right control-label ">标题标</label>
                    <div class="col-sm-9"><input type="text" class="form-control input-sm" /></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 text-right control-label">标题标题</label>
                    <div class="col-sm-8"><input type="text" placeholder="4:8" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-6">
                 <div class="form-group">
                    <label class="col-sm-4 text-right control-label">标题标题</label>
                    <div class="col-sm-8"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-5 text-right control-label">标题标题标</label>
                    <div class="col-sm-7"><input type="text" placeholder="5:7" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-6">
                 <div class="form-group">
                    <label class="col-sm-5 text-right control-label">标题标题标</label>
                    <div class="col-sm-7"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
        </div>
    </form>
</div>

多行三列（4:4:4）

标题标

标题标题

标题标题标

html

<div class="container-fluid">
    <form class="form-horizontal form-label-sm">
           <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-3 text-right control-label">标题标</label>
                    <div class="col-sm-9"><input type="text" placeholder="3:9" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-4">
                 <div class="form-group">
                    <label class="col-sm-3 text-right control-label">标题标</label>
                    <div class="col-sm-9"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-4">
                 <div class="form-group">
                    <label class="col-sm-3 text-right control-label">标题标</label>
                    <div class="col-sm-9"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 text-right control-label">标题标题</label>
                    <div class="col-sm-8"><input type="text" placeholder="4:8" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-4">
                 <div class="form-group">
                    <label class="col-sm-4 text-right control-label">标题标题</label>
                    <div class="col-sm-8"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
             <div class="col-sm-4">
                 <div class="form-group">
                    <label class="col-sm-4 text-right control-label">标题标题</label>
                    <div class="col-sm-8"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-5 text-right control-label">标题标题标</label>
                    <div class="col-sm-7"><input type="text" placeholder="5:7" class="form-control input-sm"/></div>
                </div>
            </div>
            <div class="col-sm-4">
                 <div class="form-group">
                    <label class="col-sm-5 text-right control-label">标题标题标</label>
                    <div class="col-sm-7"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
             <div class="col-sm-4">
                 <div class="form-group">
                    <label class="col-sm-5 text-right control-label">标题标题标</label>
                    <div class="col-sm-7"><input type="text" class="form-control input-sm"/></div>
                </div>
            </div>
        </div>
    </form>
</div>

小于768px显示多列

html

<div class="container-fluid">
    <form class="form-horizontal cus-form-format">
        <div class="form-group">
            <label for="" class="col-sm-2 control-label">标题</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" >
            </div>
            <label for="" class="col-sm-2 control-label">标题</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" >
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-sm-2 control-label">标题</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" >
            </div>
            <label for="" class="col-sm-2 control-label">标题</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" >
            </div>
        </div>
    </form>
</div>

flex布局

flex-demo

html

<!-- 注意：'<div class="placeholder">flex-demo</div>' 为演示demo，使用时不包含div.placeholder -->

<div class="layout-flex">
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
</div>
<div class="layout-flex">
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
</div>
<div class="layout-flex">
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
</div>
<div class="layout-flex">
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
</div>
<div class="layout-flex">
    <div><div class="placeholder">flex-demo</div></div>
    <div class="layout-flex__item"><div class="placeholder">flex-demo</div></div>
    <div><div class="placeholder">flex-demo</div></div>
</div>