对于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 doctype
            HTML5 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 分别是它们的默认值。

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

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

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

属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

布尔（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;。

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

  Positioning       
       Box model       
       Typographic       
       Visual

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

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

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

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

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

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

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

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

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

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

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

class 命名

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

选择器

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

代码组织

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

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

用两个空格代替制表符（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 是否能够正确运行：
           每日构建版                
每日构建版（Nightly builds）是 Yarn 的最新、最好的版本，是基于最新的源码构建的。 每日构建版对于尝试 Yarn 的新特性或者测试 bug 修复情况非常有用。 然而，这种版本 不保证是稳定的 而且还可能有 bug。

查看如何安装每日构建版

用法

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

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

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

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 用户列表: 

  
   
    
          bootstrap学习笔记 编码规范BootCDNLiquidBootCDN
              bootstrap学习笔记 编码规范BootCDNLiquidBootCDN
            bootstrap学习笔记 编码规范BootCDNLiquidBootCDN
            bootstrap学习笔记 编码规范BootCDNLiquidBootCDN             

   
  


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服务连接地址，可在搜索栏中搜索你指定的库源，引入到你的开发项目中，以便节省你自己服务的流量开销。

bootstrap学习笔记编码规范BootCDNLiquidBootCDN

编码规范

CSS

带前缀的属性

BootCDN

Yarn

Windows

通过 Chocolatey 安装

注意

每日构建版

Gulp

Liquid

BootCDN

继续阅读

ElasticJob‐Lite：一次性调度

响应式前端框架Bootstrap系列（15）面板

响应式前端框架Bootstrap系列（9）导航条与导航栏

BootStrap响应式开发

关于禁用bootstrap响应式解决方法

bootstrap响应式嵌入组件

响应式前端框架Bootstrap系列（3）段落、文字相关

响应式前端框架Bootstrap系列（20）附加导航（Affix）插件

bootstrap(响应式，进度条，标题栏，字体图标，分页等等)

Bootstrap组件之进度条

Metronic V4.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5

django项目网易云音乐

spring cloud在bootstrap.properties配置spring.profiles.active无效

Hplus框架动态添加选项卡功能(扩展)

AngularJS ng依赖注入的三种方式

【web素材】01-10款大气的购物商城网站模板

bootstrap学习笔记 编码规范BootCDNLiquidBootCDN

编码规范

CSS

带前缀的属性

BootCDN

Yarn

Windows

通过 Chocolatey 安装

注意

每日构建版

Gulp

Liquid

BootCDN

继续阅读

bootstrap学习笔记编码规范BootCDNLiquidBootCDN