4.2. 样式美化

样式美化

现在,让我们来新建一个分支,接下来针对样式的调整修改都将在此分支上进行:

$ git checkout master
$ git checkout -b filling-layout-style

Bootstrap

在本书的教学过程中将使用 Bootstrap 来作为演示应用的前端框架。Bootstrap 是由 Twitter 的两位工程师 Mark Otto 和 Jacob Thornton 在 2011 年开源的一个 Web 前端框架。该框架兼容当下主流浏览器,并支持响应式设计,对新手友好,容易上手,且内置了非常多的样式组件可供使用。如果你对 Bootstrap 的使用不太熟悉,推荐你阅读下 Bootstrap 的 官方文档

网站导航

我们在很多网站上都能看到顶部导航的存在,因为这是个非常通用的产品需求,顶部导航能够让用户很方便的对网站进行浏览。接下来我们会使用 Bootstrap 来为网站添加顶部导航,加入一些基本的如 LOGO,帮助页,登录页等链接,方便用户跳转,随着后面功能的添加,该导航也会被不断完善。

Laravel 项目默认集成了 Bootstrap 前端框架,但还是需要你做一定配置之...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
贡献者:3
讨论数量: 89

kaen
jiehui
抠脚大叔
NPM run watch-poll 无法运行解决方法?
10 个点赞 | 9 个回复 | 分享 | 课程版本 5.5
permission
yarn install --no-bin-links 是什么意思?
8 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
Chasers9527
本章建议修改
8 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
wen_style
输入 NPM run dev,报 node-Sass/vendor 不存在,这怎么办??
5 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
懵圈的开发
说说这个网站的教程!
4 个点赞 | 16 个回复 | 分享 | 课程版本 5.5
yxfmlbb
Bootstrap 顶部导航有很多语法错误不改一下?
3 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
Chris_Sun
输入 yarn add cross-env 后报错,无法继续,怎么办?
2 个点赞 | 17 个回复 | 问答 | 课程版本 5.5
zzjdy_0
输入 yarn add cross-env 后报错,无法继续,怎么办?
2 个点赞 | 8 个回复 | 问答 | 课程版本 5.5
jiangpanyue
NPM run dev 的问题?
1 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
lianglunzhong
终端中如何开多个 Homestead 的虚拟机窗口?
1 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
老白兔
为什么 devDependencies 中有了 cross-env,还要执行 yarn add cross-env
1 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
sun-tree
安装 Laravel5.5 后会默认有 yarn.lock 文件和 node_modules 文件夹吗?
0 个点赞 | 11 个回复 | 问答 | 课程版本 5.5
zhbguoke
输入 sample.app 谷歌提示隐私设置错误?
0 个点赞 | 10 个回复 | 问答 | 课程版本 5.5
kerry
项目的根目录是哪啊 ?原谅楼主的实在小白。。。。。
0 个点赞 | 10 个回复 | 问答 | 课程版本 5.5
JackZhang
yarn install --no-bin-links 一直在 waiting?
0 个点赞 | 8 个回复 | 问答 | 课程版本 5.5
poley
真的是够了,显示各种报错,最后又是页面效果不更新
0 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
codeboy
阿伦
node_modules/Bootstrap-Sass 没有了?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
yangyang2018
seeker
$ yarn install --no-bin-links 再次报错,如何解决?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
sniffrose
error Received malformed response from registry for undefined
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.7
ShiVIP
怎么退出 watch-poll?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.7
wongvio
这个环境真的是伤不起了。。。。
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
liuyf
Homestead 环境 yarn install --no-bin-links 一直等待?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
Jeepin
请问我的 NPM 还有救吗?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
adminnn
运行完 NPM run watch-poll ,vboxcpu 占用率飙升正常吗?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
logic
NPM run watch-poll 错误,如何解决?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
Larry_Rui
yarn install --no-bin-links 后一直显示 mozjpeg: compiling from source?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
Ad_jiang
我现在用 5.6 看 5.5 还是 5.7 的?教程比较好?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
David_lk
{{ mix ('CSS/app.css') }} mix 函数找不到报错
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.7
mamahaha
想给 node_modules 文件夹瘦身,哪些内容不能删
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
NeverStopLearning
说好的本地开发映射到虚拟环境(Homestead)中
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
bobofan
在服务器环境中 NPM run watch-poll 也需要开启么??
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
huosuyun
样式导入路径?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
老好人
我遇到的 Windows 环境中 yarn 、NPM install 时候报错的几点总结
0 个点赞 | 3 个回复 | 分享 | 课程版本 5.5
moonsuvn
页面优化调整失败????
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
t996523812
yarn install 执行报错 install has been replaced with add,请教
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
swim
为什么我的静态网页不显示
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
wandell
mix 方法不存在?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
Damian
firstsight
yarn install --no-bin-links 后出现这个问题请问怎么解决?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
Mr_Guo
安装好像卡死了 几个意思啊 ?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
vsenver
执行 yarn add cross-env 报错,已经 devDependencies 了 ?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
haiyunx
SCSS 文件中的 $ 是什么意思?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
beethoven_bz
CSS 引用中 href 里面的{{mix ()}}是干嘛的?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.8
laodong114
{{ mix ('CSS/app.css') }} 没看懂 请指教
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
yuanyuan98120
yarn install --no-bin-linksa 出现警告
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
jieija
yarn install --no-bin-links 后出现错误
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
beatles
resource/assets/SCSS 文件中 @import 路径怎么写?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
codebuf
如果不是 Homestead 环境 ,yarn 是不是还要安装?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
1245
这里样式有点疑惑?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
halweg
可否在每一步命令的时候 讲讲所处的目录?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
bldcs123
NPM run dev 报错 丢失脚本 dev?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
szlwl01
执行 npn run watch-poll 到 95%的时候报错了,这是怎么回事?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
qingfeng
NPM run dev 报错问题的解决方法
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.8
younge
记录- 输入 yarn add cross-env 后报错,解决过程
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.7
yandihuangdi
完美解决 NPM run dev 错误。
0 个点赞 | 0 个回复 | 教程 | 课程版本 5.7
gxpbcn
现在 NPM 已经更新到了 6.7 版本,没必要用 yarn
0 个点赞 | 0 个回复 | 教程 | 课程版本 5.7
LeoSong
请问作者 Sublime Text 3 用的哪个主题
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.7
Zhangzhuow
NPM run watch-poll 报错
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.7
LewisC
$ yarn install --no-bin-links $ yarn add cross-env 出现问题
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.7
demon
app.scss 自动编译动 public/CSS,如果我有其它的要怎么配置啊?
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.5
demon