Bootstrap CDN减少大量网络请求,常用组件库引入
jQuery文件,在bootstrap.min.js之前引入: <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
关于Bootstrap常用的CDN地址。请注意,这些地址可能会随着时间的推移而发生变化,因此建议定期检查并更新您的CDN链接。
以下是一些Bootstrap常用的CDN地址:
Bootstrap 3.x
BootCDN
CSS:
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
JavaScript:
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
mazey
CSS:
<link type="text/css" href="//i.mazey.net/lib/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
JavaScript:
<script type="text/javascript" src="//i.mazey.net/lib/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Bootstrap 4.x
Bootstrap 4核心CSS文件:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
用于弹窗、提示、下拉菜单:
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
Bootstrap 4核心JavaScript 文件:
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
BootCDN
CSS:
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
JavaScript:<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
(注意这里包含了Popper.js)
bootstrap-select
CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
JavaScript:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
组件中文翻译:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/defaults-zh_CN.min.js"></script>
DataTables
创建具有排序、搜索和分页功能的数据表格。
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
SweetAlert
美观的弹出警告和确认框。
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
Bootstrap Datepicker
方便选择日期
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">
Font Awesome
提供丰富的图标库
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Popper.js
通常与 Bootstrap 的某些组件(如工具提示、弹出框等)配合使用,提供定位和显示效果。
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>