bootstrap(2)关于表单

 

一：表单控件：

对于表单控件，例如：<input><textarea>  <select>通过在这上面添加类名  .form-control来设置全局样式，

例如：<input class="form-control">来控制全局样式，观察源码如下：

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

　　由上面代码可知，当我们添加控件类的时候,实际上添加了以下属性；

  • 宽度为100%，
  • 浅灰色边框
  • 圆角为4px
  • 设置了阴影效果，当点击控件的时候效果会发生变化

将label元素和前面提到的表单控件包裹在form-group中可以实现更好的排列：

样式如下：

<form>
   <div  class="form-group">
          <label for="labelname">邮件地址</label>
          <input type="email"   class="form-control" placeaword="email">
    </div>
    <div class="form-group">
         <label  for="password">密码<label>
         <input type="password" class="form-control  placeword=“password”> 
    </div>   
</form>

效果如下：

对form不添加任何样式的情况

（2），

>使用 类名 .form-inline来实现输入框的水平排列，这个类实现使控件显示display:inline-block

<form class="form-inline">
   <div  class="form-group">
          <label for="labelname">邮件地址</label>
          <input type="email"   class="form-control" placeaword="email">
    </div>
    <div class="form-group">
         <label  for="password">密码<label>
         <input type="password" class="form-control  placeword=“password”> 
    </div>   
</form>

　　最终显示邮件输入框和密码输入框在水平 位置排列如下表所示：

>在不给form添加任何样式的情况下，默认是上面第一张图片的样式，然而我们实际上是要求下面这种的形式：

要达到上面的这种效果，我们要对form标签添加：

<form  class="form-horizontal"></form>

代码如下：

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control"  placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" placeholder="Password">
        </div>
    </div>
</form>　　

这个是结合bootstrap中的栅格系统来实现的

(3)注意;在表单控件中，label标签是必不可少的，假如我们想要表单标签隐藏，我们要给label标签添加类

<label  class="src-only"></label>

效果如下：

(4)输入框中还支持所有的html5类型的输入控件

例如：

text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

实现多种格式，主要是在input标签内将type值进行改变：

<input   type="text" class="form-control"  placehoder="Text input">

(5)对于文本域，textarea;可以改变rows属性来改变文本框的大小：

<textarea class="form-control"     rows="3"></textarea>

(6)支持禁止按钮：

代码如下：

<form>
     <div class="checkbox">
          <label>
              <input type="checkbox" value="">
             Option one is this and that—be sure to include why it's great
         </label>
    </div>
    <div class="checkbox disabled">
        <label>
           <input type="checkbox" value="" disabled>
           Option two is disabled
       </label>
    </div>
</form>

<div  class="  checkbox  disabled">

 //对复选框执行禁用按钮

</div>

支持禁止按钮是在表单控件的div元素上添加的：

效果如下：

相比于正常的复选框，被禁用的复选框颜色变浅，且当鼠标移动到这上面的时候会出现禁用标志

（7）

在label标签上添加checkbox-inline或者 radio-inline,将这些控件排列为一行

代码如下：

<label  class="checkbox-inline">
       <input type="checkbox" value="option1">1
</label>
<label class="checkbox-inline">
      <input type="checbox" value="option2">2
</label>

　　效果图：

（8）

假如我们想要禁用某一区域内的全部控件，我们可以通过将这些控件添到fieldset标签内

而我们只要在fieldset上添加disabled属性，就可以将fieldset内的所有控件全部禁用

（9）

为输入框设置 readonly属性可以禁止用户修改输入框中的内容，这个与禁用不同的唯一区别在于鼠标移动到这上面的时候不会出现禁用状态

（10）

校验状态：
在控件的父元素上添加  .has-warning  .has-error   .has-success

在包含在此元素的任何有以下类       .control-label      .form-control   .help-block  元素都将接受校验状态的样式：

代码如下：

<div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
        <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
       <label class="control-label" for="inputWarning1">Input with warning</label>
       <input type="text" class="form-control" id="inputWarning1">
</div>　　

效果如下：

（11）

控件尺寸：
1》》我们通过对于<input>标签或者<selected>标签添加  .input-lg为控件设置高度：

<input  class="form-control  input-lg">     :放大后的input类

<input  class="form-control  input-sm">    :缩小后的input控件

显示效果：

小的图标

2》》我们快速设置大小，通过为表单控件的父元素上 （class为form-group）设置class为 form-group-lg 或者 form-group-sm类，为form-horizontal包裹的label元素和表单控件设置尺寸：

代码如下：

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

　　

 

 

二：列表：

下拉列表通过在 <select></select>中添加class为  form-control来实现的：

代码如下：

<select  class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
<select>　　

以第一个为默认显示项

 当我们向select 标签内添加 multiple 属性的时候，默认会显示所有的选项

<select  multiple class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
</select>　　

 显示图像如下：

全部显示

 三：按钮元素

(1)基础按钮类：

我们通过为<a>  <button>  <input>添加按钮类，可以使用Bootstrap提供的样式

例如：

<a  class="btn btn-default"   role="button">Link</a>

对于链接a要转化为按钮要加上role类的才可以

<button class="btn btn-default" type="submit"> </button>

（2）预定义样式：

类名（class="btn  [*]"） 含义
btn-default(class="btn btn-default") 默认样式
btn-ptimary 首选项
btn-success 成功
btn-info 一般信息
btn-warning 警告

btn-danger

 危险

btn-link

 链接

 

效果如下：

我们可以看到，无非就是根据不同的风格显示不同的颜色而已

（3）关于表格大小：

我们在button元素中的class类中添加 btn-lg  btn-sm  或者  btn-xs可以获得不同尺寸的按钮

<button   type="button"   class="btn  btn-lg">large button</button>

btn-lg 大按钮
无 默认按钮
btn-sm 小按钮
btn-xs 超小按钮

（３）禁用按钮：

通过向＜button＞元素添加 disabled属性，可以实现禁用效果

<button type="button"  class="btn btn-lg btn-primary"  disabled="disabled">

或者：

<button type="button"  class="btn btn-lg btn-primary  disabled"></button>

三：图片

我们通过

1》》给<img>元素添加class为  img-responsive类可以让图片支持响应式布局

添加了这个类的元素会使得图片可以在父元素中得到缩放

代码如下：下面是实现响应式的原理：

.img-responsive{
       max-width:100%;
       height:auto;
      display:block;
}　　

2》》使用center-block来使img元素居中效果：

3》》通过添加特定的类实现图片形状的改变：

<img src=" " class="img-rounded">

效果如下：

  

类似还有class="img-circle"    class="img-thumbnail"

分别显示为圆形，和带有边框的正方形：

对于：img-thumbnail:
源码中是这样解释的：

display:inline-block;
max-width:100%;
height:auto;
padding:4px;
line-height:1.42857143;
background-color:#fff;
border:1px solid #ddd;
border-radius:4px;　　

对于 img-thumail 我们可以看到存在一个4px的padding,和1px的border

 

posted @ 2017-05-10 22:40  张宁宁  阅读(630)  评论(0)  编辑  收藏  举报