Bootstrap03

最新推荐文章于 2025-12-15 15:23:28 发布
原创 最新推荐文章于 2025-12-15 15:23:28 发布 · 81 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #javascript #html

此博客介绍了一个响应式网页设计，包含分页导航和功能强大的搜索框。首页采用Bootstrap框架，展示了书籍分类和热门书籍推荐，配合轮播图和加入购物车功能。同时，文章详细介绍了如何使用CSS和JavaScript实现灵活的分页效果。

一、分页
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>搜索书籍</title>
        <!-- 支持手机端 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!-- 引入bootstrap的CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <!-- 分别引入jQuery的js和Bootstrap的js -->
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .navbar-collapse {
                flex-grow: 0;
                /* 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
            }
 
            .ss {
                height: 100px;
                /* 高度 */
                background-color: #DCDCDC;
                /* 背景颜色 */
                margin-top: 20px;
                /* 上间距 */
            }
 
            .form-group {
                width: 300px;
                /* 宽度 */
                margin-left: auto;
                /* 左间距 自适应 */
                margin-right: auto;
                /* 右间距 自适应 */
                margin-top: 31px;
                /* (100-38)/2 */
            }
 
            .list-group,.media{
                margin-top: 30px;
                /* 上间距 */
            }
            .media-body p{
                line-height: 15px;/* 行高 */
                letter-spacing: 3px;
            }
            .media-body p button{
                height: 30px;
                line-height: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 导航条组件 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- 固定容器 -->
            <div class="container">
                <a class="navbar-brand" href="#">您好，欢迎来到网上书店</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
                 aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
                        <a class="nav-link" href="#">登录</a>
                        <a class="nav-link" href="#">注册</a>
                        <a class="nav-link" href="#">我的购物车</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- 栅格系统实现首页框架 -->
        <div class="container">
            <!-- 第一行:搜索区域 -->
            <div class="row ss">
                <div class="col">
                    <form>
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="书籍关键字" aria-label="Recipient's username" aria-describedby="button-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button" id="button-addon2">查询</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 第二行 -->
            <div class="row">
                <div class="col-3">
                    <!-- 左3-书籍分类 -->
                    <div class="list-group">
                        <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
                            书籍分类
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">科幻</a>
                        <a href="#" class="list-group-item list-group-item-action">言情</a>
                        <a href="#" class="list-group-item list-group-item-action">金融</a>
                        <a href="#" class="list-group-item list-group-item-action">医疗</a>
                        <a href="#" class="list-group-item list-group-item-action">都市</a>
                        <a href="#" class="list-group-item list-group-item-action">修仙</a>
                        <a href="#" class="list-group-item list-group-item-action">技术</a>
                        <a href="#" class="list-group-item list-group-item-action">心理</a>
                        <a href="#" class="list-group-item list-group-item-action">悬疑</a>
                        <a href="#" class="list-group-item list-group-item-action">动漫</a>
                    </div>
                </div>
 
                <div class="col-9">
                    <!-- 右9-轮播图&新书上架&热门书籍 -->
                    <div class="media">
                        <img src="img/1.png" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0"><b>三国演义</b></h5>
                            <p>书籍价格：30元</p>
                            <p>书籍作者：李白</p>
                            <p>书籍出版社：China出版社</p>
                            <p>书籍简介：三个国家的兴盛与衰败</p>
                            <p>
                                <button type="button" class="btn btn-danger">加入购物车</button>
                                <button type="button" class="btn btn-danger">立即购买</button>
                            </p>
                        </div>
                    </div>
                    <hr >
                    
                    <div class="media">
                        <img src="img/2.png" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0"><b>中华上下五千年</b></h5>
                            <p>书籍价格：45元</p>
                            <p>书籍作者：司马迁</p>
                            <p>书籍出版社：华夏出版社</p>
                            <p>书籍简介：领悟历史的魅力</p>
                            <p>
                                <button type="button" class="btn btn-danger">加入购物车</button>
                                <button type="button" class="btn btn-danger">立即购买</button>
                            </p>
                        </div>
                    </div>
                    <hr >
                    
                    <div class="media">
                        <img src="img/3.png" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0"><b>民国风云</b></h5>
                            <p>书籍价格：42元</p>
                            <p>书籍作者：上官婉儿</p>
                            <p>书籍出版社：轩辕出版社</p>
                            <p>书籍简介：岁月变化莫测</p>
                            <p>
                                <button type="button" class="btn btn-danger">加入购物车</button>
                                <button type="button" class="btn btn-danger">立即购买</button>
                            </p>
                        </div>
                    </div>
                    <hr >
                    <!-- 分页 -->
                    <nav aria-label="Page navigation example" style="padding-left: 35%;">
                      <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                          </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                </div>
 
            </div>
 
        </div>
    
    </body>
</html>

bootstrap03
weixin_53233582的博客
06-04 152
位移 下拉菜单 折叠 导航 导航栏
Bootstrap 03
z466764的博客
04-03 464
目录： 案例1：实现搜索书籍页面 代码如下： 效果图： 案例2：实现购物车页面布局 代码如下： 效果图： 案例3：实现购物车页面订单信息 代码如下： 效果图： 案例4：图标组件的使用 代码如下： 效果图： ...
学习bootStrap03
qq_58635769的博客
04-19 129
1.引入环境 <script src="../lib/jquery-3.2.1.js"></script> <link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 2.相关解析： list-
JavaWeb BootStrap 03.主页优化
weixin_62270300的博客
05-05 623
一、首页tab页使用 商品展示旁边显示的分类 是采用bootstrap5里的列表组(list group)样式 商品展示的旁边新增了一个标签分页（Navs and tabs）样式 二、首页登录购物车 顶部导航栏展开的效果图如下： 点击购物车出现如下界面： 采用bootstrap5里的画布外(Offcanvas)样式 在上一篇文章的基础上对导航栏添加了购物车的标签 <li class="nav-item"> &l...
Bootstrap03之主页优化
m0_64043477的博客
05-06 572
Bootstrap03.主页优化
Bootstrap03(组件案例)
weixin_66202611的博客
05-02 351
《案例1：实现搜索书籍页面 组件：媒体对象-Media object》 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1.实现搜索书籍页面：HTML</title> <!-- 引入bootstrap的css --> <link rel="stylesheet" type="text/css" href="css/boo.
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 184
Boolean。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 952
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
zhangyao940330的博客
12-15 160
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 966
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1245
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 649
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
TypeScript
qq_65084229的博客
12-12 233
let y :[number,string] = ['1',2] //不能将类型“string”分配给类型“number”let name:string = `我的名字${name}`enum sex {boy='男', gril='女'}// 返回never的函数必须存在无法达到的终点。// 返回never的函数必须存在无法达到的终点。let name:string ="张三"（只能赋值undefined或null）// 推断的返回值类型为never。
如何在项目里面添加一个可以左右翻动并显示指定日期的日历
MayByUP的博客
12-11 274
在我的健康系统中我有一个经期记录模块，我想写一个日历组件，可以左右翻动，也可以用不同的颜色来显示经期，排卵期，下一次经期以及当天日期，我用到的技术栈是Vue，Node.js,mongoBD数据库，下面我将讲讲我的思路。这个组件比较高级，思路也比较复杂。
基于Java+SpringBoot+Vue的美甲店管理系统【附源码+文档+部署视频+讲解)
小熊的博客
12-11 1387
基于SpringBoot的美甲店管理系统开发案例，涵盖用户、美甲师和管理员三大角色功能模块，采用Vue+SpringBoot+MySQL技术栈实现。系统包含服务预约、订单管理、耗材采购等全流程数字化功能，采用MVC设计模式和B/S架构。包含用户、美甲师、管理员三类角色的功能模块，该系统聚焦美甲店的日常运营场景，通过用户端浏览服务与套餐、美甲师端处理预约与评价、管理员端统筹人员、业务与资源的模式，实现美甲店从服务展示、预约调度到耗材管理的全流程数字化，提升门店运营效率与服务体验。
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 132
【代码】商城后台管理系统 03 规格参数配置。
多应用统一身份认证方案-接口设计篇
最新发布
专注于计算机研发知识和资讯分享
12-15 28
本文介绍了登录认证接口的改造方案，主要包括：1）统一登录流程设计，通过授权码实现多应用认证；2）新增设备登录限制功能，包括用户表添加设备限制字段和创建登录设备记录表；3）引入浏览器指纹技术加强安全验证。方案实现了集中认证与分散管理的结合，支持多应用独立鉴权，并通过设备指纹和登录次数统计增强账户安全性，同时保持各应用接口的自主性。系统架构上采用授权码与应用token并存机制，确保认证流程的灵活性与安全性。
Bootstrap折叠插件详解及实例
0x03 其他特性 - 切换动画：Bootstrap的折叠插件支持平滑的过渡动画，使得内容的隐藏和显示更加自然。 - 事件监听：可以通过JavaScript监听折叠事件，如`show.bs.collapse`和`hidden.bs.collapse`，以执行自定义操作...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值