bootstrap个人用例

最新推荐文章于 2024-11-24 04:58:19 发布
最新推荐文章于 2024-11-24 04:58:19 发布
阅读量213 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端笔记 文章标签： bootstrap css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/XIYECODE/article/details/103712376
本文详细介绍了使用Bootstrap框架实现响应式网页设计的过程，包括栅格系统、响应式表格、图片、导航栏、轮播图及缩略图组件的布局与样式调整。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        .container {
            margin-bottom: 10px;
            border: 1px solid red;
        }
        .t1 > div > div {
            height: 100px;
            margin: 10px 0;
            border: 1px solid blue;
        }
        table th {
            text-align: center;
        }
        .logo {
            width: 50px;
            height: 50px;
            margin-top: -15px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container t1">
        <div class="h1 text-center">栅格栏</div>
        <div class="row">
            <div class="col-md-4 col-sm-3 col-xs-2"></div>
            <div class="col-md-4 col-sm-4 col-xs-4"></div>
            <div class="col-md-4 col-sm-5 col-xs-6"></div>
        </div>
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4"></div>
            <div class="col-sm-4"></div>
        </div>
    </div>
    <div class="container text-center">
        <div class="h1 text-center">响应式表格</div>
        <table class="table table-responsive">
            <tr>
                <th>ID</th>
                <th>颜色</th>
                <th>类</th>
                <th>表达</th>
            </tr>
            <tr class="active">
                <td>1</td>
                <td>灰色</td>
                <td>active</td>
                <td></td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>绿色</td>
                <td>success</td>
                <td></td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>黄色</td>
                <td>warning</td>
                <td></td>
            </tr>
            <tr class="danger">
                <td>4</td>
                <td>红色</td>
                <td>danger</td>
                <td></td>
            </tr>
            <tr class="info">
                <td>5</td>
                <td>蓝色</td>
                <td>info</td>
                <td></td>
            </tr>
        </table>
        <!--分页-->
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li><a href="#"><span>&laquo;</span></a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><span>&raquo;</span></a></li>
            </ul>
        </nav>

    </div>
    <div class="container">
        <div class="h1 text-center">响应式图片</div>
        <div class="row">
            <div class="col-md-4"><img src="img/xq.jpg" alt="" class="img-rounded img-responsive"></div>
            <div class="col-md-4"><img src="img/xq.jpg" alt="" class="img-circle img-responsive"></div>
            <div class="col-md-4"><img src="img/xq.jpg" alt="" class="img-thumbnail img-responsive"></div>
        </div>
    </div>
    <div class="container">
        <div class="h1 text-center">导航栏</div>
        <!--主题黑-->
        <nav class="navbar navbar-inverse">
            <!--水平分布-->
            <div class="container-fluid">
                <!--头部logo和菜单-->
                <div class="navbar-header">
                    <!--菜单绑定链接导航栏-->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#link-nav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="img/q.jpg" class="logo"></a>
                </div>

                <!--链接导航栏-->
                <div class="collapse navbar-collapse" id="link-nav">
                    <!--链接导航栏左边-->
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">下载</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">产品 <span class="caret"></span></a>
                            <ul class="dropdown-menu" style="min-width:100%;">
                                <li><a href="#">JDK</a></li>
                                <li><a href="#">MySql</a></li>
                                <li><a href="#">BootStrap</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="disabled"><a href="#">更多敬请期待...</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!--搜索表单-->
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="搜索产品">
                        </div>
                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>搜索</button>
                    </form>
                    <!--链接导航栏右边-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">退出</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的 <span class="caret"></span></a>
                            <!-- dropdown-menu下拉菜单默认宽度较大，可以设置行内样式style="min-width:100%;" -->
                            <ul class="dropdown-menu" style="min-width:100%;">
                                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> 设置</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 仓库</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-heart-empty"></span> 收藏</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="container">
        <div class="h1 text-center">轮播图</div>
        <!--data-ride="carousel" data-interval="2000"两个一起使用可以每隔2秒自动切换-->
        <!--slide使轮播效果滑动切换-->
        <div class="carousel slide" id="link-carousel" data-ride="carousel" data-interval="2000">
            <!--轮播图资源-->
            <div class="carousel-inner">
                <!--这里起码要有一个项是处于active，否则无法显示-->
                <div class="item active">
                    <img src="img/2.webp" alt="">
                    <div class="carousel-caption">图一</div>
                </div>
                <div class="item">
                    <img src="img/1.webp" alt="">
                    <div class="carousel-caption">图二</div>
                </div>
                <div class="item">
                    <img src="img/3.webp" alt="">
                    <div class="carousel-caption">图三</div>
                </div>
                <div class="item">
                    <img src="img/4.webp" alt="">
                    <div class="carousel-caption">图四</div>
                </div>
            </div>
            <a class="left carousel-control" href="#link-carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#link-carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

            <ul class="carousel-indicators">
                <!--data-toggle是无效，data-target才有效-->
                <li data-target="#link-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#link-carousel" data-slide-to="1"></li>
                <li data-target="#link-carousel" data-slide-to="2"></li>
                <li data-target="#link-carousel" data-slide-to="3"></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="h1 text-center">缩略图</div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/2.webp" alt="">
                    <div class="caption">
                        <h3>双十二打响啦</h3>
                        <p>准备好清空荷包了吗</p>
                        <p>
                            <a href="#" class="btn btn-primary">马上购买</a>
                            <a href="#" class="btn btn-primary">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/1.webp" alt="">
                    <div class="caption">
                        <h3>水果天王隆重上场</h3>
                        <p>一天一水果，养颜最属我</p>
                        <p>
                            <a href="#" class="btn btn-primary">马上购买</a>
                            <a href="#" class="btn btn-primary">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/3.webp" alt="">
                    <div class="caption">
                        <h3>冬季女装大畅销啦</h3>
                        <p>这里见证你的美</p>
                        <p>
                            <a href="#" class="btn btn-primary">马上购买</a>
                            <a href="#" class="btn btn-primary">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/4.webp" alt="">
                    <div class="caption">
                        <h3>男人潮流秀秀秀</h3>
                        <p>你，心动了吗</p>
                        <p>
                            <a href="#" class="btn btn-primary">马上购买</a>
                            <a href="#" class="btn btn-primary">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

图片资源：

图一
图二
图三
图四
xq

结构图
结构图
bootstrap3.7下载
bootstrap3.7下载
解压到项目即可

bootstrap用法示例
m0_67820396的博客
07-31 304
bootstrap用法示例
十年磨一剑！Bootstrap：前端开发的终极利器与未来趋势
最新发布
wylee的博客
05-09 1216
从2011年到2025年，Bootstrap始终站在前端开发的最前沿。它不仅是一个框架，更是一种开发哲学——让复杂的事情变得简单。快速原型开发：通过预定义组件和工具类，大幅缩短开发周期。一致性设计：确保项目在不同设备和浏览器上的表现一致。社区驱动：活跃的社区和丰富的资源，让问题解决变得轻松。如果你还没有尝试过Bootstrap，现在正是时候。访问Bootstrap GitHub仓库，下载最新版本，开启你的前端开发之旅吧！
bootstrap4 中文用例demo
11-22
bootstrap4 最后一次预览版的中文demo，尚有一些功能不全，后期有空会放出bootstrap4 正式版的demo
bootstrap使用案例
qq_45216853的博客
05-10 439
bootstrap布局 css .col-xs-2{ width: 20%; text-align: center; padding: 10px 0px; } <!-- container-fluid 100% 宽度 --> <div class="container-fiuid"> <!-- 行（row） --> <div class="row"> <!-- col-xs-2 列 列宽是2个单元
Bootstrap技术简介及其代码样例
alankuo的专栏
11-24 1145
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。它由Twitter开发，现在是最受欢迎的开源前端框架之一。
Bootstrap实现个人blog项目(1+X Web前端开发中级 例题)——初稿
黛琳ghz的博客，期待你的关注。
11-20 656
这是个人blog项目，该项目的目录是myblog，现在我们需要编写该blog首页。项目名称为myblogl，采用Bootstrap4框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含index.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件和bootstrap.min.js文件等；img文件夹包含轮播图用到的图片。
bootstrap-fileinput用例
05-10
bootstrap-fileinput 是一个 Bootstrap ...以下是一个使用 bootstrap-fileinput 的基本用例。 1. 首先，需要引入 bootstrap 和 bootstrap-fileinput 的 CSS 和 JS 文件。 ```html <!-- 引入 Bootstrap 样式和 JS --> ...
Bootstrap V4.6.2 全套源码（含文档、SASS 文件和用例）
09-21
Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式、移动优先的网页项目。V4.6.2是其一个稳定版本，包含了丰富的组件、工具和文档，旨在简化Web开发流程，提高效率。以下是关于Bootstrap V4.6.2的一些...
Bootstrap V5.1 完整版（含代码用例成品）分享
09-22
Bootstrap 5.1 版本的兼容性已经完全转向 “新” 浏览器了，使用的时候需要注意下。 使用 yarn 在 nodeJS 项目中添加 bootstrap 库也非常简单，命令如下： $ yarn add bootstrap 而且官方文档也着重强调了，...
Bootstrap V5.0 稳定版（含文档源码用例）分享
09-22
新一代的 BS 5 ，除了图标丰富了、样式丰富了（包括各种方向的组件摆放和对齐功能），体积也大大大大大得多了 :) 新特性包括在 SCSS 源码中使用 $utilities 属性来生成打印等功能对应的 css 样式，进一步解放了繁复...
bootstrap框架实例
chengqianduan的博客
05-01 1425
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> link rel="stylesheet" href="../BootStrap/day1/bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css"/> meta name="viewpor
2021 年使用人数最多的5款主流前端框架点评
BYGFJ的博客
07-26 1785
1、Bootstrap： Bootstrap 无疑是目前使用最广泛的 CSS 框架，GitHub 上长期稳占第一就足以说明问题。优点有很多，比如响应式设计，海量资源且简单易学。不过也有人吐槽 Bootstrap 稍显臃肿，但是Bootstrap5 彻底抛弃Jquery之后瘦身了不小，做前端的几乎是必学。 中文网站：https://www.bootstrap.cn 2、Bulmacss Bulmacss样式库,是一个更轻量化、更易用的CSS框架，官方定位是，哪怕你不懂CSS也可以根据api快速构建we
当年很流行，现在已经淘汰的前端技术，请不要再继续学了！
小生方勤
11-07 746
近几年，前端技术真可谓是飞速发展，不断有新的技术涌现，爆火的前端框架 Astro，前端运行时 Bun，构建工具 Vite 等都给前端提供了强大动力。当然，也有很多前端技术随着技术的发展不再需要使用，有了更好的替代方案。本文就来盘点一下那些不再流行的前端技术，以及对应的现代化替代方案。本文提到的技术不代表不能再使用了，其仍存在一些适用场景，并且很多遗留老项目可能是使用这些技术实现的，需要进行维护。只...
bootstrap 背景_Bootstrap框架结构详解
weixin_39929813的博客
11-20 587
　Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外，Bootstrap框架十分超前，在支持html5和css3的浏览器上表现特别好，而且对移动终端的浏览器支持也是相当优秀。　　一个完整的Bootstrap框架包含如下四个部分...
bootstrap框架过时了吗_bootstrap前端框架是不是要被淘汰了
weixin_28694169的博客
12-24 6950
bootstrap前端框架是不是要被淘汰了发布时间：2020-11-11 11:43:55来源：亿速云阅读：99作者：小新这篇文章主要介绍了bootstrap前端框架是不是要被淘汰了，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。bootstrap被淘汰了么?bootstrap并没有被淘汰，目前Bootstrap团队已经发布了4.3.1的...
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
Bootstrap响应式测试用例
歪脖先生的博客
05-11 506
测试用例 调整你的浏览器窗口大小，或者用其他设备打开页面，都可以测试这些响应式工具类。 带有绿色标记的元素，表示其在当前浏览器视口（viewport）中是可见的。 带有绿色标记的元素，表示其在当前浏览器视口（viewport）中是隐藏的。 关于作者 歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python...
热衷bootstrap的人开始醒醒吧！bootstrap与jquery mobile一些体会
chaishen10000的专栏
05-31 8037
最近一直在研究bootstrap这东西，确实是个好的框架，但是诸多优势背后也隐藏着一些不好的地方，对此，我把它和另一套响应式框架jquery mobile做了一下对比，我的总结如下：     1、bootstrap的class类定义杂乱，没有统一的格式，在比较复杂的页面中，容易产生覆盖和冲突，而jquery mobile采用统一的class类前缀，容易分辨。     2、专业性：bootstr
bootstrap系列使用心得
一个编程小白的个人技术博客
12-17 492
介绍一些题主使用bootstrap插件过程中遇到的一些坑及使用心得小技巧等; 介绍一些使用bootstrap-table及相关插件遇到的一些问题及经验分享
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值