小课堂【上海】

bootstrap

分享人：何岳

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

前言

打个比方：如果需要做一个ppt，是从空白页开始制作块呢？还是下载一个模板，将图片文字替换进去更快呢？ 所以使用bootstrap框架的可以速度和效率的生成一个html5网页

Bootstrap来自Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

2.知识剖析

如何关联bootstrap

1.1下载编译后的bootstrap文档,link标签本地关联

1.2引用cdn,如下:

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script> src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"</script>

<script> src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>

如何进行栅格布局

认识container，row，column

每种格栅的临界点

sm——min-width: 768px

md——min-width: 992px

lg——min-width:1200px

混合使用格栅

我们假设设备宽度为x

768px≤x＜992px,会按照col-sm-x排列

992px≤x＜1200px,会按照col-md-x排列

x≥1200px,会按照col-lg-x排列

格栅位置的推拉（在bootatrap 3中使用push/pull来实现）

push和pull可以用来给元素换位置 比如： 左边的push(推到)右边，右边的pull(拉到)左边

格栅的嵌套使用

在分下来的格栅中依然可以再插入一个row并且下级依然可以再嵌套

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

8.更多讨论

讨论时间到，欢迎大家提问！

鸣谢

感谢大家观看

By 何岳