MarkDown编辑器的基础使用和高级使用
目录
文章首部添加 @TOC
(注：编辑器会根据文章标题自动生成目录)
标题
1级标题
2级标题
3级标题
四级标题
五级标题
六级标题
文本样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024。
列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
链接
链接: link.
图片:
带尺寸的图片: 
居中的图片:
居中并且带尺寸的图片: 
代码片
下面展示一些 内联代码片。
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
表格
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
| Column 1 | Column 2 |
|---|---|
| centered 文本居中 | right-aligned 文本居右 |
主脚
一个具有注脚的文本。[1]
注释
Markdown将文本转换为 HTML。
自定义列表
- Markdown
- Text-to-HTML conversion tool
- Authors
- John
- Luke
LaTeX数学公式
Gamma公式展示 是通过 Euler integral
插入甘特图
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划中 : des3, after des2, 5d
插入UML图
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China–>Andrew: How are you?
Andrew->>China: I am good thanks!
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.
李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
插入Mermaid流程图
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
插入Flowchart流程图
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？
st->op->cond
cond(yes)->e
cond(no)->op
基本模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</html>
实例精选
很多很多的现成的例子：http://v3.bootcss.com/getting-started/#examples
表格
<div class="container">
<table class="table table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>888</td><td>张三</td><td>1000</td></tr>
</table>
</div>
加上table基础样式之后才会附加表格样式
表格样式
| 属性 | 作用 |
|---|---|
| table | 基础样式 |
| table-striped | 条纹状 表格 |
| table-bordered | 带边框的表格 |
| table-hover | 鼠标悬停 |
| table-condensed | 紧缩表格 |
状态类
属性 | 描述 | 作用
----------------------- | ----------------
active | 活动灰 | 鼠标悬停在行或单元格上时所设置的颜色
success | 成功绿 | 标识成功或积极的动作
info | 提示蓝 | 标识普通的提示信息或动作
warning | 警告黄 | 标识警告或需要用户注意
danger | 危险红 | 标识危险或潜在的带来负面影响的动作
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
按钮
按钮样式可以添加给a标签，但是避免使用除botton之外的其他标签，不同设备兼容性方面可能会出现问题
<div class="container">
<button type="button" class="btn btn-danger">按钮</button>
</div>
预定义样式
btn-default 默认样式 白
btn-primary 首选项 紫
btn-success 成功 绿
btn-info 一般信息 蓝
btn-warning 警告 橙
btn-danger 危险 红
btn-link 链接 蓝字下划线
尺寸
btn-lg 大按钮
btn-default 默认尺寸
btn-sm 小按钮
btn-xs 超小尺寸
<a href="" class="btn btn-default btn-lg" role="button">default</a>
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
激活状态
<button type="button" class="btn btn-primary btn-lg **active**">Primary button</button>
<a href="#" class="btn btn-primary btn-lg **active**" role="button">Primary link</a>
禁用状态
<button type="button" class="btn btn-lg btn-primary" **disabled**>Primary button</button>
图片
为图片添加** .img-responsive **类可以让图片支持响应式布局。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。
图片形状
<img src="girl.jpg" class="img-rounded">
<img src="girl.jpg" class="img-circle">
<img src="girl.jpg" class="img-thumbnail">
注脚的解释 ↩︎