返回
编程

前端框架bootstrap教程：Bootstrap框架入门教程，从零开始构建响应式网站

来源：网络   作者：   日期：2025-11-15 09:57:48  

Bootstrap是一个流行的前端框架，由Twitter开发并于2011年首次发布，现已成为Web开发中最常用的工具之一，它提供了一套丰富的预定义CSS和JavaScript组件，帮助开发者快速构建响应式、移动设备友好的网站，本文将带你从零开始学习Bootstrap框架，掌握其核心概念和常用组件,让你轻松创建现代化的网页。

什么是Bootstrap？

Bootstrap是一个开源的前端工具包，用于开发响应式和移动优先的网站，它包含HTML、CSS和JavaScript的模板和组件，能够帮助开发者快速搭建美观、功能丰富的网页,Bootstrap的核心特点是：

  1. 响应式设计：Bootstrap能够根据设备屏幕大小自动调整布局，确保网站在手机、平板和桌面设备上都能完美显示。
  2. 组件丰富：提供导航栏、按钮、卡片、模态框等常用UI组件,开发者可以直接使用。
  3. 易于定制：通过SASS变量和自定义CSS,可以轻松修改框架的样式和主题。
  4. JavaScript插件：内置了轮播图、下拉菜单、模态框等交互组件,增强用户体验。

如何开始使用Bootstrap？

引入Bootstrap

要使用Bootstrap，首先需要在HTML文件中引入Bootstrap的CSS和JavaScript文件，可以通过CDN（内容分发网络）快速引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap入门</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 页面内容 -->
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

理解Bootstrap网格系统

Bootstrap的网格系统是其核心功能之一，它基于12列的响应式布局，开发者可以使用container、row和col类来创建灵活的布局。

前端框架bootstrap教程：Bootstrap框架入门教程，从零开始构建响应式网站

<div class="container">
    <div class="row">
        <div class="col-md-4">第一列</div>
        <div class="col-md-4">第二列</div>
        <div class="col-md-4">第三列</div>
    </div>
</div>
  • container：用于包裹网格内容,提供边距和居中。
  • row：表示一行,包含多个列。
  • col-md-4：表示在中等屏幕（md）上占据4列宽度,Bootstrap会根据屏幕大小自动调整列宽。

常用Bootstrap组件

导航栏（Navbar）

导航栏是网站的必备组件,Bootstrap提供了简洁的导航栏实现方式。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">我的网站</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lt;/a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

卡片（Card）

卡片组件常用于展示内容块，如文章摘要、产品信息等。

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容...</p>
        <a href="#" class="btn btn-primary">按钮</a>
    </div>
</div>

按钮（Button）

Bootstrap提供了多种按钮样式,适用于不同场景。

前端框架bootstrap教程：Bootstrap框架入门教程，从零开始构建响应式网站

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

轮播图（Carousel）

轮播图用于展示图片或内容,常用于首页的焦点区域。

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

实战：创建一个简单的响应式网站

下面是一个使用Bootstrap构建的简单响应式网站示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap响应式网站</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">我的网站</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">lt;/a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/1200x400" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/1200x400" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <!-- 卡片布局 -->
    <div class="container my-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡片标题</h5>
                        <p class="card-text">卡片内容...</p>
                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡片标题</h5>
                        <p class="card-text">卡片内容...</p>
                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="https://via.placeholder.com/300" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">卡片标题</h5>
                        <p class="card-text">卡片内容...</p>
                        <a href="#" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="bg-light text-center py-4 mt-5">
        <p>© 2023 我的网站. 保留所有权利.</p>
    </footer>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap是一个强大且灵活的前端框架，能够帮助开发者快速构建现代化的响应式网站，通过本文的学习，你应该已经掌握了Bootstrap的基本用法，包括网格系统、导航栏、卡片、轮播图等核心组件，你可以进一步学习Bootstrap的JavaScript插件、自定义主题以及与其他前端框架（如Vue、React）的集成,以提升你的开发技能。

希望这篇教程能帮助你入门Bootstrap,开启你的前端开发之旅！

分类：编程
地址：https://www.jinti.net/post/306013.html
标签：bootstrap前端框架用法前台框架 bootstrap前端框架svelte
责任编辑：今题网
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。

相关文章：

文章已关闭评论！


页面加载时长：0.053 秒 数据库查询：10 次 占用内存：1.52 MB
闽ICP备2023004790号