1 Bootstrap概述
作为Web前端开发框架,Bootstrap集成了HTML标记、CSS样式以及JavaScript行为,使得开发人员、设计人员不再像过去周而复始地写模板、样式、交互效果,极大地节约了时间,提高了开发效率。它使用了最新的浏览器技术,可以提供精致的网页排版方式以及表单、按钮、表格、网格 栅格化、导航等诸多元素,轻松地创造令人愉快的设计效果。
2 下载Bootstrap
在下载Bootstrap文件前,我们简短介绍下LESS。它是Bootstrap样式定制的核心内容,可以充分地发挥地设计人员与开发人员的创造力和想象力。因此,这里为对Bootstrap有更多的操作空间和提升开发效率,我们选用源代码安装。
最新版是
V3.3.5
,所下载文件目录如下:下载文件里的
dist
目录是已编译好的CSS文件、JavaScript文件、及fonts文件。因为,我们使用LESS文件生成所需要的样式,这里dist
目录内容暂不处置。3 下载html5样板文件H5BP
H5BP实现的是一个web页面的标准模板,尤其针对
html5
进行了全面优化,同时也对老浏览器向后兼容,深受开发人员喜爱。来看下Github数据:文件解压后取出
src
目录,将名称src
修改为一个新名称,如Template
,包含内容:4 添加Bootstrap文件
- 以上文件准备就绪后,在
Template
目录中的js文件夹下新建Bootstrap文件夹,接着我们需要将Bootstrap的js
插件复制到该目录中。 - 在
Template
目录的与js
、img
目录的同一级目录下创建一个less
目录,并在此less
文件夹下再新建一个bootstrap
目录,将Bootstrap中less
文件夹下所有后缀名less的文件复制到bootstrap目录里,同时,在less目录下保留一份bootstrap.less
文件,并改名为__main.less
。
至此,整个文件存放结构工作搞定了。
注意,__main.less
文件是我们以后通过编译它来基于所有导入LESS文件生成一个统一的样式表,它需要导入的less
全部存放在bootstrap目录下,因此,我们必须将__main.less
文件导入路径替换为bootstrap下的各文件路径。 - 在对需要自定义样式的less操作时,我们最好把对应文件复制到与
__main.less
同一目录下,以防在原文件上修改出现错误影响开发进度。如,我们需对variables.less
变量进行修改,那么,将该文件复制到__main.less
同一目录下。为便于区分哪些为自定义文件,对variables.less
重命名为_variables.less
。 - 使用WinLess编译器对LESS文件进行编译,需要编译的文件加载进WinLess编译器后,在
__main.less
文件上右击选择'Select output file',定义一个编译文件输出目录,如css目录,最后编译Compile即可。
5 总结
- 在这里,我们对JS、CSS文件的处置操作在实际生产环境中是不可取的,为方便讲解bootstrap整体使用流程,我们没有对JS文件进行做优化,而是把所有JS插件都存放在
js/bootstrap
目录中。 - Bootstrap框架提供非常棒的视觉效果,而且使用Bootstrap可以确保整个web应用程序的风格完全 一致,用户体验一致,操作习惯一致。
- 相信,它优雅、简洁的特性会让你爱上它。