在上次的blade模板的基础上，我们来添加bootstrap。bootstrap是一个广受欢迎的 HTML、CSS 和 JS 框架，用于开发移动设备优先、具有响应式布局的网页。当前版本是泌驾台佐3，我们把它结合到laravel的blade模块中，优化我们的网页。当然前端设计是一个专业的工作，我们只是简单的应用，更加优秀的实现，可能需要对bootstrap及相应的知识进行深入的学习。
基本页面
在 app/views 下新建templates目录，在templates下建立 default.blade.php,输入如下基本的网页结构：
![php框架laravel：[16]blade模板+bootstrap](https://exp-picture.cdn.bcebos.com/994f412043715fdb53dd1a89468920c5270f8c50.jpg)
引入Bootstrap
在<head></head>部分引入Bootstrap的必须文件。head的代码如下：
![php框架laravel：[16]blade模板+bootstrap](https://exp-picture.cdn.bcebos.com/a44e8afc508c9bceb00529c4d6dd884ce44afa50.jpg)
其中的关键部分引入的三个文件，依次是Bootstrap的CSS 文件，jQuery文件和bootstrap的js文件，不要搞乱顺序。还要注意其他的部分，最好也要输入。其中灰色的部分是为了兼容IE9的。Bootstrap3已经不再支持更低的IE版本。
基本body结构
<body></body>修改成如下内容：
![php框架laravel：[16]blade模板+bootstrap](https://exp-picture.cdn.bcebos.com/9881b1fce186242f218f37ac35e434daf15ee850.jpg)
@include('templates.nav')用来包括template目录下nav.blade.php文件。在template目录新建nav.blade.php文件，先保持空白不做处理。@yield('content')和@yield('sidebar')可以被替换。
测试一下
我们用 views/articles/index.blade.php来测试一下这个页面。我们前面学习过程中，生成的这个页面，浏览器访问...index.php/articles大概效果如下：
![php框架laravel：[16]blade模板+bootstrap](https://exp-picture.cdn.bcebos.com/7830e01d96d81819f2dd047e876efbf203b3de50.jpg)
现在修改index.blade.php应用blade模板功能引入bootstrap。修改如下：
在当前index.blade.php最前面添加：
![php框架laravel：[16]blade模板+bootstrap](https://exp-picture.cdn.bcebos.com/7496877bbbf4da58ee277dfaea0f8b56ac04d750.jpg)
在最后添加 @end
保存，重新用浏览器访问...index.php/articles大概效果如下：
![php框架laravel：[16]blade模板+bootstrap](https://exp-picture.cdn.bcebos.com/ac45306817e951e1aa05fbe55e3da824d9e9cf50.jpg)
前后对比，我们看到，引入bootstrap，会自动的优化页面的显示，并且，laravel的分页导航条也自动优化显示了。接下来，我们会继续完善这个页面。
