Bootstrap本次知识点
1.栅格系统
2.表单
1.栅格系统
（1）响应式网格系统随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。
（2）工作原理：
<1>行必须放置在.container（固定宽度）或者.container-fluid（100%宽度）class内，获得适当的对齐（alignment）和内边距。
<2>内容放置在列中，唯有列可以是行的直接子元素。
<3>预定义的网格类，比如.row或者.col-lg-4，可以快速于创建网格布局。
<4>列通过内边距（padding）来创建列内容之间的间隙。
（3）媒体查询
/* 超小设备（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ /* 小型设备（平板电脑，大于等于768px） */ @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } /* 中型设备（台式电脑，大于等于992px） */ @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } /* 大型设备（大台式电脑，大于等于1200px） */ @media (min-width: @screen-lg-min) { ... }AI 代码解读
（4）栅格参数
（5）四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4
</div>
....
</div>
</div>
//可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8">1-8
</div>
<div class="col-md-3 col-md-offset-1">10-12
</div>
</div>
</div>
//可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="col-md-8">1-8
</div>
<div class="col-md-4">9-12
</div>
</div>
<div class="col-md-3"> 10-12
</div>
</div>
</div>
//可以把两个列交换位置，push 向右移动（推），pull 向左移动（拉）
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">8
</div>
<div class="col-md-4 col-md-pull-8">4
</div>
</div>
</div>
AI 代码解读
2.表单
（1）垂直或基本表单
<div class="container">
<form action="">
<div class="form-group">
<label for="textname" class="control-label col-md-4">
姓名：
</label>
<div class="col-md-6">
<input type="text" class="form-control" id="textname" placeholder="请输入姓名"/>
</div>
<div class="col-md-2">
<label for="" class="form-control-static">help
</label>
</div>
</div>
<div class="form-group">
<label for="textpass" class="control-label col-md-4">
密码：
</label>
<div class="col-md-6">
<input type="password" class="form-control" id="textpass" placeholder="请输入密码"/>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-default" type="submit">提交
</button>
<button class="btn btn-default" type="reset">重置
</button>
</div>
</div>
</form>
</div>
AI 代码解读
（2）内联表单
//让表单左对齐浮动，并表现为 inline-block 内联块结构
<form class="form-inline">
//注：当小于 768px，会恢复独占样式
AI 代码解读
（3）水平表单
让表单内的元素保持水平排列。
<div class="container">
<form action="">
<div class=" checkbox-inline">
<label for="">
<input type="checkbox"/>音乐
</label>
</div>
<div class=" checkbox-inline">
<label for="">
<input type="checkbox"/>爬山
</label>
</div>
<div class=" checkbox-inline">
<label for="">
<input type="checkbox"/>唱歌
</label>
</div>
<div class="radio-inline">
<label for="rad-n">
<input type="radio" id="rad-n" value="男" name="sex"/>男
</label>
</div>
<div class="radio-inline">
<label for="rad-v">
<input type="radio" id="rad-v" value="女" name="sex" disabled/>女
</label>
</div>
</form>
</div>
AI 代码解读
（4）表单组合
//前后增加片段
<div class="input-group">
<div class="input-group-addon">￥
</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00
</div>
</div>
AI 代码解读
（5）输入框、文本域
原生的HTML的input类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、 search、tel和color。
<input type="text" class="form-control" placeholder="文本输入">
<textarea class="form-control" rows="3">
</textarea>
AI 代码解读
（6）复选框（ Checkbox）和单选框（Radio）
<div class="checkbox">
<label>
<input type="checkbox" value="">选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value=
"option1"
checked> 选项 1
</label>
</div>
AI 代码解读
内联的复选框和单选框
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="radio-inline">
<input type="radio" id="optionsRadiosinline" value="option1"> 选项 1
</label>
AI 代码解读
（7）选择框（multiple）多行显示
<select class="form-control" multiple>
<option>1
</option>
<option>2
</option>
<option>3
</option>
<option>4
</option>
<option>5
</option>
</select>
AI 代码解读
（8）静态控件 .form-control-static
<form action="">
<div class="form-group has-error">
<label for="textname1" class="control-label col-md-2">
姓名：
</label>
<div class="col-md-6">
<input type="text" class="form-control" id="textname1" placeholder="请输入姓名"/>
</div>
<div class="col-md-4">
<label for="" class="form-control-static">help
</label>
</div>
</div>
<div class="form-group has-success">
<label for="textpass2" class="control-label col-md-2">
密码：
</label>
<div class="col-md-6">
<input type="password" class="form-control" id="textpass2" placeholder="请输入密码"/>
</div>
</div>
<div class="form-group has-warning">
<label for="textname1" class="control-label col-md-2">
姓名：
</label>
<div class="col-md-6">
<input type="text" class="form-control input-sm" id="textname2" placeholder="请输入姓名"/>
</div>
<div class="col-md-10">
<label for="" class="form-control-static">help
</label>
</div>
</div>
</form>
AI 代码解读
（9）表单控件状态
<1>输入框焦点。
<2>当输入框input接收到： focus时，输入框的轮廓会被移除，同时应用box-shadow。
<3>禁用的输入框：input。
<4> 如果你想要一个禁用的输入框input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
<5>禁用的字段集fieldset。
<6>对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件。
<7>校验状态。
<8>.has-warning、.has-error或.has-success类到这些控件的父元素即可。
<9>任何包含在此元素内的.control-label、.form-control和.help-block元素都将接受这些校验状态的样式。
（10）表单帮助文本
<form role="form">
<input class="form-control" type="text" placeholder="">
<span class="help-block">一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。
</span>
</form>
AI 代码解读
（11）控件尺寸
.input-lg和col-lg-*来设置表单的高度和宽度。
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder="input-lg">
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder="col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder="col-lg-4">
</div>
</div>
AI 代码解读
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/80408336
本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！
