1. IT分享知识网首页
  2. 未分类

基于Bootstrap开发的前端12307票务网站

老牧童 • • 未分类

基于Bootstrap开发的前端12307票务网站Bootstrap 是全球最受欢迎的前端开源工具库 它支持 Sass 变量和 mixin 响应式栅格系统 自带大量组件和众多强大的 JavaScript 插件

大家好，欢迎来到IT知识分享网。

一、12307在线票务网站设计的问题描述

内容及功能要求

该在线票务网站要实现至少包括以下页面：主页、酒店信息页、机票信息页、火车票信息页等。

具体包括：

主页要有导航菜单栏、搜索栏、酒店、机票、火车票等信息。

酒店信息页要有对酒店信息的介绍。

机票信息页要有机票信息介绍。

火车票信息页要有火车票信息的介绍。

二、Bootstrap的相关使用

入门模板

基于Bootstrap开发的前端12307票务网站

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

三、12307在线票务网站设计与实现

1.网站规划

整体是通过Bootsrap框架搭载实现的，每个页面均待有导航栏，主页可以通过div内的form表单来实现快速跳转需要购买的火车票或者机票，结合轮播图，并且图文结合来展示优惠折扣的旅行计划，使用超链接链接到新页去，并且通过框架里面表格结合超链接来展示官方的公告，底部通过框架来实现备案和版权的布局。

基于Bootstrap开发的前端12307票务网站

部分代码展示：

 <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
        <a class="navbar-brand" href="index.html">12307在线购票</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button></span>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto"><span class="border border-info">
            <li class="nav-item active">
              <a class="nav-link" href="train.html">火车票 <span class="sr-only">(current)</span></a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="aeroplane.html">机票</a>
            </li></span><span class="border border-info">
            <li class="nav-item">
              <a class="nav-link" href="groggery.html">酒店服务</a>
            </li></span><span class="border border-info">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                账号设置
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="login.html">登录</a>
                <a class="dropdown-item" href="zuce.html">注册</a>
            </li></span>
            
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </div>
      </nav>

      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="image/lunbo-1.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-2.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
          <div class="carousel-item">
            <img src="image/lunbo-3.png" class="d-block w-100" alt="..." width="100%" height="500px">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>

2.购买火车票网页的设计与实现

带有主页的导航栏，其次用form表单来进行数据的获取，再通过检索后台数据(暂未实现)在通过下面的表格中的span标签展示出火车票数据，用户来选择购买。

基于Bootstrap开发的前端12307票务网站

部分代码展示：

<table class="table">   <thead class="thead-dark">     <tr>       <th scope="col">顺序</th>       <th scope="col">车次</th>       <th scope="col">出发时间-到站时间</th>       <th scope="col">出发站-终点站</th>       <th scope="col">是否有座位</th>       <th scope="col">备注</th>       <th scope="col">购票</th>     </tr>   </thead>   <tbody>     <tr>       <th scope="row">1</th>       <td>K1406</td>       <td>2023/6/30 8:20-2023/6/32 9:20</td>       <td>长春西站-成都东站</td>       <td>硬座*6</td>       <td></td>       <td><button style="background-color: aquamarine;">购买</button></td>     </tr   </tbody> </table> </div><br><br> <div class="alert alert-warning alert-dismissible fade show" role="alert">   <strong>Holy guacamole!</strong> You should check in on some of those fields below.   <button type="button" class="close" data-dismiss="alert" aria-label="Close">     <span aria-hidden="true">&times;</span>   </button> </div>

3.购买飞机票网页的设计与实现

带有主页的导航栏，其次用from表单来进行数据的获取，再通过检索后台数据在通过下面的表格中的span标签展示出飞机票数据，用户来选择购买，同时再做了一个表格来图文结合展示优惠的旅行机票。

基于Bootstrap开发的前端12307票务网站

部分代码展示：

<nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>


    <br><br> 
    <center>
  <div style="height: 100px;width: 90%;border:solid #aeaeae;background-color: #b5edff;">
  <div style="height: 100px;width: 100px; position:absolute;left: 110px;"><br>
  <input type="radio" name="piao">单程<br><input type="radio" name="piao">往返
  </div>
  <div style="height: 100px;width: 1100px; position:absolute;left: 210px;top: 120px; font-size: 16px;color: #737373;">
  <br>出发地&nbsp;&nbsp;<input type="text" style="border: none;" value="长春">&nbsp;&nbsp;&nbsp;&nbsp;
  目的地&nbsp;&nbsp;<input type="text" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
  出发日期&nbsp;<input type="date" style="border: none;">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" name="x1">学生<input type="radio" name="x1">成人&nbsp;&nbsp;&nbsp;&nbsp;
    起飞时间<input type="time">&nbsp;&nbsp;
    <input type="button" onclick="f()" value="查询票务" style="width: 80px; height: 30px; background-color: rgb(29, 195, 255);border: none;border-radius: 5px;">
  </div>
  </div>
  </center>
  <br>
  
  
  
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">顺序</th>
        <th scope="col">航班</th>
        <th scope="col">出发时间-到站时间</th>
        <th scope="col">出发站-终点站</th>
        <th scope="col">是否有座位</th>
        <th scope="col">备注</th>
        <th scope="col">购票</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>川551406</td>
        <td>2023/6/30 8:20-2023/6/32 9:20</td>
        <td>长春龙嘉国际机场-成都双流国际机场</td>
        <td>商务舱*6</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>川504502</td>
        <td>2023/6/30 8:20-2023/6/32 9:14</td>
        <td>广州白云机场-成都双流国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>川969117</td>
        <td>2023/6/30 7:40-2023/6/32 9:14</td>
        <td>达州河市机场-长春龙嘉国际机场</td>
        <td>候补</td>
        <td></td>
        <td><button style="background-color: rgb(127, 246, 255);">候补</button></td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>南航85436</td>
        <td>2023/6/29 8:20-2023/6/31 6:14</td>
        <td>成都龙泉机场-上海国际机场</td>
        <td>经济舱*3</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>南航854402</td>
        <td>2023/7/1 16:10-2023/7/1 19:48</td>
        <td>长春龙嘉国际机场-杭州国际机场</td>
        <td>无票</td>
        <td></td>
        <td><button>购买</button></td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>川852502</td>
        <td>2023/6/30 8:40-2023/6/32 9:52</td>
        <td>深圳国际机场-成都双流机场</td>
        <td>经济舱*14</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>京895342</td>
        <td>2023/6/29 8:01-2023/6/30 19:6</td>
        <td>北京国际机场-成都双流国际机场</td>
        <td>经济舱*16</td>
        <td></td>
        <td><button style="background-color: aquamarine;">购买</button></td>
      </tr>
    </tbody>
  </table>
  </div>

<br><br>
<center>
<table >
<tr >
  <td class="table-active"width="500px"height="60px" colspan="2" align="center"><p style="color: #5c5c5c;">周末省心游</p></td>
</tr>
<tr>
  <td class="table-primary"width="500px"height="40px">航班</td>
  <td class="table-primary"width="500px"height="40px">费用</td>
</tr>
<tr>
  <td class="table-secondary"width="500px"height="40px"><img src="image/air-1.jpg" width="150px">长春->南宁</td>
  <td class="table-secondary"width="500px"height="40px">¥540起</td>
</tr>
  <tr>
  <td class="table-success"width="500px"height="40px"><img src="image/air-2.jpg" width="150px">长春->深圳</td>
  <td class="table-success"width="500px"height="40px">¥580起</td>
</tr>
<tr>
  <td class="table-danger"width="500px"height="40px"><img src="image/air-3.jpg" width="150px">长春->上海</td>
  <td class="table-danger"width="500px"height="40px">¥640起</td>
</tr>
<tr>
  <td class="table-warning"width="500px"height="40px"><img src="image/air-4.jpg" width="150px">长春->杭州</td>
  <td class="table-warning"width="500px"height="40px">¥440起</td>
</tr>
<tr>
  <td class="table-info"width="500px"height="40px"><img src="image/air-5.jpg" width="150px">长春->呼和浩特</td>
  <td class="table-info"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-light"width="500px"height="40px"><img src="image/air-6.jpg" width="150px">长春->成都</td>
  <td class="table-light"width="500px"height="40px">¥520起</td>
</tr>
<tr>
  <td class="table-dark"width="500px"height="40px"><img src="image/air-7.jpg" width="150px">长春->北京</td>
  <td class="table-dark"width="500px"height="40px">¥550起</td>
</tr>
</table>
</center>


  <br><br>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

4.酒店信息以及酒店预订页面的设计与实现

带有主页的导航栏，同时结合伪类选择器来实现酒店展示页面的图片放缩。还写了一个表单来获取用户对于预订酒店的信息提交，数据直接传输给选择的酒店。再结合轮播图进行酒店的展示。

基于Bootstrap开发的前端12307票务网站

部分代码展示：

<div>
  <form action="jd-cg.html">
    <table class="table table-hover">
      <thead>
        <tr>
          <th colspan="2">入住申请表单</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">酒店名称(全称)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">申请酒店位置(精确至区县)*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者姓名*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证类型*</th>
          <td><select>
            <option value="0">中国大陆居民身份证</option>
            <option value="1">中华人民共和国护照</option>
            <option value="2">香港特别行政区护照</option>
            <option value="3">澳门特别行政区护照</option>
          </select></td>
        </tr>
        <tr>
          <th scope="row">入住者身份证号码*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">联系方式*</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <th scope="row">入住时间*</th>
          <td><input type="date">&nbsp;&nbsp;&nbsp;<input type="time"></td>
        </tr>
        <tr>
          <th scope="row">入住时长*(居住市场大于8天请与客服联系)</th>
          <td>
            <select>
              <option value="0">1</option>
              <option value="1">2</option>
              <option value="2">3</option>
              <option value="3">4</option>
              <option value="0">5</option>
              <option value="1">6</option>
              <option value="2">7</option>
              <option value="3">8</option>
            </select>天
          </td>
        </tr>
        <tr>
          <th scope="row">邮箱(非必填项)</th>
          <td><input type="text"></td>
        </tr>
        <tr>
          <center>
          <td colspan="2"><input type="submit" value="提交" style="border: solid rgb(94, 94, 94); border-radius: 3px;width: 100px;height: 40px;"></td>
        </center>
        </tr>
      </tbody>
    </table>
  </form>
</div>


<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image/jdl-1.jpg" class="d-block w-100" alt="..." width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都人民公园朵唯酒店</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-2.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>长春伴这有山附属酒店</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="image/jdl-3.jpg" class="d-block w-100" alt="..."  width="100%" height="500px">
      <div class="carousel-caption d-none d-md-block">
        <h5>成都大学附属酒店</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>

5.登录以及注册页面的设计与实现

带有主页的导航栏，通过css来实现样式的调整，结合JavaScript内的技术来对注册信息进行校验。

基于Bootstrap开发的前端12307票务网站

部分代码展示：

<script>
      function validateForm() {
  // 获取表单元素的值
  var username = document.getElementById(username).value;
  var password = document.getElementById(username).value;

  // 校验用户名：长度为 3 至 20 个字符
  if (username.length < 3 || username.length > 20) {
    alert("用户名必须在3到20个字符之间");
    return false;
  }

  // 校验密码：长度至少为 8 个字符
  if (password.length < 8) {
    alert("密码长度必须至少为8个字符");
    return false;
  }


  // 所有校验均通过，可以提交表单
  return true;
}
    </script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light"><span class="border border-info">
      <a class="navbar-brand" href="index.html">12307在线购票</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button></span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"><span class="border border-info">
          <li class="nav-item active">
            <a class="nav-link" href="train.html">火车票<span class="sr-only">(current)</span></a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="aeroplane.html">机票</a>
          </li></span><span class="border border-info">
          <li class="nav-item">
            <a class="nav-link" href="groggery.html">酒店服务</a>
          </li></span><span class="border border-info">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
              账号设置
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="login.html">登录</a>
              <a class="dropdown-item" href="zuce.html">注册</a>
          </li></span>
          
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search for require" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>

<div class="y--2">
    <!-- <div class="anniu"> -->
      <br><br><br><br>
      <center>
      <div class="bai">
      <div class="1">
      <div class="2">&nbsp;&nbsp;&nbsp;中铁12307</div>
      </div>
      <form action="login-cg.html" method="post" onsubmit="return validateForm()">
    <h1>登录</h1><br>
    请输入账号：<br>
    <input type="text" id="username" size="37px" maxlength="12"><br>
    请输入密码：<br>
    <input type="password" id="password" size="37px" maxlength="20"><br>
    <input type="checkbox" name="a1">记住密码？
    <br>
   <!-- <input type="submit" value="注册" id="f1">&nbsp;&nbsp;&nbsp; -->
      <input type="submit" value="登录" id="f2">
      </form>
      </div>	
      </center>
  <!-- </div> -->

6.网站的其他网页

基于Bootstrap开发的前端12307票务网站

四、心得及感受

由于制作时间匆忙，在线购票网站能够基本实现用户的要求，并且在指导书的要求之上增添了登录跟注册的页面，同时通过JavaScript对于注册表单能够实现校验功能。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/156943.html

赞 (0)
老牧童老牧童
0
上一篇 2025-02-09 14:15
下一篇 2025-02-09 14:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信