Bootstrap 4-内容

简介

Bootstrap是一个流行的免费且开源的前端框架，由Twitter开发，它使用HTML、CSS、JavaScript构建网站或Web应用程序。

Bootstrap包含了很多CSS样式、JavaScript插件和字体的集合，可用于创建响应式和移动端优先的网站、应用和组件。Bootstrap4是Bootstrap框架的最新版本，为了更好地支持移动端的开发和设计，Bootstrap4弃用了许多过时的浏览器和技术。

特点

1. 响应式设计：Bootstrap设计时有响应式的需求，可以适应不同大小屏幕（手机、平板、台式机）。
2. 定制性强：Bootstrap提供了许多可用的HTML元素、CSS类和JavaScript组件，可以自由组合使用，实现自定义主题和网站。
3. 兼容性好：Bootstrap兼容所有最新的浏览器（Chrome、Firefox、IE）、不同的操作系统（Windows、iOS、Android）。
4. 速度快：Bootstrap的CSS和JavaScript代码压缩后很小，加载速度快。
5. 文档与教程丰富：Bootstrap有完整的文档和教程，样例数量也非常多，可以很快地上手。
6. 大量的组件和工具：Bootstrap内置了很多有用的组件和工具，例如导航菜单、表单、轮播、弹出框、进度条等等。

使用方法

Bootstrap的使用方法很简单，可以通过CDN或下载本地文件来使用。以下是最简单的两种使用方式。

CDN使用方式

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

<!-- 引入jQuery和Bootstrap的JavaScript文件 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

下载本地文件使用方式

<!-- 将下载的CSS和JavaScript文件放入项目中 -->

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="bootstrap.min.css" />

<!-- 引入jQuery和Bootstrap的JavaScript文件 -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

常用组件

Bootstrap内置了很多有用的组件，以下是常用的一些组件及其样式。更多组件请参见官方文档。

栅格系统

栅格系统是Bootstrap最重要的组件之一，用于实现响应式布局。

<div class="container">
    <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
    </div>
</div>

按钮

Bootstrap的按钮可以设置大小、颜色、边框、禁用等状态。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

导航菜单

Bootstrap的导航菜单可以是垂直或水平的，也可以有下拉菜单。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

表单

Bootstrap的表单可以设置大小、颜色、边框、状态等，还可以使用水平或垂直的布局。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="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的弹出框可以在网页中显示警告、提示和确认信息。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

结语

Bootstrap是一个功能强大且易于使用的前端框架，可以帮助您快速构建响应式和移动端优先的网站、应用和组件。希望本文对您有所帮助，谢谢阅读！