Bootstrap 4

什么是Bootstrap 4？

Bootstrap是Twitter开发的一个开源框架，用于开发响应式、移动设备优先的Web项目。Bootstrap包含了HTML、CSS、JavaScript等工具，使用它可以快速搭建Web页面，节省开发时间。

Bootstrap 4是Bootstrap的第四个主要版本。它带来了一些重大改进，如ES6和Sass的支持，完全重新设计的网格系统、卡片组件和表单控件等。

如何使用Bootstrap 4？

使用Bootstrap 4需要先安装它。你可以从官方网站（https://getbootstrap.com/）下载它，或使用npm安装它：

npm install bootstrap

Bootstrap 4提供了以下几种方式来使用它：

CDN引用

可以通过CDN引用Bootstrap 4的CSS和JavaScript文件，如下所示：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

下载源代码

也可以下载Bootstrap 4的源代码，并在项目中引用它：

<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>

使用Sass

如果你想使用Sass来定制Bootstrap 4，可以使用npm安装它的Sass版本：

npm install bootstrap @latest sass

然后，在你的样式文件中引用Bootstrap 4的源代码：

@import '../node_modules/bootstrap/scss/bootstrap';

使用工具类

Bootstrap 4提供了一些有用的CSS类，可以用于快速设置页面元素的样式，如设置背景颜色、字体大小、边距等。例如，下面的代码将创建一个红色、带有内边距的文本框：

<input type="text" class="form-control bg-danger text-white py-3" placeholder="Input field">

##Bootstrap 4的组件

Bootstrap 4提供了许多组件，可以用于创建各种界面元素，如导航栏、模态框、卡片等。下面是一些常用组件的示例：

导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo</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</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

模态框

<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>

卡片

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

总结

Bootstrap 4提供了许多组件和工具类，可以帮助你快速搭建Web页面，节省开发时间。学习Bootstrap 4并将它应用于你的项目中，将会大大提高你的开发效率。