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. 高級移動光標