1、文字

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

文字 表示黄色警告框

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

文字 表示蓝色信息框

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

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

文字表示红色错误框

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

文字 表示绿色成功框

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

这里是你需要抖动的文字!

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 需要加方框 [ ]
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 中,使它们呈现堆叠的效果。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)


代码

<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>


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

45% Complete


代码

<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>


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

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)


代码

<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>


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

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)


代码

<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>


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

0%

2%


代码

<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>


6、带有提示标签的进度条

60%


代码

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

12、键盘按钮

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

13、上下标注

演示如下:
H2O CO2
210
代码如下:

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

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

最后修改:2024 年 01 月 19 日
觉得文章对您有用,请我喝杯咖啡吧!