Bootstrap笔记（一） 博客分类： Coding bootstrap

最近折腾了好阵子的以Spring为基干的开发框架。其中用到Bootstrap，些许心得体会记在这里。

说起Bootstrap火了这许久，无论阿猫阿狗们都开始用了。您要不会耍两把，都不好意思自称是个“不懂设计的程序员”！哈！

后台做的多了，刚开始接触前台时，狮子咬天无从下口。以前曾折腾过个人站点，各种半透明磨砂效果，各种动画特效，各种控件杂七杂八的拼在一起。每个效果单独倒是都还可以，凑在一块就不是那回事了，左右不过是堆“漂亮”的垃圾。

Bootstrap的风格应该说是在以简约为主体——黑白灰为主色，辅以柔和的线条，再点缀些鲜艳的蓝绿赤橙。这种严肃里掺杂了点活泼的风格，正好私用商用两相宜。我就那么一说，哈。

 

★：下载

Bootstrap可以在它的官网下载到。http://twitter.github.io/bootstrap/

初次的时候直接点主页的“Downlaod Bootstrap”即可，熟悉后用自定义(customize)页面定制更方便些。强烈推荐后者。

Bootstrap的全部内容包括：

• Css：Bootstrap的核心。

  下载的文件中css有两个，据网上讲，如果你想要响应式布局，两个都需要包含进去（Bootstrap3以后，将会合并成1个）。但如果你是定制的，那么就只有1个文件。似乎应该大概可能是Bootstrap帮你合并过了。

• Javascript：如果还想使用它的控件，那么Javascript也是需要的。

  一样可以在自定义页面定制，比如只选择想要的。下载的文件包括所有控件所需的JS，从源代码能看出来是所有片段拼在一起。

• Image：Glyphicons的图标，个人觉得是够用了。

  有两个文件分别是黑白两色的。原本收费的图标，和Bootstrap一起则可以免费使用。但需要在网站里提供个link指向Glyphicons，不过是可选的。

除了CSS外，另外两个都是可选的。

 

★：定制

面对上面提到的定制页面，初期不熟悉时，茫茫多的选项可能让人无从选择，介绍下个人的“点滴”心得。

• 1. Choose components

  全选！除了有些业务性较强的情况下，Carousel可能用不上。Responsive里面窄屏和超大屏的部分也有可能比较多余，但也许说不上就会有某个Boss在使用手机或平板或大屏，谁知道呢！其他的我觉得都需要。

• 2. Select jQuery plugins

  同上，只有Carousel似乎可切出。除非和已有的其他控件库重复，其他控件貌似都是基本和常用的。

• 3. Customize variables

  这里参数较多，好在注释也比较清晰，但是实在是不少。

  我只调整了Navbar -> @navbarHeight。如果要自己鼓捣CSS的话比较烦，涉及几个地方，不如在这里一次搞定。

  另外字体也应该在这里搞定才好。特别是如果不加中文字体，中文会无法显示。（但加上以后发现整体效果变差，最终还是自己折腾CSS去了。）

 

Bootstrap笔记（二）