图书馆管理系统的页面设计

图书馆管理系统的页面设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--图书馆管理系统页面-->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">图书馆管理系统</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <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" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">社区</a></li>
            <li><a href="#">聊天室</a></li>
            <li><a href="#">娱乐中心</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">轻松一刻</a></li>
            <li role="separator" class="divider"></li>
            <li><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-default">login</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">godlover</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">修改用户头像</a></li>
            <li><a href="#">修改用户密码</a></li>
            <li><a href="#">修改个人信息</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">注销</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="list-group">
          <a href="#" class="list-group-item active">
            图书列表
          </a>
          <a href="#" class="list-group-item">作者列表</a>
          <a href="#" class="list-group-item">出版社列表</a>
          <a href="#" class="list-group-item">更多操作</a>

</div>
        </div>
        <div class="col-md-10">
            <div class="panel panel-primary">
              <div class="panel-heading clearfix">
                <h3 class="panel-title">图书馆管理系统<span class="glyphicon glyphicon-leaf pull-right"></span></h3>
              </div>
              <div class="panel-body">
                <a href="#" class="btn btn-success">新增</a>
                  <form class="form-inline pull-right">
                      <div class="form-group">

                        <div class="input-group">

                          <input type="text" class="form-control" id="exampleInputAmount" placeholder="关键字">

                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary">搜索</button>
                    </form>
                  <table class="table table-hover table-striped table-bordered" style="margin-top: 10px">
                      <thead>
                          <tr>
                              <th>序号</th>
                              <th>书名</th>
                              <th>作者</th>
                              <th>出版社</th>
                              <th>价格</th>
                              <th class="text-center">操作</th>
                          </tr>
                      </thead>
                      <tbody>
                      <tr>
                          <td>1</td>
                          <td>安徒生童话</td>
                          <td>安徒生</td>
                          <td>安徒生出版社</td>
                          <td>199.98</td>
                          <td class="text-center">
                              <a class="btn btn-primary btn-sm">编辑</a>
                              <a class="btn btn-danger btn-sm">删除</a>
                          </td>
                      </tr>
                      <tr>
                          <td>2</td>
                          <td>格林童话</td>
                          <td>格林</td>
                          <td>格林出版社</td>
                          <td>200.98</td>
                          <td class="text-center">
                              <a class="btn btn-primary btn-sm">编辑</a>
                              <a class="btn btn-danger btn-sm">删除</a>
                          </td>
                      </tr>
                      <tr>
                          <td>3</td>
                          <td>木偶奇遇记</td>
                          <td>卡洛.科洛迪</td>
                          <td>意大利出版社</td>
                          <td>1999.98</td>
                          <td class="text-center">
                              <a class="btn btn-primary btn-sm">编辑</a>
                              <a class="btn btn-danger btn-sm">删除</a>
                          </td>
                      </tr>
                      <tr>
                          <td>4</td>
                          <td>茶花女</td>
                          <td>小仲马</td>
                          <td>英伦出版社</td>
                          <td>299.98</td>
                          <td class="text-center">
                              <a class="btn btn-primary btn-sm">编辑</a>
                              <a class="btn btn-danger btn-sm">删除</a>
                          </td>
                      </tr>

                      </tbody>
                  </table>
                  <nav aria-label="Page navigation">
                  <ul class="pagination pull-right">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&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="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>

              </div>
                </div>
        </div>

          </div>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/godlover/p/12141775.html

时间: 2024-10-11 09:32:55

图书馆管理系统的页面设计的相关文章

图书馆管理系统的数据库设计

图书馆管理系统的数据库设计 --学生表 CREATE TABLE stu_info( --学号 stu_num varchar(10) primary key, --姓名 stu_name varchar(12) not null, --学院 stu_college varchar(20), --年级 stu_grade smallint, --宿舍 stu_dorm varchar(10) ); --职工表 CREATE TABLE teacher_info( --职工号 tea_num va

图书馆管理系统应用程序说明书

 本系统主要实现对图书馆书籍的借阅管理.入库管理.查询管理以及借阅者信息管理. 代码链接:https://github.com/Lendoon/LibraryManagement 一.登录界面 用户进入图书馆管理系统登陆页面后,需要填写本人的用户名和密码,填写完毕后点击login方可进入系统,登录页面如图: 二.借阅(还书)页面: 当借阅者要进行图书借阅(还书)时,进入借阅(还书)界面之后,系统管理员会获取借阅者的借书证号.读者信息.图书编号以及图书信息录入系统,当图书馆管理员点击提交之后,借阅

ASP.NET Core 打造一个简单的图书馆管理系统(三)基本登录页面以及授权逻辑的建立

前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=windows <Pro ASP.NET MVC 5>.<Bootstrap 开发精解>.<锋利的 jQuery> 此系列皆使用 VS2017+C# 作为开发环境.

图书馆管理系统——模板建立

图书馆管理系统也进行了有一段时日了,前段时间一直在进行画图,直到前天才真正的把图画完,当然后期肯定还有需要完善的地方.现阶段,我们就开始了界面的搭建,这个对于我们来说既是熟悉的,同时也是具有挑战性的.为什么这么说呢? 熟悉的是我们学习BS的第一个项目就是牛腩新闻发布系统,这个项目就是从代码到界面搭建,整合等项目的全套学习,我们的图书馆管理系统基本上都是这里面所讲到过的,对于我们来说都不陌生.但是,对于自己来说,当时学习牛腩视频的时候,基本上都是看着视频进行敲的,有很多地方不太理解,虽然功能或者样

JavaWeb学习入门之——图书馆管理系统开发(Hibernate学习1)

最近看了看JavaWeb的书籍,才感觉到大二时候学的JavaWeb才仅仅只是个入门.最尴尬的当初还没咋学一直在看.NET,现在看起来JavaWeb,各种框架各种头疼啊.看了几个例子之后觉得,还是自己动手做个项目试试.边做边学才能学的快一点.做的时候用博客园记录下过程,省得以后忘.之所以选图书馆管理系统呢,是因为做过几个课程设计.对它的需求还是比较了解一点.现在通用的框架模式都是MVC,我在学的时候想先从Model层开始学.于是就先选Hibernate开始. 一.数据库 先简单设计几张表,图书表,

图书馆管理系统 SRS文档

图书馆管理系统 SRS文档 编写人:魏晓 日期:2015年05月27日 1介绍 1.1编写目的 图书管理系统需求规格说明书是为了让系统的涉众就该系统的需求达成一致认可,明确该系统的需求,为后续的开发工作提供依据.通常,该需求规格说明可以作为产品设计的主要依据,并作为工程师编码时了解软件实际需求的主要参考资料.同时,需求规格说明是产品实现后用于检验的主要考察依据,是测试人员编写测试用例时的主要参考文件.另外,本文档还可以为其他需要了解系统需求的人员提供产品需求的详细说明. 1.2背景 软件系统的名

图书馆 管理系统--可行性报告

1.引言 1.1编写目的     本需求的编写是为了研究利用大型数据库做基础的图书管理系统软件的开发途径和应用方法.同时它也是进行项目策划.概要设计和详细设计的基础,是维护人员进行内部维护,信息更新,验收和测试的依据. 1.2项目背景 l  开发软件的名称:图书管理系统.  l  图书管理系统这任务提出与开发者为我们小组软件工程的的课程设计,用户是学校图书馆.  l  本产品是针对电脑管理图书的需求设计的,可以完成读者登记.购入新书.读者借还书.图书注销等. 1.3参考资料 <信息系统分析与设计

图书馆管理系统程序测试计划

一.引言 1.1编写目的 为了保证图书管理系统的各项功能可靠的实现,特编写了此测试计划,对所开发软件的各功能模块和事例系统进行测试. 本测试计划供程序员在程序高度阶段参考,在系统测试阶段提供测试依据.本测试计划主要用于发现系统开发过程中出现和各种不妥判之处,发现软件设计中的错误. 1.2背景 a. 待开发软件系统的名称:图书管理系统 b. 本项目的任务提出者:<软件工程>的授课老师 C.用户:图书管理人员和用户人员. 二.任务概述 2.1.目标 本文档的目标是详细描述对图书馆管理系统进行系统测

ASP.NET MVC后台管理系统精美UI设计

现在越来越多的系统都是BS架构,什么样的界面风格才更加大气.美观.实用呢? 先给大家看一下我自己做的后台系统风格,然后再讲几个主要的界面 地址:http://121.40.148.178:8080/ . 用户名:guest,密码:123456 一.整体部局 现在的管理系统比较流行把界面做得跟CS应用程序很像,让人一眼看去都以为是CS程序,的确那样看起来很大气,很漂亮. 以往的做法,通常是在工作区只能显示一个功能页面,打开一个新的功能以后页面就跳转了,当用户需要同时打开两个功能的时候就很蛋疼,所以