PHP laravel系列之bootstrap美化

开始

在前面的11章教程中，我们并没有使用 bootstrap 这也是处于对降低门槛方面的考虑，事实上，Laravel 已经默认集成了 bootstrap 框架，我们很容易就能使用它

bootstrap 是世界上使用最广泛的前端框架之一，它提供了一套简介、精美的UI组件，几乎涵盖了网站上常用的所有功能，如果你的应用对样式的要求不是特别高，使用 bootstrap 将是最好的选择

基础知识介绍

bootstrap

百度百科对 bootstrap 的介绍
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

bootstrap 中文网

http://www.bootcss.com

一些 bootstrap 样式截图

按钮组件：

导航栏：

下拉菜单：

一般来说，bootstrap 是给后端开发人员用的，因为使用 bootstrap 你可以快速搭建一套网站前端页面，并且样式看起来也过得去

但是如果你对前端开发感兴趣，也可以从学习 bootstarp 入手，毕竟 bootstrap 中凝结了很多前辈的经验，有很多值得学习借鉴之处

npm

百度百科对 npm 的介绍

NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那么你就知道NPM的作用是什么了。

Nodejs自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。

幸运的是，Nodejs库和框架为我们提供了帮助，让我们减少工作量。

但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

为什么要使用 npm？

这里引用 知乎 上的一篇文章中的介绍：

当一个网站依赖的代码越来越多，程序员发现这是一件很麻烦的事情：

去 jQuery 官网下载 jQuery

去 BootStrap 官网下载 BootStrap

去 Underscore 官网下载 Underscore

…

有些程序员就受不鸟了，一个拥有三大美德的程序员 Isaac Z. Schlueter （以下简称 Isaaz）给出一个解决方案：用一个工具把这些代码集中到一起来管理吧！

这个工具就是他用 JavaScript （运行在 Node.js 上）写的 npm，全称是 Node Package Maganer

NPM 的思路大概是这样的：

买个服务器作为代码仓库（registry），在里面放所有需要被共享的代码

发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上，分别取名 jquery、bootstrap 和 underscore（注意大小写）

社区里的其他人如果想使用这些代码，就把 jquery、bootstrap 和 underscore 写到 package.json 里，然后运行 npm install ，npm 就会帮他们下载代码

下载完的代码出现在 node_modules 目录里，可以随意使用了。

这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。

来源：知乎

作者：方应杭

链接：https://zhuanlan.zhihu.com/p/24357770

gulp

简单来说，gulp 是一个前端工作流管理工具，你可以把他理解成一个可以帮你运行繁杂任务的工具，在本实验后面将使用gulp完成前端代码的整合编译

gulp 中文网

http://www.gulpjs.com.cn/

中文文档

http://www.gulpjs.com.cn/docs/

laravel-elixir

文档中对 laravel-elixir 的介绍

Laravel Elixir 提供了简洁流畅的 API，让你能够在你的 Laravel 应用程序中定义基本的 Gulp 任务。Elixir 支持许多常见的 CSS 与 JavaScrtip 预处理器，甚至包含了测试工具。使用链式调用，Elixir 让你流畅地定义开发流程，例如：

elixir(function(mix) {
    mix.sass('app.scss')
       .coffee('app.coffee');
});

如果你曾经对于上手 Gulp 及编译资源文件感到困惑，那么你将会爱上 Laravel Elixir，不过 Laravel 并不强迫你使用 Elixir，你可以自由的选用你喜欢的自动化开发流程工具。

laravel-elixir 文档

https://laravel-china.org/docs/5.1/elixir

sass

百度百科对 sass 的介绍

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

Sass 是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。

Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

sass 入门

http://www.w3cplus.com/sassguide/

安装 bootstrap

因为 Laravel 默认集成了 bootstrap 所以安装也比较简单，Laravel 使用 nodejs 的包管理工具 npm 来对 bootstrap 进行集成

package.json 文件介绍

package.json 文件是 npm 的配置文件，里边记录了项目用到的扩展包，每次执行 npm install 的时候，npm 就会根据 package.json 文件中的列表逐个安装扩展包，打开 laravel 目录下的 package.json 文件

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^4.0.0",
    "bootstrap-sass": "^3.0.0",
    "babel-preset-es2015": "~6.22.0",
    "babel-preset-react": "~6.22.0"
  }
}

如果你设置了”private”: true , npm 就不会执行发布，这是为了防止无意中将私有库发布的情况

我们可以看到有 devDependencies 和 dependencies 两个对象

devDependencies 里面包含的是开发环境需要用到的扩展

dependencies 里面包含的是生产环境（应用运行）需要用到的扩展

比如我们的 gulp 是用来编译我们的 css js 等静态资源的，一旦编译好了放到服务器上就不需要再执行 gulp 了

也就是说服务器（生产环境）不需要 gulp 而我们的本机（开发环境）需要 gulp

所以 gulp 就放在了 devDependencies 里而不是 dependencies 里

gulp laravel-elixir bootstrap-sass 都是 Laravel 默认集成的

下面两个 babel 的组件是我为了修复一些bug加入的，可以忽略

安装

package.json　文件配置好后，就可以在根目录下执行npm install来安装全部的组件包

因为国内墙的原因 npm install执行通常会非常慢，甚至卡死，所以一般使用 npm 国内镜像源加速，方法如下:

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

上面命令安装好 cnpm 以后，以后就可以直接使用 cnpm 命令来安装依赖了

cnpm install

但是即便使用国内镜像加速后，安装依赖包还是要耗费一些时间，所以实验楼的在线环境已经为大家执行过了 npm install ，gulp 可以直接使用

使用 bootstrap
在 Laravel 中使用 bootstrap 大概需要这么几个步骤

1.安装 bootstrap 代码
2.编写 sass 源文件
3.编写 js 源文件
4.配置 gulpfile.js
5.编译生成 css 和 js 文件
6.在html中引入 css 和 js 文件
7.编写 bootstrap 风格的代码即可
现在我们已经完成了 bootstrap 代码的安装，如果你好奇 bootstrap 代码装在哪里了
可以打开代码根目录，找到 node_modules/bootstrap-sass 目录即可

编写 sass 源文件

打开代码根目录下的 resources/assets/sass/app.sass 文件resources/assets/sass/app.sass

// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

可以看到只有一行代码，这行代码的意思就是在该文件中引入 bootstrap ，但是默认是注释掉的，所以我们删掉注释保存

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

当然了，除了引入 bootstrap 我们也可以在该文件中编写我们自己的样式代码，但是要符合 sass 的编码格式

编写 js 源文件

打开代码根目录下的 resources/assets 目录，创建一个 js 文件夹，然后在 js 文件夹中创建一个 app.js 并加入如下代码
resources/assets/js/app.js

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

可以看到，在加载 bootstrap 之前，引入了 jquery ，因为 bootstrap 的 javascript 代码依赖 jquey 库

所以，我们还需要安装一下 jquery ，同样使用 npm 安装，在代码根目录下执行如下命令

npm install jquery --save

当然了，除了引入 bootstra 我们也可以在 app.js 文件中编写我们自己的 javascript 代码

配置 gulpfile.js

打开代码根目录下的 gulpfile.js 修改为如下代码

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss')
       .browserify('app.js');
});

编译

sass 和 js 都编写完成之后，就可以执行编译了

在代码根目录下执行命令

gulp

你也可以执行

gulp --production

加上 –production 后缀，会将编译后的代码再进行压缩，使静态文件的体积最小化，一般在放到生产环境之前都要执行该命令，有兴趣的同学可以试一试，然后打开 public/css 或者 public/js 目录看一下生成的文件效果

如果 public 目录下 生成了 css 和 js 目录，说明编译成功

引用

最后一步就是在视图文件中引用编译生成的 css 和 js 文件

打开 resources/views/welcome.blade.php 文件，修改为如下代码
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        <h1>Home</h1>

        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

使用

现在 bootstrap 应该已经可以使用了，打开浏览器，访问 http://localhost

其实现在 bootstrap 已经起作用了，因为看 home 的样式就看得出来是 bootstarp 对 h1 的样式

我们可以在浏览器上右键，然后选择查看页面源代码，来验证一下是不是已经成功加载了 bootstrap

可以看到，CSS 和 JS 都成功加载了

现在就可以愉快的使用 bootstrap 了，我们可以打开 bootstarp 文档选择一些喜欢的样式

bootstarp 3 文档 ：http://v3.bootcss.com/

比如说我们想要一个导航栏

打开 bootstarp文档：导航栏：http://v3.bootcss.com/components/#navbar

直接粘贴代码到我们的网站中
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

是不是很简单？并且样式也还过得去，不算很丑

当然了，如果你对样式不满意，就只能在他的基础上进行一些修改，这就需要一些前端功底了

再举几个栗子

比如想要一些按钮

bootstarp文档：导航栏 http://v3.bootcss.com/css/#buttons
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        .
        .
        .

        <!-- Standard button -->
        <button type="button" class="btn btn-default">Default</button>

        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>

        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">Info</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>

        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>

        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">Link</button>



        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

效果图：

比如想要一个登录表单
bootstarp文档：水平排列的表单 http://v3.bootcss.com/css/#forms-horizontal
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        .
        .
        .

        <form class="form-horizontal" style="margin-top:50px;">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Sign in</button>
            </div>
          </div>
        </form>



        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

效果图：

bootstrap 的栅格布局
bootstarp 最经典的莫过于他的栅格布局设计了，它把一个屏幕分成了12列，通过这种栅格布局可以实现在任意屏幕上的自动适应效果

例如我们加入如下代码
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        .
        .
        .


        <div class="container">
          <div class="row">
            <div class="col-md-4 col-sm-6" style="height:200px;background-color:red"></div>
            <div class="col-md-4 col-sm-6" style="height:200px;background-color:blue"></div>
            <div class="col-md-4 col-sm-6" style="height:200px;background-color:green"></div>
          </div>
        </div>


        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

我使用 bootstarp 的栅格布局创建了三个空白 DIV 为了方便显示，给他们分别加上了背景色和固定的高度

当你缩小浏览器的窗口大小时，你可以看到排列方式会自动变化来适应不同的屏幕

结束

这里只对 bootstarp 做了一个简单的介绍，如果同学们感兴趣，可以去 bootstarp 的官方文档中发掘更多有意思的内容

别忘了在 Laravel 中动手实践，让你的 Laravel 网站变得更漂亮

到此本教程全部结束，有任何意见以及建议希望大家能够在课程评论中提出来，帮助我将教程做的更好~ 谢谢大家！

如果能坚持到这里，相信你已经对 Laravel 开发有了一些自己的领悟。

后面的路还很长，当然了，也会更加精彩~

祝愿各位开发者能够快乐的写代码，实现自己的价值：）

参考：实验楼