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

时间 2019-12-01

标签 bootstrap 用户手册设计响应网站读书笔记栏目 Bootstarp 繁體版

原文原文链接

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

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

通常有脚手架的都是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文件后，整个项目基础平台就搭建完毕可以使用了。html5

基本的HTML模板jquery

<!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配置，这里其实也涉及到一些网页开发的最佳实践：git

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

全局样式github

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

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

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

默认网格系统浏览器

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

基本网络的HTML

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

平移列

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

嵌套列

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

流式网格系统

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

容器布局

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

响应式设计

（这里的内容很是重要，bootstrap3已经彻底基于手持设备进行开发，以后考虑单独一篇来描述吧）