html如何引用bootstrap

什么是Bootstrap

Bootstrap是一个流行的前端框架，提供了一系列的CSS、JavaScript组件和样式，方便Web开发者在新项目中快速搭建出漂亮而且兼容性好的网站。

Bootstrap的特点

1. 响应式布局

Bootstrap可以根据屏幕大小自适应，提供了不同的布局排列方式，让网站在不同的设备上都能有良好的显示效果。

2. 前端组件

Bootstrap内置了大量的前端组件，包括导航菜单、表单、表格、按钮、图标等等，几乎可以满足绝大部分Web开发需求。

3. 样式统一

Bootstrap提供了一套统一的样式文件，使得整个网站的UI风格都能保持一致性，用户体验更加友好。

引用Bootstrap的方法

1. CDN引用

CDN引用可以快速引用最新版本的Bootstrap文件，不需要下载保存到本地。

<!-- 引入Bootstrap的CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 引入Bootstrap的JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

需要注意的是，CDN引用需要联网才能使用，如果引用的远程资源不能访问，将导致站点无法正常显示。

2. 本地引用

本地引用需要先从Bootstrap官方网站下载最新版本的Bootstrap文件，然后保存到本地，在HTML页面中引用。

<!-- 引入Bootstrap的CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入Bootstrap的JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>

需要注意的是，由于Bootstrap本身提供了很多组件和样式，一些常用的JavaScript库，如jQuery、Popper.js等也需要另外引用。

Bootstrap基本使用

引用了Bootstrap文件之后，就可以使用Bootstrap提供的组件和样式了。

1. Bootstrap按钮

Bootstrap按钮组件是网站开发中经常使用的组件之一。以下代码演示了如何创建一个基本的按钮，同时支持各种不同的样式。

<!-- 默认样式 -->
<button class="btn btn-default">Default</button>
<!--primary样式-->
<button class="btn btn-primary">Primary</button>
<!-- success样式 -->
<button class="btn btn-success">Success</button>
<!-- danger样式 -->
<button class="btn btn-danger">Danger</button>
<!-- warning样式 -->
<button class="btn btn-warning">Warning</button>
<!-- info样式 -->
<button class="btn btn-info">Info</button>
<!-- link样式 -->
<button class="btn btn-link">Link</button>

按钮样式如下所示：

2. Bootstrap表格

Bootstrap表格组件可以让网站数据的展示更加美观和直观，同时提供了一些常用功能，如分页、排序等等。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

表格样式如下所示：

3. Bootstrap表单

Bootstrap表单组件是网站开发中经常使用的组件之一，可以让用户输入数据更加方便和直观。

<form>
  <div class="form-group">
    <label for="exampleInputUsername1">Username</label>
    <input type="text" class="form-control" id="exampleInputUsername1" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

表单样式如下所示：

总结

本文介绍了Bootstrap的基本使用方法，包括引用Bootstrap文件、创建按钮、表格和表单组件等。

利用Bootstrap可以快速搭建出美观、直观、响应式的网站，同时也提高了开发效率。