1、周六(6月16号)的线上直播课程中，由修真院的技术总监沁修带领直播课学员们以直播、问答、互动的形式，深入理解了(bootstrap原理与实践)同时安排辅导师兄及配套的任务体系帮助大家快速理解掌握课程错过直播课的同学，现将文字版课程内容分享给大家，希望大家能够从中有所收获bootstrap原理与实践入门介绍框架简介安装方法整体结构思想架构思想栅格系统CSS组件基础布局总结结论思考。

2、1入门介绍1框架简介CSS框架，无论是哪一种，都是一种工具，它诞生的目的就是为了解决某种问题。

3、而在页面编写的过程中容易遇到的问题之一就是，反复解决页面样式上的兼容性问题，以及大量重复已有代码。

4、因此有了CSS的框架将代码进行封装，提高了工作效率，让开发人员更快更好完成工作，降低工作难度，无需担心很多细枝末节的小问题。

5、而Bootstrap就是其中的佼佼者，它算是CSS框架里名气大的之虽然现在可能会有人认为太老气，但不可否认的是它依旧是流行面广的前端框架。

6、它是由Twitter的两位前员工在10多年前创建的，代码久经考验，还有良好的代码规范，简洁又易于修改，容易维护。

7、学习它能从中学到很多知识，那么接下来就来看看是如何安装的。

8、2安装方法首先要说明的是CSS框架的安装都简单，只需要将文件通过link的方式链接到自己的html页面当中就可以了因此官网上的安装方法都是在介绍如何获取css的代码。

9、主要有三种方式其一是直接下载代码包，有编译后的代码，有源码，还有sass源码三种选项可供选择↓其二是使用CDN加速服务，直接在页面中引用CDN文件地址即可。

10、其三是使用各种包管理工具在本地下载安装，如bower、npm、composer等工具。

11、2整体结构思想1架构思想学框架如果只是学习怎么使用，那将简单，直接把官网文档打开，复制粘贴稍稍改改就能完成任务。

12、但如果对自己要求高一点就会发现这样做并不是一个开发者应有的学习态度。

13、我们需要站在一个更高的地方去理解框架的设计者为什么要这么去设计，这样设计的优点缺点有哪些。

14、如果是自己来做这样一件事应该怎么去做。

15、通过这样的方式来学习才会有一个质的提升。

16、Bootstrap从3起，比起之前的版本有一个显著的特点、因为智能手机等设备的爆发式增长，所以框架从这一个版本起，设计理念上是移动先行的。

17、因此Bootstrap3是基于响应式设计的一套框架，又以栅格系统为及时，辅以基础的布局组件，加上多个封装完好的css组件和js插件，形成快速开发的一整套框架。

18、从下图可以看到，这就像是一个金字塔，每一层都基于下面的基础上。

19、首先是响应式设计，它是一个重要的基础理念而非功能。

20、让页面有能力响应用户的设备，让一个网站能够兼容多个终端，这样就不必为了不同设备专门去做设计和开发了。

21、在响应式设计的基础之上，实现了我们的栅格系统，是Bootstrap框架的核心功能。

22、栅格系统脱胎于平面排版设计，在网页设计中使用让网页更美观易读，对于开发者来讲也更加灵活规范。

23、说到底，栅格系统其实就是把网页的总宽度均分为12份，可以自由按份来组合，以便以更简单的方式组合出不同的网页界面。

24、在栅格的基础上，有很多基础布局的组件，比如排版、表格、按钮、表单等等，这些基础的组件可以运用于昂也的任何地方，用于构建丰富多彩兼容性的网页。

25、再在这些基础布局的基础上，添加了各式各样的css以及js组件，细化到网页的方方面面，形成了一套完整而又灵活的css框架。

26、2栅格系统在Bootstrap中，栅格系统将容器均分为12份，再调整内外边距，结合媒体查询，造就了这一强大的栅格系统。

27、其主要规则是、一个.row应该包含在一个.container当中，才能因为内外边距的正负抵消而有合适的对齐。

28、在.row当中创建一组.column形成水平方向上的容器。

29、具体内容应该放在.column中，而且只有.column可以作为.row的直接子元素。

30、从接下来的例子上可以学到栅格相关的基础知识、直接使用row和12column..加上row和12column..自由组合39列的偏移4列的嵌套.col-md-col-md-col-md-6首先来看效果图中第一行和第二行，区别在于是否有.row，当有.row时才能在水平方向上占满整个.container。

31、加上.column自身的内边距值，使得里面的文字正好能与.row外面的文字对齐。

32、这里的实现代码其实简单，因为container左右有设置一个15像素宽的内边距，而row则用负的外边距来与之抵消，所以row在container中才能占满一行、.container{padding-right、15pxpadding-left、15pxmargin-right、automargin-left、auto}.row{margin-right、-15pxmargin-left、-15px}后面的几行例子则分别展示出了栅格系统的一些基本特性、可以自由组合，可以偏移列，以及列里面还能再嵌套列。

33、通过这些方法，就已经能布局出各种各样的页面了。

34、3CSS组件在Bootstrap3当中，所有的组件都有一个基本的构建思想，就是利用css的特性、不同名称的样式可以叠加在一起使用，而同名的样式后面的会覆盖前面的。

35、通过这两个特性，可以达到组合应用的效果。

36、这就意味着css组件是分层设计的，从基本的样式层写起，后面的层次逐渐叠加上去，形成灵活的组件库。

37、以button举例，首先是有一个.btn的基本样式，它定义了一个按钮基本的边距、边框、背景等样式、.btn{display、inline-blockpadding、6px12pxmargin-bottom、0font-size、14pxfont-weight、normalline-height、42857143text-align、centerwhite-space、nowrapvertical-align、middlecursor、pointerbackground-image、noneborder、1pxsolidtransparentborder-radius、4px}在这个基础之上，又为按钮赋予了一些预设的主题样式，比如.btn-default.btn-primary等，叠加设置了按钮的颜色，背景色通过这样的组合就能拥有不同颜色的按钮、.btn-primary{color、#fffbackground-color、#337ab7border-color、#2e6da4}接着设计了大、小、超小几个尺寸，.btn-lg.btn-sm.btn-xs，配合默认大小，总共可以有4种按钮大小。

38、同样的，尺寸样式也可以与前面的样式灵活组合、.btn-lg{padding、10px16pxfont-size、18pxline-height、3333333border-radius、6px}之后是状态样式，如.activedisabled等类。

39、不同的是，这些状态样式可能需要配合颜色样式进行覆盖叠加，因为不同颜色的按钮在激活或禁用状态下的颜色也是各有不同的、.btn-primary、active{color、#fffbackground-color、#286090border-color、#204d74}而特殊样式则往往是因为和其他元素组合在一起因此有比较特别的设置。

40、动画样式往往是可选的，在后优化显示效果时可以加上。

41、由此可以看出css组件的整个设计脉络清晰，同时便于组合以应对不同的网页不同的方案，以少的代码完成更多的开发。

42、3基础布局建议直接官网查看文档，已经详细。

43、排版样式可以在type.less文件上查看源码。

44、代码样式在code.less文件上。

45、表格样式在table.less文件上。

46、表单样式在form.less文件上。

47、按钮样式在button.less文件上。

48、图像样式在scafolding.less文件上。

49、4总结css框架为我们的开发带来了许多的遍历，比如如果一个项目只有原型没有设计稿的时候，就可以选择一个符合原型的css框架，以减少开发工作量。

50、当有设计的时候也可以与设计人员沟通交流，以更好地融入所选用的css框架。

51、并且在学习一个css框架的时候应该不要止步于复制粘贴，而是去学习这个框架的设计思想、代码规范、文件结构等等。

52、另外再留给大家一个思考问题、css框架的组件是越多越好的吗？以上就是上节课的内容解析啦，想进一步深入的同学欢迎加入我们的IT交流群437496285共同讨论学习~。

1、程序开发人员可悲的一点就是做出来的界面效果实在是不怎么好看。在整个的WEB项目（App）开发之中，麻烦的就在于界面的布局，组件的控制上。还需要去考虑不同的浏览器。。

2、前台框架的出现让程序人员改变了这一切，也可以说造成了行业之中可悲的开始，就是几乎所有的页面效果也都是雷同的，但是至少比不使用一些前台框架好看一些，而且代码标准一些，方便调整一些。。

3、实际上不仅仅是程序人员觉得界面开发方便了，甚至连美工都觉得开发方便了。利用bootstrap在编写任何页面的时候都会变得容易，只需要调用几个简单的CSS样式，那么就可以进行的界面显示了。。

4、有了这么一个跨康佳，你即使是一个再没有审美观点的人，也会觉得自己可以做出一个符合与人类正常标准的界面分格，而整个实现会变得那么的简单。。

5、如果要想使用bootstrap，只需要将下载包中dist目录下的css,js,font文件夹拷贝到项目中。此时工作环境都已经准备完成了，那么随后需要做的就是进行代码的编写。如果要编写代码，那么一定需要确认所需要导入的文件：。

6、但是有一点需要注意了，如果你只是拥有一个bootstrap那么还是无法开发，bootstrap是基于jquery建立的应用，所以需要将jquery的开发包进行配置。。

7、bootstrapx增加了移动设备的支持，添加移动设备的设置。。

8、既然已经准备好了基本的程序模板。那么下面就来感受一下bootstrap能带来的美妙的、华丽的页面效果：                        helloworld!            删除            。

9、使用bootstrap之后，整个页面的开发就变得简单了，而且界面的显示只需要操作几个css样式就可以完成了。。

1、(基肆漏1)强调类名(2)对齐类名例效果如下3)改变文本字体的大小写4)列表类名默认情况下，bootstrap中的无序列表和有雹纳序列表带有项目符号，利用类.list-unstyled去除项目符号类名.list-inlinc用来实现内联列表，也就是将垂直列表幻城水平列表，并去掉项目符号，保持水平显示，其搏烂为制作水平导航而生定义列表，bootstrap没有太大的调整，只是调整了行间距，外边距和字体效果水平定义列表就像内联列表一样，bootstrap添加类.dl-horizontal即可，但是只有在屏幕大于768px的时候才有效引用表格式Bootstrap中的一个基础组件之bootstrap为表格设置了一种基础样式和四种附加样式以及一个响应式的表格bootstrap还为提供了5种不同的类名传送门、中文http、//getbootstrap.com/components/#glyphicons传送门、英文http、//vbootcss.com/components/。

1、我们使用浏览器搜索“bootstrap”。如图，我们点击进入“Bootstrap中文网”。。

2、进入Bootstrap中文网页面后，我们在上方导航栏中可以看到Bootstrap已经有4三个版本。这里，我们以版本3为例。。

3、进入Bootstrap3中文文档页面后，我们在导航栏中可以看到“起步”这个选项。这便是我们学习Bootstrap的起步，我们点击它。。

4、起步页面，主要为我们介绍了Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。只学习，起步是远远不够的，我们还要学习css样式。。

5、全局CSS样式中介绍了设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增果；还有先进的栅格系统。。

6、组件中介绍了无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。。

7、学到这里基本上，将Bootstrap的基本知识学的差不多了。如果希望给页面添加更多的效果，还需要学习JavaScript插件的内容。。

1、为什么使用这个框架呢？浏览器支持，所有的主流浏览器支持，包括、IE、firefox、opera、chrome、Safari等。

2、容易上手，掌握html+css基础即可。

3、具有设备响应式兼容。

4、bootstrap的响应式css能够自适应于台式机、平板电报和手机。

5、包含很多功能强大内置组件，易于定制。

6、开源。

7、在其官网下载，包括三种形式，我们选择用于生产环境的bootstrap，这样就无须先学习sass或者less的编译，可以着重于学习bootstrap的应用。

8、下载文件为zip格式，解压后包括三个文件夹。

9、css即bootstrap的样式文件，js文件夹即其js文件，fonts为其字体文件夹。

10、我们暂且只用到css和js，点开css文件夹和js文件夹，出现如下图。

11、css文件夹中，其中，.css文件是编译好的css文件，同我们平常使用的没有区别，.min.css是压缩后的css文件，可以使用这个文件节省大小，.map是映射less文件和css文件对应位置，暂且忽略，复制.min.css文件到自己项目的css文件夹中，同理，复制js中的.min.js文件到自己项目的js文件夹中。

12、下图为其基本模板。

13、由于bootstrap是用jquery编写，所以需要jquery支持，我们使用的是在线jquery库。

14、在浏览器查看效果。

15、h1第一级标题使用的样式是bootstrap的样式，而非h1原本的样式。

16、在head的开头(必须为开始，可以在编码之后)加上此为移动端开发经常用的，可以养成好习惯每个网页都添加，可适当的触屏缩放和显示比例。

17、表示、当前的viewport的宽度为设备宽度，当然你也可以设置为具体数值，初始显示为原始比例显示。

18、content共有六个属性、width、height(不常使用)、initial-scale、maximum-scale、minimum-scale、user-scalable布局容器的使用。

19、Bootstrap需要为页面内容和栅格系统包裹一个.container容器，包括两个、.container类用于固定宽度并支持响应式布局的容器。

20、.container-fluid类用于宽度，占据全部视口(viewport)的容器。

21、如下图是一个实例。

22、container中包含的为bootstrap显示的样式。

23、其支持响应式布局，将浏览器窗口拉宽和拉窄效果不同。

24、8在bootstrap官网上有较多实例和组件，可以根据个人需要定制化使用，创作属于自己风格的页面。

1、下载bootstrp。首先下载一个编辑器，用于编辑代码编写。可以用sublimetext3,它的快捷键较多，网上也有好多教程可以学习。然后到bootstrap网站上下载,这里有多个版本，根据需要学习。。

2、解压bootstrap，了解文件结构，熟悉文件目录，以便项目开发中使用。。

3、学习bootstrap中包含的知识。有布局，基础的HTML元素的样式，比如文字排版，代码，表格，表单，按钮，还有一些组件 和 JavaScript插件，常用界面组件的基本样式，比如像选项卡，导航栏，警示，页面标题等等。 。

4、基础的HTML模板。了解基础的HTML模板结构，是HTML5 声明。。

5、示例学习。从官网上找些例子，查看源代码，观察bootstrap是如何使用的。。

6、深入的学习：bootstrap布局，基础，组件，javascript,定制功能等。。

1、首先我们得下载它，直接打入bootstarp,自然会弹出它官网。点击下载即可。。

2、下载完后，你在js文件和css文件中看有没有以下几个文件：bootstrap.min.cssbootstrap.min.jsjquery.min.js。

3、直接建立一个index.html看你的css文件在哪里，就像一样引用同理。

4、写入代码进行测试      Bootstrap介绍      BootstrapHello,worldBootstrap框架Bootstrap框架。

5、Bootstrap框架。

6、Bootstrap框架。

7、Bootstrap框架Bootstrap框架。

1、bootstrap官网http://vbootcss.com/getting-started/到此下载核心文件。。

2、下载后使用方法实例，截图如下：。

3、首先要在html文件的头部写如下代码： 其次同样在头部引入bootstrap的文件：示例如下：。

4、响应式布局12列栅格常用类属性介绍，md类为电脑端，xs类为手机端，sm为平板端。本例以手机和电脑为例演示响应式，代码如下：  双创空间  body{margin:0;padding:0;} .row{width:;} 我在电脑端宽度占1/3,在手机端宽度占我也是我也是。

1、 在一个项目之中一定会存在很多的页面，每一个页面都会完成某些特定的工作，那么为了标注这些不同的页面，可以在每一个页面定义一个标题信息。页面样式使用".page-header"进行定义。                                                                                    百度威猛()                                                              。

2、标签样式：在很多时候需要针对于一些小的信息进行标注，为此bootstrap提供了一组标签样式。                                                            百度在线(www.baidu.com)                                                       。

3、在很多的评论系统之中经常可以出现评论的引用，那么这样的引用效果使用“.well”样式可以表现的明显。                                                                                                百度在线                                                                                   。

4、一个高大上的长点一定会首先给用户一个有冲击力的首页。在bootstrap中里面提供有".jumbotron"样式。                                                                                                百度集在线                                                                              。

5、在浏览器中查看展播的效果展示：。

6、bootstrap基础样式总结：。