bootstrap学习笔记

xiaoxiao2021-03-25 148

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

<!DOCTYPE html>

属性顺序 HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。 classid, namedata-*src, for, type, href, valuetitle, altrole, 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 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例： <span class="avatar"> <img src="..."> </span>  <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; } 声明顺序相关的属性声明应当归为一组，并按照下面的顺序排列： PositioningBox modelTypographicVisual 由于定位（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); } 简写形式的属性声明在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下： paddingmarginfontbackgroundborderborder-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 gulp 2. 作为项目的开发依赖（devDependencies）安装：$ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 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服务连接地址，可在搜索栏中搜索你指定的库源，引入到你的开发项目中，以便节省你自己服务的流量开销。

转载请注明原文地址: https://ju.6miu.com/read-8373.html

技术

最新回复(0)