Menu

样式美化

样式美化

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

$ 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 网站上。

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

上一篇 下一篇
讨论数量: 85

kaen
jiehui
抠脚大叔
NPM run watch-poll 无法运行解决方法?
10 个点赞 | 7 个回复 | 分享 | 课程版本 5.5
permission
yarn install --no-bin-links 是什么意思?
8 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
Chasers9527
本章建议修改
7 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
wen_style
输入 NPM run dev,报 node-Sass/vendor 不存在,这怎么办??
5 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
懵圈的开发
说说这个网站的教程!
3 个点赞 | 13 个回复 | 分享 | 课程版本 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
seeker
$ yarn install --no-bin-links 再次报错,如何解决?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
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
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
laodong114
{{ mix ('CSS/app.css') }} 没看懂 请指教
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
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
yuanyuan98120
yarn install --no-bin-linksa 出现警告
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.7
demon
app.scss 自动编译动 public/CSS,如果我有其它的要怎么配置啊?
0 个点赞 | 0 个回复 | 问答 | 课程版本 5.5
demon
刻意练习,每日精进。
4
点赞
4526
浏览
85
讨论

作者