样式美化

本教程最新版为 9.x,当前版本已放弃维护,请阅读最新版本!

样式美化

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

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

Bootstrap

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

网站导航

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

<...>

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

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

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 163

kaen
NightingaleWK
在 Laravel 8.x 中优雅且轻松的安装 Bootstrap 框架
17 个点赞 | 7 个回复 | 分享 | 课程版本 8.x
piupiu
抠脚大叔
NPM run watch-poll 无法运行解决方法?
10 个点赞 | 12 个回复 | 分享 | 课程版本 5.5
permission
yarn install --no-bin-links 是什么意思?
10 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
NightingaleWK
在 Laravel 9.x 中优雅且轻松的安装 Bootstrap 框架(vite 篇)
9 个点赞 | 7 个回复 | 分享 | 课程版本 9.x
幽弥狂
本章建议修改
8 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
懵圈的开发
说说这个网站的教程!
7 个点赞 | 19 个回复 | 分享 | 课程版本 5.5
wen_style
输入 NPM run dev,报 node-Sass/vendor 不存在,这怎么办??
5 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
Chris_Sun
输入 yarn add cross-env 后报错,无法继续,怎么办?
4 个点赞 | 17 个回复 | 问答 | 课程版本 5.5
younge
记录- 输入 yarn add cross-env 后报错,解决过程
4 个点赞 | 1 个回复 | 分享 | 课程版本 5.7
yxfmlbb
Bootstrap 顶部导航有很多语法错误不改一下?
3 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
zzjdy_0
输入 yarn add cross-env 后报错,无法继续,怎么办?
2 个点赞 | 8 个回复 | 问答 | 课程版本 5.5
hiliyipeng
yarn add cross-env
2 个点赞 | 1 个回复 | 分享 | 课程版本 6.x
niconiconinini
在laravel安装 bootstrap框架的问题与解决方法
2 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
jiangpanyue
NPM run dev 的问题?
1 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
lianglunzhong
终端中如何开多个 Homestead 的虚拟机窗口?
1 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
Eroko
解决mix not found的问题
1 个点赞 | 4 个回复 | 分享 | 课程版本 8.x
gstarcad
[已解决]Laravel8 如何解决npm run dev无法找到mix的问题
1 个点赞 | 4 个回复 | 问答 | 课程版本 8.x
rabbit_wl
NPM run dev 启动时报错,折腾了好几天,终于成功了运行了
1 个点赞 | 3 个回复 | 分享 | 课程版本 6.x
ruodee
我遇到的 Windows 环境中 yarn 、NPM install 时候报错的几点总结
1 个点赞 | 3 个回复 | 分享 | 课程版本 5.5
yarn install,yarn add,NPM run dev 报错
1 个点赞 | 2 个回复 | 博客 | 课程版本 6.x
d1270469522
记录 Expected version ">=12.14.0". Got "12.10.0"
1 个点赞 | 1 个回复 | 分享 | 课程版本 8.x
VisualAnimal
NPM run dev 报错
1 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
老白兔
为什么 devDependencies 中有了 cross-env,还要执行 yarn add cross-env
1 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
嘉宝君
关于执行yarn add cross-env报错
1 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
ww0000
安装yarn时出现的问题的解决方案
1 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
懒惰的大叔
laravel8 执行 npm run watch-poll报错!求解决方法。
0 个点赞 | 13 个回复 | 问答 | 课程版本 8.x
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 个点赞 | 9 个回复 | 问答 | 课程版本 5.5
Cosmos
运行 Composer require Laravel/ui --dev 报如下错误
0 个点赞 | 7 个回复 | 问答 | 课程版本 6.x
codeboy
poley
真的是够了,显示各种报错,最后又是页面效果不更新
0 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
誓言玄夏
npm run watch-poll 报错
0 个点赞 | 5 个回复 | 问答 | 课程版本 8.x
bing_
Laravel 6.x 执行 NPM run watch-poll 报错 [已解决]
0 个点赞 | 5 个回复 | 分享 | 课程版本 6.x
阿伦
node_modules/Bootstrap-Sass 没有了?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
seeker
$ yarn install --no-bin-links 再次报错,如何解决?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
懒惰的大叔
执行npm run dev报错!
0 个点赞 | 4 个回复 | 问答 | 课程版本 8.x
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
cocapai
能不用npm吗?
0 个点赞 | 3 个回复 | 分享 | 课程版本 7.x
Frankzhang
记录 1:$ Composer require Laravel/ui:^1.0 --dev 报错
0 个点赞 | 3 个回复 | 分享 | 课程版本 6.x
jhansin
SCSS 编译成功后样式无改变
0 个点赞 | 3 个回复 | 分享 | 课程版本 5.8
bigonion
boorstrap 无法正常引入
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.8
Ad_jiang
我现在用 5.6 看 5.5 还是 5.7 的?教程比较好?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
David_lk
{{ mix ('CSS/app.css') }} mix 函数找不到报错
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.7
wandell
mix 方法不存在?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.7
mamahaha
想给 node_modules 文件夹瘦身,哪些内容不能删
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
说好的本地开发映射到虚拟环境(Homestead)中
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
麦穗
在服务器环境中 NPM run watch-poll 也需要开启么??
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
huosuyun
样式导入路径?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
moonsuvn
页面优化调整失败????
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
kakaxi
Allowed memory size of XXXXXX bytes exhausted
0 个点赞 | 2 个回复 | 问答 | 课程版本 8.x
WindyLater
Composer require Laravel/ui --dev 报错应该如何解决?
0 个点赞 | 2 个回复 | 问答 | 课程版本 6.x
leo5461
NPM run dev 报错,看了讨论也百度过,仍然不找到解决办法
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.7
耗尼玛
NPM run dev 命令报错
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
jamesquery
执行 Composer require Laravel/ui --dev 出现此问题
0 个点赞 | 2 个回复 | 问答 | 课程版本 6.x
星点
停留在这无法编译是怎么回事啊
0 个点赞 | 2 个回复 | 教程 | 课程版本 5.8
PHP_LHF
NPM run dev 运行失败
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
YUKEY
告诉我怎么用编辑器来编辑虚拟机的文件。
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
holyLight
为什么 app.scss 和 app.css 内容不一样?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
jhansin
执行 NPM run dev 时报错
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.8
bing_
我几天几夜没配置好这几步,有人能帮帮忙吗?
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.8
ZcZmm
关于 NPM run watch-poll 报错问题
0 个点赞 | 2 个回复 | 分享 | 课程版本 5.5
beethoven_bz
CSS 引用中 href 里面的{{mix ()}}是干嘛的?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.8
t996523812
yarn install 执行报错 install has been replaced with add,请教
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
swim
为什么我的静态网页不显示
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.7
NUil
如果不是 Homestead 环境 ,yarn 是不是还要安装?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
firstsight
yarn install --no-bin-links 后出现这个问题请问怎么解决?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
Mr_Guo
安装好像卡死了 几个意思啊 ?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
aodaobi
执行 yarn add cross-env 报错,已经 devDependencies 了 ?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
haiyunx
SCSS 文件中的 $ 是什么意思?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
heaker
记录,执行npm run watch-poll报错mix不是内部命令
0 个点赞 | 1 个回复 | 问答 | 课程版本 9.x
水墨先生
SASS_BINARY_SITE报错问题,laravel8.x
0 个点赞 | 1 个回复 | 问答 | 课程版本 8.x
Tektite
kakaxi
composer require laravel/ui:^2.0 --dev 报错
0 个点赞 | 1 个回复 | 问答 | 课程版本 7.x
djw215
yarn install --no-bin-links;NPM run dev 踩坑记录
0 个点赞 | 1 个回复 | 分享 | 课程版本 6.x
d1270469522
运行『yarn install --no-bin-links』出错
0 个点赞 | 1 个回复 | 问答 | 课程版本 6.x
yyyyyy
请问这装的是 Bootstrap 几?
0 个点赞 | 1 个回复 | 问答 | 课程版本 6.x
懒惰的大叔
Composer 的时候报错?怎么解决?
0 个点赞 | 1 个回复 | 问答 | 课程版本 6.x
ATian
node_modules/webpack/bin/webpack.js: not found
0 个点赞 | 1 个回复 | 问答 | 课程版本 6.x
xiangyang
Windows 下 Homestead 无法 NPM run dev 启动失败解决
0 个点赞 | 1 个回复 | 分享 | 课程版本 6.x
weskiller
CentOS 7 环境下 NPM run dev 失败的原因
0 个点赞 | 1 个回复 | 分享 | 课程版本 6.x
hangzatm
NPM run dev 时报如下图的错误,说一下我的解决方法
0 个点赞 | 1 个回复 | 分享 | 课程版本 5.8
lara121
依賴裏已經有 cross-env 了還需要 yarn add 嗎?
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.8
datangkang123
安装出错记录
0 个点赞 | 1 个回复 | 分享 | 课程版本 5.8
laodong114
{{ mix ('CSS/app.css') }} 没看懂 请指教
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
yandihuangdi
完美解决 NPM run dev 错误。
0 个点赞 | 1 个回复 | 教程 | 课程版本 5.7
Zhangzhuow
NPM run watch-poll 报错
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.7
LewisC
$ yarn install --no-bin-links $ yarn add cross-env 出现问题
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
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
菜鸟飞飞
SASS_BINARY_SITE=npm.taobao.org/mirrors/node-sass yarn 运行报错
0 个点赞 | 0 个回复 | 代码速记 | 课程版本 9.x
andu
bootstrap5背景色
0 个点赞 | 0 个回复 | 代码速记 | 课程版本 9.x
robinfire
Laravel 8.x 运行npm run watch-poll报错解决办法
0 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
刘大山笔记
laravel/ui 安装错误解决后的总结
0 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
酱汁儿
懒惰的大叔
laravel7,按照教程执行yarn install --no-bin-links后出现好多警告
0 个点赞 | 0 个回复 | 问答 | 课程版本 7.x
ww0000
处理npm run dev错误心得
0 个点赞 | 0 个回复 | 分享 | 课程版本 8.x
王小大
无法安装扩展,执行yarn install报错
0 个点赞 | 0 个回复 | 问答 | 课程版本 7.x
王小大
貌似yarn淘宝源用不了了
0 个点赞 | 0 个回复 | 问答 | 课程版本 7.x
kael00lee
yarn install的时候,报镜像路径 returned a 405错误
0 个点赞 | 0 个回复 | 问答 | 课程版本 7.x
Gyh1996
关于 Bootstrap 前端框架版本问题
0 个点赞 | 0 个回复 | 分享 | 课程版本 7.x
jiangxiulong
NPM run dev 报错解决后分享
0 个点赞 | 0 个回复 | 分享 | 课程版本 6.x
JD26
yarn add cross-env 报错与 NPM run dev 报错的解决方法
0 个点赞 | 0 个回复 | 分享 | 课程版本 6.x
zerocoder
yarn install --no-bin-links 报错
0 个点赞 | 0 个回复 | 分享 | 课程版本 6.x
lanxiuying
yarn add cross-env 提示 EPROTO: protocol error, symlink
0 个点赞 | 0 个回复 | 分享 | 课程版本 6.x
NPM run dev 报错
0 个点赞 | 0 个回复 | 博客 | 课程版本 6.x
NPM run dev 命令后报错 Module build failed
0 个点赞 | 0 个回复 | 问答 | 课程版本 6.x
lzw123
NPM run dev 报错, 如果不行可以试试复制 package.json 的内容
0 个点赞 | 0 个回复 | 分享 | 课程版本 6.x
ming
解决报错
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.8
ruiyuan
yarn 安装报错
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.8
whitek
关于 NPM run watch-poll 出错以及 Linux 下进程前后台切换
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
qingfeng
NPM run dev 报错问题的解决方法
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.8
gxpbcn
现在 NPM 已经更新到了 6.7 版本,没必要用 yarn
0 个点赞 | 0 个回复 | 教程 | 课程版本 5.7
LeoSong
请问作者 Sublime Text 3 用的哪个主题
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.7
demon
app.scss 自动编译动 public/CSS,如果我有其它的要怎么配置啊?
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.5
demon