Bootstrap 教程

Bootstrap 教程

Bootstrap 是一个基于 HTML、CSS、JavaScript 的前端开发框架，它由 Twitter 公司开发并开源，以响应式布局为基础，旨在帮助开发者快速搭建美观、可靠、具有一致性的 Web 应用程序。在 Bootstrap 中，开发者可以使用一系列的组件、工具和样式来快速构建出高效的 Web 页面。

本教程将介绍 Bootstrap 的一些基本概念、常用组件以及如何在你的 Web 应用程序中使用它。

安装 Bootstrap

Bootstrap 可以通过多种方式来安装，包括下载源代码包、使用包管理工具（如 NPM、Bower）等。在这里，我们将介绍使用 Bootstrap 的最简单方式：引入 CDN（内容分发网络）中的 Bootstrap 资源。

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet"
          href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-...（省略）...Wg=="
          crossorigin="anonymous">
  </head>
  <body>
    <!-- 具体内容 -->
    <!-- 引入 Bootstrap JS ，放在 body 标签末尾 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"
            integrity="sha384-...（省略）...xOQ=="
            crossorigin="anonymous"></script>
  </body>
</html>

工具类

Bootstrap 提供了许多常用的工具类，可以通过应用这些类简化 HTML 标记的编写。

<!-- 文本对齐 -->
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>

<!-- 背景颜色 -->
<div class="bg-primary">Primary 蓝色背景</div>
<div class="bg-success">Success 绿色背景</div>
<div class="bg-danger">Danger 红色背景</div>

<!-- 字体颜色 -->
<div class="text-white bg-dark">白色字体，暗色背景</div>

<!-- 圆角 -->
<div class="rounded">圆角</div>
<div class="rounded-circle">圆形</div>
<div class="rounded-pill">椭圆形</div>

<!-- 边框 -->
<div class="border">默认边框</div>
<div class="border-top">上边框</div>
<div class="border-right">右边框</div>
<div class="border-bottom">下边框</div>
<div class="border-left">左边框</div>

<!-- 清除浮动 -->
<div class="clearfix">清除浮动</div>

Bootstrap 组件

栅格系统

Bootstrap 的栅格系统通过把页面划分为 12 格，然后在这些格子内布置内容项，从而实现响应式网格布局，并根据屏幕尺寸自动调整布局。

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

导航条

Bootstrap 提供了多种样式的导航条，包括普通的导航条、下拉菜单、导航条表单等。

<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>
    </ul>
  </div>
</nav>

模态框

模态框是一种弹出式对话框，用户可以在模态框中进行一些操作，操作完成后关闭模态框。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>

    </div>
  </div>
</div>

以上是 Bootstrap 的一些基本概念、常用组件以及如何在 Web 应用程序中使用。希望这个教程能帮到你！

Bootstrap 插件概览 Bootstrap 标签