BS4 Helper库为最新的Bootstrap 4框架提供了一组额外的UI组件和CSS样式。

特征：

• 正在增长/缩小进度条。
• 滚动位置指示器。
• 其他标题样式。
• 文本高亮显示。
• 增强的工具提示。
• 其他尺寸和颜色。
• 可旋转组件。
• 计时器条组件。
• 还有更多。

如何使用它:

1.在Bootstrap项目中导入BS4 Helper的JavaScript和样式表。

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- BS4 Helper -->
<link rel="stylesheet" href="bs4-helper.css" />
<script src="bs4-helper.js"></script>

2.加载以下CSS文件以获得更多颜色和背景颜色：

<link rel="stylesheet" href="bs4-helper-colors.css" />
<link rel="stylesheet" href="bs4-helper-bg-colors.css" />

3.要启用可旋转部件，请加载bs4-帮助-旋转.css样式表：

<link rel="stylesheet" href="bs4-helper-rotations.css" />

4.创建增长/收缩进度条。

<!-- Growing Progress Bar -->
<div class="progress">
  <div class="progress-bar bg-success" data-progress="grow" data-transition=10 data-max-width=95 show-percentage="true"></div>
</div>

<!-- >Shrinking Progress Bar -->
<div class="progress">
  <div class="progress-bar bg-success" data-progress="shrink" data-transition=10 data-min-width=25 show-percentage="true"></div>
</div>

5.创建一个计时器（倒计时）栏。

<div class="progress">
  <div class="progress-bar bg-success" data-progress="timer" data-time=120 toggle-btn="mybtn" reset-btn="myresetbtn" show-label="myp"></div>
</div>
<div class="row">
  <button class="btn btn-outline-success timer-btn float-left" id="mybtn"></button>
  <button class="btn btn-outline-light timer-btn float-left" id="myresetbtn"></button>
  <p class="text-white timer-label" style="text-align: right" id="myp">Remaining Time: 00:02:00</p>
</div>

6.创建一个底部进度条，指示当前滚动进度。

<div class="scroll-container">
  <div class="scroll-indicator bg-danger"></div>
</div>

7.其他标题样式。

<h1 class="heading heading-medium">BS4 Helper Headings</h1>
<h1 class="display-1">Display-1</h1>
<h1>Heading-1</h1>
<h2 class="display-2">Display-2</h2>
<h2>Heading-2</h2>
<h3 class="display-3">Display-3</h3>
<h3>Heading-3</h3>
<h4 class="display-4">Display-4</h4>
<h4>Heading-4</h4>
<h2 class="heading heading-small">Colored Headings</h2>
<h1 class="heading heading-red">Red Heading</h1>
<h1 class="heading heading-orange">Orange Heading</h1>
<h1 class="heading heading-yellow">Yellow Heading</h1>
<h1 class="heading heading-green">Green Heading</h1>
<h1 class="heading heading-cyan">Cyan Heading</h1>
<h1 class="heading heading-blue bg-red">Blue Heading</h1>
<h1 class="heading heading-indigo bg-red">Indigo Heading</h1>
<h1 class="heading heading-violet bg-red">Violet/Purple Heading</h1>

8.突出显示文本。

<mark>Highlighted Text</mark>

9.其他文本尺寸和颜色。

<p class="text-xl">Extra Large Text</p>
<p class="text-large">Large Text</p>
<p class="text-medium">Medium Text</p>
<p class="text-small">Small Text</p>
<p class="text-xs">Extra Small Text</p>
<p class="text-red">Red Text</p>
<p class="text-orange">Orange Text</p>
<p class="text-yellow">Yellow Text</p>
<p class="text-green">Green Text</p>
<p class="text-cyan">Cyan Text</p>
<p class="text-blue">Blue Text</p>
<p class="text-indigo">Indigo Text</p>
<p class="text-violet">Violet Text</p>
<p class="text-comment">These sizes and colors can be combined as follows:</p>
<p class="text-xl text-orange">Extra Large Orange Text</p>
<p class="text-large text-red">Large Red Text</p>
<p class="text-medium text-yellow">Medium Yellow Text</p>
<p class="text-small text-green">Small Green Text</p>
<p class="text-xs text-blue">Extra Small Blue Text</p>
<p class="text-comment">...and other possible combinations.</p>
<p class="text-large color-red-200">Red 200 Text</p>
<p class="text-large bg-red-200">Red 200 Background</p>
<p class="text-large color-cyan-200">Cyan 200 Text</p>
<p class="text-large bg-cyan-200">Cyan 200 Background</p>
<p class="text-large color-teal-200">Teal 200 Text</p>
<p class="text-large bg-teal-200">Teal 200 Background</p>
<p class="text-large color-red-900">Red 900 Text</p>
<p class="text-large bg-red-900 color-white">Red 900 Background</p>
<p class="text-large color-cyan-900">Cyan 900 Text</p>
<p class="text-large bg-cyan-900 color-white">Cyan 900 Background</p>
<p class="text-large color-teal-900">Teal 900 Text</p>
<p class="text-large bg-teal-900 color-white">Teal 900 Background</p>

10.创建可旋转的元素。

<p class="rotate-10">Text Rotated by 10 degrees(.rotate-10)</p>
<p class="rotate-20">Text Rotated by 20 degrees(.rotate-20)</p>
<p class="rotate-30">Text Rotated by 30 degrees(.rotate-30)</p>
<p class="rotate-40">Text Rotated by 40 degrees(.rotate-40)</p>
<p class="rotate-50">Text Rotated by 50 degrees(.rotate-50)</p>
<p class="rotate-60">Text Rotated by 60 degrees(.rotate-60)</p>
<p class="rotate-70">Text Rotated by 70 degrees(.rotate-70)</p>
<p class="rotate-80">Text Rotated by 80 degrees(.rotate-80)</p>
<p class="rotate-90">Text Rotated by 90 degrees(.rotate-90)</p>
<p class="rotate-100">Text Rotated by 100 degrees(.rotate-100)</p>
<p class="rotate-200">Text Rotated by 200 degrees(.rotate-200)</p>
<p class="rotate-300">Text Rotated by 300 degrees(.rotate-300)</p>
<p class="rotate-310">Text Rotated by 310 degrees(.rotate-310)</p>
<p class="rotate-320">Text Rotated by 320 degrees(.rotate-320)</p>
<p class="rotate-330">Text Rotated by 330 degrees(.rotate-330)</p>
<p class="rotate-340">Text Rotated by 340 degrees(.rotate-340)</p>
<p class="rotate-350">Text Rotated by 350 degrees(.rotate-350)</p>
<p class="rotate-360">Text Rotated by 360 degrees(.rotate-360)</p>

更新日志：

2022-02-12

• 更新的JS

v1.5.0 (2022-01-29)

• 添加了“复制”按钮组件。

v1.4.0 (2021-10-12)

• 添加了文本编辑器组件，可用于键入评论、电子邮件等。

v1.3.4 (2021-10-06)

• 添加了.form内部类。

v1.3.3 (2021-09-30)

• 添加了.shadow inset-*类。

v1.3.2 (2021-09-09)

• 在显示的手风琴卡片的标题上添加了一个活动印记。

v1.3.1 (2021-09-08)

• 添加了captcha组件。

v1.3.0 (2021-09-07)

• 增加了随机函数。

v1.2.6 (2021-09-05)

• 添加了密码可见性控制组件。

v1.2.5 (2021-09-01)

• 添加了输入清除按钮组件。

v1.2.4 (2021-08-31)

• 调整了卡片的主题。

v1.2.3 (2021-08-14)

• 添加了位置传感器组件。

第1.2.2节（2021-08-12）

• 添加了许多固定类，如.fixed left、.fixed top right等。

v1.2.0 (2021-08-07)

• 添加了重复的html组件。

v1.1.7 (2021-07-07)

• CSS和JS已更新

预览截图

Bootstrap 4 其他组件和样式 BS4 Helper