开启BootStrap学习之旅

开启BootStrap学习之旅

1. 了解Bootstrap

Bootstrap是一个开源的前端框架，由Twitter的前端工程师推出。它结合了HTML、CSS、JavaScript等多种技术，提供了一套强大的现代化网页模板和组件库，可以帮助我们快速构建漂亮、响应式的网页。

2. 下载并引入Bootstrap

• 去Bootstrap官网（https://getbootstrap.com/）下载最新版本的Bootstrap。
• 在HTML文件中引入Bootstrap的CSS和JS文件。可以通过CDN或本地文件引入。如下：

<!-- 引入Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入Bootstrap核心JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

3. Bootstrap基本用法

Bootstrap提供了很多样式和组件，我们只需要在HTML中添加对应的class即可使用。以下是两个示例说明：

• 示例1：添加导航栏

Bootstrap提供了一个导航栏组件，我们只需要在HTML中添加对应的class即可使用。代码如下：

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

• 示例2：添加按钮

Bootstrap提供了多种样式的按钮，我们只需要在HTML中添加对应的class即可使用。代码如下：

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

4. 学习Bootstrap文档

Bootstrap的文档非常详细，其中包括了各种组件的用法、样式说明等。我们可以通过文档了解它提供的所有功能，并学会如何使用它们。文档地址：https://getbootstrap.com/docs/4.3/getting-started/introduction/

5. 使用Bootstrap构建网站

通过学习Bootstrap，并结合自己的创意，我们可以快速构建漂亮、响应式的网站。下面是一个使用Bootstrap构建的示例网站：https://getbootstrap.com/docs/4.3/examples/