本节将学习Laravel的基本用法，包括路由，控制器，视图，布局，artisan命令及版本Git的分支管理。
一、创建Git分支
项目启动命令：
// 使用下面命令来启动和登录 Homestead：
> cd ~/Homestead && vagrant up
> vagrant ssh
// 在虚拟机中进入 Code/sample文件夹：
$ cd ~/Code/sample
上一节中，我们将代码通过Git版本控制，是在主分支master上，这一节将通过创建分支来添加新功能，然后再将分支合并到主分支上，这样做的好处是如果有什么差错，我们可以将分支删掉，这样就不会影响我们的主程序。
首先让我们使用 Git 来新建一个 static-pages 分支。
$ git checkout master
$ git checkout -b static-pages上面的第一条命令 git checkout master 代表将当前分支切换到 master 分支上，master 分支是我们初始化 Git 时默认创建的主分支，其它分支都是基于主分支衍生出来的。
第二条命令 git checkout -b static-pages 将会为你创建一个名为 static-pages 的新分支。-b 选项表示创建指定名称的新分支。
你可以将新建的 static-pages 理解为是对 master 分支的克隆，在上面做的所有修改都不会影响到 master 分支。本节后面会将 static-pages 分支合并到 master 分支上，合并成功之后，在 static-pages 分支上做的所有改动都会并入到 master 分支。另外，你也可以选择对一个分支进行删除操作，当一个分支被删除之后，在该分支之上的所有改动也都将被销毁，删除分支的操作不会影响到 master 分支。这便是 Git 工作流的强大之处。
添加分支后，在子分支static-pages下进行代码开发，功能完成后进行本地提交，最后切换到主分支进行合并。
1.将代码进行版本管理
$ git add -A
$ git commit -m "Finish static pages"2.将 Git 切换到 master分支，并合并 static-pages 分支上的修改：
$ git checkout master
$ git merge static-pages3.最后将代码推送到 GitHub 和 Heroku上
$ git push
$ git push heroku master4.将代码推送到github分支
或者，我们也可以
将代码推送到分支上去，这样做的好处可以认为的划分版本，方便以后我们可以查看项目的开发过程
$ git checkout master
$ git checkout -b first-version本地建立分支，然后使用推送分支命令即可：
git push origin first-version这样，即可在GitHub 上看到我们推送的分支
推送完之后，我们可以切换到主分支下：
$ git checkout master二、路由及视图布局
1、路由格式
// app/Http/routes.php
// Route::get('/', 'StaticPagesController@home');
get('/', 'StaticPagesController@home');2、使用artisan命令创建控制器
$ php artisan make:controller StaticPagesController
// 创建简洁控制器，控制器里边不带任何方法
$ php artisan make:controller StaticPagesController --plain3、视图布局
我们可以将视图中重复的代码抽出来，遵循 DRY（Don't repeat yourself）原则，可以使页面够灵活、简洁。因此我们需要对页面进行重构，把多余的代码从视图中抽离出来，单独创建一个主视图来进行存放通用代码。
resources/views/layouts/master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>@yield('title', 'Laravel-Learnning') - Laravel学习</title>
</head>
<body>
@yield('content')
</body>
</html>
我们给应用创建了一个 master 视图，并将其放在 layouts 文件夹中，master 视图将作为整个应用的基础视图。实际上你只要保证视图文件被放置在 resources/views 目录下即可，Laravel 对视图的文件夹和文件命名并没有限制，我将 master 文件放在 layouts 文件下，只是为了让应用的目录结构让人更好理解。
下面的这行代码表示该占位区域将用于显示 content 区块的内容，而 content 区块的内容将由继承自 master 视图的子视图定义。
主页继承基本视图master
resources/views/static_pages/home.blade.php
@extends('layouts.master')
@section('content')
<h1>主页</h1>
@stop三、前端资源安装
Laravel 默认为框架集成了三个扩展包，它们分别是：
gulp- 基于 Node.js 实现 Web 前端自动化开发工具；laravel-elixir- 由 Laraevl 官方提供的静态资源管理工具；bootstrap-sass- Bootstrap NPM 扩展包；
这三个扩展包将在 Laravel 上为我们构建一套完整的前端工作流。
npm下载前端包资源
由于GFW的原因npm下载的速度很慢，常常出错，所以这里npm使用国内淘宝镜像
vagrant@homestead:~/Code/sample$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/bin/cnpm -> /usr/lib/node_modules/cnpm/bin/cnpm
/usr/lib
安装完成之后，让我们对 Laravel 默认生成的 app.scss 文件进行编辑，导入 Bootstrap。
resources/assets/sass/app.scss
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";细心的你可能会发现上面新建的样式文件后缀名（.scss）有别我们之前经常看到的样式文件后缀名（.css），这是因为 .scss 是 Sass（一种 CSS 开发工具）专属的文件格式，我们后面会再对 Sass 相关的知识进行补充讲解。
将 Bootstrap 导入成功之后，我们还需要使用 Gulp 来将 .scss 文件编译为 .css 才能正常使用，编译命令如下：
$ gulp我们也可以通过下面的命令，在每次检测到 .scss 文件发生更改时，自动将其编译为 .css 文件：
$ gulp watch
四、bootstrap学习
1、网格系统
Bootstrap 的网格系统（Grid System）。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)Bootstrap把一个页面分为12列，通过指定数字就能够设置宽度。简单的示例:
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-6">6</div>
<div class="col-xs-3">3</div>
</div>偏移列
偏移列的意思是隔开多少个列。
示例：
<div class="col-xs-12 col-sm-6 col-md-3">3</div> //向右偏移2列了
<div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>显示效果如下：.col-xs=* 类不支持偏移，它们可以简单地通过使用一个空的单元格来实现该效果。
如果我们需要在首页resources/views/static_pages/home.blade.php添加CSS样式，则可以在assets/sass/app.scss中添加，然后通过执行gulp,就会在app.css中追加相关的CSS信息,这样做的好处是，只需要在页面引入一个css文件即可，易于管理。
resources/assets/sass/app.scss
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
$navbar-color: #3c3e42;
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.jumbotron {
text-align: center;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
.navbar-inverse {
background-color: $navbar-color;
}
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-decoration: none;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: #fff;
}
}然后执行gulp,生成app.css文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。