(学习笔记)Bootstrap-test3-用户管理

最新推荐文章于 2024-04-23 09:28:29 发布
最新推荐文章于 2024-04-23 09:28:29 发布
阅读量744 收藏 2
点赞数
文章标签： 学习 bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56508310/article/details/124648521
版权

效果图（首页+管理）

首页

在这里插入图片描述

用户管理界面

在这里插入图片描述
在这里插入图片描述

代码部分

index.html

<body>
    <nav class="navbar navbar-default">
        <div class="container">
          <!-- 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="#">MTT Admin</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="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="userm.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
              <li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
              <li><a href="tag.html"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>
              
            </ul>
            
            <ul class="nav navbar-nav navbar-right">
              
              <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="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;帐户中心</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
                  
                </ul>
              </li>
              <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

<!-- 巨幕 -->
    <div class="container">
        <div class="row">
          <div class="col-md-12">
             <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4>网站存在漏洞，急需修复！</h4>
            <p>当前版本程序版本太低,存在严重安全问题，容易造成攻击，请即可修复！</p>
            <p>
              <button type="button" class="btn btn-danger">立即修复</button>
              <button type="button" class="btn btn-default" data-dismiss="alert">稍后处理</button>
            </p>
          </div>
          </div>
        </div>

<!-- 网站统计+热帖 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">网站数据统计</div>
                        <div style="margin: 20px;">
                            <table class="table">
                                <tr>
                                    <th>统计项目</th>
                                    <th>近日</th>
                                    <th>咋日</th>
                                </tr>
                                <tr>
                                    <th>注册会员</th> 
                                    <td>123</td>
                                    <td>321</td>
                                </tr>
                                <tr>
                                    <th>登陆会员</th> 
                                    <td>123</td>
                                    <td>321</td>
                                </tr>
                                <tr>
                                    <th>今日发帖</th>
                                    <td>123</td>
                                    <td>321</td>
                                </tr>
                                <tr>
                                    <th>转载次数</th>
                                    <td>123</td>
                                    <td>321</td>
                                </tr>
                                
                              </table>
                        
                        </div>
                        
                  
                    <!-- Table -->
                  
                  </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">网络热帖</div>
                  
                    <!-- List group -->
                    <ul class="list-group">
                    <li class="list-group-item"><a href=""><span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2022/4/27</small></a></li>
                    <li class="list-group-item"><a href=""><span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2022/4/27</small></a></li>
                    <li class="list-group-item"><a href=""><span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2022/4/27</small></a></li>
                    <li class="list-group-item"><a href=""><span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2022/4/27</small></a></li>
                    <li class="list-group-item"><a href=""><span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2022/4/27</small></a></li>
                    <li class="list-group-item"><a href=""><span class="glyphicon glyphicon-list-alt"></span>发挥特长 迅速反应 多语种输出助力国际战“疫”<small class="pull-right">2022/4/27</small></a></li>

                    </ul>
                  </div>
            </div>
        </div>
    </div>
<!-- 访客+服务器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">访客统计</div>
                    <div id="container" style="height: 100%;min-height: 300px;"></div>
                  </div>
                
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">服务器状态</div>
                    <div style="margin: 20px;">
                      
                        <p>内存使用率：40%</p>
                        <div class="progress">
                          <div class="progress-bar progress-bar-success progress-bar-striped"
                           role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <!-- <span class="sr-only"> Complete (success)</span> -->
                          </div>
                        </div>
                        <p>数据库使用率：20%
                        </p>
                        <div class="progress">
                          <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                            <!-- <span class="sr-only">20% Complete</span> -->
                          </div>
                        </div>
                        
                        <P>磁盘使用率：60%</P>
                        <div class="progress">
                          <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                            <!-- <span class="sr-only">60% Complete (warning)</span> -->
                          </div>
                        </div>
                        <p>CPU使用率：80%</p>  
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                              <!-- <span class="sr-only">60% Complete (warning)</span> -->
                            </div>
                      </div>
                    </div>
                 
                
            </div>
            </div>
        </div>
    </div>

<!-- 留言板 -->
    <div class="container">
        
           
            <div class="panel panel-default">
                <div class="panel-heading">留言板</div>
                <div class="panel-body">
                    <div class="col-md-7">

                      <div class="media well">
                        <div class="media-left">
                          <a href="#">
                            <img class="media-object wh64" src="../img/a.png" alt="李哥">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">李哥</h4>
                          东啊，今晚需要加班,升级网站程序，网站发现漏洞！
                        </div>
                      </div>


                      <div class="media well">
                        <div class="media-body text-right">
                          <h4 class="media-heading">东哥</h4>
                             没空。
                        </div>
                        <div class="media-right">
                          <a href="#">
                            <img class="media-object wh64" src="../img/b.png" alt="李哥">
                          </a>
                        </div>
                      </div>


                      <div class="media well">
                        <div class="media-body text-right">
                          <h4 class="media-heading">东哥</h4>
                           你一天到晚写那么多bug，干嘛喊我加班
                        </div>
                        <div class="media-right">
                          <a href="#">
                            <img class="media-object wh64" src="../img/b.png" alt="李哥">
                          </a>
                        </div>
                      </div>

                      <div class="media well">
                        <div class="media-left">
                          <a href="#">
                            <img class="media-object wh64" src="../img/i.png" alt="李哥">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">小张</h4>
                             东哥太硬辣
                        </div>
                      </div>
                    </div>

                    
                   

                    <div class="col-md-5">
                      <form action="#" method="post">
                        <div class="form-group">
                          <label for="text1">输入留言</label>
                          <textarea class="form-control" id="text1" rows="5" cols="10" placeholder="请输入留言内容"></textarea>
                          
                        </div>
                       <button type="submit" class="btn btn-default">留言</button>
                       <div style="margin: 20px;"></div>
                      </form>
        
                      <div class="panel panel-default">
                          <div class="panel-heading">团队联系方式</div>
                          <div class="panel-body">
                              <ul class="list-group">
                                <li class="list-group-item">站长(李大哥)： <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;13435797092</li>
                                <li class="list-group-item">技术(阿文哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;  13435797092</li>
                                <li class="list-group-item">推广(阿强哥)：<span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;  13435797092</li>
                                <li class="list-group-item">客服(阿敏姐)： <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp; 13435797092    0760-888888</li>
                                
                              </ul>
                          </div>
                        </div>
                    </div>
                </div>
              </div>

    </div>
    <hr style="margin: 0;">
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
           Copyright&nbsp;&nbsp; &copy;2019-2020 &nbsp;&nbsp; www.edu.com&nbsp;&nbsp;  ICP备1300号-4
          </div>
        </div>
      </div>
      </footer>

    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
    
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

    <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};


var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
  type: 'shadow' 
}
},
// legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},

xAxis: {
type: 'value',
axisLabel: {
  formatter: '{value} '
}
},
yAxis: {
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月', '8月', '9月', '10月', '11月', '12月']
},
series: [
{
  name: '恶意攻击次数',
  type: 'bar',
  stack: 'total',
  label: {
    show: true
  },
  emphasis: {
    focus: 'series'
  },
  data: [320, 302, 301, 334, 390, 330, 320,321,221,198,312,222]
},
{
  name: '爬虫',
  type: 'bar',
  stack: 'total',
  label: {
    show: true
  },
  emphasis: {
    focus: 'series'
  },
  data: [120, 132, 101, 134, 90, 230, 210,320,321,221,198,312]
},
{
  name: '管理员',
  type: 'bar',
  stack: 'total',
  label: {
    show: true
  },
  emphasis: {
    focus: 'series'
  },
  data: [220, 182, 191, 234, 290, 330, 310,120, 132, 101, 134, 90]
},
{
  name: 'VIP用户',
  type: 'bar',
  stack: 'total',
  label: {
    show: true
  },
  emphasis: {
    focus: 'series'
  },
  data: [150, 212, 201, 154, 190, 330, 410,220, 182, 191, 234, 290]
},
{
  name: '普通用户',
  type: 'bar',
  stack: 'total',
  label: {
    show: true
  },
  emphasis: {
    focus: 'series'
  },
  data: [820, 832, 901, 934, 1290, 1330, 1320,150, 212, 201, 154, 190]
}
]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

    </script>
</body>

管理界面代码

<body>
<div id="app">
    <nav class="navbar navbar-default">
        <div class="container">
          <!-- 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="#">MTT Admin</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="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="user_list.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
              <li><a href="content.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
              <li><a href="tag.html"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>
              
            </ul>
            
            <ul class="nav navbar-nav navbar-right">
              
              <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="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;帐户中心</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
                  
                </ul>
              </li>
              <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></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 " @click="index=1" :class="{active:index==1}">
                      用户管理
                    </a>
                    <a href="#" class="list-group-item"  @click="index=2" :class="{active:index==2}">用户搜索</a>
                    <a href="#" class="list-group-item">添加用户</a>
                  </div>
            </div>
            <div class="col-md-10">
                <div class="page-header" style="margin-top: 0;">
                    <h3>用户管理</h3>
                  </div>

                <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                      <li @click="index=1" :class="{active:index==1}"  role="presentation" ><a href="#home"  aria-controls="home" role="tab" data-toggle="tab">用户管理</a></li>
                      <li @click="index=2" :class="{active:index==2} " role="presentation"><a href="#profile"  aria-controls="home" role="tab" data-toggle="tab">用户搜索</a></li>
                      <li role="presentation"><a href="#messages"  aria-controls="home" role="tab" data-toggle="tab">添加用户</a></li>
                    </ul>
                  
                    <!-- Tab panes -->
                    <div class="tab-content">
                      <div role="tabpanel" class="tab-pane active" id="home">
                          <table class="table">
                              <tr>
                                  <th>ID</th>
                                  <th>用户名</th>
                                  <th>邮箱</th>
                                  <th>操作</th>
                              </tr>
                              <!-- 1 -->
                              <tr>
                                  <td>1</td>
                                  <td>张三</td>
                                  <td>132@qq.com</td>
                                  <td>
                                    <div class="dropdown">
                                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                          操作
                                          <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                          <li><a href="#">编辑</a></li>
                                          <li><a href="#">删除</a></li>
                                          <li><a href="#">锁定</a></li>
                                        
                                          <li><a href="#">修改密码</a></li>
                                        </ul>
                                      </div>
                                  </td>
                                  
                              </tr>
                              <tr>
                                <td>2</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>张三</td>
                                <td>132@qq.com</td>
                                <td>
                                  <div class="dropdown">
                                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        操作
                                        <span class="caret"></span>
                                      </button>
                                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#">编辑</a></li>
                                        <li><a href="#">删除</a></li>
                                        <li><a href="#">锁定</a></li>
                                      
                                        <li><a href="#">修改密码</a></li>
                                      </ul>
                                    </div>
                                </td>
                                
                            </tr>
                          </table>

                          <nav aria-label="Page navigation" class="right">
                            <ul class="pagination">
                              <li>
                                <a href="#" aria-label="Previous">
                                  <span aria-hidden="true">&laquo;</span>
                                </a>
                              </li>
                              <li class="active"><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 role="tabpanel" class="tab-pane" id="profile">
                        <div class="panel-body">
                            <div class="alert alert-info" role="alert"><b>技巧提示:</b> 支持模糊搜索和匹配搜索，匹配搜索使用*代替！</div>
                            <form class="form">
                                <label>用户名</label>
                                <input class="form-control" type="text" placeholder="请输入用户名"> 
                                <br>
                                <label>UID</label>
                                <input class="form-control" placeholder="请输入用户UID"> 
                                <br>
                                <label>选择用户组</label>
                                <select id="addyonghuzu" class="form-control">
                                    <option>限制会员</option>
                                    <option>新手上路</option>
                                    <option>组册会员</option>
                                    <option>中级会员</option>
                                    <option>高级会员</option>
                                  </select>
                                <br>
                                <input   class="btn btn-default" type="button" value="提交">
                            </form>
                            
                        </div>
                      </div>
                      <div role="tabpanel" class="tab-pane" id="messages">123</div>
                    </div>
                  
                  </div>
            </div>
        </div>
    </div>
</div> <!-- #app -->
<hr style="margin: 0;">
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
       Copyright&nbsp;&nbsp; &copy;2019-2020 &nbsp;&nbsp; www.edu.com&nbsp;&nbsp;  ICP备1300号-4
      </div>
    </div>
  </div>
  </footer>


    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
    <script type="text/javascript">
        const app={
            data(){
                return{
                    index:1
                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
</body>
cat and cats
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js第二天学习笔记（vue-router）
11-28
<div class="test-content">我是test页面的内容 ``` 最后，使用Webpack进行模块打包，将整个项目组合在一起。Webpack是一个强大的模块打包工具，能够处理JavaScript、CSS、图片等资源。在Vue项目中，通常会结合...
JS学习笔记相关代码-测试代码
06-05
JS学习笔记相关文档 Login.html学习 placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。 该提示会在用户输入值之前显示在输入字段中。 注意：placeholder 属性...
BootstrapTest
向上取整
11-28 390
Bootstrap使用 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处： 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富...
R语言实现Bootstrap验证
weixin_49320263的博客
08-08 1585
R语言实现Bootstrap验证
SpringBoot --- 创建个人中心页面
最新发布
m0_61684781的博客
04-23 271
添加只需要一个模态框，而修改需要多个模态框，这里就要在模态框的id属性上加上 bot的id用来做标识了 如 :id="'update-bot-btn' + bot.id" ：是v-bind的缩写，用来绑定值。button上要加上 data-bs-toggle="modal" data-bs-target="#add-bot-btn"两个属性，data-bs-target要绑定模态框的id，要加上#。注意：此时前端获取到的时间会和数据库中的时间相差八个小时。1.创建数据库和pojo类。
开发基于SpringBoot和BootStrap的全栈论坛网站（六）：完成个人中心、问题详情和问题编辑
Java鱼仔的博客
11-18 2733
如果你对这个项目感兴趣，可以从头看起： 开发基于SpringBoot和BootStrap的全栈论坛网站（一）：准备阶段 开发基于SpringBoot和BootStrap的全栈论坛网站（二）：后端人员如何快速使用BootStrap 开发基于SpringBoot和BootStrap的全栈论坛网站（三）：登陆注册以及cookies的功能完成 开发基于SpringBoot和BootStrap的...
Bootstrap页面整合（十二）
dengfengling999的博客
12-03 1328
首先引入bootstrap： 复制导航条代码：修改导航条： 删除 改完的导航条： 使用列表组或者手风琴来实现左侧菜单：复制手风琴代码首先使用栅格布局2分写菜单，10写主要内容 把手风琴的代码复制到2分的div内：就出现手风琴效果 手风琴里嵌套列表组：修改代码： 带上 in默认展开的：去掉in 在10分的中心内容做一个标签页： 修改代码： 在中心内容添加分页： 给添加按钮添加弹出的模态框： js： 点击添加用户按钮： 给删除按钮添加模态框：首先复制一份模态框：
bootstrap实现管理系统首页设计
weixin_52837547的博客
11-08 1409
bootstrap实现管理系统首页设计
angularjs学习笔记之完整的项目结构
11-24
【AngularJS 学习笔记之完整的项目结构】 在学习AngularJS的过程中，理解并构建一个完整的项目结构至关重要。项目结构清晰，能帮助开发者更好地组织代码，提高开发效率和维护性。以下是一个典型的AngularJS项目结构...
java ，bootstrap，servlet，javaWep基本笔记.zip
10-01
学习者可能已经记录了如何使用Java编写Servlet来处理HTTP请求，如何集成Bootstrap框架来设计响应式网页，以及如何在Java Web项目中组织和管理各种组件。这些笔记对于理解Java Web开发的基本流程和最佳实践至关重要，...
test_qianduan.rar
04-27
6. 学习笔记或文档：可能包含作者的学习心得、关键知识点的总结，便于理解和回顾。 7. 代码示例：每个知识点对应的代码片段，便于模仿和修改。 8. 资源链接：可能包含外部的学习资源，如在线课程、教程网站等。 ...
bootstrap-project:以用户为中心的前端开发的存储库> Bootstrap 4
05-04
欢迎evane123， 这是Gitpod的代码学院学生模板。 我们已经预装了您入门所需的所有工具。 您可以安全地删除此README.md文件，或为您自己的项目进行更改。 不过，请至少阅读一次！ 它包含有关Gitpod和我们使用的扩展的一些重要信息。 Gitpod提醒 要在Gitpod中运行前端（仅HTML，CSS，Javascript）应用程序，请在终端中输入： python3 -m http.server 应该出现一个蓝色按钮，以单击： “公开” ， 应该出现另一个蓝色按钮，以单击：打开浏览器。 要运行后端Python文件，请输入python3 app.py ，当然，如果您的Python文件名为app.py 应该会出现一个蓝色按钮，以单击： “公开” ， 应该出现另一个蓝色按钮，以单击：打开浏览器。 在Gitpod中，默认情况下，您具有超级用户安全权限。 因此，在任何课程
Java Web 网络商城案例演示二、(jsp页面搭建)
程序员猫爪
03-13 1644
cart.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html> <head> <meta charset="utf-8" /> <meta...
SpringBoot 组合 Maven 区分环境打包
MR.骑士道
03-29 1667
SpringBoot 组合 Maven 区分环境打包
前端使用 BootStrap 写一些后台常用的界面
热门推荐
IT小村
02-27 2万+
一、前言 1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已 2、自己独立完成一个作品，一般都要涉及到几个界面的编写： ①登录界面 ②CRUD界面 ③主页 ④… 3、UI方面的简单的框架有很多，使用的过程也是深有感触： ①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。 ②于是接着选择了最新最热门...
jquery,bootstrap实现的用户名片信息提示
云淡风轻、仅此一抹
04-08 1万+
jquery,bootstrap实现的用户名片信息提示,代码下载地址：http://www.zuidaima.com/share/1737371579649024.htm
前端--bootstrap(v3)课上笔记+作业
qq_56508310的博客
03-09 1137
第一次课–Boostrap v3 一、Boostrap的文件基本引入 1.在head标签中引入 boostrap的css文件 2.在body的最后引入Jquery文件和Boostrap的js文件 来加载其所有的插件，两者顺序不可颠倒，Jquery引入在前（因为Bootstrap 的所有 JavaScript 插件都依赖 jQuery） 二、导航栏 ...
tessract-ocr文本识别系统网页搭建php_进一步完善及操作流程详解
你那么爱笑，家里人知道吗？
09-18 2803
1.首先，安装tessract-ocr，确保3.03版本以上 ubuntu  sudo apt-get install tesseract-ocrcentos yum install tesseract.i686 2.由于要调用php库，安装php管理依赖的工具comporser 3.从comporser中得到   tesseract-ocr-for-php      执行命令; c
vue3 bootstrap-table
08-15
对于问题中提到的vue3和bootstrap-table，根据提供的引用内容来看，第一个引用是关于bootstrap4的样式设置，第二个引用是关于修改bootstrap-table.js的代码，第三个引用是关于具体实现思路的一段代码。 Vue 3是一种JavaScript框架，用于构建交互式的用户界面。它具有许多新的特性和改进，比如提供了更好的性能、更小的包大小和更好的开发者体验。 Bootstrap Table是一个基于Bootstrap的强大的、响应式的表格插件，它为开发者提供了很多功能强大、易于使用的表格组件。 根据提供的信息，我们可以看到引用提供了一些关于在bootstrap4中设置样式的代码，用于控制表格的显示效果。引用提供了关于修改bootstrap-table.js的代码，用于处理ajax请求或者取消请求。引用则提供了一些关于在Vue中实现表格和选择列过滤的代码。 综上所述，根据提供的信息，可以使用Vue 3来构建一个基于Bootstrap的表格组件，并利用提供的引用内容来设置样式和处理表格的数据和交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [《bootstrap-table-vue.js系列》(三) bootstrap-table-editable的支持](https://blog.csdn.net/qq_42410310/article/details/123833291)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-element-admin使用bootstrap-table支持axios](https://blog.csdn.net/xxxvxxv/article/details/127858645)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue兼容bootstrap-table实现动态表头收缩](https://blog.csdn.net/weixin_60687276/article/details/127323464)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值