bootstrap参考网站总结#

【一】官方文档#

总官网：https://www.bootcss.com/

Bootstrap v3：https://v3.bootcss.com/

【二】图标样式#

https://fontawesome.com.cn/

【三】弹框样式#

样式展示：http://lipis.github.io/bootstrap-sweetalert/

文件地址：https://github.com/lipis/bootstrap-sweetalert

【引入方式总结】#

使用方法：copy到head里面

【一】CDN链接引入#

1
    <!--  CDN 链接 引入方法  -->
2
    <!--  Bootstrap 的 CSS 样式文件  -->
3
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
4
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
5
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
6
    <!--  jQuery 文件  -->
7
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>

【二】本地链接引入#

【1】引入方法#

1
<!--  本地 链接 引入方法  -->
2
    <!--  Websource 文件夹 拷贝到当前文件夹下即可使用  -->
3
    <!--  jQuery 文件  -->
4
    <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
5
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
6
    <script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
7
    <!--  Bootstrap 的 CSS 样式文件  -->
8
    <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
9
    <!-- bootstrap-sweetalert(弹框) 的 CSS 文件   -->
10
    <link rel="stylesheet" href="Websource\bootstrap-sweetalert\dist\sweetalert.css">
11
    <!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
12
    <script src="Websource\bootstrap-sweetalert\dist\sweetalert.js"></script>

【2】文件构成#

文件结构

1
|-- Websource
2
  |-- Bootstrap
3
    |-- css
4
      |-- bootstrap.min.css
5
    |-- fonts(不可缺少)
6
      |--全部文件
7
    |-- js
8
      |-- bootstrap.min.js
9
  |-- bootstrap-sweetalert
10
    |-- dist
11
      |-- sweetalert.min.js
12
    |-- Icon
13
      |-- 全部文件
14
    |-- jQuery
15
      |-- node_modules
16
        |-- jquery
17
          |-- dist
18
            |-- jquery.min.js