Bootstrap 学习笔记:起步

Bootstrap CDN

MaxCDN 为 Bootstrap 提供了CDN加速服务,具体的文件地址为:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

实际测试了下速度,可能是国外CDN的原因,在国内访问并没有太理想的速度,反倒是新浪SAE提供的常用JS/CSS Framework CDN服务速度很快,包含 Bootstrap 的最新版本3.0.0。

新浪SAE的 Bootstrap 文件载入速度
MaxCDN的 Bootstrap 文件载入速度

Bootstrap 基本文件组织

基本目录结构包括 css、js、fonts。其中CSS和JS文件包含压缩版与未压缩版,区别是压缩版以bootstrap.min.*命名。

Bootstrap 基本文件组织结构

基本模板

Bootstrap 基本模板的特点有:
1.部分引入信息:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码是响应式布局控制代码,如果不希望网页具有响应式功能,则删除这行代码。
其余就是在部分引入 Bootstrap 的CSS文件,在结束之前引入JS文件。

关于响应式布局

我的理解是 Bootstrap 3.0.0跟之前版本不同的地方在于,与之前的版本不同,Bootstrap 内置了响应式布局,把该特性提升到了系统级的设计上了,之前使用2.3.0版本时使用响应式布局,除了主CSS文件外还需要单独引用一个bootstrap-responsive.css文件来开启。
Bootstrap 默认打开响应式布局,想要禁用:
1.移除上文提到的 viewPort
2.通过为.container 设置一个 width 值覆盖框架默认的 width 设置。并确保这个设置是放在主CSS之后加载。

关于定制

压缩版还是未压缩版?

未压缩版方便阅读代码,修改代码。而压缩版则利于精简文件大小,降低服务器成本。使用外部CDN功能则不需要过于纠结这个问题。但如果进行了代码定制,使用修改过的非标准版的 Bootstrap ,情况就另说了。

只使用部分功能的定制

大多数小项目不可能使用到 Bootstrap 全部功能,或者说大多数情况下我们知识使用 Bootstrap 的一小部分功能。这个时候就要对它进行定制。
定制过程简单来说,就是从标准CSS代码中找到使用到的部分(如导航、按钮),然后根据自己项目的实际情况对定制的这部分代码进行修改,比如修改定制部分组件的 class 名,使其符合自己项目的命名规范。

定制的基本工作流程:
  • 对于每个需要定制的元素,在Bootstrap CSS文件(未压缩版)中找到其出现的位置。
  • 将需要定制的样式代码拷贝并粘贴到你自己的文件中。例如,定制导航条(navbar)的背景(background),只需要拷贝.navbar样式。
  • 在你自己的样式表文件中修改拷贝过来的CSS代码。不需要增加新的class或使用!important属性。尽量简单就好。
  • 重复上述过程,直到自己满意为止。