正文
Bootstrap一周学习小结
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、响应式布局
1、bootstrap是自适应mobile和web，会根据分辨率大小而自适应的一个代码库，Bootstrap定义了很多js和css的效果，把这些效果集成为多个API，供在使用时调用。
2、在用bootstrap做基本的页面也要在head标签内引用bootstrap的库，bootstrap的js库是以jQuery为核心的
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-origin/css/bootstrap.min.css">
<script type="application/javascript" src="bootstrap-origin/jquery-2.1.1.min.js"></script>
<script type="application/javascript" src="bootstrap-origin/js/bootstrap.min.js"></script>
二、框架解析
1、移除body的margin，设置body的背景颜色为白色。
2、最重要的一方面是引入了栅格系统，其中栅格系统实现原理如下：
一行（row）必须在.container中
使用行在水平方向创建列组
具体内容放在列内
内置像素.row和.col-xs-4占4列
三、排版基础
排版前的基础：
HTML5文档类型
移动设备优先
响应式图片 class="img-responsive" 浏览器变，图片像素跟着变
排版与链接：默认改变<a>标签的样式
标题：
h1--h6: 36px-12px 每次递减6px
.h1--.h6:36px-12px 每次递减6px 没有margin-top和margin-bottom
<small>h1-h3占60% h4-h6占60%
页面主题：
body：字体和背景的改变
p全局样式：给p强调，用class=lead
对齐方式：右对齐 class=lead text-right/center/left
强调文本：
<em>
缩略语：
<abbr>鼠标移动到abbr会有一个title的提示 class="initialism" 弹出的提示的字体大小会变成原字体的90%，字母会变成大写的
地址元素：
<address>地址标签 margin-bottom变成20px font-style变成normal line-heigh变成1.42
引用：
<blockquote>
四、列表与代码
列表：
无序列表：
<ul>
<ol>
</ol>
</ul>
有序列表：
<ol>
<ul>
</ul>
</ol>
这两个的margin-bottom有10个像素
取点列表： 给li标签的父级加class
class=list-unstyled
内联列表：
给li标签的父级加class
class=list-inline
dl列表：
class=dl-horizontal
代码：
代码：
<code> 显示可以是代码高亮显示
输入：
<kbd> 当用户输入按键时可以用kbd来高亮
程序：
<pre> 显示可以是代码形式
变量：
<var> 显示是变量形式
程序结果：
<samp> 显示是特殊显示
五、表格样式
带条纹的样式：
<table class="table" table-striped>
带边框的表格：
<table class="table" table-border>
带边框的表格、
带条纹的样式
：
<table class="table" table-striped table-border>
鼠标悬停效果：
<table class="table-hover">
紧促表格：
<table class="table-condensed">
响应式布局：
<table class="table-responsive">
六、表单样式
基本表单：只是对margin的一些微调
<div class="form-group"> 设置组件之间的间距为15px margin-bottom:15px
<label></label>
<input...class=form-control> 占满容器的100%
</div>
<div class="checkbox">
内联表单：
<form class="form-inline"> //水平排列
<label class="sr-only">//隐藏<label>//前的文字效果
<form method=post/get> //get方式提交的数据量有限制，post方式除了普通提交
横向表单：
<form class="form-horizontal" role=from> //
<div class="form-group">
<label class="col-sm-2" control-label> 用户名</label>//control-label设置为响应式布局
<div class="col-sm-8">
<input type=text class="form-control">
</div>
</div>
</form>
文本域：
<textarea></textarea>
下拉框:
<div class="col-sm-4">
<select name=name class="form-control" multiple>
multiple多选
<option value=1><option>
<option value=1><option>
<option value=1><option>
</select>
<div>
选择框:
<div>
<label><input type=radio name=sex value=M /> 男</label>
<div>
<form>
<div class="checkbox">
如果class=checkbox-inline 水平排列
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
</form>
checkbox与radio的区别：
1、单个RadioButton在选中后，通过点击无法变为未选中
单个CheckBox在选中后，通过点击可以变为未选中
2、一组RadioButton，只能同时选中一个
一组CheckBox，能同时选中多个
3、RadioButton在大部分UI框架中默认都以圆形表示
CheckBox在大部分UI框架中默认都以矩形表示
静态控件：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" control-label>email</label>
<div class="col-sm-10">
<p class=
form-control-static
>1051931999@qq.com<p>form-control-static 显示在文本框中
</div>
</div>
</form>
焦点：
<input type=tel autofocus >
禁用：
<input
disabled
>
只读状态：
<input class="form-conrol"
readonly
>
校验状态：
<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>
如何在input加组件：
<div class="form-group" hasfeedback>
<label>用户名：</label>
<input type=text class="form-control" name=name placeholder=hello>
<span class=要加的图片组件 form-control-feedback aria-hidden=true></span>
</div>
<form class="form-horizontal">
<div class="form-group" form-group-lg/sm>
<label class="col-sm-2" control-label for=formGroupInputLarge>large</label>
</div>
</from>
辅助文本：
<span id=helpBlock class="help-block" ></span>
七、折叠的基本用法
声明式触发
<div class="container">
<button class="btn btn-danger" data toggle="collapse" data-target="#shows">折叠</button>
<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>
</div>
八、总结
以上只是我学习笔记的一部分，并没有完全写完。
学习bootstrap对我来说最重要的一点就是进一步熟悉了HTML+CSS的用法，进一步熟悉了标签的基础用法， 夯实基础。建议大家读一下bootstrap的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。
排版前的基础：
HTML5文档类型
移动设备优先
响应式图片 class="img-responsive" 浏览器变，图片像素跟着变
排版与链接：默认改变<a>标签的样式
标题：
h1--h6: 36px-12px 每次递减6px
.h1--.h6:36px-12px 每次递减6px 没有margin-top和margin-bottom
<small>h1-h3占60% h4-h6占60%
页面主题：
body：字体和背景的改变
p全局样式：给p强调，用class=lead
对齐方式：右对齐 class=lead text-right/center/left
强调文本：
<em>
缩略语：
<abbr>鼠标移动到abbr会有一个title的提示 class="initialism" 弹出的提示的字体大小会变成原字体的90%，字母会变成大写的
地址元素：
<address>地址标签 margin-bottom变成20px font-style变成normal line-heigh变成1.42
引用：
<blockquote>
四、列表与代码
列表：
无序列表：
<ul>
<ol>
</ol>
</ul>
有序列表：
<ol>
<ul>
</ul>
</ol>
这两个的margin-bottom有10个像素
取点列表： 给li标签的父级加class
class=list-unstyled
内联列表：
给li标签的父级加class
class=list-inline
dl列表：
class=dl-horizontal
代码：
代码：
<code> 显示可以是代码高亮显示
输入：
<kbd> 当用户输入按键时可以用kbd来高亮
程序：
<pre> 显示可以是代码形式
变量：
<var> 显示是变量形式
程序结果：
<samp> 显示是特殊显示
五、表格样式
带条纹的样式：
<table class="table" table-striped>
带边框的表格：
<table class="table" table-border>
带边框的表格、
带条纹的样式
：
<table class="table" table-striped table-border>
鼠标悬停效果：
<table class="table-hover">
紧促表格：
<table class="table-condensed">
响应式布局：
<table class="table-responsive">
六、表单样式
基本表单：只是对margin的一些微调
<div class="form-group"> 设置组件之间的间距为15px margin-bottom:15px
<label></label>
<input...class=form-control> 占满容器的100%
</div>
<div class="checkbox">
内联表单：
<form class="form-inline"> //水平排列
<label class="sr-only">//隐藏<label>//前的文字效果
<form method=post/get> //get方式提交的数据量有限制，post方式除了普通提交
横向表单：
<form class="form-horizontal" role=from> //
<div class="form-group">
<label class="col-sm-2" control-label> 用户名</label>//control-label设置为响应式布局
<div class="col-sm-8">
<input type=text class="form-control">
</div>
</div>
</form>
文本域：
<textarea></textarea>
下拉框:
<div class="col-sm-4">
<select name=name class="form-control" multiple>
multiple多选
<option value=1><option>
<option value=1><option>
<option value=1><option>
</select>
<div>
选择框:
<div>
<label><input type=radio name=sex value=M /> 男</label>
<div>
<form>
<div class="checkbox">
如果class=checkbox-inline 水平排列
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
</form>
checkbox与radio的区别：
1、单个RadioButton在选中后，通过点击无法变为未选中
单个CheckBox在选中后，通过点击可以变为未选中
2、一组RadioButton，只能同时选中一个
一组CheckBox，能同时选中多个
3、RadioButton在大部分UI框架中默认都以圆形表示
CheckBox在大部分UI框架中默认都以矩形表示
静态控件：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" control-label>email</label>
<div class="col-sm-10">
<p class=
form-control-static
>1051931999@qq.com<p>form-control-static 显示在文本框中
</div>
</div>
</form>
焦点：
<input type=tel autofocus >
禁用：
<input
disabled
>
只读状态：
<input class="form-conrol"
readonly
>
校验状态：
<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>
如何在input加组件：
<div class="form-group" hasfeedback>
<label>用户名：</label>
<input type=text class="form-control" name=name placeholder=hello>
<span class=要加的图片组件 form-control-feedback aria-hidden=true></span>
</div>
<form class="form-horizontal">
<div class="form-group" form-group-lg/sm>
<label class="col-sm-2" control-label for=formGroupInputLarge>large</label>
</div>
</from>
辅助文本：
<span id=helpBlock class="help-block" ></span>
七、折叠的基本用法
声明式触发
<div class="container">
<button class="btn btn-danger" data toggle="collapse" data-target="#shows">折叠</button>
<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>
</div>
八、总结
以上只是我学习笔记的一部分，并没有完全写完。
学习bootstrap对我来说最重要的一点就是进一步熟悉了HTML+CSS的用法，进一步熟悉了标签的基础用法， 夯实基础。建议大家读一下bootstrap的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。
列表：
无序列表：
<ul>
<ol>
</ol>
</ul>
有序列表：
<ol>
<ul>
</ul>
</ol>
这两个的margin-bottom有10个像素
取点列表： 给li标签的父级加class
class=list-unstyled
内联列表：
给li标签的父级加class
class=list-inline
dl列表：
class=dl-horizontal
代码：
代码：
<code> 显示可以是代码高亮显示
输入：
<kbd> 当用户输入按键时可以用kbd来高亮
程序：
<pre> 显示可以是代码形式
变量：
<var> 显示是变量形式
程序结果：
<samp> 显示是特殊显示
五、表格样式
带条纹的样式：
<table class="table" table-striped>
带边框的表格：
<table class="table" table-border>
带边框的表格、
带条纹的样式
：
<table class="table" table-striped table-border>
鼠标悬停效果：
<table class="table-hover">
紧促表格：
<table class="table-condensed">
响应式布局：
<table class="table-responsive">
六、表单样式
基本表单：只是对margin的一些微调
<div class="form-group"> 设置组件之间的间距为15px margin-bottom:15px
<label></label>
<input...class=form-control> 占满容器的100%
</div>
<div class="checkbox">
内联表单：
<form class="form-inline"> //水平排列
<label class="sr-only">//隐藏<label>//前的文字效果
<form method=post/get> //get方式提交的数据量有限制，post方式除了普通提交
横向表单：
<form class="form-horizontal" role=from> //
<div class="form-group">
<label class="col-sm-2" control-label> 用户名</label>//control-label设置为响应式布局
<div class="col-sm-8">
<input type=text class="form-control">
</div>
</div>
</form>
文本域：
<textarea></textarea>
下拉框:
<div class="col-sm-4">
<select name=name class="form-control" multiple>
multiple多选
<option value=1><option>
<option value=1><option>
<option value=1><option>
</select>
<div>
选择框:
<div>
<label><input type=radio name=sex value=M /> 男</label>
<div>
<form>
<div class="checkbox">
如果class=checkbox-inline 水平排列
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
</form>
checkbox与radio的区别：
1、单个RadioButton在选中后，通过点击无法变为未选中
单个CheckBox在选中后，通过点击可以变为未选中
2、一组RadioButton，只能同时选中一个
一组CheckBox，能同时选中多个
3、RadioButton在大部分UI框架中默认都以圆形表示
CheckBox在大部分UI框架中默认都以矩形表示
静态控件：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" control-label>email</label>
<div class="col-sm-10">
<p class=
form-control-static
>1051931999@qq.com<p>form-control-static 显示在文本框中
</div>
</div>
</form>
焦点：
<input type=tel autofocus >
禁用：
<input
disabled
>
只读状态：
<input class="form-conrol"
readonly
>
校验状态：
<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>
如何在input加组件：
<div class="form-group" hasfeedback>
<label>用户名：</label>
<input type=text class="form-control" name=name placeholder=hello>
<span class=要加的图片组件 form-control-feedback aria-hidden=true></span>
</div>
<form class="form-horizontal">
<div class="form-group" form-group-lg/sm>
<label class="col-sm-2" control-label for=formGroupInputLarge>large</label>
</div>
</from>
辅助文本：
<span id=helpBlock class="help-block" ></span>
七、折叠的基本用法
声明式触发
<div class="container">
<button class="btn btn-danger" data toggle="collapse" data-target="#shows">折叠</button>
<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>
</div>
八、总结
以上只是我学习笔记的一部分，并没有完全写完。
学习bootstrap对我来说最重要的一点就是进一步熟悉了HTML+CSS的用法，进一步熟悉了标签的基础用法， 夯实基础。建议大家读一下bootstrap的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。
带条纹的样式：
<table class="table" table-striped>
带边框的表格：
<table class="table" table-border>
带边框的表格、
带条纹的样式
：
<table class="table" table-striped table-border>
鼠标悬停效果：
<table class="table-hover">
紧促表格：
<table class="table-condensed">
响应式布局：
<table class="table-responsive">
六、表单样式
基本表单：只是对margin的一些微调
<div class="form-group"> 设置组件之间的间距为15px margin-bottom:15px
<label></label>
<input...class=form-control> 占满容器的100%
</div>
<div class="checkbox">
内联表单：
<form class="form-inline"> //水平排列
<label class="sr-only">//隐藏<label>//前的文字效果
<form method=post/get> //get方式提交的数据量有限制，post方式除了普通提交
横向表单：
<form class="form-horizontal" role=from> //
<div class="form-group">
<label class="col-sm-2" control-label> 用户名</label>//control-label设置为响应式布局
<div class="col-sm-8">
<input type=text class="form-control">
</div>
</div>
</form>
文本域：
<textarea></textarea>
下拉框:
<div class="col-sm-4">
<select name=name class="form-control" multiple>
multiple多选
<option value=1><option>
<option value=1><option>
<option value=1><option>
</select>
<div>
选择框:
<div>
<label><input type=radio name=sex value=M /> 男</label>
<div>
<form>
<div class="checkbox">
如果class=checkbox-inline 水平排列
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
</form>
checkbox与radio的区别：
1、单个RadioButton在选中后，通过点击无法变为未选中
单个CheckBox在选中后，通过点击可以变为未选中
2、一组RadioButton，只能同时选中一个
一组CheckBox，能同时选中多个
3、RadioButton在大部分UI框架中默认都以圆形表示
CheckBox在大部分UI框架中默认都以矩形表示
静态控件：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" control-label>email</label>
<div class="col-sm-10">
<p class=
form-control-static
>1051931999@qq.com<p>form-control-static 显示在文本框中
</div>
</div>
</form>
焦点：
<input type=tel autofocus >
禁用：
<input
disabled
>
只读状态：
<input class="form-conrol"
readonly
>
校验状态：
<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>
如何在input加组件：
<div class="form-group" hasfeedback>
<label>用户名：</label>
<input type=text class="form-control" name=name placeholder=hello>
<span class=要加的图片组件 form-control-feedback aria-hidden=true></span>
</div>
<form class="form-horizontal">
<div class="form-group" form-group-lg/sm>
<label class="col-sm-2" control-label for=formGroupInputLarge>large</label>
</div>
</from>
辅助文本：
<span id=helpBlock class="help-block" ></span>
七、折叠的基本用法
声明式触发
<div class="container">
<button class="btn btn-danger" data toggle="collapse" data-target="#shows">折叠</button>
<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>
</div>
八、总结
以上只是我学习笔记的一部分，并没有完全写完。
学习bootstrap对我来说最重要的一点就是进一步熟悉了HTML+CSS的用法，进一步熟悉了标签的基础用法， 夯实基础。建议大家读一下bootstrap的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。
基本表单：只是对margin的一些微调
<div class="form-group"> 设置组件之间的间距为15px margin-bottom:15px
<label></label>
<input...class=form-control> 占满容器的100%
</div>
<div class="checkbox">
内联表单：
<form class="form-inline"> //水平排列
<label class="sr-only">//隐藏<label>//前的文字效果
<form method=post/get> //get方式提交的数据量有限制，post方式除了普通提交
横向表单：
<form class="form-horizontal" role=from> //
<div class="form-group">
<label class="col-sm-2" control-label> 用户名</label>//control-label设置为响应式布局
<div class="col-sm-8">
<input type=text class="form-control">
</div>
</div>
</form>
文本域：
<textarea></textarea>
下拉框:
<div class="col-sm-4">
<select name=name class="form-control" multiple>
multiple多选
<option value=1><option>
<option value=1><option>
<option value=1><option>
</select>
<div>
选择框:
<div>
<label><input type=radio name=sex value=M /> 男</label>
<div>
<form>
<div class="checkbox">
如果class=checkbox-inline 水平排列
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
<div class="checkbox">
<label><input type=checkbox name=sex value=M /> 男</label>
<div>
</form>
checkbox与radio的区别：
1、单个RadioButton在选中后，通过点击无法变为未选中
单个CheckBox在选中后，通过点击可以变为未选中
2、一组RadioButton，只能同时选中一个
一组CheckBox，能同时选中多个
3、RadioButton在大部分UI框架中默认都以圆形表示
CheckBox在大部分UI框架中默认都以矩形表示
静态控件：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" control-label>email</label>
<div class="col-sm-10">
<p class=
form-control-static
>1051931999@qq.com<p>form-control-static 显示在文本框中
</div>
</div>
</form>
焦点：
<input type=tel autofocus >
禁用：
<input
disabled
>
只读状态：
<input class="form-conrol"
readonly
>
校验状态：
<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>
如何在input加组件：
<div class="form-group" hasfeedback>
<label>用户名：</label>
<input type=text class="form-control" name=name placeholder=hello>
<span class=要加的图片组件 form-control-feedback aria-hidden=true></span>
</div>
<form class="form-horizontal">
<div class="form-group" form-group-lg/sm>
<label class="col-sm-2" control-label for=formGroupInputLarge>large</label>
</div>
</from>
辅助文本：
<span id=helpBlock class="help-block" ></span>
七、折叠的基本用法
声明式触发
<div class="container">
<button class="btn btn-danger" data toggle="collapse" data-target="#shows">折叠</button>
<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>
</div>
八、总结
<div class="well">
显示的内容
</div>
</div>
以上只是我学习笔记的一部分，并没有完全写完。
学习bootstrap对我来说最重要的一点就是进一步熟悉了HTML+CSS的用法，进一步熟悉了标签的基础用法， 夯实基础。建议大家读一下bootstrap的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。
