Bootstrap 安装使用

  • Bootstrap CDN

    如果您不想自己下载并托管 Bootstrap,则可以从 CDN(内容交付网络)中添加它。
    Staticfile 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。 您还必须包括 jQuery
    // 新 Bootstrap 核心 CSS 文件 
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    // jQuery文件。务必在bootstrap.min.js 之前引入
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    // bootstrap 的弹窗、提示、下拉菜单,需要 popper.min.js 才完美定位
    <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
    // 最新的 Bootstrap 核心 JavaScript 文件 
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
    注意:Bootstrap 将 jQuery 和 Popper.js 用于 JavaScript 组件(如模式,工具提示,弹出窗口等)。 但是,如果仅使用 Bootstrap 的 CSS 部分,则不需要它们。
  • Bootstrap 下载

    如果要自己下载并托管 Bootstrap,请访问 https://getbootstrap.com/,然后按照其中的说明进行操作。
  • 使用 Bootstrap 创建第一个网页

    1. 添加HTML5文档类型

    Bootstrap 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。
    始终在页面开头添加 HTML5 文档类型,以及 lang 属性和正确的字符集:
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="utf-8">
       </head>
    </html>
    

    2. Bootstrap 是移动优先的

    Bootstrap 旨在响应移动设备。 移动优先样式是核心框架的一部分。
    为了确保正确渲染和触摸缩放,请在 <head> 元素内添加以下 >meta> 标签:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    width = device-width 部分将页面的宽度设置为跟随设备的屏幕宽度(视设备而定)。
    initial-scale = 1 部分设置浏览器首次加载页面时的初始缩放级别。

    3. 容器选择

    Bootstrap 还需要包含元素来包装站点内容。
    有两种容器类可供选择:
    • .container 类提供了一个响应式固定宽度容器
    • .container-fluid 类提供了一个全宽度的容器,横跨视口的整个宽度
    .container
    .container-fluid
  • 两个基本的 Bootstrap 页面

    以下示例显示了基本 Bootstrap 页面的代码(带有响应的固定宽度容器):
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>菜鸟教程(cainiaoya.com)</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
       <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
       <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
       <div class="container">
          <h1>我是带有响应的固定宽度容器的bootstrap页面</h1>
          <p>这个是一个段落</p>
       </div>
    </body>
    </html>
    
    尝试一下
    以下示例显示基本 Bootstrap 页面(带有全角容器)的代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>菜鸟教程(cainiaoya.com)</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
       <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
       <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
       <div class="container-fluid">
          <h1>我是带有全角容器bootstrap页面</h1>
          <p>这个是一个段落</p>
       </div>
    </body>
    </html>
    
    尝试一下