Bootstrap入门

Bootstrap是Twitter创建的流行前端框架,结合HTML、CSS和JavaScript,加速网页开发。本文介绍了Bootstrap的简介,提供了下载链接,并强调了引用时的注意事项,包括Popper文件的获取和引用顺序。还展示了格栅布局和按钮组件的应用示例,引导读者参考官方文档深入学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


简介

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

官网下载链接:下载 Bootstrap
Popper文件下载地址(打开直接另存为即可):Popper文件保存页

引用

注意:下载最新版本的小伙伴可以免去引用jQuery的步骤,建议引用popper文件,引用顺序也需要注意!!!!

<!-- 引用poppor文件 找到文件储存位置引用即可 -->
    <script src="./dist/popper.min.js"></script>
    <!-- 引用css文件 找到文件储存位置引用即可 -->
    <link rel="stylesheet" href="./dist/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
    <!-- 引用js文件 找到文件储存位置引用即可 -->
    <script src="./dist/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>

应用举例

grid格栅布局:

    <!-- 格栅布局 -->
    <div class="container">
        <div class="row">
            <div class="col">1/4</div>
            <div class="col-6">1/2</div>
            <div class="col">1/4</div>
        </div>
        <div class="row">
            <div class="col">1/3</div>
            <div class="col">1/3</div>
            <div class="col">1/3</div>
        </div>
        <div class="row">
            <div class="col">1/4</div>
            <div class="col-9">3/4</div>
        </div>
        <div class="row">
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
            <div class="col">1/12</div>
        </div>
    </div>

在这里插入图片描述
按钮:

    <button class="btn">基本按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-secondary">次要按钮</button>
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-info">消息按钮</button>
    <button class="btn btn-warning">危险按钮</button>
    <button class="btn btn-dark">深色按钮</button>
    <button class="btn btn-light">浅色按钮</button>
    <button class="btn btn-link">链接按钮</button>

在这里插入图片描述
按钮组:

 <div class="btn-group btn-group-lg mt-5">
            <button class="btn btn-primary">大号按钮</button>
            <button class="btn btn-secondary">大号按钮</button>
            <button class="btn btn-success">大号按钮</button>
        </div>
        <div class="btn-group mt-5">
            <button class="btn btn-primary">默认按钮</button>
            <button class="btn btn-secondary">默认按钮</button>
            <button class="btn btn-success">默认按钮</button>
        </div>
        <div class="btn-group btn-group-sm mt-5">
            <button class="btn btn-primary">小号按钮</button>
            <button class="btn btn-secondary">小号按钮</button>
            <button class="btn btn-success">小号按钮</button>
        </div>

在这里插入图片描述

上面简单举例,具体使用方法请参考: Bootstrap中文文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chenlei...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值