BootStrap使用

转x33g5p2x  于2022-02-22 转载在 Bootstrap  
字(7.8k)|赞(0)|评价(0)|浏览(366)


看完Bootstrap不练习一下怎么可以？点进来cv走！

BootStrap基本使用

图书管理系统界面

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图书管理系统</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  7.     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  8.     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <!--导航条-->
  13. <nav class="navbar navbar-inverse">
  14.   <div class="container-fluid">
  15.     <!-- Brand and toggle get grouped for better mobile display -->
  16.     <div class="navbar-header">
  17.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  18.         <span class="sr-only">Toggle navigation</span>
  19.         <span class="icon-bar"></span>
  20.         <span class="icon-bar"></span>
  21.         <span class="icon-bar"></span>
  22.       </button>
  23.       <a class="navbar-brand" href="#">图书管理系统</a>
  24.     </div>
  26.     <!-- Collect the nav links, forms, and other content for toggling -->
  27.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  28.       <ul class="nav navbar-nav">
  29.         <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
  30.         <li><a href="#">编程大全</a></li>
  31.         <li class="dropdown">
  32.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
  33.           <ul class="dropdown-menu">
  34.             <li><a href="#">Action</a></li>
  35.             <li><a href="#">Another action</a></li>
  36.             <li><a href="#">Something else here</a></li>
  37.             <li role="separator" class="divider"></li>
  38.             <li><a href="#">Separated link</a></li>
  39.             <li role="separator" class="divider"></li>
  40.             <li><a href="#">One more separated link</a></li>
  41.           </ul>
  42.         </li>
  43.       </ul>
  44.       <form class="navbar-form navbar-left">
  45.         <div class="form-group">
  46.           <input type="text" class="form-control" placeholder="查询一下">
  47.         </div>
  48.         <button type="submit" class="btn btn-default">搜索</button>
  49.       </form>
  50.       <ul class="nav navbar-nav navbar-right">
  51.         <li><a href="#">登录</a></li>
  52.         <li class="dropdown">
  53.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
  54.           <ul class="dropdown-menu">
  55.             <li><a href="#">Action</a></li>
  56.             <li><a href="#">Another action</a></li>
  57.             <li><a href="#">Something else here</a></li>
  58.             <li role="separator" class="divider"></li>
  59.             <li><a href="#">Separated link</a></li>
  60.           </ul>
  61.         </li>
  62.       </ul>
  63.     </div><!-- /.navbar-collapse -->
  64.   </div><!-- /.container-fluid -->
  65. </nav>
  66. <!--布局-->
  67. <div class="container-fluid">
  68.     <div class="row">
  69.         <div class="col-md-3">
  70.             <div class="list-group">
  71.               <a href="#" class="list-group-item active">
  72.                 图书列表
  73.               </a>
  74.               <a href="#" class="list-group-item">书名</a>
  75.               <a href="#" class="list-group-item">作者列表</a>
  76.               <a href="#" class="list-group-item">出版社列表</a>
  77.               <a href="#" class="list-group-item">更多</a>
  78.             </div>
  79.         </div>
  80.         <div class="col-md-8">
  81.                 <div class="panel panel-primary">
  82.                   <div class="panel-heading">
  83.                     <h3 class="panel-title">图书管理系统<span class="glyphicon glyphicon-book pull-right"></span></h3>
  84.                   </div>
  85.                   <div class="panel-body">
  86.                         <!--   搜索框                   -->
  87.                       <div class="row">
  88.                      <div class="col-lg-10">
  89.                             <div class="input-group">
  90.                               <input type="text" class="form-control" placeholder="Search for...">
  91.                               <span class="input-group-btn">
  92.                                 <button class="btn btn-default" type="button">Go!</button>
  93.                               </span>
  94.                             </div><!-- /input-group -->
  95.                           </div><!-- /.col-lg-6 -->
  96.                            <div class="col-lg-1">
  97.                             <button class="btn btn-warning pull-right">添加</button>
  98.                           </div><!-- /.col-lg-6 -->
  99.                           <div class="col-lg-1">
  100.                             <button class="btn btn-danger pull-right">删除</button>
  101.                           </div><!-- /.col-lg-6 -->
  102.                         </div><!-- /.row -->
  103.                       <!--数据                      -->
  104.                       <div>
  105.                           <table class="table table-striped">
  106.                           <thead>
  107.                           <tr>
  108.                               <th>ID</th>
  109.                               <th>Name</th>
  110.                               <th>sex</th>
  111.                               <th>price</th>
  112.                               <th class="text-center">aciton</th>
  113.                           </tr>
  114.                           </thead>
  115.                           <tbody>
  116.                           <tr>
  117.                               <td>1</td>
  118.                               <td>Hammer</td>
  119.                               <td>male</td>
  120.                               <td>888</td>
  121.                               <td class="text-center">
  122.                                   <button class="btn btn-sucess btn-xs">编辑</button>
  123.                                   <button class="btn btn-danger btn-xs">删除</button>
  124.                               </td>
  125.                           </tr>
  126.                           <tr>
  127.                               <td>1</td>
  128.                               <td>Hammer</td>
  129.                               <td>male</td>
  130.                               <td>888</td>
  131.                               <td class="text-center">
  132.                                   <button class="btn btn-sucess btn-xs">编辑</button>
  133.                                   <button class="btn btn-danger btn-xs">删除</button>
  134.                               </td>
  135.                           </tr>
  136.                           <tr>
  137.                               <td>1</td>
  138.                               <td>Hammer</td>
  139.                               <td>male</td>
  140.                               <td>888</td>
  141.                               <td class="text-center">
  142.                                   <button class="btn btn-sucess btn-xs">编辑</button>
  143.                                   <button class="btn btn-danger btn-xs">删除</button>
  144.                               </td>
  145.                           </tr>
  146.                           <tr>
  147.                               <td>1</td>
  148.                               <td>Hammer</td>
  149.                               <td>male</td>
  150.                               <td>888</td>
  151.                               <td class="text-center">
  152.                                   <button class="btn btn-sucess btn-xs">编辑</button>
  153.                                   <button class="btn btn-danger btn-xs">删除</button>
  154.                               </td>
  155.                           </tr>
  156.                           </tbody>
  157.                         </table>
  159.                           <nav aria-label="Page navigation" class="text-center">
  160.                           <ul class="pagination">
  161.                             <li>
  162.                               <a href="#" aria-label="Previous">
  163.                                 <span aria-hidden="true">&laquo;</span>
  164.                               </a>
  165.                             </li>
  166.                             <li><a href="#">1</a></li>
  167.                             <li><a href="#">2</a></li>
  168.                             <li><a href="#">3</a></li>
  169.                             <li><a href="#">4</a></li>
  170.                             <li><a href="#">5</a></li>
  171.                             <li>
  172.                               <a href="#" aria-label="Next">
  173.                                 <span aria-hidden="true">&raquo;</span>
  174.                               </a>
  175.                             </li>
  176.                           </ul>
  177.                         </nav>
  178.                       </div>
  179.                   </div>
  180.                 </div>
  181.         </div>
  182.     </div>
  183. </div>
  185. </body>
  186. </html>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://www.cnblogs.com/48xz/p/15925277.html

内容来源于网络，如有侵权，请联系作者删除！

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com