Bootstrap学习笔记-----表单

Posted 2020-06-27 Leo的笔记本

水平表单效果

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素上使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

内联表单效果

有时候我们需要将表单的控件都在一行内显示，只需要在<form>元素上添加类名“form-inline”即可

表单控件样式

需要加上“form-control”,表单focus时才有bootstap样式：

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

 

 

select多行显示

<select class="multiple form-control"></select>

 

bootstrap表单控件大小

.input-lg 大

.input-sm 小

可用来控制<select><textarea><text>

<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大</label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
  </div>
  <div class="form-group">
    <label class="control-label">正常大小</label>
    <input class="form-control" type="text" placeholder="正常大小">
  </div>  
  <div class="form-group">
    <label class="control-label">控件变小</label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
  </div> 
</form> 

form>form-group>form-control

 

表单按钮

默认样式 <button class="btn"></button>

primary：<button class="btn btn-primary"></button>

info:　　<button class="btn btn-info"></button>

success:<button class="btn btn-success"></button>

warning:<button class="btn btn-warning"></button>

 danger:<button class="btn btn-danger"></button>

 inverse:<button class="btn btn-inverse"></button> 个人感觉和默认样式差不多

 

表单控件(复选框和单选按钮水平排列)

在input的父级label加上类"checkbox-inline"或"radio-inline"

<label  class="checkbox-inline">
       <input type="checkbox" value="游戏"/>游戏
</label>

<label  class="radio-inline">
       <input type="radio" value="游戏"/>游戏 
</label>

<form role="form">
    <div class="form-group">
        <label  class="checkbox-inline">
            <input type="checkbox" value="游戏"/>游戏
        </label>

 　　　　<label  class="checkbox-inline">
            <input type="checkbox" value="影视"/>影视
        </label>

</div> </form>

<form role="form">
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

 

代码样式

<code>放在中间的代码</code>