Bootstrap基础组件

基础组件

4.1 使用按钮

按钮是网页上常见的交互元素,Bootstrap提供了丰富的按钮样式和变体。以下是一些使用Bootstrap按钮的示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
    <button class="btn btn-success">Success Button</button>
    <button class="btn btn-danger">Danger Button</button>
    <button class="btn btn-warning">Warning Button</button>
    <button class="btn btn-info">Info Button</button>
    <button class="btn btn-light">Light Button</button>
    <button class="btn btn-dark">Dark Button</button>
    <button class="btn btn-outline-primary">Outline Primary Button</button>
    <button class="btn btn-link">Link Button</button>
    <!-- 引入Bootstrap的JavaScript文件,需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

显示效果:


4.2 创建导航栏

导航栏是网站顶部的常见元素,Bootstrap使创建导航栏变得简单。以下是一个基本的导航栏示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ml-auto">
                    <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="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 引入Bootstrap的JavaScript文件,需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

显示效果:

大屏


移动端小屏


小屏可点击右侧三个横线弹出下拉菜单导航

4.3 图片和响应式图像

Bootstrap可以轻松地使图像响应式,以适应不同的屏幕尺寸。使用img-fluid类来创建响应式图像:

<img src="path/to/image.jpg" alt="Responsive Image" class="img-fluid">

4.4 列表和表格样式

Bootstrap还提供了样式化的列表和表格选项。以下是一个列表和表格的示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>

    <ul class="list-group">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
    </ul>

    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
    <!-- 引入Bootstrap的JavaScript文件,需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

显示效果:


这是一个关于Bootstrap 5基础组件的简要介绍。您可以根据项目需要使用这些组件来构建更加丰富和交互性的页面。

网友评论0