Bootstrap 4.5 组件

Bootstrap 4.5 组件是一套基于 HTML、CSS、JavaScript 的前端开发工具集，旨在提供创建响应式、移动设备优先的 WEB 应用程序的快速、易用解决方案。Bootstrap 4.5 组件包含了一系列的组件、元素和工具，以帮助开发者快速构建美观、功能强大的 WEB 应用程序。

常用组件

Alerts (警告框)

警告框用于向用户提供警告、成功、信息和错误等相关消息。可以在导航栏、主体内容区域或侧边栏等各个位置使用警告框。

:::alert alert-primary
This is a primary alert—check it out!
:::

:::alert alert-secondary
This is a secondary alert—check it out!
:::

:::alert alert-success
This is a success alert—check it out!
:::

:::alert alert-danger
This is a danger alert—check it out!
:::

:::alert alert-warning
This is a warning alert—check it out!
:::

:::alert alert-info
This is a info alert—check it out!
:::

:::alert alert-light
This is a light alert—check it out!
:::

:::alert alert-dark
This is a dark alert—check it out!
:::

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>

Cards (卡片)

卡片组件用于呈现文本、图像和其他类型的内容。卡片可用于响应式布局，具有一定的扩展性和灵活性。

<div class="card">
    <img class="card-img-top" src="img/card.jpg" 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>

Forms (表单)

表单组件用于收集用户的输入数据，支持多种类型的表单字段、验证和反馈机制。

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

Navigation (导航)

导航组件用于构建网站的主菜单，通过多种方式来呈现菜单项。

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

Carousel (轮播)

轮播组件主要用于实现幻灯片效果，可通过定时、手工、循环等方式来自动切换图片。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/carousel-1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="img/carousel-2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="img/carousel-3.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

总结

Bootstrap 4.5 组件是一套功能强大、易用的前端开发工具集，其中包含了多种常用的组件、元素和工具，以帮助开发者快速构建美观、功能强大的 WEB 应用程序。在使用 Bootstrap 4.5 组件时，可以根据实际需求选择合适的组件、样式和尺寸，以实现所需的功能和效果。