Skeleton.css源码解读，一个只有419行代

Skeleton.css源码解读，一个只有419行代码的CSS库

文介绍

Skeleton 源码一共只有 419 行（加上注释和换行），非常适合用来学习。

本文是根据我的学习过程来编写的，几乎每个章节都包含 使用方法 和 源码分析。

虽然现在大部分业务都不需要重复造轮子了，但对于小白来说，学习完 Skeleton 源码是能走出新手村的。

本文不是推荐大家使用 Skeleton.css ，因为现代工程其实已经用不上这个库了。本文的重点在 响应式布局源码的解读。

本文适合人群：

有 css 基础的（了解浮动、颜色、背景色等）；
有一定工作经验，但又没了解过 css 库是如何生成的；

Skeleton 介绍

如果您正在着手一个较小的项目，或者觉得不太需要用到大型框架，那么可以尝试使用 Skeleton。
Skeleton仅对少数标准 HTML 元素设置了样式，并提供了一个网格系统。

『Skeleton.css 官网』

『github 地址』

也可以直接滑到文末获取 Skeleton 源码。

读css方面的源码，为什么要选 Skeleton ？

Bootstrap：太长，不看！
Layui：太长，不看！
Element ui：和框架绑定的，不适合小白看~
Animate.css：动画库，下次再看。
……
Skeleton：短！

功能目录

网格 - Grid
基础样式 Base Styles
排版 Typography
链接 Links
按钮 Buttons
表单 Forms
链接 Lists
代码 Code
表格 Tables
间隔 Spacing
工具集 Utilities
清除浮动 Clearing
媒体查询 Media Queries

出发！！！

本文所有例子都使用 CDN 的方式引入 skeleton.css ，默认已经引入了，所以在案例中不会再出现引入的代码。

<link href="https://cdn.bootcdn.net/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet">

网格系统 Grid

Skeleton 提供了 12列 的网格布局模式，和现代UI库的24列相比，12列的确有点少了。但这并不影响我们学习。

Skeleton 支持 指定值布局 和 比例布局，这两个名字是我自己起的，官方没这样说。

其实这两种布局方式都是大同小异的，只不过语义上有点不同而已。

使用方法

指定值布局

通过使用 1~12 的单词配合 .columns 类名进行布局。

.one、.two、.three、.four、.five、.six、.seven、.eight、.nine、.ten、.eleven、.twelve

Skeleton.css 提供了12列的响应式网格布局，随着浏览器/设备尺寸的减小而缩小。

当浏览器窗口小于 550px 时，所有列都会占满整行。

<div class="container">
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>

  <div class="row">
    <div class="three columns">Three</div>
    <div class="nine columns">Nine</div>
  </div>

  <div class="row">
    <div class="four columns">Fout</div>
    <div class="eight columns">Eight</div>
  </div>

  <div class="row">
    <div class="five columns">Five</div>
    <div class="seven columns">Seven</div>
  </div>

  <div class="row">
    <div class="six columns">Six</div>
    <div class="six columns">Six</div>
  </div>

  <div class="row">
    <div class="twelve columns">Twelve</div>
  </div>
</div>


<style>
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>

本例使用了 .container 作为容器，限制了最大宽度是 980px ，并且水平居中。

因为布局容器是不提供背景和外边距等样式，所以本例写了一个背景色给 .columns 以便观察。

.row 这个其实不需要加的，本例添加这个类只是希望代码看起来能更加易读。

比例布局

提供了3个类名，需要配合 .column 使用。

.one-third：三分之一
.two-thirds：三分之二
.one-half：一半

<div class="container">
  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>
</div>

<style>
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>
复制代码

列偏移

<div class="container">
  <div class="row">
    <div class="offset-by-eleven one columns">One</div>
  </div>

  <div class="row">
    <div class="offset-by-ten two columns">Two</div>
  </div>

  <div class="row">
    <div class="offset-by-nine three columns">Three</div>
  </div>

  <div class="row">
    <div class="offset-by-eight four columns">Fout</div>
  </div>

  <div class="row">
    <div class="offset-by-seven five columns">Five</div>
  </div>

  <div class="row">
    <div class="offset-by-six six columns">Six</div>
  </div>
  <div class="row">
    <div class="offset-by-five seven columns">Seven</div>
  </div>

  <div class="row">
    <div class="offset-by-four eight columns">Eight</div>
  </div>

  <div class="row">
    <div class="offset-by-three nine columns">Nine</div>
  </div>

  <div class="row">
    <div class="offset-by-two ten columns">Ten</div>
  </div>

  <div class="row">
    <div class="offset-by-one eleven columns">Eleven</div>
  </div>

  <div class="row">
    <div class="offset-by-two-thirds one-third column">1/3</div>
  </div>

  <div class="row">
    <div class="offset-by-one-third two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="offset-by-one-half one-half column">1/2</div>
  </div>
</div>

<style>
  .container {
    border: 1px solid #ccc;
  }
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>

源码分析

布局其实分了几个部分：

容器部分
列（确定值）
列（百分比）
列间距
列偏移

容器部分

.container {
  position: relative;  /* 相对定位 */
  width: 100%;  /* 容器宽度100% */
  max-width: 960px;  /* 但最大宽度不超过980px */
  margin: 0 auto;  /* 水平居中 */
  padding: 0 20px;  /* 容器左右内边距20px */
  box-sizing: border-box; /* 设置容器盒模型，设置了容器的边框、内边距都不会超过容器宽度 */
}

/* 当容器不小于400px时 */
@media (min-width: 400px) {
  .container {
    width: 85%;  /* 宽度为85% */
    padding: 0;  /* 内边距为0 */
  }
}

/* 当容器不小于550px时 */
@media (min-width: 550px) {
  .container {
    width: 80%;  /* 宽度80，同时padding受到 @media (min-width: 400px) 里设置的影响 */
  }
}

.container:after {
  content: "";
  display: table;
  clear: both;  /* 清除浮动 */
}

容器使用了 container 这个类名，可以看出 skeleton 是先写了小屏的解决方案，然后再写大屏的。

默认情况下（文档宽度小于 400px），container 容器的宽度是 100%，最大宽度是 980px ，通过 margin: 0 auto; 实现了水平居中效果。
当文档宽度大于等于 400px 时，容器宽度变成 85%，但也会被最大宽度（980px）限制，同时内边距设为 0。
当文档宽度大于等于 550px 时，容器宽度变成 80%，会覆盖 @media (min-width: 400px) 里设置的宽度，但会受到 @media (min-width: 400px) 里设置的 padding 影响。
最后设置了一个伪元素 :after 清除浮动（clear: both;）。

列布局（响应式的开始）

Skeleton.css 使用 浮动 + 百分比 的方式实现响应式。

列（确定值）、**列（百分比）**和 列间距 这三个要放在一起讲。

skeleton 一共有12列布局，所以配置了基本的：one、two、three、four、five、six、seven、eight、nine、ten、eleven、twelve。

都是基础的数字英文，我就不翻译了。

这里要分2种情况来讨论，

能整除12的（one、two、three、four、six、twelve）
不能整除12的（five、seven、eight、nine、then、eleven）

接下来会分开讨论这两种情况。

.column,
.columns {
  width: 100%;  /* 所有列的宽度都是100%。 */
  float: left;  /* 左浮动 */
  box-sizing: border-box;  /* 设置容器盒模型，设置了容器的边框、内边距都不会超过容器宽度 */
}

@media (min-width: 550px) {
  .column,
  .columns {
    margin-left: 4%;  /* 左边距4% */
   }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;  /* 第一个元素不需要左边距，所以设为0 */
   }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }  /* 只有一列，不需要左边距了 */

  /* 1/3，对应 .four */
  .one-third.column               { width: 30.6666666667%; }
  
  /* 2/3，对应 .eight */
  .two-thirds.column              { width: 65.3333333333%; }

  /* 1/2，对应 .six */
  .one-half.column                { width: 48%; }
}

默认情况下（文档宽度小于 550px）所有列的宽度都是 100%。
除了第一列，后面跟着的列都有一个 4%的左边距。

能整除12的

.one、.two、.three、.four、.six、.twelve

布局方式如下图所示（本文只详细讲 .one 和 .two 两种列，其他的原理都是一样的，自己推算就行了）

从上图可以看出，都使用 .one 的话，一共有 12列 、11个间隔 ，一行的宽度是 100% ，每个间隔的占比是 4% ，11个间隔一共就花掉了 44% ，剩下 56% 给12列平均分。

所以 .one 的宽度就是 56 ÷ 12 ≈ 4.66666666667 ，单位是 %

都用.two 的话，从上图可以看出一共有 6列、5个间隔 ，每个间隔的宽度是 4%，5个间隔合计占用 20% 的宽度，剩下 80% 的宽度给6列平均分。

**所以 .two 的宽度就是 80 ÷ 6 ≈ 13.3333333333 ，单位是 % **

剩下的我就直接写公式了，不懂的可以在评论区讨论~

公式：(100% - 间隔数量 × 4%) ÷ 列的数量

.one：(100% － 4% × 11) ÷ 12 ≈ 4.66666666667%
.two：(100% － 4% × 5) ÷ 6 ≈ 13.3333333333%
.three：(100% － 4% × 3) ÷ 4=22%
.four：(100% - 4% × 2 ) ÷ 3 ≈ 30.6666666667%
.six：(100% － 4% × 1) ÷ 2=48%
.twelve：就是100%咯，而且不需要左边距

不能整除12的

.five、.seven、.eight、.nine、.then、.eleven

首先看 .five ，代表 5，12 - 5=7，但现在 .five 和 .seven 的值是多少我们都不知道，虽然可以按 5:7 再加一个间隔（4%）来计算，但我更愿意使用已知的值来推算。

.two + .five + .five 三列加起来刚好是 12 ，而 .two 的值我们是知道的，由此可以得到一个代数式：

13.3333333333% + 间隔 + .five + 间隔 + .five=100%

间隔的占比是 4% 所以得到下面的代数式

13.3333333333% + 4% + .five + 4% + .five=100%
21.3333333333% + 2(.five)=100%
2(.five)=78.6666666667%
.five ≈ 39.3333333333%

根据上面的小学生推导法，得知一个 .five 是 39.3333333333%

.seven

刚刚有讲到，5 + 7=12，那现在 5 出来了，7 也就通过加减法能算出来

.five + 间隔 + .seven=100%
39.3333333333% + 4% + .seven=100%
.seven=100% - 39.3333333333% - 4%
.seven=56.6666666667%

综上所述，.seven 的宽度是 56.6666666667%

这是我的推导方式，最后的值也和 skeleton 的值一样。.eight、.nine、.then、.eleven 的推导方式其实也和上面一样，这里我就不再啰嗦了。有疑问的可以在评论区交流。

最后得出

.five：39.3333333333%
.seven：56.6666666667%
.eight：65.3333333333%
.nine：74.0%
.ten：82.6666666667%
.eleven：91.3333333333%

比例

.one-third：三分之一。对应 .four
.two-thirds：三分之二。对应 .eight
.one-half：一半。对应.six

列偏移

列偏移的类名都是 .offset-by- 开头的，后面再加上对应的数字或者比例的单词。

@media (min-width: 550px) {
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
}

如果用 .offset-by-one ，那我们就需要假设后面的内容补充完是 12。

1 + 11=12，我们通过上面的计算得知 .eleven 的宽度是 91.3333333333%，所以 .offset-by-one 的占比是：

.offset-by-one=100% - .eleven
.offset-by-one=8.66666666667%

其他的 .offset-by-two 、.offset-by-three 那些也可以用同样的方法去计算。最后再和 skeleton 的值对比一下就行了。

基础样式 Base Styles

这部分主要定义了全局字体和行距的样式，作用在 html 和 body 标签上。

使用方法

<div>雷猴</div>

源码分析

看看这部分的源码：

html {
  font-size: 62.5%;  /* 16px × 62.5%=10px */
}

body {
  font-size: 1.5em;  /* 10px × 1.5=15px */
  line-height: 1.6;  /* 15px * 1.6=24px */
  font-weight: 400;  /* 字体粗细 */
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* 字体 */
  color: #222;  /* 文本颜色 */
}
复制代码

浏览器的默认字号是 16px ，在 html 设置字号是 62.5%，那就是变成 10px 了。

在 body 设置 font-size: 1.5em; ，那么之后的内容默认都会继承 body 的，也就是普通的文本是 15px。

最后再设置行高、字体粗细 、字体、文本颜色 。

排版 Typography

不需要使用特别的类名，这部分作用在 h1 ~ h6 标签中。使用了 rem 的方式设置字体大小，会受到 <html> 标签字体大小影响。

使用方法

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

<p>The base type is 15px over 1.6 line height (24px)</p>

源码分析

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

这段源码其实没什么好解释的了，主要设置了 h1 ~ h6 的 外边距、字号、文字粗细、行高、字距，并且用 媒体查询 来重新定义不同尺寸的浏览器宽度显示出来的标题字号不同。

最后定义了段落 p 的上边距，这里的 p 的字号默认继承 body 里的设置，也就是 15px。

链接 Links

使用方法

<a>Colored</a>

源码分析

a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }

这里只定义了 a 的字体颜色，还有鼠标经过时的颜色。字号默认继承 body ，也就是 15px。

按钮 Buttons

使用方法

<!-- 默认 -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">

<!-- primary类型 -->
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">

源码分析

/* 默认样式 */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;  /* 行内块 */
  height: 38px;  /* 高度 */
  padding: 0 30px;  /* 内边距：上下0，左右30px */
  color: #555;  /* 字体颜色：灰色(有点深) */
  text-align: center;  /* 本文居中 */
  font-size: 11px;  /* 字号 */
  font-weight: 600;  /* 字体稍微加粗 */
  line-height: 38px;  /* 行高（和height一样，所以是垂直居中了） */
  letter-spacing: .1rem;  /* 字距 */
  text-transform: uppercase;  /* 字母变成全大写 */
  text-decoration: none;  /* 不需要文本修饰 */
  white-space: nowrap;  /* 不换行 */
  background-color: transparent;  /* 背景色：透明 */
  border-radius: 4px;  /* 圆角：4px */
  border: 1px solid #bbb;  /* 边框：1px，实线，浅灰 */
  cursor: pointer;  /* 鼠标指针样式 */
  box-sizing: border-box;  /* 盒模型规则 */
}

/* 鼠标经过、获得焦点 */
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;  /* 文字颜色比默认深一点点 */
  border-color: #888;  /* 边框颜色比默认深一点点 */
  outline: 0;  /* 轮廓：0 */
}

/* primary类型 */
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;  /* 字变白 */
  background-color: #33C3F0;  /* 背景色变蓝 */
  border-color: #33C3F0;  /* 边框颜色变蓝 */
}

/* 使用primary类型时：鼠标经过、获得焦点 */
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;  /* 文本白色 */
  background-color: #1EAEDB;  /* 背景色变深一点点 */
  border-color: #1EAEDB;  /* 边框颜色变深一点点 */
}

按钮的实现方式有很多种，比如 <button> 、<input type="submit" /> 等等，这里就不一一列举额了，skeleton 把这类情况都写好了，可以直接在源码中看到。

skeleton 提供了2中样式的按钮，一个是默认的（白底黑字），一个是 primary 的（蓝底白字）。

还有一些选中状态。

skeleton 的做法是先写好默认的，其他状态都在默认状态的基础上覆盖新的样式。

表单 Forms

使用方法

<form>
  <div class="row">
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
  <label class="example-send-yourself-copy">
    <input type="checkbox">
    <span class="label-body">Send a copy to yourself</span>
  </label>
  <input class="button-primary" type="submit" value="Submit">
</form>

源码分析

/* 单行文本框、多行文本框、下来选择器 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;  /* 高度 */
  padding: 6px 10px;  /* 内边距：上下6px，左右10px */
  background-color: #fff;  /* 背景色：白色 */
  border: 1px solid #D1D1D1;  /* 边框：1px，实线，灰色 */
  border-radius: 4px;  /* 圆角：4px */
  box-shadow: none;  /* 投影：无 */
  box-sizing: border-box;  /* 盒模型 */
}

/* 针对单行和多行文本框的样式设置 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;  /* 外表 */
}

/* 多行文本框 */
textarea {
  min-height: 65px;  /* 最小高度是65px，会覆盖上面设置的height */
  padding-top: 6px;  /* 上内边距 */
  padding-bottom: 6px;  /* 下内边距 */
}

/* 单行文本框、多行文本框、下来选择器 获取焦点时 */
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;  /* 边框：1px，实线，蓝色 */
  outline: 0;  /* 轮廓：0 */
}

/* label(标签)
   legend(组合表单中的相关元素，legend 元素为 fieldset 元素定义标题) */
label,
legend {
  display: block;  /* 块状 */
  margin-bottom: .5rem;  /* 下外边距 */
  font-weight: 600;  /* 字体有点粗 */
}

/* fieldset(可将表单内的相关元素分组) */
fieldset {
  padding: 0;  /* 内边距 */
  border-width: 0;  /* 边框宽度 */
}

/* 多选和单选 */
input[type="checkbox"],
input[type="radio"] {
  display: inline;  /* 行内 */
}

/* label标签下的 .label-body，可看使用例子 */
label > .label-body {
  display: inline-block;  /* 行内 */
  margin-left: .5rem;  /* 左外边距：5px */
  font-weight: normal;  /* 字体粗细 */
}

列表 Lists

使用方法

<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>

源码分析

/* 无序列表 */
ul {
  list-style: circle inside;  /* 标记样式：圆，内侧 */
}

/* 有序列表 */
ol {
  list-style: decimal inside;  /* 标记样式：十进制，内侧 */
}

ol, ul {
  padding-left: 0;  /* 左侧内边距：0 */
  margin-top: 0;  /* 左侧外边距：0 */
}

/* 嵌套列表 */
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;  /* 外边距 */
  font-size: 90%;  /* 字号 */
}

/* 列表项 */
li {
  margin-bottom: 1rem;  /* 下外边距 */
}

代码 Code

使用方法

<pre>
<code>.some-class {
  background-color: red;
}</code>
</pre>

源码分析

code {
  padding: .2rem .5rem;  /* 内边距 */
  margin: 0 .2rem;  /* 外边距 */
  font-size: 90%;  /* 字号 */
  white-space: nowrap;  /* 不换行 */
  background: #F1F1F1;  /* 背景色：超级浅的灰色 */
  border: 1px solid #E1E1E1;  /* 边框：1px，实线，灰色 */
  border-radius: 4px;  /* 圆角：4px */
}

pre > code {
  display: block;  /* 块状 */
  padding: 1rem 1.5rem;  /* 内边距 */
  white-space: pre;  /* 空白会被浏览器保留。 */
}

code 和 pre 是 HTML 原生标签。

表格 Tables

使用方法

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave Gamache</td>
      <td>26</td>
      <td>Male</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Dwayne Johnson</td>
      <td>42</td>
      <td>Male</td>
      <td>Hayward</td>
    </tr>
  </tbody>
</table>

源码分析

/* 表头的列 和 普通列 */
th,
td {
  padding: 12px 15px;  /* 内边距 */
  text-align: left;  /* 文本左对齐 */
  border-bottom: 1px solid #E1E1E1;  /* 底边框 */
}

/* 第一个表头的列 和 每行第一个普通列 */
th:first-child,
td:first-child {
  padding-left: 0;  /* 左内边距 */
}

/* 最后一个表头的列 和 每行最后一个普通列 */
th:last-child,
td:last-child {
  padding-right: 0;  /* 右内边距 */
}

没想到表格的 css 样式这么简单吧哈哈哈哈~

间隔 Spacing

源码分析

button,
.button {
  margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}

这部分主要定义常用的标签和类的底部外边距，太简单，不一一细讲了。

工具集 Utilities

源码分析

.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}

这部分源码太简单了，不讲了~

.u-full-width ：宽度满屏
.u-max-full-width ：最大宽度是满屏
.u-pull-right ：右浮动
.u-pull-left ：左浮动

分割线 Hr

使用方法

<hr />

源码分析

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}

上下设置了外边距
清除掉所有border
最后再设置回顶部边框为1px，实线，灰色

清除浮动 Clearing

源码分析

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

容器和行都设置了清楚浮动。

.u-cf 是专门清楚浮动的。

清楚浮动的做法在很多基础的 css 教程有讲，这里不再啰嗦了。

媒体查询 Media Queries

源码分析

@media (min-width: 400px) {}

@media (min-width: 550px) {}

@media (min-width: 750px) {}

@media (min-width: 1000px) {}

@media (min-width: 1200px) {}

这部分的源码，是预留给开发者自己写的。

如果开发者需要自己重新定义某些元素的样式，根据不同的窗口宽度来定义，可以在此编写。

Skeleton.css源码

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem=15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

1. 概述

EditUltra是中国人开发开源的对标UltraEdit的小巧快速又功能丰富的文本/源码编辑器（内嵌数据库客户端、Redis客户端），它基于开源的富文本编辑控件Scintilla提供的基本文本编辑能力，实现了一个完整的文本/源码编辑器，还直接执行SQL和Redis命令功能，整个软件只有10MB（不包含Oracle/MySQL客户端库）。

EditUltra主要功能包含但不限于：

多文件选项卡
WINDOWS资源管理器右键菜单打开文件/目录中所有文件
检测文件变动实时重载
文件打开期间自动设置为只读
文件换行符和字符编码转换
远程文件直接打开和保存
高级的切剪、复制和粘贴
查找和替换
快捷键快速选择单词、行
高级移动
高级累积选择、多位置定位同步操作、多文本块选择、列选择
BASE64编解码、散列摘要计算和加解密
书签
导航
白字符显示
编程语言语法高亮、自动完成和方法浮动提示，语句块折叠展开
连接Oracle/MySQL，获取全表字段列表，执行SQL，显示查询结果到表格
连接Redis，执行命令，显示查询结果到树
配置执行对文件、选择文本的命令

EditUltra完全使用C用纯WIN32API编写而成（v1.0.0.3大约有近2万行代码），又加入了众多优化算法和数据结构，提供了极高的运行效率和较低的系统资源占用，秒开文件，键入时毫秒级弹出自动完成列表。

2. 开发历程

作为一名IT人，总喜欢写些东西，无论是源代码还是文章，从Linux C开发，到写博客，从分析爬虫HTML，到存放SQL命令，从字符编码检测，到建立个人技术知识库，都离不开一款轻便的文本编辑器伴我左右。

从大学毕业以来尝试过很多文本编辑器，UltraEdit是我使用比较长的一款软件，最新版本的UltraEdit带来了很多新功能，但是知名品牌“烈火”却迟迟搞不定Hack，我想，从事软件开发积累多年经验的我难道就不能自己写一个吗，需要什么功能就自己加（真香？），并以开放源代码方式发布，于是拾起大学时代的VC撸起袖子直接开干，先取个名字，不就是对标UltraEdit吗，就反过来叫EditUltra。

一开始以为基于开源的富文本编辑控件Scintilla可以让我的开发工作神速推进，但阅读完其网上贫瘠的中文资料和官网上也不算丰富的英文文档后，才发现它真的只能当作VC工具箱里的一个稍微高级点的控件而已，大量功能都得自己撸，像多文件选项卡的控制（WINDOWS TABS控件不提供鼠标调整位置，自己增强呗）、远程文件直接打开和保存（Linux C开发必需）、自动完成列表的内容管理（Scintilla只提供了调用者给定列表、弹出和关闭接口，而不负责列表的筛选、管理等）。

软件开发离不开和数据库等打交道，那么发挥一下想象力（软件开发很需要想象力），文本编辑器内嵌客户端SDK连接上数据库不就能直接执行SQL了吗，避免了大量复制粘贴到数据库客户端软件里的人工操作，而且这年头数据库客户端软件还不便宜，很多看似免费也只是纯个人开发免费，广大企业/公司中开发还是要买许可，那么既然客户端SDK是免费的，就差一个用户界面把它包装一下了。

经过两个半月，每天晚上儿子睡觉后写两个小时（周末也是，白天陪全家出去玩等同于上班），一路斩荆披棘，小步迭代而来，终于从v0.0.0.1到v0.0.43.0，很快跳到v1.0.0.0发布了，还请各位看官多多支持和使用，有问题提issue或发邮件给我，我也将努力保持后续的继续迭代，毕竟现在只实现了基本功能，很多低频功能以及markdown预览、HTML预览等有待于补上。

3. 安装

3.1. 绿色安装

下载、解压绿色包

目前EditUltra只提供64位绿色版，免费下载和使用。

从以下网址可以查询最新版本更新信息

http://114.215.179.129/EditUltra/ChangeLog-CN

从以下网址可以下载到最新版本，绿色压缩包只有4.5MB

http://114.215.179.129/EditUltra/EditUltra-x64-latest.zip

把她放到软件目录中，我一般会放到专门放绿色软件的目录里

D:\Program Files\EditUltra-latest.zip

把里面所有文件解压出来，解压出来只有10MB

D:\Program Files\EditUltra\

运行主程序

直接运行里面的editultra.exe即可启动。

注意：

如需内嵌Oracle客户端功能，还要自行安装Oracle，并将WINDOWS环境变量PATH中加入oci.dll的所在路径。
如需内嵌MySQL客户端功能，还要自行安装MySQL，并将WINDOWS环境变量PATH中加入libmysql.dll的所在路径。

注册WINDOWS右键文件/目录弹出菜单项

如果需要在WINDOWS资源管理器中右键菜单增加“打开文件”功能，执行菜单环境->文件右键弹出菜单。

注册成功后就能在WINDOWS里右键打开文件了。

如果需要在WINDOWS资源管理器中右键菜单增加“打开目录中所有文件”功能，执行菜单环境->目录右键弹出菜单。

注册成功后就能在WINDOWS里右键打开目录中所有文件了。

WINDOWS10操作系统可能会遇到“没有管理员权限”报错，解决方案是右键“以管理员身份运行”editultra.exe，再执行以上菜单即可。

3.2. 源码编译安装

如果喜欢折腾，全套源代码在

https://gitee.com/calvinwilliams/EditUltra

clone下来，用VS自行编译吧，我用的是Visual Studio 2019。

编译前需要安装第三方依赖库：SciLexer、pcre、libcurl、iconv、openssl、MySQL、Oracle、hiredis。

4. 功能导览

4.1. 一级菜单"文件"

4.1.1. 文件操作

一级菜单下面对文件的操作有新建、打开...、打开最近、保存、另存为...、全部保存、关闭、关闭所有文件、关闭除当前外所有文件。

启用二级菜单文件变动检测可在每次文件选项卡选择该文件时自动检查文件是否变动，如果变动则重载文件。

启用二级菜单打开文件后设置为只读可在文件编辑期间临时对文件设置只读权限，防止别人打开修改。

4.1.2. 换行符风格

二级菜单新建文件换行符设置新建文件时使用的哪个操作系统风格的换行符。二级菜单全文转换换行符可在打开文件后调整文件中的换行符风格。换行符风格目前支持WINDOWS(CR+LF)、MAC风格(CR)、UNIX/Linux风格(LF)。

4.1.3. 字符编码

二级菜单新建文件字符编码设置新建文件时使用的字符编码。二级菜单全文转换字符编码可在打开文件后调整文件中的字符编码。字符编码目前支持UTF-8、GB18030、BIG5。

4.1.4. 远程文件管理器

远程文件管理器用于管理远程服务器地址簿。管理器对话框右边是远程服务器信息，填写完后点击测试远程文件服务器连接测试，如果测试通过的话，点击新建远程文件服务器连接加到左边列表中，注意连接名称中不能包含空格等白字符。更新远程文件服务器连接会把右边的信息修改到左边的列表中。左下角的删除远程文件管理器连接会删除左边列表中的当前选择项。

每个服务器连接信息对应一个配置文件conf\rfileser_(连接名称).conf。

如果密码不填的话，会在每次启动后第一次展开文件资源管理器中该连接时要求输入密码，如果密码正确成功连接上，后续文件操作无需再输入密码。

4.2. 一级菜单"编辑"

4.2.1. 剪切、复制、粘贴和删除

二级菜单高级剪切的三级菜单项剪切行用于剪切当前行到剪贴板，无需事前选择，剪切粘贴行把当前行移到下一行的下面，剪贴板里遗留一份当前行内容。

二级菜单高级复制的三级菜单项复制行用于复制当前行到剪贴板，无需事前选择，复制粘贴行把当前行向下复制一份，剪贴板里遗留一份当前行内容。

二级菜单高级粘贴的三级菜单项粘贴行用于把剪贴板里的内容粘贴作为当前行，往上粘贴行则是向上粘贴。

二级菜单高级删除的三级菜单项删除行用于删除当前行，无需事前选择。

4.2.2. 合并行

二级菜单合并行把下一行拼接到当前行的末尾，无需事前选择。

4.2.3. 大小写转换

二级菜单大小写转换用于对选择文本一起转换为大写或小写。

4.2.4. 启用编辑辅助功能

二级菜单启用自动补全关闭符号当在编辑区输入(、[、{、'、"时自动补全关闭符号，但光标还是定位在输入字符和关闭字符之间。

二级菜单启用自动缩进当在编辑区输入回车时，如果当前行左边有白字符（空格、TAB），下一行也会自动加入这些白字符，光标定位在自动补充的白字符后面。

4.2.5. BASE64编解码

EditUltra支持用户直接对编辑区选择的文本做BASE64编码，并自动替换原选择文本，编码和解码是可逆的。

4.2.6. 散列/消息摘要

EditUltra支持用户直接对编辑区选择的文本做散列/消息摘要，并自动替换原选择文本，摘要算法是不可逆的。目前支持的摘要算法有MD5、SHA1、SHA256。

4.2.7. DES加解密

EditUltra支持用户直接对编辑区选择的文本做3DES加解密，弹出对话框输入密钥（24字符，非十六进制展开），加密后按十六进制展开自动替换原选择文本，解密过程同步。

4.3. 一级菜单"搜索"

4.3.1. 查找和替换

二级菜单查找...弹出查找对话框

可用普通文本或正则表达式作为源匹配编辑区的文本，可选项整词匹配、大小写匹配、匹配单词开始决定匹配方式，非模态对话框按钮查找上一个、查找下一个在不关闭查找对话框时定位编辑区匹配字符串处。

二级菜单查找下一个（或快捷键F3）、查找上一个（或快捷键Ctrl+F3）在不打开查找对话框直接匹配定位编辑区查找结果。

二级菜单替换...弹出替换对话框

非模态对话框按钮替换上一个、替换下一个、全部替换在不关闭替换对话框时替换所有编辑区匹配字符串处。

4.3.2. 快速选择

二级菜单全选或快捷键Ctrl+A选择全文，选择单词组或快捷键Ctrl+W全选当前位置所在单词，选择行或快捷键Ctrl+L全选当前位置所在行。

4.3.3. 高级选择

二级菜单向右累积选择单词、向右累积选择单词组、累积选择到下一个语句块首行用于累加调整选择文本。

假如一个变量名由三个单词组成，单词首字母大小，向右累积选择单词自动选择从当前位置到单词最后一个字母，向右累积选择单词组自动选择从当前位置到变量名结束，累积选择到下一个语句块首行自动选择从当前位置到空行分割的下一个语句块首行。

向左累积选择*亦然。

EditUltra支持定位多个位置或选择多个文本块，多位置联动操作：输入、退格键、删除、复制等，快捷键为Ctrl+MouseLButtonClick或Ctrl+MouseLButtonDown+MouseMove+MouseLButtonUp+...。

比如拼接复制

比如在HTML的TD中同时设置class

EditUltra支持列选择，联动操作：输入、退格键、删除、复制等，快捷键为Alt+MouseLButton+MouseMove或Alt+Shift+Left/Right/Up/Down。

4.3.4. 高级移动光标

同上，但是是移动光标，而不是累积选择。

这些操作配备快捷键实现与vim同等的快速处理。

4.3.5. 书签管理

二级菜单书签提供了对任意打开文件的任意行做行标记，便于事后快速跳跃。

切换书签的快捷键是F9，增加书签的快捷键是Alt+F9，删除书签的快捷键是Ctrl+F9，删除所有书签的快捷键是Ctrl+Shift+F9。

跳到上一个书签（当前文件）的快捷键是Ctrl+F2，跳到下一个书签（当前文件）的快捷键是F2，跳到上一个书签（所有打开的文件）的快捷键是Ctrl+Shift+F2，跳到下一个书签（所有打开的文件）的快捷键是Shift+F2。

4.3.6. 导航操作

二级菜单导航提供了由于鼠标点击定位而产生的位置链的快速退回功能，比如临时到另外一个文件中去复制一个字符串，然后直接跳回来。

退回到上一个位置（当前文件）的快捷键是Ctrl+Back，退回到上一个位置（所有打开的文件）的快捷键是Ctrl+Shift+Back。

4.4. 一级菜单"视图"

4.4.1. 显示/隐藏文件资源树

二级菜单文件资源树用于显示/隐藏主窗口左边的文件资源管理器区域。

4.4.2. 调整字体颜色方案

二级菜单字体颜色方案用于调整字体颜色方案。

EditUltra支持编程语言语法高亮、键入时弹出自动完成框、浮动显示语法提示、快速定位到库函数名等符号定义处。字体颜色方案对话框左下角为无高亮的普通文本和当前活动行的字体颜色设置，对话框左边为编程语言（C++、Java、Python等）的字体颜色设置，对话框右边为标记语言（HTML、CSS等）的字体颜色设置。

完成支持语言列表见

目前支持语法高亮的语言列表

4.4.3. 显示/隐藏行号/书签

二级菜单显示行号、显示书签用于显示/隐藏编辑区靠左的辅助区域里的行号、书签等标记。

4.4.4. 显示/隐藏白字符

二级菜单显示白字符用于使用可见标记显示空格和TAB，显示换行符用于使用可见标记显示换行符，显示缩进线用于使用可见标记显示同一缩进行集的缩进竖线。

4.4.5. 缩放

二级菜单缩放里面的放大和缩小用于调大字体显示大小，不影响打印大小，不受字体颜色方案影响。可用重置缩放恢复原大小。

4.5. 一级菜单"编程"

4.5.1. 语句块折叠

二级菜单启用语句块折叠用于开启/禁用语句块折叠功能，折叠标记显示在编辑区靠左的辅助区域中。

二级菜单语句块合拢和语句块展开用于合拢和展开当前层级的语句块，语句块折叠切换用于切换合拢和展开。

二级菜单全部语句块合拢和全部语句块展开用于一键合拢和展开所有层级的语句块。

4.5.2. 源代码符号表

EditUltra预置了众多语言的符号提取正则表达式（位于配置文件conf/doctype_(语言名).conf中的symbol_reqular_exp配置值），匹配出来的符号显示成编辑区右边的符号列表框中，可鼠标左键双击符号直接跳到符号定义处。用户可根据需要，自行修改配置文件以调整匹配式。

二级菜单跳到符号定义或快捷键F11可直接选定光标所在位置的单词组，从符号列表中查询出编辑区行号，跳到该行。

4.5.3. 自动完成和语法提示

EditUltra预置了众多语言的关键字和库函数名，（位于配置文件conf/doctype_(语言名).conf中的autocomplete.set和calltip.add配置值），当用户键入前N个字符时EditUltra会根据优化过的算法和数据结构快速筛选出匹配前N个字符的所有autocomplete.set组合，弹出自动完成框提供用户选择，当用户键入(、,时EditUltra会根据匹配的calltip.add，显示语法提示。个别语言可能会有不同的用户操作差异性，比如HTML的属性名自动完成列表是在用户在标记名后键入空格就自动弹出。用户可根据需要，自行修改配置文件以扩展名字空间。

4.5.4. 数据库SQL文件

EditUltra约定了.sql为存放数据库SQL的文本文件，额外的，如果发现文件内容以某一特定注释格式（数据库自动连接配置头）出现，则提取相关信息作为连接数据库的参数，在打开文件完成后自动连接数据库，并获取所有能访问的表名列表以及字段信息列表显示到编辑区右边的符号树框中，用户等待连接完成后可直接选择文件后面的SQL并执行，如果执行的是SELECT语句还会把查询结果显示在编辑区下面的表格中。

Oracle的数据库自动连接配置头长这个样子：

-- EDITULTRA BEGIN DATABASE CONNECTION CONFIG
--  DBTYPE : Oracle
--  DBHOST : (SIG)
--  DBPORT : 0
--  DBUSER : (连接用户名)
--  DBPASS : [连接用户密码]
--  DBNAME :
-- EDITULTRA END DATABASE CONNECTION CONFIG

以下为一个Oracle配置示例：

-- EDITULTRA BEGIN DATABASE CONNECTION CONFIG
--  DBTYPE : Oracle
--  DBHOST : CALVINDB
--  DBPORT : 0
--  DBUSER : calvin
--  DBPASS :
--  DBNAME : calvindb
-- EDITULTRA END DATABASE CONNECTION CONFIG

MySQL的数据库自动连接配置头长这个样子：

-- EDITULTRA BEGIN DATABASE CONNECTION CONFIG
--  DBTYPE : MySQL
--  DBHOST : (ip)
--  DBPORT : (port)
--  DBUSER : (连接用户名)
--  DBPASS : [连接用户密码]
--  DBNAME : (库名)
-- EDITULTRA END DATABASE CONNECTION CONFIG

以下为一个MySQL配置示例：

-- EDITULTRA BEGIN DATABASE CONNECTION CONFIG
--  DBTYPE : MySQL
--  DBHOST : 127.0.0.1
--  DBPORT : 3306
--  DBUSER : calvin
--  DBPASS : calvin
--  DBNAME : calvindb
-- EDITULTRA END DATABASE CONNECTION CONFIG

注意：连接用户密码可不配置，在每次连接数据库时会提示输入，如果连接成功后面会记住密码，直到程序结束。

数据库自动连接配置头比较难记，二级菜单插入数据库自动连接配置头可直接插入配置模板到当前SQL文件中，所以不用刻意去记她，不过每个配置项的含义和用法还是要记忆的。

二级菜单执行选定SQL或快捷键F5用于执行选定的SQL语句。

4.5.5. REDIS文件

REDIS自动连接配置头以及一键执行同数据库。

4.6. 一级菜单"环境"

4.6.1. WINDOWS资源管理器右键菜单

二级菜单文件右键弹出菜单用于向WINDOWS资源管理器右键菜单注册/卸载用 EditUltra 打开文件菜单项。

二级菜单目录右键弹出菜单用于向WINDOWS资源管理器右键菜单注册/卸载用 EditUltra 打开目录中所有文件菜单项。

注意：在WINDOWS10操作系统中执行以上两个菜单项需要管理员权限，可重新以管理员身份启动EditUltra主程序。

4.6.2. 处理当前文件和当前选择文本的命令

EditUltra允许自定义格式命令用于一键处理当前文件或当前编辑区选择文本。

二级菜单配置处理文件的命令用于配置处理当前文件的格式命令，用%F占位文件名，执行处理文件的命令用于执行该命令。

二级菜单配置处理选定文本的命令用于配置处理当前选定文本的格式命令，用%T占位选定文本，执行处理选定文本的命令用于执行该命令，比如打开浏览器提交选定文本为关键字给搜索引擎。

4.7. 一级菜单"帮助"

执行二级菜单关于展示EditUltra软件版权和引用第三方库列表。

4.8. 目前支持语法高亮的语言列表

目前已支持25种编程语言和标记语言，每种语言的配置文件为conf/doctype_(语言名).conf，一般keywords.set配置为语法高亮单词列表，keywords2.set配置为库函数等第三方符号列表，autocomplete.set配置为键入时弹出自动完成单词列表，calltip.add为浮动显示语法提示文本，symbol_reqular_exp为正则表达式匹配源代码出符号表放到编辑区右边列表框供鼠标左键双击后直接跳到定义处行。

今后还将继续完善已有语言未实现功能，也将增加更多语言，也欢迎大家把急需的语言告知我优先添加，更欢迎大家帮我添加后PR我，谢谢。

4.9. 启动速度评测

CPU : i5-7500 3.4GHz 内存 : 16GB 操作系统 : WINDOWS 10 测试说明 : 操作系统启动后，右键测试文本文件弹出菜单中选择打开约28KB大小的文件。

-首次启动耗时非首次启动耗时EditUltra2秒0.5秒UltraEdit5秒1秒VSCode8秒2秒

5. 最后

EditUltra，中国人开发开源的小巧快速又功能丰富的文本/源码编辑器（内嵌数据库客户端、Redis客户端）。

欢迎使用EditUltra，如果你使用中碰到了问题请提issue或发邮件告诉我，谢谢 ^_^

源码托管地址 : 开源中国

关于作者：厉华，左手C，右手JAVA，写过小到性能卓越方便快捷的日志库、HTTP解析器、日志采集器等，大到交易平台/中间件等，分布式系统实践者，容器技术专研者，目前在某城商行负责基础架构。

我是码农之星，求个关注拜托了，每天学习一点点，成长亿点点！！

在线咨询

上一篇：婚礼网页设计方案：个人也能做好
下一篇：php实现登录短信验证

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Skeleton.css源码解读，一个只有419行代

文介绍

Skeleton 介绍

读css方面的源码，为什么要选 Skeleton ？

功能目录

出发！！！

网格系统 Grid

使用方法

指定值布局

比例布局

列偏移

源码分析

容器部分

列布局（响应式的开始）

能整除12的

不能整除12的

比例

列偏移

基础样式 Base Styles

使用方法

源码分析

排版 Typography

使用方法

源码分析

链接 Links

使用方法

源码分析

按钮 Buttons

使用方法

源码分析

表单 Forms

使用方法

源码分析

列表 Lists

使用方法

源码分析

代码 Code

使用方法

源码分析

表格 Tables

使用方法

源码分析

间隔 Spacing

源码分析

工具集 Utilities

源码分析

分割线 Hr

使用方法

源码分析

清除浮动 Clearing

源码分析

媒体查询 Media Queries

源码分析

Skeleton.css源码

更多推荐

1. 概述

2. 开发历程

3. 安装

3.1. 绿色安装

3.2. 源码编译安装

4. 功能导览

4.1. 一级菜单"文件"

4.1.1. 文件操作

4.1.2. 换行符风格

4.1.3. 字符编码

4.1.4. 远程文件管理器

4.2. 一级菜单"编辑"

4.2.1. 剪切、复制、粘贴和删除

4.2.2. 合并行

4.2.3. 大小写转换

4.2.4. 启用编辑辅助功能

4.2.5. BASE64编解码

4.2.6. 散列/消息摘要

4.2.7. DES加解密

4.3. 一级菜单"搜索"

4.3.1. 查找和替换

4.3.2. 快速选择

4.3.3. 高级选择

4.3.4. 高级移动光标