4.BootStrap

什么是BootStrap？BootStrap有什么作用？

1、BootStrap是基于html、css、javascript的前端框架，框架定义了一套css样式和对应的javascript代码，开发人员只要按照BootStrap的要求编写html代码就能取得很好的显示效果。2、使web开发更简单快捷BootStrap支持响应式开发，解决了移动互联网前端问题。

第1章  BootStrap的简述

（二）什么是响应式开发/布局举个例子来说明一下响应式：所谓的响应式就是一呼百应；响应式开发就是使一个网站能够兼容多个终端（手机、平板、电脑），不需要单独为每个终端设计特定的版本。

第2章  BootStrap环境搭建下载资源：

中文官网地址：http://d.bootcss.com/bootstrap-3.3.5.zip了解目录结构，要知道我们需要哪个目录里面的资源？完整版和压缩版有什么区别，分别有什么作用？搭建环境需要拷贝哪些资源？1、目录结构：对于javaee开发人员来说，主要使用dist发布版目录。2、完整版和压缩包的使用和效果是一模一样的，压缩版较完整版去掉了所有的空格和换行，网络传输更快。完整版适用于开发中学习源码，压缩版适用于开发。3、dist目录里面的所有目录文件；还要拷贝jquery-1.11.3.min.js文件见资料文件夹下的标准页面.txt

第3章  BootStrap环境搭建-基本模板创建参考我们给的模板，直接复制就行，主要：要把相关引入的路径改一下，其他的不要修改。

第4章  BootStrap环境搭建-基本模板讲解这一部分内容大家了解一下就行。什么是视口，以及视口的作用？视口：浏览器的可视区域，作用于移动设备，可将页面进行缩放设置。

第5章  BootStrap布局容器两种容器样式各有什么特点？需要注意什么？

第6章  BootStrap栅格系统-简述栅格系统如何理解栅格系统？布局容器规定占用一行，栅格系统就是将这一行划分成12列，我们只需要设定元素占多少列，就可以布局元素的显示位置。有了这个，以后布局元素就简单了。

第7章  BootStrap栅格系统-栅格系统入门案例栅格系统的书写方式是什么？栅格系统的特点/注意点是什么？1、书写方式和html的表格（tabletrtd）比较相似，栅格系统的书写方式是：定义容器（container）定义行（row）定义列。2、特点/注意点：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。列必须包含在行中。行使用样式“row”,列使用样式“col-屏幕尺寸-所占列数”。列的书写顺序就决定了它的显示顺序。

第8章  BootStrap栅格系统-栅格系统特点及深入剖析总列数与12列之间有什么关系？栅格系统是可以嵌套使用的，注意嵌套原则。正确理解12列，12列指的是一个row里面有12列，如果有嵌套，那么页面的一行就不止12列了。1、总列数<=12;那么所有列数在同一行显示；如果总列数>12，那么从开始超过的部分在下一行显示。2、嵌套原则：row里面嵌套col，col里面可以嵌套row，row里面又可以继续嵌套col……依次嵌套，不再需要container容器。总结:1.col数和12的关系1.列数 <= 12 它们在一行显示2.列数 > 12 从>12的列开始,换行显示2.row和col的嵌套1.container(仅一个)--->row--col--->row-->col--row...3.每个row都有12列

第9章  BootStrap栅格系统-屏幕尺寸设置（一）介绍了几种屏幕尺寸？如何设置不同屏幕尺寸下显示的列数？1、介绍了4种屏幕尺寸，如上图的参数介绍，记他们的简写就行了。2、如果没有设置对应屏幕尺寸显示的列数，默认每部分是独占一行的。设置对应屏幕尺寸显示的列数只需要使用对应的类前缀即可，最后一个参数是显示的列数。col-lg-4 col-md-4mdsmxsdiv.className += “ ys2”;

第10章  BootStrap栅格系统-屏幕尺寸设置（二）设置对应屏幕尺寸显示的列数的原则是什么？首先需要知道栅格系统的显示原则：如果设置了某个屏幕尺寸的列数，那么屏幕尺寸大的会使用这个屏幕尺寸小的设置，屏幕尺寸小的不会使用屏幕尺寸大的设置。所以，我们设置不同屏幕尺寸显示的列数的时候，只需要设置最小屏幕显示列数的属性就行，如果需要特殊处理，那么就在class属性值后面追加就行，属性值之间用空格隔开。例如：设置了col-md-4，那么相当于也设置了col-lg-4。其他屏幕尺寸均默认为col-sm-12,col-xs-12col-sm-3总结:1.多个样式用空格隔开div.className  += “ ys2”;2.3.设置了一个尺寸, 实际屏幕 >= 这个尺寸 都用这个设置4.设置了一个尺寸, 实际屏幕 < 这个尺寸 默认一个占满一行最后一句话:class=”col-sm-3” 一般设置这个就可以了,比它小的一个占一行

第11章  BootStrap栅格系统-列偏移列偏移使用什么关键字，记关键字就行了。列偏移：指把自己定义的列向右偏移一定的位置。使用offset关键字 col-屏幕尺寸-offset-占列数

第12章  BootStrap-响应式工具响应式工具的作用是什么？1、响应式工具主要是让元素在不同屏幕尺寸下显示和隐藏，如果只想在某个屏幕尺寸下显示，使用visible-屏幕尺寸；如果只想在某个屏幕尺寸下隐藏，使用hidden-屏幕尺寸。

第13章  BootStrap-列表掌握开发中最常见的一种场景：让有序列表或者无序列表水平显示。

第14章  BootStrap-按钮样式很多，会查文档会看案例就行了，但是要知道class属性由两部分组成，btn表示是按钮，btn-xxx表示不同的样式。按照文档的要求，如果按钮要有超链接效果，那么就是用，标签设计按钮，如果不需要超链接效果，那就使用标签。

第15章  BootStrap-导航条要求大家会修改代码就行了，以后在公司,学习使用框架也是这样的。注意：引入javascript文件要放在引入jQuery文件之后。可以结合浏览器的“检查”功能来定位要修改的元素的位置。

第16章  BootStrap-轮播图（一）这里面要求同样是会修改代码，如果想添加条目，那么点和图片一起添加，因为是一一对应关系。1、轮播图位于文档的-------》2、修改轮播图的宽高

第17章  BootStrap-轮播图（二）如何给轮播图设置自动轮播？当页面上有多个轮播图时，会出现什么情况，如何解决？1、通过给轮播图最外层div设置data-interval = "1000"可实现自动轮播，属性值为毫秒。2、当出现多个轮播图时，发现控制的永远是第一个轮播图，因为轮播图的唯一表示id是一样的，只需要把每个轮播图的id不一样即可。具体修改如下：a)修改最外层div的id，例如 id=”lbt1”。b)修改指示器小白点data-target属性值为对应的#lbt1，因为之前他们就是一致的，否则点击小白点效果。c)修改左右按钮的href属性值为对应的#lbt1，因为之前他们也是一致的，否则点击左右按钮也没不切换图片

第18章  BootStrap-排版对齐方式使用什么属性能够让内容居中？文档位置：全局CSS样式----排版----对齐注意：这个样式是让内容居中，不仅仅是让文本居中。

第19章  BootStrap-表单元素（一）如何修改表单项的宽度？也就是修改所占列数就行了文档位置：------》1、通过修改栅格系统中所占的列数即可，

第20章  BootStrap-表单元素（二）在什么位置添加什么属性分别表示校验成功、失败和警告的样式？应用场景：在开发中，我们通常是通过ajax异步访问服务器来校验数据，如果校验成功，那么就在js中给div添加has-success属性。onblurdiv.className += “ has-error”;

第21章  BootStrap-分页条让上一页不可用要注意什么？文档位置：-------》

第22章 第一部分综合案例-需求说明我们的案例有哪些要求？要求：1.页面顶部的三部分在PC屏幕上显示为一行，在移动设备屏幕上显示为一部分一行；2.导航条在大屏幕展示全部内容，在移动设备上需要将内容能够折叠/展开；3.用户名/密码/确认密码不能为空，密码需和确认密码一致，如果不符合，阻止注册操作，并将错误信息展示给用户看。具体页面设计部分,

第23章  第一部分综合案例-需求分析如何划分我们的页面？把整个页面放到容器中，然后按照栅格系统要求划分行，把每一部分内容放到对应行的列里面，还可以规定占多少列。

第24章  第一部分综合案例-需求实现-表单用户名非空校验理清楚表单用户名非空校验的实现思路即可：1、给表单添加一个onsubmit="return checkForm()"事件，触发一个校验函数，并把返回值true/false返回给submit进一步返回。2、在校验函数checkForm()里面首先获取表单元素对象3、获取表单对象的value值，判断非空

第25章  第一部分综合案例-需求实现-表单密码和确认密码非空校验理清楚表单密码和确认密码非空校验的实现思路即可：1、由于校验密码、确认密码判断非空的代码与判断用户名非空的代码一样，所有可以抽取一个判断非空的方法。2、在修改表单项代码，添加显示非空信息的lable、给输入框最外层div添加id属性，当非空时表单项显示红色。3、当不是非空的时候，使用初始的class属性值来覆盖含有 has-error的class属性值在checkForm（）方法里面调用checkNotEmpty（id）方法：

第26章  第一部分综合案例-需求实现-表单密码和确认密码一致性校验校验密码和确认密码一致性的原则是什么？

//表单校验的入口方法function checkForm()

{//检查用户名是否为空var isEmpty1=checkNotEmpty("username");

//检查密码是否为空var isEmpty2=checkNotEmpty("password");

//检查确认密码是否为空var isEmpty3=checkNotEmpty("repassword");

//检验密码和确认密码是否相等var isEqual=checkPwdAndRepwd(isEmpty2,isEmpty3);

return isEmpty1&&isEmpty2&&isEmpty3&&isEqual;}