视频加载失败

图书管理系统工程搭建

987 字
5 分钟
图书管理系统工程搭建
2023-07-14
Web 开发
无标签
  1. 1Bootstrap 前端框架
  2. 2HTTP 协议
  3. 3URL 编码
  4. 4图书管理系统工程搭建本文
  5. 5Bootstrap 参考网站总结
  6. 6Web 前端参考手册

图书管理系统搭建工程_1.0#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--  本地 链接 引入方法  -->
    <!--  Websource 文件夹 拷贝到当前文件夹下即可使用  -->
    <!--  jQuery 文件  -->
    <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
    <script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
    <!--  Bootstrap 的 CSS 样式文件  -->
    <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
    <!-- bootstrap-sweetalert(弹框) 的 CSS 文件   -->
    <link rel="stylesheet" href="Websource\bootstrap-sweetalert\dist\sweetalert.css">
    <!-- bootstrap-sweetalert(弹框) 的 JS 文件 -->
    <script src="Websource\bootstrap-sweetalert\dist\sweetalert.js"></script>
    <!-- Fontawesome(图标库) 的 JS 文件 -->
    <link rel="stylesheet" href="Websource\Icon\css\all.css">
    <!--  以下为 css样式书写区  -->
    <style>




    </style>


</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="Search">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dream</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-fluid">
    <!--  切分版块  -->
    <div class="row">
        <!-- 占3份 -->
        <div class="col-md-3">
            <!-- 列表-->
            <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>
                <a href="#" class="list-group-item">更多精彩内容</a>
            </div>
        </div>
        <!-- 占9份 -->
        <div class="col-md-9">
            <!-- 面板 -->
            <div class="panel panel-primary">
                <!-- pull-right 向右飘 -->
                <!-- glyphicon glyphicon-book 图书图标 -->
                <div class="panel-heading">图书管理系统 <span class="glyphicon glyphicon-book pull-right"></span></div>
                <div class="panel-body">


                    <!-- 搜索框 + 添加按钮 -->
                    <div class="row">
                        <!-- 搜索框 -->
                        <div class="col-lg-8 col-md-offset-1">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Go!</button>
                                </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                        <!-- 添加按钮 -->
                        <div class="col-lg-2 ">
                            <button class="btn btn-success">添加</button>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                    <hr>
                    <!-- 展示列表 -->
                    <div>
                        <!-- 书籍列表 -->
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">出版时间</th>
                                <th class="text-center">章节</th>
                                <th class="text-center">简介</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-center">1</td>
                                <td class="text-center">唐家三少</td>
                                <td class="text-center">2018年</td>
                                <td class="text-center">189</td>
                                <td class="text-center">复活小舞</td>
                                <td class="text-center">
                                    <button class="btn btn-primary btn-xs">编辑</button>
                                    <button class="btn btn-danger btn-xs">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">出版时间</th>
                                <th class="text-center">章节</th>
                                <th class="text-center">简介</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-center">1</td>
                                <td class="text-center">唐家三少</td>
                                <td class="text-center">2018年</td>
                                <td class="text-center">189</td>
                                <td class="text-center">复活小舞</td>
                                <td class="text-center">
                                    <button class="btn btn-primary btn-xs">编辑</button>
                                    <button class="btn btn-danger btn-xs">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">出版时间</th>
                                <th class="text-center">章节</th>
                                <th class="text-center">简介</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-center">1</td>
                                <td class="text-center">唐家三少</td>
                                <td class="text-center">2018年</td>
                                <td class="text-center">189</td>
                                <td class="text-center">复活小舞</td>
                                <td class="text-center">
                                    <button class="btn btn-primary btn-xs">编辑</button>
                                    <button class="btn btn-danger btn-xs">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">出版时间</th>
                                <th class="text-center">章节</th>
                                <th class="text-center">简介</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-center">1</td>
                                <td class="text-center">唐家三少</td>
                                <td class="text-center">2018年</td>
                                <td class="text-center">189</td>
                                <td class="text-center">复活小舞</td>
                                <td class="text-center">
                                    <button class="btn btn-primary btn-xs">编辑</button>
                                    <button class="btn btn-danger btn-xs">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th class="text-center">ID</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">出版时间</th>
                                <th class="text-center">章节</th>
                                <th class="text-center">简介</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-center">1</td>
                                <td class="text-center">唐家三少</td>
                                <td class="text-center">2018年</td>
                                <td class="text-center">189</td>
                                <td class="text-center">复活小舞</td>
                                <td class="text-center">
                                    <button class="btn btn-primary btn-xs">编辑</button>
                                    <button class="btn btn-danger btn-xs">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <nav aria-label="..." class="text-center">
                            <ul class="pagination">
                                <li class="disabled">
                                  <span>
                                    <span aria-hidden="true">&laquo;</span>
                                  </span>
                                </li>
                                <li class="active">
                                    <span>1 <span class="sr-only">(current)</span></span>
                                </li>
                                <li class="">
                                    <span>2 <span class="sr-only">(current)</span></span>
                                </li>
                                <li class="">
                                    <span>3 <span class="sr-only">(current)</span></span>
                                </li>
                                <li class="">
                                    <span>4 <span class="sr-only">(current)</span></span>
                                </li>
                                <li class="">
                                    <span>5 <span class="sr-only">(current)</span></span>
                                </li>
                            </ul>
                        </nav>
                        </nav>
                    </div>


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




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

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！

打赏
图书管理系统工程搭建
https://firefly.cuteleaf.cn/posts/frontend/图书管理系统搭建工程/
作者
Dream
发布于
2023-07-14
许可协议
CC BY-NC-SA 4.0
Bootstrap 参考网站总结
URL 编码
相关文章智能推荐
1
C 语言发展史
编程语言了解 C 语言从 BCPL、B 语言到现代标准 C 的发展历程、核心特点与应用领域。
2
C 语言开发环境的安装与配置
编程语言在 Windows、Linux 与 macOS 上安装 C 工具链，配置编辑器，并编译运行第一个 C 程序。
3
C 语言初识：程序运行机制与基本结构
编程语言认识 C 程序从源代码到运行的完整流程，以及基础语法和程序的基本结构。
4
C 语言基础：注释、关键字、变量与数据类型
编程语言学习 C 语言的注释、关键字、标识符、常量、变量和基本数据类型等基础知识。
5
C 语言数据类型
编程语言理解 C 语言的数据类型体系，包括基本类型、整数类型、浮点类型和逻辑类型。
随机文章随机推荐
Profile Image of the Author
Dream
Hello, I'm Dream.
公告
欢迎来到我的博客！爱学习爱进步。
分类
标签
更多
最新动态
站点统计
文章
300
分类
5
标签
26
总字数
640,882
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
Vercel
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录
1
图书管理系统搭建工程_1.0