接上一节搭建环境部分，我们写出了第一个实例——Hello World!接着我们要从这个实例入手，进一步学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS的核心文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello World!</h1>
<!-- 引入jQurey的国内支持 -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 引入所有已编译的插件，路径请根据自己的目录来写-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>外部的连接
< link href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>
这是文件的外部样式表单（国内源），统一一个页面的样式，你可以在这个样式的基础上进一步修改出你想要的样式，当然也可以直接使用别人写好的样式。
< script src=”bootstrap-3.3.7-dist/js/bootstrap.min.js”>
看到这里你应该会说：“这个不是外部的连接，你写错地方了。“
这里写的确实不是外部的连接，可是他有外部连接的版本，等到后面我们统一会再谈一遍的。
相信你已经能够猜出来这个js文件的作用了，对就是引入别人已经写好的js模板。
< script src=”https://code.jquery.com/jquery.js”>
看Bootstrap的官方文档我们可以知道，bootstrap.min.js这份文件是需要jquery和popper.js的支持的。这里引用的jquery的国内源。
小结一下
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">(不能访问)<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>你应该在使用框架的页面里面引入这些外部的文件，以便你在编写实际内容的时候调用。看到这里，也许会有人问：“你在引入这些文件的时候为什么你都使用别人服务器上面的啊？像bootstrap.min.js这份文件你不也是从本地调用的？”解释一下：浏览器在从上面的连接里面取回那些文件的时候会暂时将文件缓存在本地，当有引用相同源的时候会从本地直接调用来缩短加载时间。也就是说如果你的页面使用和大部分页面外部源相同，在有本地缓存的情况下你的页面就会表现得很好。
HTML5标准
现在的bootstrap4采取的是H5的标准，若是不使用H5可能会造成一些问题。
响应式布局
bootstrap使用移动设备优先的策略，那么我们就应该设置好响应式的meta标签。例如：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Box-sizing
框架内部默认设定box-sizing : border-box。这个影响盒元素的宽度，在实际获取盒元素的时候就要注意到这一点。
这是详细说明的一个博客，转自问说网。
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
