Bootstrap4 教程

Bootstrap4 教程

Bootstrap 是Twitter公司开发的一个前端框架，它可以极大地加速web开发的过程，并且提升了开发的质量和效率。Bootstrap通过开发人员可用的HTML、CSS和JavaScript组件库，加速开发人员开发在各种设备上的响应式和移动先的web应用程序。本文主要介绍Bootstrap4的使用方法，让读者能够快速地学会如何使用Bootstrap4开发响应式的网站。

使用方法

引入Bootstrap4文件：“bootstrap.min.css”和“bootstrap.min.js”文件，这样网站就可以使用Bootstrap4的组件库了。在HTML文档的头部引用以下代码即可：

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.0.0/js/bootstrap.min.js"></script>

响应式布局

Bootstrap4使用12栅格系统(grid system)，一行可以分为1到12个列，你可以使用这些列来创建响应式布局，以适应各种不同的设备尺寸。以下是示例代码：

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

在上面的代码中，.row类定义布局的一行，而.col-sm-4定义一个列，代表列占据了12栅格系统中的4个栅格，也就是一行分为3个相等的部分。在不同的设备上，你可以使用.col-md-，.col-lg-，.col-xl-*等来控制列的宽度。

外观组件

开发web应用时，你不必再费劲地创建CSS样式来定义按钮、导航栏、表单、模态框等组件，Bootstrap4已经为你提供了这些样式。以下是示例代码：

Buttons

<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>
<button type="button" class="btn btn-link">Link</button>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

以上是一个简单的导航栏示例。

Forms

Bootstrap4提供了许多预先定义好的CSS类，可用于创建漂亮的表格、表单和输入框等组件。以下是示例代码：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </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>

模态框是Bootstrap4中最常用的组件之一，可以在需要时显示弹出框来引导用户进行相关操作。以下是示例代码：

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

<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">
        Modal body text goes here.
      </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>

以上示例代码包括一个按钮和一个模态框，当用户点击按钮时，模态框就会弹出来。

总结

本文详细地介绍了Bootstrap4的使用方法，从响应式布局、外观组件到模态框等组件都有详细的示例代码。读者可以按照示例代码，快速地学习Bootstrap4的使用方法，提高Web开发的速度和准确度。

Bootstrap4 提示框 Bootstrap4 文字排版