2

Bootstrap 学习笔记:起步

 2 years ago
source link: https://blog.huangyafei.com/post/2013-09-23/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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属性。尽量简单就好。
  • 重复上述过程,直到自己满意为止。

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK