npm 包 bootstrap-v4-master 使用教程

简介

Bootstrap是一个开源的前端 Web 框架，它为开发者提供了一系列的CSS、JS组件，能够帮助开发者快速构建漂亮且具有响应式的网页。这里介绍的是 Bootstrap v4版的使用教程，安装方式采用npm的方式；

安装 Bootstrap

在使用 Bootstrap 前，需要先在终端中通过 npm 进行安装，可以在项目目录下运行如下命令：

npm install bootstrap-v4-master

引入 CSS 和 JS 文件

安装 Bootstrap 后，要在 Web 项目中引入 Bootstrap 的 CSS 和 JS 文件，可以通过以下方式引用：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap v4 example</title>
    <link rel="stylesheet" href="node_modules/bootstrap-v4-master/dist/css/bootstrap.min.css">
</head>
<body>
    Hello World
    <!-- jQuery 需要在Bootstrap之前引入 -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap-v4-master/dist/js/bootstrap.min.js"></script>
</body>
</html>

使用 Bootstrap 组件

Bootstrap 提供了非常丰富的 HTML、CSS 和 JavaScript 组件，可以帮助开发者快速构建强大的 Web 应用程序。

字体图标

字体图标是一种通过字体格式显示各种图标而不是图片的技术。Bootstrap 提供了一套免费、开源和易用的字体图标库，可以帮助您轻松地添加漂亮的图标。可以通过以下方式引入：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css">

使用：

<i class="fas fa-check"></i>

栅格系统

Bootstrap 的栅格系统是一组用于布局的类，可以将页面水平分为12等份。可以通过以下方式使用：

<div class="container">
    <div class="row">
        <div class="col-md-8">左侧栏</div>
        <div class="col-md-4">右侧栏</div>
    </div>
</div>

表单

Bootstrap 的表单组件可以快速创建美观的表单，包括输入框、下拉框、复选框、单选框等等。以下是一些例子：

// www.javascriptcn.com code example
<div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>

<div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
        单选框1
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        复选框
    </label>
</div>

按钮

Bootstrap 提供了不同大小和颜色的按钮，可以通过以下方式使用：

<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-success btn-lg">大号成功按钮</button>
<button type="button" class="btn btn-danger btn-sm">小号错误按钮</button>

弹出框

弹出框是一种在页面中间弹出的对话框，可以用于显示警告、确认等内容。以下是例子：

// www.javascriptcn.com code example
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="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">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

总结

通过这篇文章，你学会了如何通过 npm 安装 Bootstrap，并使用了 Bootstrap 的一些基本组件，包括字体图标、栅格系统、表单、按钮和弹出框。可以让你的网页看起来更加漂亮，加强用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557bd81e8991b448d4c73