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的源码，知其然和知其所以然，不能总依赖库，这样才能不断进步。