日常 Markdown 语法记录

1、文字

!>(空格)文字 表示黄色警告框

!> 文字 表示黄色警告框

i>(空格)文字 表示蓝色信息框

i> 文字 表示蓝色信息框

@>(空格)文字 表示银色引用框

@> 文字 表示银色引用框

x>(空格)文字表示红色错误框

x> 文字表示红色错误框

√>(空格)文字 表示绿色成功框

√> 文字 表示绿色成功框

抖动文字
<div class="shaky">这里是你需要抖动的文字！</div>

[tag type="dark"]

[/tag]

tag文字标签

tag 默认白色文字 /tag
tag type="primary" 紫色文字 /tag
tag type="info" 蓝色文字 /tag
tag type="warning" 黄色文字 /tag
tag type="danger" 红色文字 /tag
tag type="success" 绿色文字 /tag
tag type="dark" 黑色文字 /tag
[tag type="danger"]注意:tag 需要加方框 [ ][/tag]

2、图片居中缩小

<img src="图片地址" width = 30% height = 30% div align=center />

参数：位置 align=center(中)、right(右)，大小 width = 30%（大小比例） height = 30%（大小比例）

3、超级链接

[超链接名](超链接地址 "鼠标悬浮文字")

4、图片

![图片描述](图片地址 "鼠标悬浮文字")

5、表格

表格公式

表头|表头|表头
:--|:--:|--:
内容|内容|内容
内容|内容|内容

表格参数
--: 设置内容和标题栏居右对齐。
:-- 设置内容和标题栏居左对齐。
:--:设置内容和标题栏居中对齐。

6、字体

1、 删除线 文字前后加 ~~

~~这是要删除的文字~~

2、 斜体 文字前后加 *

*这是斜体文字*

3、 加粗 文字前后加 **

**这是加粗文字**

4、 斜体加粗 文字前后加 *

***这是加粗斜体文字***

7、代码

1、 单行代码 代码前后加 ` (~键)
2、 多行分段 代码前后加 `(三个)

8、隐藏某行文字

<!-- 此行文字不显示 -->

9、警告框

警告框组件通过提供一些灵活的预定义消息

<div class="alert alert-success" role="alert">你可以</div>
<div class="alert alert-info" role="alert">在这里</div>
<div class="alert alert-warning" role="alert">输入</div>
<div class="alert alert-danger" role="alert">文字</div>

10、可用的变体

用下面的任何一个类即可改变标签的外观
DefaultPrimarySuccessInfoWarningDanger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

11、进度条

1、堆叠效果
把多个进度条放入同一个.progress 中，使它们呈现堆叠的效果。

[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

[/collapse]
2、动画效果
为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持

[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

[/collapse]
3、条纹效果
通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。

[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

[/collapse]
4、根据情境变化效果
进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。

[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

[/collapse]
5、低百分比进度条
展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性

[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

[/collapse]
6、带有提示标签的进度条

[collapse status="false" title="代码"]

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

[/collapse]

12、键盘按钮

使用 Ctrl+Alt+Del 重启电脑
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>

13、上下标注

演示如下:
H₂O CO₂
2¹⁰
代码如下:

H<sub>2</sub>O  CO<sub>2</sub>
2<sup>10</sup>

简单代码录入如上，更多高级使用方法，请找谷歌/度娘