让网站更好看!Bootstrap及素材网站分享!

最近发现很多人不知道怎么调整版面,导致网站卡在反覆修改,无法往下继续写功能的窘境。因此本文会介绍Bootstrap基本用法,及分享如何找到让网站更好看的素材,希望能解决大家的问题。


Bootstrap

Bootstrap为教程推荐的HTML+CSS+JavaScript框架,意思就是说,如果你没有打算实现特别酷炫的功能,基本上你想做的所有效果,都可以透过修改此框架的CSS或JS来实现,因此我建议大家花点时间去看官方文档,了解Bootstrap能做到什么事情,保证有所收获。

❖ Boostrap中文网,整个网站快速浏览,只需要不到两个小时的时间,你只要先知道「输入什么,能输出什么」就够了,之后有需要调用的功能,再回来查询网站该如何操作即可,不用想著把所有内容背下来 ❖


Bootstrap中文网 - 实例精选

http://v3.bootcss.com/getting-started/#examples-framework
这部分将Bootstrap最常见的用法都列出来,只要简单的点进去看一下效果就好,不用急著理解是怎么做到,之后的文档都会讲解,如果有看到喜欢的、想放在网站上的功能,可以先做个笔记备注起来


Bootstrap中文网 - 全局 CSS 样式

http://v3.bootcss.com/css
关于Bootstrap所有CSS样式的设置都在这里,只要快速看过,了解有什么样式可以透过修改CSS实现,不用全部记起来

❖ 不过以下三个部分,希望大家多花点时间去看,很多人都是跌在这些坑里 ❖

  • 栅格系统:非常重要!非常重要!非常重要!很多人排版问题都出于此,这部分介绍了行与列的关系,及各种运用,一定要看
  • 排版:常用的关于文字的设定,都在这里,不论是标题、内文、特殊用法,花点时间看准没错
  • 按钮:按钮是大家常做变化的部分,这里介绍了一些基本的用法,或许你想要的功能不需要透过修改CSS即可实现


Bootstrap中文网 - 组件

http://v3.bootcss.com/components
组件包含了字体图标、下拉菜单、按钮组、导航、警告框、弹出框等更多功能。有没有看到之前掉坑的部分阿?这部分也是先看过就好,知道哪些组件其实是透过Bootstrap实现,之后有需要再回来查询

❖ 以下几个部分,是最常见的问题,可以重点看一下 ❖

  • 下拉菜单:下拉选单的基本用法及变化
  • 按钮组:如何实现将按钮分组显示,整合在一起(这问题最近常被问到)
  • 导航条:上方导航条的基本设置(也是常见问题)
  • 缩略图:图片展示的进阶用法,Bootstrap内建就有了


Bootstrap中文网 - JavaScript 插件

http://v3.bootcss.com/javascript
Javascript是让网站页面更酷炫的东西,但前期建议大家先不用花太多时间去研究,Bootstrap内建的JS插件已经很够用了,可以先从了解、用好这些JS语法开始

❖ 这边教大家一个小技巧,以往我们调用Bootstrap的JS插件时,都是在application.js一个一个导入,实际上可以一次导入所有插件,需要时直接在页面上调用即可,作法如下 ❖

app/assets/javascripts/application.js
- //= require bootstrap/alert
- //= require bootstrap/dropdown
+ //= require bootstrap




Code School - Blasting Off with Bootstrap(修选:5.5hr)

Blasting Off with Bootstrap
如果上述文档看完,你还想是摸不著头绪,可以上Code School上学习Bootsrap的教程,会教你Bootstrap的基本用法,大约需要5.5个小时(这课程我没有上过,不过许多人都推荐,因此分享出来)

※ Bootstrap就介绍到这边,要学会更好的运用,绝对是不断地练习,但有基础知识也是很重要的,所以今天才推荐大家至少看完官方文档,再开始实战练习 ※


Google Chrome

Google Chrome - 开发者工具

这边额外介绍一个在调适CSS时非常实用的技能,看完之后你就会知道为什么这么多人都是使用Google Chrome来检查HTML页面

Step 1. 首先对页面点击右键,点击最下方的「检查」

Step 2. 这时候会出现开发者工具

可以看到左方区块显示的是页面的HTML,右侧则显示物件的CSS样式

Step 3. 点击工具左上角的箭头,并选到想要调适的物件上

点击会发现移到页面上时,页面会变成被框住的物件,并显示基本样式资讯

Step 4. 修改物件的CSS

选到物件后,会发现右方列出所有属于该物件的CSS样式,此时可以随意调整,你会发现页面上的物件会立即根据你调整的样式发生变化,甚至可以将CSS样式取消(调整样式前方的勾选选项)

Step 5. 将调适好的CSS,直接输入到项目中对应的CSS样式

※ 此工具在调整页面时十分好用,本意就是让你可以快速修改并即时显示 ※

上述只是介绍了最基本的用法,你甚至能找出为什么物件套用了你的属性,却没有变化,可能是因为被父属性覆盖了。

其馀进阶功能就不多做介绍,可以先将基本用法熟悉运用。


网站素材

Icon 图标

Icon的运用在网站中非常广泛,这里只介绍三个最常用的Icon素材网站,其实我觉得这三个网站就能满足90%对Icon的需求

Font Awesome:小型/纯色/基本样式的Icon在这都能找到,一般使用这个网站

http://fontawesome.io


Flaticon:这网站能满足你大部分的需求,建议买会员(USD$9.99/M),会节省你非常多找素材网站的时间

http://www.flaticon.com


Iconfont 阿里巴巴矢量圖库:国外素材网站常常找不到Wechat、微博等Icon,此时才会来这找

http://www.iconfont.cn




Color 配色

网站配色不知道怎么选?对色彩敏感度不佳?赶快试试以下几个网站吧!

Colordot:非常好用的网站,随著鼠标在画面上移动,会不断变更色彩,找到喜欢的颜色后,只要点击左键就会储存,并且可以储存多种颜色,来调整网站主要配色

https://color.hailpixel.com


BrandColor:列出常见国外企业品牌配色,不知道该怎么选择网站配色时,可以直接参考

https://brandcolors.net


Material:网页标准色网站,里面有基本配色,可以依造色调挑选

https://www.materialui.co/colors


Nippon Colors:好看的网站,内为各种日本传统色,点击喜欢的颜色后,背景色会自动调整,方便检视

http://nipponcolors.com/#shironezumi 日本传统色




Pohto 图片

图片素材网站太多了,以下只介绍常用的几个,StockSnap、Pexels、Picjumbo使用起来差不多,图片皆为免费使用;

StockSnap

https://stocksnap.io


Pexels

https://www.pexels.com


Picjumbo

https://picjumbo.com


Gratisography:风格强烈的图片网站

http://www.gratisography.com


Shutterstock:个人认为最好的付费图片素材网站,不过费用不便宜

http://www.shutterstock.com




Vector 矢量图

Freepik:其实网站里不止矢量图,还有图片及Icon,不过个人最常拿来搜索矢量图素材

http://www.freepik.com




Template 模版

Bootsnipp:基于Bootstrap的模版,内有许多制作精良的模版素材,都有HTML/CSS/Javascript可直接套用

http://bootsnipp.com


Codepen:非常酷炫的模版网站,也都有HTML/CSS/Javascript可直接套用

https://codepen.io





Bootstrap Theme(选修)

Bootwatch:一个基于Bootstrap的开源项目,上面有许多不同风格的主题,如果想要在原先的Bootstrap上做点变化,又不想套用复杂的模版,以下会教大家如何操作

http://bootswatch.com

Step 1. 先找到喜欢的主题 -> 点击主题名称下拉选单 -> 对bootstrap.css选项点击右键,选择另存连结

Step 2. 将bootstrap.css档案更名为bootstrap.scss

Step 3. 将bootstrap.scss 放到项目中的 app/assets/stylesheets 文件夹

大功告成!

❖ 如果想要变更主题,只要再次如法炮制即可 ❖

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus