Bootstrap CDN减少大量网络请求,常用组件库引入 - Zanealancy博客

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>