Laravel的基础美化法

Bootstrap基础入门

查看Laravel的目录内容，可以看到一个叫做“Bootstrap”的文件夹，这也是一个框架，前端的。

开始学习

Bootstrap拥有十分规范的教程。里面的例子可以直接放在任意一个blade文件中尝试，还是蛮有意思的。

前端零基础人员十分适用，适用于在想要某种显示方式却不会写的时候。虽然整体几乎是纯纯的黑白配，但是我还挺喜欢的，相比网上千篇一律的花里胡哨，即使大家都这么简单，也没什么不好。

作为一个零基础者，想要让整体有些许色调变化，那么可以调整的颜色主要集中在面板和按钮上。这里就可以不用自己来一个个来试了，贴心的色卡模板看好了选一个吧~

按钮样式似乎还能更多变些，但遗憾的是我并没有尝试成功。一番详查下，从最官方的地方得知，Laravel并没有使用完整的Bootstrap框架。比喻一下，Laravel牌电脑采用集成显卡，想要GTX1060?请联系composer另行配置安装。

更深入一点

想要深入一点的理由是：

依靠上面的内容，是可以完成一个简洁的界面。从其它人的文字了解到，这些简易方案主要为了后台服务的，因为后台一般不需要太多的美工设计，能够实现基本美化即可。

那么问题来了，我想把蓝色换成绿色怎么办？我想把背景色换成粉色怎么办？

顺便一提，我原先的小目标初步估计只能放在首页用，因为其中并没有Bootstrap导航栏相关设计。如果想要全局使用，相比对自己是个很好的练习吧。

环境搭建

首先还是亮出官方教程吧，如果对相关内容已经有所了解的人相比已十分够用，可以直接忽略下方n多字。

------------------------------------跳过线------------------------------------
在工程根目录下，我们可以看到有两个json文件：composer.json和package.json。其中第一个文件在创建Laravel工程的时候就已经用到了，它是为composer包管理器服务的；而第二个文件是有着同样性质，但是为另一个包管理器：npm所用。

安装npm非常简单，一共有三步：

1. 安装包下载下来，安装它
2. 把源替换为国内镜像，根据官方说明来就好
3. cmd进入工程目录，执行下面的命令，结束安装

npm install

npm install cross-env --save-dev

如果你不幸中招了，希望是这些常见问题，祈祷?

实现调色

即使对css没有任何知识储备，但是看见一个颜色值，并且修改它，还是可以做到的。

找到\resources\assests\sass_variables.scss，这里面包含了很多熟悉的词汇有没有。只要打开任一一个blade文件，你就能对应上不少的元素。

首先，选择了一个主页页面

组成元素十分基础，只有导航栏和面板两项。我想要导航栏像我预计的首页一样呈现灰色，找一找，文件里有着这样一行：

// Navbar
$navbar-default-bg: #fff;

将fff修改为333，嗯，拒绝单身~ o(￣▽￣)o

希望你没有把刚才cmd关掉，我们现在使用另一个命令

npm run dev

等运行结束后，右下角会有提示弹出，然后我们再刷新页面

恩，挺好?

接下来，就发挥想象力吧~

自己的想法

等待界面是没有内置的，目前只采用了点击响应文字的简单方式。这种方式在点击后会跳转页面的情况下是足够的，但在点击后直接导出文件的情况下就不怎么愉快了，至今未能成功实现刷新。贴出好贴，我还没太明白，祝有人成功。

消息框利用的是面板的多种主题，也是一种很好的合理化跳转形式，谁让我搞不清楚怎么动态呢(╥﹏╥)

class=“form-control” 算是个不变法则吧，控件加上这个一下子就好看了有没有。

app.blade.php是除了首页外的所有导航栏样式，这上面多花些心思准没有错的。

node_modules是通过npm生成的，经实测，编译结束后将其删除对页面布局是没有任何影响，而且它很大。所以，如果有在使用git的话，请通过新建.gitignore文件，在文件中写入"/node_modules/"就可以了

小结一番

嗯，算是把Bootstrap完整版给装上了，之后就要走另一条路，看另一番风景去了。