目录
1.WWW
2.环境安装
3.Bootstrap CSS
3.1.概览
3.2.栅格系统
1.WWW是什么
WWW指的是What、Why、Where
What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。
- Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
- 用于快速开发Web应用程序和网站的前端框架
- Bootstrap是基于HTML、CSS、JS的,简介灵活,使Web开发更加快捷
- 总结:Bootstrap是一个建立在一个页面,可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架
Why:
- 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
- 移动设备有限
- 浏览器支持
- 容易上手
Where:
- 企业网站、博客、网站后台之类的网站
- 注意:非电商(电商网站分类很多)
2.环境安装
- 到Bootstrap官网下载Bootstrap库。官网:Bootstrap中文网
- 页面中引入库:
- bootstrap.min.css:在Bootstrap中有很多CSS样式。所以要有CSS文件
- bootstrap.min.js:严格意义上来说,Bootstrap是基于jQuery的一个库,jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库
- 案例:在页面上创建一个Button,观察原生态的button和Bootstrap的button区别
原生button:
<button>原生button</button>
只有一个普通的按钮
Bootstrap的button:
<button class="btn">Bootstrap的button</button>
我们来刷新页面看一下效果对比,Bootstrap的按钮很明显 样式不一样,加了背景色,加了按钮边框的样式
我们再来看一个效果:
<button class="btn btn-default">Bootstrap的button</button>
现在我们再来看效果,边框,背景色,而且还加了鼠标移动上来,和鼠标离开的样式。如果我们用js来写。想想是不是要复杂很多。现在这些效果全都封装在Bootstrap中。是不是很爽。
我们再来个更爽的:
<button class="btn btn-success">未读69条</button>
<button class="btn btn-succes