最近用bootstrap框架为某公司做了个门户网站,简单总结下这次项目下来的经验。它不仅可以帮助解决低端浏览器不支持css3的问题,同时解决了不同分辨率上网页布局的展示,其最大的好处就是:写非常少的代码,即可实现多终端的页面适配,。
Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架,集合CSS和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面,而且占用资源非常小。
使用Bootstrap构建优雅的Web Page,Bootstrap的核心就是基于Less框架构建的CSS。所以谈到Bootstrap,就必须得说说Less。
关于Less
Less是一个动态CSS语言框架,Less扩展了CSS的动态特性,相对于传统的CSS,Less提供了更为强大的功能和灵活性。基于Less,我们可以在编写CSS时使用嵌入式申明、变量、混合模式、运算和颜色编辑功能函数等。简单来说就是Less可以让你像编程一样编写CSS,把程序存储在后缀为less的文件中,Less提供了框架将其编译为标准的css文件。举个简单的例子,如果你想为多个样式设置同一个颜色,可以这样写:
@color: #FFFFFF;
h1 {
color: @color;
}
#sub{
color: @color;
}
编译后的css就是:
h1 {
color: #ffffff;
}
#sub {
color: #ffffff;
}
以上代码只是Less的最简应用。除了变量,还可以在CSS进行数学运算、传参、文件相互引用、规则嵌套等等。可以想象,这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性和可维护性上,Less都让CSS开发有了大幅提升,动态性增强了。
编译Less的方式很简单,有两种方式,一种是在使用时编译。下载less.js,在样式中引用:
<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">
<script src="js/less.js" type="text/javascript"></script>
注意要把样式文件放到js文件申明的前面。
但现在bootstrap4.0 (http://wiki.jikexueyuan.com/project/bootstrap4/ 国人最喜欢的中文文档)的推出,官方已废除Less,并将Sass作为默认开发工具。
Sass 是 Syntactically Awesome Style Sheets 的缩写,它是CSS的 一个开发工具,提供了很多便利和简单的语法,让CSS看起来更像是一门语言,这种特性也被称为“CSS预编译” 。它的主要涉及思想是让我们可以按照编程的思路编写自己的样式,然后通过“编译器”生成我们所需要的CSS文件。
CSS 预处理的缺点
我认为CSS 预处理器语言无非是程序员的提高逼格的媒介,它增加了一个编译过程,将简单的CSS复杂化,同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。
管理Sass项目文件结构
CSS 预处理器的特点之一是可以把你的代码分割成很多文件,而且不会影响性能。这都归功于 Sass 的@import命令,只要在你的开发环境下,你调用不管多少文件,最终将编译出一个 CSS 样式文件。
- Sass是成熟的 CSS 预处理器之一,而且又有一个稳定,强大的团队在维护;
- Sass参考的教程多;
- Sass有一些成熟稳定的框架,特别是 Compass,新秀还有 Foundation 之类;
- 还有一个原因是国外讨论 Sass 的同行要多于 LESS。
当然,需要注意的是:
响应式设计的原则:
1.移动优先(在设计的初期就要考虑的页面如何在多终端展示)
2.渐进增强 (充分发挥硬件设备的最大功能)
这里简单说下分辨率:
作为响应式,当然少不了分辨率这东西。
分辨率就是屏幕图像的精密度,是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多,所以分辨率是个非常重要的性能指标之一。
分辨率是指分辨物理量细节的能力 ,就是屏幕图像的精密度,是指显示器所能显示的像素的多少。 分辨率是密度,像素是单位。比如17寸显示器,800 x 600分辨率,就是17寸的面积中,有800乘以600也就是48万个像素点。相较而言,15寸和20寸相同800x600分辨率,15寸的看上去精细,20寸的颗粒粗. 分辨率由像素组成.