1. bootstrap在定义input元素样式时，都指定了type类型，所以必须声明type类型

2. select元素：多行选择设置mulitiple属性为multiple 插件：bootstrap-select ，Bootstrap Multiselect

3. textarea元素：设置 .form-control 时，cols不再起作用，因为.formcontrol样式的表单控件都设置了100%的宽度（或auto）

4.checkbox和radio元素：这两个元素需要和label文字进行搭配使用，所以会产生不对齐情况，所以应遵循下面的使用方式

<div class="radio">    
    <label>
       <input type="radio" name="optionsRadios" value="female" checked>
        label文字
    </label> 
</div> 
<div class="radio">    
    <label>
        <input type="radio" name="optionsRadios" value="male">
         label文字
    </label> 
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        label文字
    </label> 
</div>

　使用.radio,.checkbox样式，

.radio, 
.checkbox {             /* 让单选框和复选框都能左右和上下居中 */      
    display: block;    
    min-height: 20px;  
    padding-left: 20px;  
    margin-top: 10px;  
    margin-bottom: 10px; 
}
 .radio label,
 .checkbox label {   /* 内部有label的话,内联显示 */  
    display: inline; 
    font-weight: normal;  
    cursor: pointer; 
}

另有.checkbox-inline 和 .radio-inline

<label class="checkbox-inline">    
    <input type="checkbox" value="体育" > 
    体育 
</label>

.radio-inline,
 .checkbox-inline {  /* 在其他元素上设置*-inline样式的话,也可以让多个控件水平在一行中显示 */ 
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;  /* 垂直居中 */
    cursor: pointer;
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px;  /* 每个选项间距10px */ 
}

控件状态

1.焦点状态 .form-control:focus

focus上删除默认的outline 样式，重新应用一个新的box-shadow样式，从而实现焦点状态下，input出现柔和的阴影边框（注意，该效果必须使用.formcontrol样式才行）

2.禁用状态

只需要在禁用元素上使用 disabled属性即可,只有带.form-control样式的控件才会更改背景色

3.验证提示状态

.has-warning警告（黄色）、.has-error错误（红色）、.has-success成功（绿色），只是对文字、边框和阴影设置的颜色不同

<div class="form-group has-warning">        
    <label class="control-label" for="inputWarning">输入长度不够！</label>   
    <input type="text" class="form-control" >    
</div>

深入理解bootstrap 学习笔记-表单元素
按钮
图像
辅助样式
响应式设计

添加图标

.has-feedback { position: relative; /* 相对定位,用于设置input元素的父容器的定位方式*/}

.has-feedback .form-control { padding-right: 42.5px; /* 右内边距的设置,以便可以显示小图标*/ }

.has-feedback .form-control-feedback { 绝对定位，大小等 }

.has-success .form-control-feedback { color }

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control"  />
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

　深入理解bootstrap 学习笔记-表单元素
按钮
图像
辅助样式
响应式设计

控件大小

　　控件高度：input-lg ，不设置，input-sm ；设置不同的padding、font-size、border-radius ，同样适用于select和 textarea元素

控件宽度： col-*-*

其它

.help-block {  
    display: block;  
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
 }

<!-- 标准button -->    
<button type="button" class="btn btn-default">Default</button>    
<!-- 提供视觉加重，表示在一组button中，该按钮是最主要的button -->    
<button type="button" class="btn btn-primary">Primary</button>    
<!-- 表示成功或正使用的button -->    
<button type="button" class="btn btn-success">Success</button>    
<!-- 表示提示信息的button -->    
<button type="button" class="btn btn-info">Info</button>    
<!-- 表示需要进行某种行为的button -->    
<button type="button" class="btn btn-warning">Warning</button>   
<!-- 表示危险或错误行为的button -->   
<button type="button" class="btn btn-danger">Danger</button>    
<!-- 让button的行为看起来像链接一样 -->    
<button type="button" class="btn btn-link">Link</button>

按钮高度：.btn-lg, 不设置, .btn-sm, .btn-xs；主要对padding、font-size、lineheight和border-radius设置

按钮宽度： 有文本内容决定，或者设置col-*-*

.btn-block{ display: block; 100%; ... }

.btn等元素也支持在a 和 input type=button上使用

强烈建议不管在任何情况下，都使用button元素，以免出现跨浏览器兼容性问题，不适用 input type=button

按钮状态：活动状态：active 通过 .btn:active, .btn.active两种方式实现，底色更深，边框颜色更深，内置阴影

禁用状态：两种禁用：1.添加disabled属性 2.添加disabled类，不禁止按钮默认行为，需通过js阻止；可以.disabled可以应用的<a>,阻止不了默认行为

图像

/* 响应式设计 */

.img-responsive ： { display: block; max- 100%; /*填充父元素*/ height: auto; }

/* 显示样式 */

圆角：.img-rounded ：{ border：radius：6px; }

圆形：.img-circle : { border-radius: 50%; }

缩略图：.img-thumbnail ：{ padding: 4px; background-color: #fff; .... }

需要额外样式或限制父元素大小控制图片大小

辅助样式

　　Bootstrap在布局方面还提供了一些细小的辅助样式，用于文字颜色及背景色设置、显示关闭图标、向左浮动、向右浮动、清除浮动、隐藏、显示等功能。

文本样式及背景样式

1.文本颜色样式

<p class="text-muted"> 柔和灰 </p> 
<p class="text-primary"> 主要蓝 </p> 
<p class="text-success"> 成功绿 </p> 
<p class="text-info"> 信息蓝 </p> 
<p class="text-warning"> 警告黄 </p> 
<p class="text-danger"> 危险红 </p>


.text-primary {  color: #428bca;}
.text-primary:hover {  color: #3071a9;}

2.文本背景颜色样式

除muted外，与字体颜色一一对应
主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄 （bg-warning）、危险红（bg-danger）

3.辅助图标

　（1）关闭图标

/*两种实现方式，只有样式，无逻辑效果*/ /* ×是 &times; */
<button type="button" class="close">×</button>
<a class="close">×</a>

(2)向下箭头 .caret 用边框实现

(3)内容浮动对于内容浮动，一般会有3种需求（左浮动、右浮动、居中对齐），另外还有一种清除浮动需求。/*向右浮动*/ .pull-right { float: right !important; }

/*向左浮动*/
.pull-left  {  float: left !important;  }

/*居中*/
.center-block {  
    display: block;  
    margin-right: auto；
    margin-left: auto; 
}

/*清楚浮动*/.clearfix:after {

    display: table;  
    content: " ";
}

.clearfix:after { clear: both; }

（4）隐藏与显示

 .show {  display: block !important;  /*显示内容*/}
 .invisible {  visibility: hidden;   /*隐藏可视性*/}/*占用文档流*/
 .hidden {  
    display: none !important;        /*隐藏内容*/  
    visibility: hidden !important;   /*隐藏可视性*/ 
}

如果一个元素对所有设备都要隐藏，而只对盲人可用的话，可以使用特殊的sr-only样式。

若想让一个元素的文本内容不显示，而
只显示背景效果（也就是类似透明的效果）的话，可以使用texthide样式。其实现原理是隐藏文本，设置背景色透明

.text-hide {  
    font: 0/0 a; /* 等价于 font-size: 0px;line-height: 0;font-family: a;*/  
    color: transparent;  
    text-shadow: none;  
    background-color: transparent;/*将页面元素所包含的文本内容替换为透明色,以显示背景图片 */  
    border: 0; 
}

响应式设计

　.visible-开头的样式表示仅在某尺寸时显示，其他都隐藏； .visible-xs,.visible-sm,.visible-md,.visible-lg

.hidden样式则表示仅在某尺寸时隐藏，其他都显示。 .hidden-xs,.hidden-sm,.hidden-md,.hidden-lg

Bootstrap利用了@media print语法，提供了分别对浏览器和打印机进行隐藏和显示的设置，样式分别为：.visible-print和.hidden-print

　　.visible-print 浏览器隐藏，显示器可见源码在bootstrap.css最后

.hidden-print 浏览器可见，显示器隐藏

深入理解bootstrap 学习笔记-表单元素 按钮 图像 辅助样式 响应式设计

控件状态

控件大小

其它

图像

辅助样式

文本样式及背景样式

响应式设计

相关推荐

深入理解bootstrap 学习笔记-表单元素按钮图像辅助样式响应式设计