《Bootstrap用户手册-设计响应式网站》读书笔记-1

    虽然bootstarp3都已经出了，市场也火的不得了，但市面上讲bootstrap的书籍太少了，这一本算是唯一的中文版实体书，到手后才知道为什么价格会只有区区35元，整体大小要比正常的小几号，长得还挺另类的，不过书长得再奇怪，工具书内容还是最重要的，认认真真读书学习吧。

    第1章叫做“Bootstrap提供的网站框架”，标题很奇怪，搜了一下原文标题是“bootstrap scaffolding”，即bootstrap脚手架，看来这位译者肯定不是软件开发行业从业者了，心有点凉凉的，看来又为我这个英文不好的人增加了学习难度。

    一般有脚手架的都是full stack的程序，自然bootstrap也算是了，bootstrap从最早2011年8月发布，渐渐从最初CSS驱动的项目发展到内置了很多JavaScript 插件和图标，并且涵盖了表单和按钮元素，还支持响应式 Web 设计，拥有一个12列、940px宽的网格布局系统，官网还提供了构建工具，根据需求选择CSS同JavaScript功能，1.0的版本已经整合了Eric Meyer的Reset CSS等工具，2.0后使用了Nicolas Gallagher写的Normalize.css，在项目中加入bootstrap.css同bootstrap.js文件后，整个项目基础平台就搭建完毕可使用了。

    基本的HTML模板

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

    这里未使用书中的，从bootcss里拿了一个觉得较完美的版本，除了bootstrap外，还加入了jquery代码和响应式需要的viewport的meta配置，这里其实也涉及到一些网页开发的最佳实践：

  1. 放在head的CSS文件，浏览器在加载完毕HTML文档渲染时，会直接在文档应用样式；
  2. 浏览器只有加载完HTML文档后才会实例化成document对象，此时JavaScript才可以进行DOM操作，so~将JavaScript文件放在body里的最下面；
  3. 最上面的<!DOCTYPE html>是html5的声明， 这个是向下兼容的，使用这个声明IE6/7/8等这些浏览器都进入(准)标准模式；

    全局样式

    上面已经提到2.0已经使用了Normalize.css，这里要注意的是以下默认样式是专门针对排版和链接的：

  • 从body中去掉了margin，这样内容就会紧贴浏览器窗口边缘；
  • 为body应用了background-color:white;；
  • bootstrap以@baseFontFamily、@baseFontSize和@baseLineHeight属性作为排版的基准，确保整个网站的标题及其他内容的行高一致；
  • bootstrap通过@linkColor设置全局链接颜色，只在:hover状态下给链接添加下划线；

    重要的一点是修改默认颜色，可以直接修改相应.less文件中的全局变量值。

    默认网格系统

    这个是bootstrap比较重要的内容了，这部分感觉特别像是早期接触的blueprint项目，提供了易用、合理的布局网格，在bootstrap默认有12列940px宽，并不支持响应式布局，在加载响应式css文件后，网格布局会根据viewport宽度在724px到1170px之间伸缩，viewport宽度小于767px时，说明是手持设备，布局中的列会垂直堆叠在一起。

  • 基本网络的HTML 

    给行div标签添加.row类，给列div标签添加.span*类，这里的星号为列数，且相加必须等于12，比如设计出3-6-3、4-8、3-5-4、2-8-2等布局。

  • 平移列

    全用.offset*类可以向右平移列，*用于指定平移的列数。

  • 嵌套列

     在相应的.span*中再添加一个.row，再在其中包含与父容器列数相等的.span*即可。

    流式网格系统

    流式网格系统的列宽定义使用百分比，而不是像素。使用.row-fluid类代替.row，就可以将此行变为流式，流式网格系统中嵌套列会不同，每个.row都会把列数重置为12。

    容器布局

    使用.container来定义内容的容器，流式容器为.container-fluid。

    响应式设计

    （这里的内容非常重要，bootstrap3已经完全基于手持设备进行开发，之后考虑单独一篇来描述吧）

posted @ 2013-11-05 20:01  象叔  阅读(518)  评论(0)  编辑  收藏  举报