bootstrap学习笔记

来源：互联网发布：slf4j 输出sql 编辑：程序博客网时间：2024/06/06 09:05

对于bootstrap框架网上有褒有贬，看过有位同行的评论说如果对它有深入的学习，灵活的使用，其实它还是很好的前端利器，但对于个性化比较强的网站来说，自己写CSS更灵活，也有朋友说对于兼容性更好、更可靠的做法是对于各个规格的分辨率写各自的CSS文件。总体来说bootstrap存活发展经历了5个年头，它的优点大于缺点是被大家承认的。

我个人感觉bootstrap的代码规范化，有些CSS的技巧是值得继承、学习和发扬的。

以下内容来自于bootstrap中文网 http://www.bootcss.com/

编码规范

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

语法

用两个空格来代替制表符(tab)这是唯一能保证在所有环境下获得一致展现的方法。代码编辑器(如Atom,WebStorm)可定制tab空格的数量
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。使用单引号一是不符合XML语法标准，二可能是有些编辑语言（如: asp)用单引号做为注释的开头吧
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。如: <br>、<img>...
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

e.g.

<!DOCTYPE html><html>  <head>    <title>Page title</title>  </head>  <body>    <img src="images/company-logo.png" alt="Company">    <h1 class="hello-world">Hello, world!</h1>  </body></html>

HTML5 doctypeHTML5 doctype:为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现
语言属性
根据HTML5规范：强烈建议为html根元素指定lang属性，为文档设置正确的语言,将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等

IE 兼容模式IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 IE 兼容模式edge mode，从而通知 IE 采用其所支持的最新的模式。
字符编码通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

<!DOCTYPE html>  <!--HTML5 doctype-->

<html lang="en-us"> <!--语言属性-->

<head>
  <meta charset="UTF-8">  <!--字符编码-->

  <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--IE 兼容模式-->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- External CSS --> <!--引入 CSS 和 JavaScript 文件-->

  <link rel="stylesheet" href="code-guide.css">

  <!-- In-document CSS -->

  <style>

    /* ... */

  </style>

</head>

<body>

  <!-- JavaScript -->

  <script src="code-guide.js"></script>

</body>

</html>


属性顺序HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

<a class="..." id="..." data-toggle="modal" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

布尔（boolean）型属性布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。更多信息请参考 WhatWG section on boolean attributes：元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。如果一定要为其赋值的话，请参考 WhatWG 规范：如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。简单来说，就是不用赋值。

<input type="text" disabled><input type="checkbox" value="1" checked><select>  <option value="1" selected>1</option></select>

减少标签的数量编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：<!-- Not so great --><span class="avatar">  <img src="..."></span><!-- Better --><img class="avatar" src="...">

JavaScript 生成的标签通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

CSS
语法用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。

/* Bad CSS */

.selector, .selector-secondary, .selector[type=text] {

  padding:15px;

  margin:0px 0px 15px;

  background-color:rgba(0, 0, 0, 0.5);

  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF

/* Good CSS */

.selector,

.selector-secondary,

.selector[type="text"] {

  padding: 15px;

  margin-bottom: 15px;

  background-color: rgba(0,0,0,.5);

  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

声明顺序相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。

盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。完整的属性列表及其排列顺序请参考 Recess。

.declaration-order {

  /* Positioning */

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 100;

  /* Box-model */

  display: block;

  float: right;

  width: 100px;

  height: 100px;

  /* Typography */

  font: normal 13px "Helvetica Neue", sans-serif;

  line-height: 1.5;

  color: #333;

  text-align: center;

  /* Visual */

  background-color: #f5f5f5;

  border: 1px solid #e5e5e5;

  border-radius: 3px;

  /* Misc */

  opacity: 1;

不要使用 @import与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

使用多个 <link> 元素
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

媒体查询（Media query）的位置将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。

.element { ... }

.element-avatar { ... }

.element-selected { ... }

@media (min-width: 480px) {

  .element { ...}

  .element-avatar { ... }

  .element-selected { ... }

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

在 Textmate 中，使用 Text → Edit Each Line in Selection(⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */

.selector {

  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);

          box-shadow: 0 1px 2px rgba(0,0,0,.15);

单行规则声明对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。这样做的关键因素是为了错误检测 -- 例如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。

/* Single declarations on one line */

.span1 { width: 60px; }

.span2 { width: 140px; }

.span3 { width: 220px; }

/* Multiple declarations, one per line */

.sprite {

  display: inline-block;

  width: 16px;

  height: 15px;

  background-image: url(../img/sprite.png);

简写形式的属性声明在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：

padding
margin
font
background
border
border-radius

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。在 MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。

/* Bad example */

.element {

  margin: 0 0 10px;

  background: red;

  background: url("image.jpg");

  border-radius: 3px 3px 0 0;

/* Good example */

.element {

  margin-bottom: 10px;

  background-color: red;

  background-image: url("image.jpg");

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;

Less 和 Sass 中的嵌套避免不必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

// Without nesting

.table > thead > tr > th { … }

.table > thead > tr > td { … }

// With nesting

.table > thead > tr {

  > th { … }

  > td { … }

Less 和 Sass 中的操作符为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。

// Bad example

.element {

  margin: 10px 0 @variable*2 10px;

// Good example

.element {

  margin: 10px 0 (@variable * 2) 10px;

注释代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

/* Bad example */

/* Modal header */

.modal-header {

...

/* Good example */

/* Wrapping element for .modal-title and .modal-close */

.modal-header {

...

class 命名

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和.btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。

/* Bad example */

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

选择器对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

/* Bad example */

span { ... }

.page-container #stream .stream-item .tweet .tweet-header .username { ... }

.avatar { ... }

/* Good example */

.avatar { ... }

.tweet-header .username { ... } //选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3

.tweet .avatar { ... }

代码组织以组件为单位组织代码段。
制定一致的注释规范。
使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

/*

 * Component section heading

*/

.element { ... }

/*

 * Component section heading

 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.

*/

.element { ... }

/* Contextual sub-component or modifer */

.element-heading { ... }

编辑器配置将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。
保存文件时，删除尾部的空白符。
设置文件编码为 UTF-8。
在文件结尾添加一个空白行。

BootCDN
稳定、快速、免费的前端开源项目 CDN 服务
共收录了 2852 个前端开源项目
这里收集了常用前端开源项目CDN服务连接地址，可在搜索栏中搜索你指定的库源，引入到你的开发项目中，以便节省你自己服务的流量开销。

jQuery API 中文文档
http://www.jquery123.com/

Yarn 
Yarn 是一个依赖管理工具。它能够管理你的代码，并与全世界的开发者分享代码。Yarn 是高效、安全和可靠的，你完全可以安心使用。
Yarn 能够让你使用其他开发者开发的代码，让你更容易的开发软件。如果你在使用中发现任何问题，欢迎发 issue 或者贡献代码，一旦问题被修复，你就可以继续使用 Yarn 战斗了。
代码是通过包（有时也被称为模块）进行共享的。 在每一个包中包含了所有需要共享的代码，另外还定义了一个 package.json 文件，用来描述这个包。

速度超快: Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
超级安全: 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
超级可靠: 使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。
离线模式: 如果你以前安装过某个包，再次安装时可以在没有任何互联网连接的情况下进行。
确定性: 不管安装顺序如何，相同的依赖关系将在每台机器上以相同的方式安装。
网络性能: Yarn 有效地对请求进行排队处理，避免发起的请求如瀑布般倾泻，以便最大限度地利用网络资源。
Same Packages: 从 npm 安装所有包，让你的工作流程保持一致。
网络弹性: 重试机制确保单个请求失败并不会导致整个安装失败。
扁平模式: 将依赖包的不同版本归结为单个版本，以避免创建多个副本。

Windows在 Windows 上有 2 种方式来安装 Yarn。下载安装程序, 你可以下载一份 .msi 文件，运行之后将引导你完成 Yarn 的安装。如果你使用安装程序的方式，你需要首先安装 Node.js.
下载安装程序
通过 Chocolatey 安装Chocolatey 是一个针对 Windows 平台的包管理工具，你可根据 这份说明首先安装 Chocolatey 。安装之后，你就可以通过如下指令安装 Yarn 了：
choco install yarn
这种安装方式也要求你必须事先安装好 Node.js 。
注意请首先将项目目录和 Yarn 的缓存目录(%LocalAppData%\Yarn)加入到杀毒软件中白名单中，否则由于每次往硬盘上写一个文件都要被扫描一次，会非常影响安装速度。

测试一下 Yarn 是否能够正确运行：

yarn --version

每日构建版

每日构建版（Nightly builds）是 Yarn 的最新、最好的版本，是基于最新的源码构建的。每日构建版对于尝试 Yarn 的新特性或者测试 bug 修复情况非常有用。然而，这种版本不保证是稳定的而且还可能有 bug。

查看如何安装每日构建版

用法

现在你已经将 Yarn 安装好了，可以开始使用它了。这里有一些最常用的命令，你一定用得着。

初始化一个新的项目

yarn init

添加一个依赖包

yarn add [package]

yarn add [package]@[version]

yarn add [package]@[tag]

更新一个依赖包

yarn upgrade [package]

yarn upgrade [package]@[version]

yarn upgrade [package]@[tag]

删除一个依赖包

yarn remove [package]

安装所有的依赖包

yarn

or

yarn install

Gulp
用自动化构建工具增强你的工作流程，之前使用过Grunt 新手一日入门（
http://blog.csdn.net/henrypt/article/details/53812431）中学习并使用grunt构建了一个代码自动化的平台，网上评论说Grunt比Gulp所支持的插件多，而且grunt更稳定，缺点是它没有Gulp语法、书写简单。

入门指南1. 全局安装 gulp： $ npm install --global gulp2. 作为项目的开发依赖（devDependencies）安装：$ npm install --save-dev gulp3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {

  // 将你的默认的任务代码放在这

});

4. 运行 gulp：$ gulp默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。下一步做什么呢？你已经安装了所有必要的东西，并且拥有了一个空的 gulpfile。那怎样才算是__真的__入门了呢？可以查看这些 秘籍 和这个 文章列表 来学习更多的内容。.src, .watch, .dest, CLI 参数 - 我该怎么去用这些东西呢？要了解 API 规范文档，请查看 API 文档. http://www.gulpjs.com.cn/docs/api/可用的插件gulp 开发社区正在快速成长，每天都会有新的插件诞生。在 主站 上可以查看完整的列表。

Liquid

From: https://liquid.bootcss.com/

Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。它是 Shopify 主题的骨骼，并且被用于加载店铺系统的动态内容。从 2006 年起，Liquid 就被 Shopify 所使用，现在更是被大量 web 应用所使用。

下载：https://github.com/Shopify/liquid/archive/master.zip

源码：https://github.com/Shopify/liquid

Liquid 用户列表:

Vue.js

From: https://vuejs.bootcss.com/

vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。

它的特点有：

易用: 已经会了HTML,CSS,JavaScript？即刻阅读指南开始构建应用！
灵活: 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能: 17kb min+gzip 运行大小; 超快虚拟 DOM; 最省心的优化

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。你可以在浏览器新标签页中打开它，跟着我们学习一些基础示例。或者你也可以创建一个本地的 .html 文件，然后通过如下方式引入 Vue: <script src="https://unpkg.com/vue/dist/vue.js"></script>

你可以查看安装指南来了解其他安装 Vue 的选项。请注意我们不推荐新手直接使用 vue-cli，尤其是对 Node.js 构建工具不够了解的同学。

BootCDN

稳定、快速、免费的前端开源项目 CDN 服务
共收录了 2852 个前端开源项目

这里收集了常用前端开源项目CDN服务连接地址，可在搜索栏中搜索你指定的库源，引入到你的开发项目中，以便节省你自己服务的流量开销。

0 0