Bootstrap基本使用操作

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数据：
Github
文件解压后取出src目录，将名称src修改为一个新名称，如Template，包含内容：

4 添加Bootstrap文件

1. 以上文件准备就绪后，在Template目录中的js文件夹下新建Bootstrap文件夹，接着我们需要将Bootstrap的js插件复制到该目录中。
2. 在Template目录的与js、img目录的同一级目录下创建一个less目录，并在此less文件夹下再新建一个bootstrap目录，将Bootstrap中less文件夹下所有后缀名less的文件复制到bootstrap目录里，同时，在less目录下保留一份bootstrap.less文件，并改名为__main.less。
   至此，整个文件存放结构工作搞定了。
   注意，__main.less文件是我们以后通过编译它来基于所有导入LESS文件生成一个统一的样式表，它需要导入的less全部存放在bootstrap目录下，因此，我们必须将__main.less文件导入路径替换为bootstrap下的各文件路径。
3. 在对需要自定义样式的less操作时，我们最好把对应文件复制到与__main.less同一目录下，以防在原文件上修改出现错误影响开发进度。如，我们需对variables.less变量进行修改，那么，将该文件复制到__main.less同一目录下。为便于区分哪些为自定义文件，对variables.less重命名为_variables.less。
4. 使用WinLess编译器对LESS文件进行编译，需要编译的文件加载进WinLess编译器后，在__main.less文件上右击选择'Select output file'，定义一个编译文件输出目录，如css目录,最后编译Compile即可。

5 总结

1. 在这里，我们对JS、CSS文件的处置操作在实际生产环境中是不可取的，为方便讲解bootstrap整体使用流程，我们没有对JS文件进行做优化，而是把所有JS插件都存放在js/bootstrap目录中。
2. Bootstrap框架提供非常棒的视觉效果，而且使用Bootstrap可以确保整个web应用程序的风格完全 一致，用户体验一致，操作习惯一致。
3. 相信，它优雅、简洁的特性会让你爱上它。