深入理解bootstrap 学习笔记-表单元素

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="体育" id="inlineCheckbox1"> 
    体育 
</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" id="Text1">    
</div> 

     添加图标

       .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" id="inputSuccess2" />
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

　

控件大小

　　控件高度：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）关闭图标

/*两种实现方式，只有样式，无逻辑效果*/ /* ×是 × */
<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:before,
.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   浏览器可见，显示器隐藏

zz