初识Bootstrap

一.什么是bootstrap

前端css框架....

前端CSS框架,另一个前端框架Foundation

前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用，不用从造轮子.

二.为什么使用bootstrap

当前最流行的前端框架

为什么如此流行
1.功能强大和样式美观
2.简单易用、文档丰富
3.高度可定制性
4.丰富的生态圈
5.布局兼容性好

主要可以使用bootstrap做后台管理页面

三.第一个bootstrap程序

版本不是说3比2号, 3和2的区别在于风格上的不同

bootstrap3 采用扁平化风格(极简风格、凸出内容的核心)

bootstrap2 采用立体等效果

我们可以根据项目的需要决定使用的bootstrap版本

最新版本bootstrap-3.3.7

我们使用bootstrap-3.3.6

一.导入3个文件

bootstrap.css
jquery-2.1.4.js
bootstrap.js

注意: 使用的jQuery版本需要是1.9.1以上 jQuery3以下

二.在body中写代码即可

<h1>Hello,Bootstrap</h1>

*********************************导入script为什么写到页面的最后边************************************

需要注意的是因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js
.另外以前我们导入 js都是在head中导入,现在为什么要把它放到body中导入呢?
因为如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,
这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放
到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了)

*********************************比较全的第一个程序************************************

<!--对桌面级的浏览器 没有任何影响 手机访问 适配手机的分辨率 让文字 不会特别小
width=device-width witth 和 设备的宽度一样宽
initial-scale=1.0 初始缩放比例 1.0 值越大 文字越大
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--条件注释 IE9 以下 会导入这两个js文件 用来让IE8 支持 html5的特性 和 CSS3的媒体查询功能
IE9或以上版本 把以前代码会作为注释 注掉
-->

<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>

 

转载于:https://www.cnblogs.com/MrTanJunCai/p/9907784.html