Victor's Blog

概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 模块(modules)在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。 Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。 什么是 webpack 模块对比 Node.js 模块，webpack 模块能够以各种方式表达它们的 ...

<div class="col-sm-6 col-md-4 col-lg-3 "> <div class="thumbnail" style="height: 336px;"> <a href="http://www.youzhan.org/" title="Bootstrap 优站精选" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'youzhan-tile'])"> <img class="lazy" src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/expo.pn ...

Bootstrap 简介什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。 历史Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么使用 Bootstrap？ 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持：所有的主流浏览器都支持 Bootstrap。 Internet Explorer Firefox Opera Google Chrome Safari 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就 ...

A A 默认 护眼 夜间 阅读(125.3k) 书签 赞(36) 分享 我要纠错 收录专题 Bootstrap 编程实战闯关 由 843622626 创建，Carrie 最后一次修改 2016-10-27 为了帮助广大学习者，做到学以致用，我们为大家准备了大量的Bootstrap编程实战题，通过这些实战题，您可以一边学习一边操作，来达到巩固学习的作用。请选择你喜欢的实战题，开始进行编程闯关。Bootstrap课程列表使用Bootstrap设计响应式页面通过Bootstrap使图片适配手机显示通过Bootstrap使文本居中通过Bootstrap添加一个按钮添加一个Bootstrap块级元素按钮尝试给一个Bootstrap按钮添加颜色Bootstrap按钮多种颜色属性设定添加一个Bootstrap警告按钮使用Bootstrap做页面布局为Bootstra ...

开始使用layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。 兼容性和面向场景layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

css中的注释 css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。 sass中的注释 sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */ }实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出现在原生css不允许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，于是这些注释被抹掉。body { color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不 ...

启航 一般情况下，sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content aside)。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。最常见的一种情况是当你为链接之类的元素写:hover这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况sass就无法正常工作:article a { color: blue; :hover { color: red } }这意味着color: red这条规则将会被应用到选择器article a :hover，article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。解决之道为使用一个特殊的sass选择器，即父选择器。在使用嵌套规则时，父选择 ...

启航 在CSS里边，选择器h1h2和h3会同时命中h1元素、h2元素和h3元素。与此类似，.buttonbutton会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器的规则会对命中群组中任何一个选择器的元素生效。.button, button { margin: 0; }当看到上边这段代码时，你可能还没意识到会有重复性的工作。但会很快发现:如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰，情况就不同了。css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。.container h1, .container h2, .container h3 { margin-bottom: .8em }非常幸运，sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来:.container { h1, h2, h3 {margin-bottom: .8em} }首先sas ...

开门见山这个问题说白了就是你爱用啥用啥,都通用的 sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color)，而有些人喜欢使用下划线(如$highlight_color)。使用中划线的方式更为普遍，这也是compass和本文都用的方式。不过，sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用:$link-color: blue; a { color: $link_color; } //编译后 a { color: blue;}在上例中，$link-color和$link_color其实指向的是同一个变量。实际上，在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在s ...

启航在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border:nav { border: { style: solid; width: 1px; color: #ccc; } }嵌套属性的规则是这样的:把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样:nav { border-style: solid; border-width: 1px; border-color: #ccc; }对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则:nav & ...