今天继续学习使用bootstrap制作我们的主页面，上手以后发现bootstrap模板真的非常好用，效率很高，比较方便快捷。
今天是主要把侧边栏做出来了，同时主要学习的是网格系统，然后用它做出了如图的主页。
效果展示：
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <title>图像表格化构建</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="css/tran1.css"> </head> <body> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <nav1 class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top opacity-75"> <div class="container-fluid"> <a class="navbar-brand" href="javascript:void(0)">TZY图像表格化构建</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mynavbar"> <ul class="navbar-nav me-auto"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">关于我们</a> </li> <li class="nav-item"> <a class="nav-link" href="http://localhost:8080/TranSystem_war_exploded/trans1.html">图片转excel表格</a> </li> <li class="nav-item"> <a class="nav-link" href="http://localhost:8080/TranSystem_war_exploded/trans2.html">图片转Html</a> </li> <li class="nav-item"> <a class="nav-link" href="http://localhost:8080/TranSystem_war_exploded/trans3.html">图片转PDF</a> </li> <li class="nav-item"> <button class="btn btn-success" type="button" href="http://localhost:8080/TranSystem_war_exploded/trans_account.html">登录/注册</button> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="text" placeholder="输入搜索内容"> <button class="btn btn-success" type="button">搜</button> </form> </div> </div> </nav1> <div class="col-sm-3 p-3 "> <div class="card" style="width:1px ;height: 50px;"> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <div class="flex" style="margin-left: 35px"> <nav> <a class="logo" href="#"> <h2 class="text-muted">表格化构建</h2> </a> <a href="http://localhost:8080/TranSystem_war_exploded/trans1.html"> <i class="fa fa-home fa-lg"></i> <span>主页</span> </a> <a href="http://localhost:8080/TranSystem_war_exploded/trans_history.html"> <i class="fa fa-user fa-lg"></i> <span>历史记录</span> </a> <a href="http://localhost:8080/TranSystem_war_exploded/trans_data.html"> <i class="fa fa-envelope-o fa-lg"></i> <span>数据分析</span> </a> <a href="http://localhost:8080/TranSystem_war_exploded/trans_account.html"> <i class="fa fa-cog fa-lg"></i> <span>账户设置</span> </a> <a style="height: 700px"> </a> </nav> </div> </div> <div class="col-md-6"> <h4 class="text-muted">上传图片进行表格化构建 EXCEL</h4> <div class="row"> <div class="col-md" style="width: 750px;height: 200px; margin-right: 30px;margin-left: 0px"> <div class="jumbotron"> <p> <button class="btn btn-lg btn-success" onClick="javascript:document.getElementById('fileupload').click();"> <i class="icons ico-upload"></i> 选择图片<input accept="image/*" id="fileupload" multiple name="file" style="display:none;" type="file"></button> </p> <a class="login_inquery" data-target="#modal_login" data-toggle="modal" href="">点击登录</a> </div> <div id="files"></div> </div> </div> <h4 class="text-muted">下载表格化的文件</h4> <div class="row"> <div class="col-md" style="width: 750px;height: 200px; margin-right: 30px;margin-left: 0px"> <div class="jumbotron"> <p> <button class="btn btn-lg btn-secondary" onClick="javascript:document.getElementById('fileupload').click();"> <i class="icons ico-upload"></i> 下载文件<input accept="image/*" multiple name="file" style="display:none;" type="file"></button> </p> </div> </div> </div> </div> <div class="col-md-3"> <div class="row"> <div class="col-md-6" style="background:#F5F5F5"> <div class="card" style="width:350px;height: 250px;"> <div class="card-body"> <h4>面临的问题：</h4> <h6 class="card-title">电厂的数据种类繁多，日常工作中还需要审核多种多样的质检报告，而目前针对与这些报告大多采用人工手抄的方式进行统计，这常会导致一些不必要的问题。</h6> <h6 class="card-title">例如，采用人工手抄方式常因为抄错而带来繁琐的二次审核，进而增加工作量。其次随着信息化技术的发展，此种方法也不利于对数据的利用及分析。</h6> </div> </div> </div> </div> <hr> <div class="row"> <div class="col-md-6" style="background:#F5F5F5"> <div class="card" style="width:350px;height: 250px;"> <div class="card-body"> <h4>我们的方案：</h4> <h6 class="card-title">针对上述问题我们开发了一种表格提取识别重建算法。</h6> <h6 class="card-title">该算法可以根据电厂上传的煤质检验检测报告，利用机器视觉技术，准确提取报告中元素数据信息 。</h6> <h6 class="card-title">最后，按照表格的结构输出成excel表格文件，当然，您也可以根据需求，转成html或者是PDF格式的文件 。</h6> </div> </div> </div> </div> </div> </div> </div> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;margin-top: 100px">©版权所有：石家庄铁道大学信息科学与技术学院</div> </div> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js"></script> </body> </html>
标签：组合式,文件,表格,Bootstrap,侧边,构建,导航,图片 From： https://www.cnblogs.com/rsy-bxf150/p/17331121.html