Bootstrap

1 Hello World

首先，引入:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- js -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

2 基础

网站:

官网 http://getbootstrap.com/
中文网站 http://bootcss.com/

实现原理:

使用 百分比/em/rem 定义尺寸
网格系统（Grid System）概念的提出跟实现
媒体查询(@Media)

注意，如果要使用弹出 Model 等功能，需要引入相关 js，bootstrap.js 需要 jQuery 的支持

3 组件

表单/表格
导航栏
菜单
轮播
巨幕
alert/tip/popup
Modal
Progress
Card/Figure

4 v3 vs v4

v4 大量使用了 flex 语法，api 更简洁，功能更强大
因为使用了 flex 语法，所以放弃了兼容一些旧的浏览器
v3 历史悠久，基于它的主题和插件更多
v4 代表着未来