Bootstrap03

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量83 收藏
点赞数
文章标签： javascript html webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66116818/article/details/124620571
版权

案例1：实现搜索书籍页面
组件：媒体对象-Media object
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 支持手机端 -->
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <!-- css -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <!-- js -->
        <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .navbar-collapse {
                flex-grow: 0;
            }
 
            .form-group {
                width: 280px;
                margin: 0 auto;
            }
</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-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">注册</a>
                        <a class="nav-item nav-link" href="#">登录</a>
                        <a class="nav-item nav-link disabled" href="#">我的购物车</a>
                    </div>
                </div>
            </div>
        </nav>
    
    
        <!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 -->
        <div class="container">
            <!-- 第一行  row  start-->
            <div class="row" style="margin-top: 10px;">
                <div class="col">
                    <div class="jumbotron">
                        <!-- 表单组件 -->
                        <form action="" method="post">
                            <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><!-- 第一行row  end -->
        
            <!-- 第二行  左3右9 -->
            <div class="row">
                <div class="col-md-3 col-12">
                    <!-- 列表组的核心样式  list-group -->
                    <div class="accordion" id="accordionExample">
                      <div class="card">
                        <div class="card-header" id="headingOne">
                          <h5 style="cursor: pointer;" class="mb-0 "data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                             书籍分类
                          </h5>
                        </div>
                    
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="list-group">
                                <button type="button" class="list-group-item list-group-item-action ">
                                    爱情
                                </button>
                                <button type="button" class="list-group-item list-group-item-action">恐怖</button>
                                <button type="button" class="list-group-item list-group-item-action active">悬疑</button>
                                <button type="button" class="list-group-item list-group-item-action">修鬼</button>
                                <button type="button" class="list-group-item list-group-item-action">修鬼</button>
                                <button type="button" class="list-group-item list-group-item-action">修鬼</button>
                                <button type="button" class="list-group-item list-group-item-action">修鬼</button>
                                <button type="button" class="list-group-item list-group-item-action">修鬼</button>
                                <button type="button" class="list-group-item list-group-item-action" disabled>穿越</button>
                            </div>
                        </div>
                      </div>
                      
                    </div>
                    <!-- ---------------------------- -->
                </div>
                <div class="col-md-9 col-12" >
                    <!-- 书籍搜索页 -->
                    <ul class="list-unstyled">
                      <li class="media">
                        <img class="mr-3 align-self-center" src="img/bookList/1.png" alt="Generic placeholder image">
                        <div class="media-body">
                          <h5 class="mt-0 mb-1">宋威昨夜碰哒鬼</h5>
                          <p>作者：张萍</p>
                          <p>价格：9909</p>
                        <p>出版社：清华出版社</p>
                        <p>书籍简介:好看真的好看</p>
                        <button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
                        <button style = "width:150px" type="button" class="btn btn-danger">去结算</button>
                        </div>
                      </li>
                      <hr>
                        <li class="media">
                          <img class="mr-3 align-self-center" src="img/bookList/1.png" alt="Generic placeholder image">
                          <div class="media-body">
                            <h5 class="mt-0 mb-1">阿Q正传</h5>
                                                  <p>作者：鲁迅</p>
                                                  <p>价格：40</p>
                                                <p>出版社：人民出版社</p>
                                                <p>书籍简介:富含丰富哲理</p>
                                                <button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
                                                <button style = "width:150px" type="button" class="btn btn-danger">去结算</button>
                          </div>
                        </li>
                        <hr>
                    </ul>
                    
                    <!--  -->
                    <nav aria-label="Page navigation example">
                      <ul class="pagination" style="padding-left: 40%;">
                        <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>
        
        
        
        
        
            <!-- 第三行  版权信息 start -->
            <div class="row" style="margin: 20px 0px;border-top: 1px solid gainsboro;">
                <div class="col">
                    <div class="text-center">&copy;所有版权信息归卓京教育所有</div>
                </div>
            </div>
            <!-- 第三行  版权信息  end-->
            
        </div>
 
 
 
    </body>
</html>

猪大爷爱你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap03（组件）
m12120426的博客
05-01 86
导航条： <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" da.
BootStrap入门案例.zip
10-11
3. **03_BootStrap_CSS样式.html** 和 **04_BootStrap_CSS样式2.html** - 这两个文件涵盖了Bootstrap的基础CSS样式和组件，如按钮、表单、字体、颜色等。Bootstrap预定义了许多样式，使得开发者无需从零开始编写CSS...
bootstrap03
weixin_53233582的博客
06-04 78
位移 下拉菜单 折叠 导航 导航栏
Bootstrap 03
z466764的博客
04-03 391
目录： 案例1：实现搜索书籍页面 代码如下： 效果图： 案例2：实现购物车页面布局 代码如下： 效果图： 案例3：实现购物车页面订单信息 代码如下： 效果图： 案例4：图标组件的使用 代码如下： 效果图： ...
学习bootStrap03
qq_58635769的博客
04-19 85
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-
Bootstrap03（图标）
weixin_67465673的博客
05-08 948
搜索书籍页面，购物车布局，订单信息，图标组件的使用
Bootstrap03——主页优化
weixin_65975275的博客
05-07 266
Bootstrap——主题优化
前端 Bootstrap 代码
03-31
- **day03.zip**：第三天的教程可能涉及响应式设计的深入理解，包括媒体查询的使用，以及如何调整不同设备上的布局。 - **day0506.zip**：这个合并的压缩包可能包含第五天和第六天的内容，涵盖了更高级的主题，比如...
03_Bootstrap 3 高级教程part1.rar
09-13
在"03_Bootstrap 3 高级教程part1.rar"这个压缩包中，我们有多个视频教程，涵盖了Bootstrap 3的核心组件和高级用法。下面将详细解释这些视频涉及的知识点。 1. **Bootstrap配置** (01 Bootstrap配置.mp4) 这个视频...
Bootstrap 用户界面架构视频03
01-21
这个视频系列，特别是“Bootstrap用户界面架构视频03”，可能是为了深入讲解如何利用Bootstrap构建美观且易于使用的界面。 在Bootstrap中，关键组件包括网格系统、导航、表单、按钮、模态、警告框等。视频可能会...
03_Bootstrap 3 高级教程part2.rar
09-13
Bootstrap 3 是一款广泛使用的前端开发框架，它简化了网页设计和移动设备适配的过程。在"Bootstrap 3 高级教程part2"中，我们将深入探讨一系列关键组件和功能，帮助开发者更有效地构建响应式和用户友好的网站。 1. ...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1286
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1072
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 154
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 101
【代码】vue el-select的下拉树形结构。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 636
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 918
el-menu根据多层树形结构递归遍历展示菜单栏
bootstrap表格时间排序
05-19
可以使用JavaScript对表格进行排序，具体步骤如下： 1. 给表格的时间列添加一个自定义的属性，例如data-time，表示该单元格中的时间值。 ```html <table id="myTable"> <thead> <tr> <th>#</th> <th>Name</th> <th data-time>Time</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td data-time="2021-10-01T12:30:00">Oct 1, 2021 12:30 PM</td> </tr> <tr> <td>2</td> <td>Jane</td> <td data-time="2021-10-02T09:45:00">Oct 2, 2021 9:45 AM</td> </tr> <tr> <td>3</td> <td>Bob</td> <td data-time="2021-10-03T15:20:00">Oct 3, 2021 3:20 PM</td> </tr> </tbody> </table> ``` 2. 使用JavaScript获取表格元素及其内容，并将其存储为数组。 ```javascript var table = document.getElementById('myTable'); var rows = table.getElementsByTagName('tr'); var data = []; for (var i = 1; i < rows.length; i++) { var row = rows[i]; var cells = row.getElementsByTagName('td'); var time = cells[2].getAttribute('data-time'); data.push({row: row, time: time}); } ``` 3. 使用JavaScript的sort()方法对数组进行排序。 ```javascript data.sort(function(a, b) { return new Date(a.time) - new Date(b.time); }); ``` 4. 使用JavaScript将排好序的数据重新插入表格中。 ```javascript for (var i = 0; i < data.length; i++) { table.appendChild(data[i].row); } ``` 完整代码如下： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap Table Sort Time</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> function sortTable() { var table = document.getElementById('myTable'); var rows = table.getElementsByTagName('tr'); var data = []; for (var i = 1; i < rows.length; i++) { var row = rows[i]; var cells = row.getElementsByTagName('td'); var time = cells[2].getAttribute('data-time'); data.push({row: row, time: time}); } data.sort(function(a, b) { return new Date(a.time) - new Date(b.time); }); for (var i = 0; i < data.length; i++) { table.appendChild(data[i].row); } } </script> </head> <body> <div class="container"> <h2>Bootstrap Table Sort Time</h2> <p>Click the button to sort the table by time:</p> <button onclick="sortTable()">Sort</button> <table id="myTable" class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th data-time>Time</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td data-time="2021-10-01T12:30:00">Oct 1, 2021 12:30 PM</td> </tr> <tr> <td>2</td> <td>Jane</td> <td data-time="2021-10-02T09:45:00">Oct 2, 2021 9:45 AM</td> </tr> <tr> <td>3</td> <td>Bob</td> <td data-time="2021-10-03T15:20:00">Oct 3, 2021 3:20 PM</td> </tr> </tbody> </table> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值