如果您点击 Chrome DevTools 中颜色代码旁边的小彩色图标，您将获得一个不错的颜色选择器。这非常方便您选择最适合您设计的颜色。默认情况下，滴管也将处于活动状态，这意味着您可以在当前页面上采样任何颜色： 更改颜色模式 您还可以轻松地在 HEX、RGBA 和 HSLA 之间更改颜色模式： 玩转色调和不透明度 再次，你可以尝试不同的色调和不透明度级别： 调色板 最后，您可以访问调色板。默认情况下，页面的颜色显示在调色板中，但您可以创建自定义调色板或使用 Material Design 调色板：…

使用工具提示帮助您的用户更好地理解应用或网站中的内容： <span title=”Push it real good” data-toggle=”tooltip”> Push It </span> 初始化它们 您需要通过 JavaScript 初始化工具提示： $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 工具提示位置 想要将工具提示放在元素上方、下方或侧面吗？在元素上添加 data-placement 属性： <a href=”#” data-toggle=”tooltip” data-placement=”left” title=”Knock you out”> Mama said </a> 快速提示 不要忘记包含 jQue…

Sass 中的列表非常简单，就是存储在变量中的一系列项目。使用列表可以将单词或关键字放在一起。然后，您可以使用 nth() 函数访问其中任何项目。 列表可以用空格或逗号分隔，列表项可以不加引号，用单引号 ' 或双引号 " 括起来。（注意：如果确实用引号括起来，则需要使用 unquote() 函数将其删除： $colours: red green blue; $padding: '10px', '20px', '30px'; $border: "solid" "dotted"; // nth takes the list name as 1st param // and list item as the 2nd div { background: nth($colours, 3); padding: nth($padding, 2); // "20px" border: 2px unquote(nth($bor…

如果您有Sass Map或Lists，则可以循环遍历它们，而不是单独处理每个键。在@each循环的开头，您分配一个要在循环内使用的变量： $shapes: triangle, square, circle; @each $shape in $shapes { .icon-#{$shape} { background-image: url('/images/#{$shape}.jpg'); } } $map: ( h1: 20px, h2: 16px, h3: 14px ); @each $element, $size in $map { #{$element} { font-size: $size; } } 如果将变量与字符串连接起来，或将其用作类/元素，则变量前面需要加上一个#{，并在前面加上一个，}以告诉编译器你实际上表示变量。 如果您的地图是多层深度，您还可以在循环内嵌套循环。…

我想要一个可以显示最多 5 条同一类别的最近帖子的东西。Jekyll 有一个 related_posts 站点变量，但它按标签而不是类别进行过滤，这给我带来了各种奇怪的问题。我巧妙地使用了 liquid 语法1，想出了一个解决方案： {% unless page.category == null %} {% capture pageCategory %}{{ page.category }}{% endcapture %} {% unless site.categories[pageCategory].size == 1 %} <div class="row related-posts"> <h2 class="text-center">More {{ page.category }} Posts!</h2> <div class="mediu…

使用 Bootstrap 的图像类将有用的样式应用到您的图片： <img src="..." alt="..." class="img-responsive"> 定心 使用 .center-block 和 .img-responsive 类将图像水平居中： <img src="..." alt="..." class="img-responsive center-block"> 还有更多！ 使用这些类别来修饰你的图像的外观： .img-rounded：对图像边框应用轻微曲线。 .img-circle：将图像塑造成圆形。 .img-thumbnail：为您的图像提供轻微的填充和光滑的边框。…

当用户点击你网站上的内容时，你可以决定会发生什么： $('#my_picture').click(function() { // Do stuff }); 触发点击 你也可以使用同样的方法在选定元素上触发点击事件： $('#my_picture').click();…

if 语句可以方便地检查变量是否存在或是否匹配某些内容： $var: true !default; // Can be overridden elsewhere @if $var == true { // Conditional code } $other: single; @if $other == single { // Code for if it’s single } @else if $other == double { // Double code } @else { // Default if it’s neither } 确保如果您的变量属性用’引号括起来存储，那么您的@if语句也会检查这一点。（例如$other ==‘single’）。 if语句对于检查变量的混合或在库中包含或排除代码很有用。…

注意：本教程适用于使用 Logstash Forwarder 而非 Filebeat 的旧版 ELK 堆栈设置。本教程的最新版本可在添加 Logstash 过滤器以改进集中式日志记录中找到。 介绍 Logstash 是一款功能强大的日志集中和分析工具，它可以帮助您概览您的环境，并识别服务器的问题。提高 Logstash 设置效率的一种方法是收集重要的应用程序日志，并通过使用过滤器来构造日志数据，以便可以轻松分析和查询数据。我们将围绕“grok”模式构建过滤器，将日志中的数据解析为有用的信息。 本指南是如何在 Ubuntu 14.04 上安装 Elasticsearch 1.7、Logstash 1.5 和 Kibana 4.1（ELK Stack）教程的续集，主要侧重于为各种常见应用程序日志添加过滤器。 先决条件 要遵循本教程，您必须拥有一个正常运行的 Logsta…

Grafana背后的公司raintank的 Matt Toback 撰写的一篇文章 介绍 Grafana 是领先的图形和仪表板构建器，用于可视化时间序列基础设施和应用程序指标，但许多人将其用于其他领域，包括工业传感器、家庭自动化、天气和过程控制。它提供了一种强大而优雅的方式来创建、探索和与您的团队和全世界共享仪表板和数据。 在本教程中，您将学习如何将 Prometheus 作为数据源添加到您的 Grafana 实例并安装预配置的 Prometheus 服务器统计信息仪表板。 先决条件 要遵循本教程，您需要： Ubuntu 14.04 Droplet 具有 sudo 访问权限的用户（有关详细信息，请参阅使用 Ubuntu 14.04 进行初始服务器设置教程） Prometheus 和 Grafana 2.5+ 按照如何在 Ubuntu 14.04 上使用 Docker 安装 Pro…