Bootstrap框架介绍 -- 笔记 - 图2index

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
  7.     <script type="text/javascript" src="lib/jquery.js"></script>
  8.     <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <div class="row">
  13.             <div class="page-header">
  14.                 <h1>渡课网后台管理系统<small>用户数据管理中心</small></h1>
  15.             </div>
  16.         </div>
  17.         <div class="row">
  18.             <div class="jumbotron">
  19.                 <h1>Bootstrap基础入门课程！</h1>
  20.                 <p>通过一个简单的项目案例介绍学习</p>
  21.                 <p>
  22.                     <a class="btn btn-primary btn-lg" href="https://v3.bootcss.com/" role="button">查看更多,请进入Bootstrap官网！
  23.                     </a>
  24.                 </p>
  25.             </div>
  26.         </div>
  27.         <div class="row">
  28.             <table class="table table-hover table-striped">
  29.                 <tr>
  30.                     <th>用户编号</th>
  31.                     <th>登录账号</th>
  32.                     <th>用户昵称</th>
  33.                     <th>邮箱</th>
  34.                     <th>联系方式</th>
  35.                     <th>账号创建时间</th>
  36.                     <th>用户状态</th>
  37.                     <th>操作</th>
  38.                 </tr>
  39.                 <tr>
  40.                     <td>1</td>
  41.                     <td>admin</td>
  42.                     <td>小渡</td>
  43.                     <td>xiaodu@dodoke.com</td>
  44.                     <td>3789173891</td>
  45.                     <td>2020-06-19</td>
  46.                     <td>正常</td>
  47.                     <td>
  48.                         <a href="detail.html">查看</a>
  49.                         <a href="">修改</a>
  50.                         <a href="">删除</a>
  51.                     </td>
  52.                 </tr>
  53.                 <tr>
  54.                     <td>1</td>
  55.                     <td>admin</td>
  56.                     <td>小渡</td>
  57.                     <td>xiaodu@dodoke.com</td>
  58.                     <td>3789173891</td>
  59.                     <td>2020-06-19</td>
  60.                     <td>正常</td>
  61.                     <td>
  62.                         <a href="">查看</a>
  63.                         <a href="">修改</a>
  64.                         <a href="">删除</a>
  65.                     </td>
  66.                 </tr>
  67.                 <tr>
  68.                     <td>1</td>
  69.                     <td>admin</td>
  70.                     <td>小渡</td>
  71.                     <td>xiaodu@dodoke.com</td>
  72.                     <td>3789173891</td>
  73.                     <td>2020-06-19</td>
  74.                     <td>正常</td>
  75.                     <td>
  76.                         <a href="">查看</a>
  77.                         <a href="">修改</a>
  78.                         <a href="">删除</a>
  79.                     </td>
  80.                 </tr>
  81.                 <tr>
  82.                     <td>1</td>
  83.                     <td>admin</td>
  84.                     <td>小渡</td>
  85.                     <td>xiaodu@dodoke.com</td>
  86.                     <td>3789173891</td>
  87.                     <td>2020-06-19</td>
  88.                     <td>正常</td>
  89.                     <td>
  90.                         <a href="">查看</a>
  91.                         <a href="">修改</a>
  92.                         <a href="">删除</a>
  93.                     </td>
  94.                 </tr>
  95.             </table>
  96.         </div>
  97.     </div>
  98. </body>
  99. </html>

detail

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>detail</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="page-header">
                <h1>渡课网后台管理系统<small>用户数据管理中心</small></h1>
            </div>
        </div>
        <div class="row">
            <div class="jumbotron">
                <h1>Bootstrap基础入门课程！</h1>
                <p>通过一个简单的项目案例介绍学习</p>
                <p>
                    <a class="btn btn-primary btn-lg" href="https://v3.bootcss.com/" role="button">查看更多,请进入Bootstrap官网！
                    </a>
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-2 control-label">用户账号</label>
                        <div class="col-sm-10 col-xs-10">
                            <p class="form-control-static">email@example.com</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-2 control-label">登录密码</label>
                        <div class="col-sm-10 col-xs-10">
                            <p class="form-control-static">********</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">联系方式</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">账号创建时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">最后修改时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">最后登录时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户状态</label>
                        <div class="col-sm-10">
                            <p class="form-control-static">********</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea name="" id="" cols="30" rows="3">请输入~~</textarea>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success">提交</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

change

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="image/1.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="image/2.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="image/3.jpg" alt="Third slide">
        </div>
        <div class="item">
            <img src="image/4.jpg" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div> 

</body>
</html>

modal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    注册
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    姓名
                </h4>
            </div>
            <div class="modal-body">
                密码
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary">
                    注册
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>