1.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官网下载Bootstrap库。官网：Bootstrap中文网
http://www.bootcss.com - 页面中引入库：
-
- bootstrap.min.css：在Bootstrap中有很多CSS样式。所以要有CSS文件
- bootstrap.min.js：严格意义上来说，Bootstrap是基于jQuery的一个库，jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库
-
Bootstrap CSS
-
- 概览
- H5文档类型
- 概览
Bootstrap必须是基于H5的，我们来看一下网页的首行代码 <!DOCTYPE html>这个就是H5的
-
-
- 移动设备优先
-
现在我们在页面F12看效果，选中手机模式，我们可以看到效果很模糊，看不清楚。现在页面不支持手机端。我们还需要在网页head标签中添加一句代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
刷新页面，是不是页面美观多了
-
-
- 布局容器
-
- 固体容器【class=”container”】
示例代码:
<div class="container">
<button>原生button</button>
<button class="btn btn-default">Bootstrap的button</button>
<button class="btn btn-success">未读69条</button>
<button class="btn btn-success">未读<span class="badge">69条 </span></button>
</div>
我们给div加上背景色样式 再来看一下效果
<style type="text/css">
.container{
background-color: pink;
}
</style>
Div自动居中了
固体布局就是页面两边后自动留白，div自动居中
- 流体容器【class=”container-fluid”】
示例代码：
<div class="container-fluid">
<button>原生button</button>
<button class="btn btn-default">Bootstrap的button</button>
<button class="btn btn-success">未读69条</button>
<button class="btn btn-success">未读<span class="badge">69条</span></button>
</div>
流体布局就是自动铺满，永远是占满整行
-
- 栅格系统(Grid System)
- 概念
- 栅格系统(Grid System)
栅格系统，可以理解为就是网格，格子
每行最多12个格子，如果想要再多可以使用栅格嵌套实现
1912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
