文章: 阅读:

Bootstrap4 基础知识

CSSBootstrap

前言 🔗

1、Bootstrap4



  • Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

  • Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了 40% 以上。

  • Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。

  • 相关网站：

2、安装

  • 可以通过以下两种方式来安装 Bootstrap4：

    • 使用 Bootstrap4 CDN。
    • 从官网下载 Bootstrap4。

2.1 使用 CDN

  • 在 HTML 页面的 <head> 部分中添加以下行。

  • 国内推荐使用 Staticfile CDN 上的库：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Bootstrap4 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

    <!-- jQuery 文件。务必在 bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

  • 海外推荐 cdnjs 上的库：

    1
    2
    3
    4
    5
    6
    7
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

  • 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。

2.2 直接下载到本地

  • 下载地址：

  • 复制整个 bootstrap 文件夹到项目中。

  • 在 HTML 的 <head> 中引用 bootstrap.min.css。

    1
    2
    3
    <link href="path/to/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" />

    <link href="path/to/bootstrap/5.0.1/js/bootstrap.min.js" rel="stylesheet" />

  • 如果下载的是未编译的源代码，需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

  • 此外还可以通过包的管理工具 npm、 gem、 composer 等来安装：

    1
    2
    3
    $ npm install bootstrap@4.0.0-beta.2
    $ gem 'bootstrap', '~> 4.0.0.beta2'
    $ composer require twbs/bootstrap:4.0.0-beta.2

3、使用

3.1 添加 HTML5 doctype

  • Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

  • HTML5 doctype 在文档头部声明，并设置对应编码:

    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
    </head>

    </html>

3.2 移动设备优先

  • 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

    1
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  • width=device-width 表示宽度是设备屏幕的宽度。

  • initial-scale=1 表示初始的缩放比例。

  • shrink-to-fit=no 自动适应手机屏幕的宽度。

3.3 容器类

  • Bootstrap4 需要一个容器元素来包裹网站的内容。

  • 可以使用以下两个容器类：

    • .container 类用于固定宽度并支持响应式布局的容器。
    • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

3.4 模板

  • 一个使用了 Bootstrap 的基本的 HTML 模板如下所示。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 模板</title>

        <!-- 包含头部信息用于适应不同设备 -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- 引入 Bootstrap: Bootstrap4 核心 CSS 文件 -->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

        <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5 元素和媒体查询 -->
        <!-- 注意：如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
        <!--[if lt IE 9]>
    	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <h1>Hello, world!</h1>

        <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->

        <!-- 可选: jQuery 文件。务必在 bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

        <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

        <!-- 可选: Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    </body>

    </html>

  • 可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

3.5 实例

3.5.1 .container 实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <head>
        <meta charset="utf-8" />
        <title>Qian Chia 工作室</title>

        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    </head>
    1
    2
    3
    4
    <div class="container">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>这是一些文本。</p>
    </div>

  • 效果 🔗

3.5.2 .container-fluid 实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <head>
        <meta charset="utf-8" />
        <title>Qian Chia 工作室</title>

        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    </head>
    1
    2
    3
    4
    <div class="container-fluid">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
    </div>

  • 效果 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-11 19:01


评论


文章目录
  1. 1. 前言 🔗
  2. 2. 1、Bootstrap4
  3. 3. 2、安装
    1. 3.1. 2.1 使用 CDN
    2. 3.2. 2.2 直接下载到本地
  4. 4. 3、使用
    1. 4.1. 3.1 添加 HTML5 doctype
    2. 4.2. 3.2 移动设备优先
    3. 4.3. 3.3 容器类
    4. 4.4. 3.4 模板
    5. 4.5. 3.5 实例
      1. 4.5.1. 3.5.1 .container 实例
      2. 4.5.2. 3.5.2 .container-fluid 实例
隐藏目录