Bootstrap 用户搜索

最新推荐文章于 2024-01-14 13:23:51 发布
最新推荐文章于 2024-01-14 13:23:51 发布
阅读量406 收藏
点赞数
文章标签： bootstrap vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QiQi_7777888/article/details/124698189
版权
这是一个使用HTML、CSS和Vue.js实现的用户管理页面，包含用户列表、用户搜索和添加用户的功能。用户列表中展示了用户ID、用户名和邮箱，并提供了编辑、删除、锁定和修改密码的下拉操作菜单。页面还包含了分页和模态框添加用户界面。
摘要由CSDN通过智能技术生成

网页图片

在这里插入图片描述

代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/vue.global.min.js"></script>
  
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div id="app">
    <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" @click="index=3" :class="{active:index==3}">添加用户</a>
                   
                  </div>
            </div>
            <div class="col-md-10">
                <div class="page-header">
                    <h3><small>用户管理 </small></h3>
                  </div>
                  <div>				
                    <!-- Nav tabs  标签页-->
                    <ul class="nav nav-tabs" >  
                      <li  @click="index=1" :class="{active:index==1}" ><a href="#" >用户列表</a></li>
                      <li @click="index=2" :class="{active:index==2}" ><a href="#" >用户搜索</a></li>
                      <li><a href="#">添加用户</a>	</li>				   
                    </ul>
                  
                    <!-- Tab panes -->
                    <div class="tab-content">
                      <div  class="tab-pane active" :class="{active:index==1}" >
                          
           <div class="tab-content">
            <table class="table">
              
              <thead>
                <tr>
                  <th>ID</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">2</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">3</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">4</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">5</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">6</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">7</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">8</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">9</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">10</th>
                  <td>张三</td>
                  <td>123456@126.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>
                  <th scope="row">11</th>
                  <td>张三</td>
                  <td>123456@126.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>

              </tbody>
            </table>

            <nav class="pull-right">
              <ul class="pagination">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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">»</span></a></li>
             </ul>
           </nav>


             <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                    </div>
                    <div class="modal-body">
                       <form>
                          <div class="form-group">
                            <label for="addname">用户名</label>
                            <input type="text" class="form-control" id="addname" placeholder="用户名">
                          </div>
                          <div class="form-group">
                            <label for="addpassword">用户密码</label>
                            <input type="password" class="form-control" id="addpassword" placeholder="请输入用户密码">
                          </div>
                          <div class="form-group">
                            <label for="addpassword1">确认用户密码</label>
                            <input type="password" class="form-control" id="addpassword1" placeholder="请确认输入用户密码">
                          </div>
                          <div class="form-group">
                            <label for="addemail">请输入用户密码</label>
                            <input type="email" class="form-control" id="addemail" placeholder="请输入用户邮箱">
                          </div>
                          <div class="form-group">
                            <label for="addyonghuzu">所属用户组</label>
                            <select id="addyonghuzu" class="form-control">
                              <option>限制会员</option>
                              <option>新手上路</option>
                              <option>组册会员</option>
                              <option>中级会员</option>
                              <option>高级会员</option>
                            </select>
                          </div>
                          
                         
                        </form>


                    </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>
                </div>
              </div>
       </div>
                      </div>
                      <div class="tab-pane" :class="{active:index==2}">用户搜索</div>				   
                    </div>
                                    
                  </div>
                  <!-- <div class="myself">
                      <ul>
                          <li class="active">item1</li>
                          <li>item2</li>
                          <li>item3</li>
                      </ul>
                      <style>
                          .myself ul{
                              display: flex;


                          }
                          .myself ul li{
                              list-style: none;
                              padding: 5px;
                          }
                          .myself .active{
                              border: 1px solid red;
                              border-bottom: none;
                              border-top-left-radius: 3px ;
                              border-top-right-radius: 3px; 

                          }
                      </style>
                  </div> -->
            </div>
        </div>
    </div>
    <!-- {{index}} -->
   </div>
  
    
   <script>
        const app={
            data(){
                return{
                    index:1
                }
            }
           
        }
         Vue.createApp(app).mount('#app')
    </script>
  
    </body>
</html>
QiQi_7777888
关注
Bootstrap作业
xdy541521的博客
04-12 818
模仿的Bootstrap中文网的练习 本以为很简单一个网页 但是必须要用Bootstrap来做硬是做了一下午才搞出来！ 记录下来以后回过头来再看看羞辱一下自己！ 样式 <style> * { list-style: none; } html { font-size: calc(1em + 1vw); } a { ..
软件20-4王静雯Bootstrap作业5
w_200415的博客
04-21 223
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个m
【无标题】
m0_58766017的博客
05-04 185
bootstrap 网页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" int
bootStrap 搜索框
MZ199290的博客
03-30 6795
2、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
bootstrap表格作业
Pupilla的博客
09-11 629
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8" /> <title>登录</title> <link href="./bootstrap-3.3.7-dis...
bootstrap框架下带搜索功能的下拉树插件
04-23
5. **合并功能**：当用户在`bootstrap-select`中输入搜索关键字时，可以通过监听`keyup`事件并更新`bootstrap-treeview`中的可见节点来实现搜索功能。同时，当用户在`bootstrap-treeview`中点击节点时，同步更新`...
bootstrap框架下带搜索功能的下拉树插件.zip
09-18
在本项目中，`bootstrap-select`被用来实现下拉菜单的基础结构，并提供了搜索功能，允许用户在下拉列表中输入关键词来筛选所需选项。 2. **bootstrap-treeview** `bootstrap-treeview`是一个用于展示层次结构数据...
bootstrap treeview可搜索下拉树形
09-17
这个"可搜索"特性允许用户在输入框中输入关键字，然后动态过滤出与关键词匹配的树节点，提高用户在大量数据中的查找效率。 以下是一些关于这个功能的关键知识点： 1. **jQuery**：jQuery是一个流行的JavaScript库...
bootstrap-select下拉选择搜索框，可以多选和单选
10-19
总之，Bootstrap Select是一个强大的下拉选择组件，它结合了Bootstrap的风格和实用功能，适用于创建具有搜索、多选功能的下拉列表，对于提高用户在网页上的操作效率具有显著作用。通过以上介绍，你应该已经对如何...
使用bootstrap实现下拉框搜索功能的实例讲解
10-18
Bootstrap提供了一套简洁易用的用户界面组件，包括导航、按钮、表单、模态框等，其中下拉框（Dropdowns）和搜索功能（Search）是网页设计中经常使用到的元素。 在本实例中，我们将会讲解如何使用Bootstrap框架来...
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
Bootstrap作业26.zip
12-10
Bootstrap作业26.zip
Bootstrap实现弹性搜索框
09-02
主要介绍了Bootstrap实现弹性搜索框的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
bootstrap 组件练习
qq_34446091的博客
03-27 399
hello bootstrap 你好，世界！ 搜索 拍照 下载     默认灰色按钮     蓝色     信息     成功     警告     危险 用a标签必须确定role为button     默认灰色按钮     蓝色     信息     成功     警告
CSS——利用bootstrap实现搜索界面
Fancymeng的博客
09-05 1819
本篇一如既往，说了CSS的方法，本次借助bootstrap 实现。此外，还有相关的具体实现哦~
bootstrap作业
weixin_52765407的博客
03-13 577
bootstrap笔记 v5-导航栏------作业一 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot
Bootstrap_组件_导航条
zhangnan456的博客
08-29 178
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
BootStrap 搜索框
最新发布
EASON198392的博客
01-14 497
【代码】BootStrap 搜索框。
作业八 Bootstrap应用
qq_37655062的博客
07-04 569
【附加任务】 将商品详情页面利用Bootstrap改造成自适应页面没加的效果图：加了Bootstrap效果图：
Bootstrap Table搜索详解
08-23
用户可以在搜索框中输入关键字，然后点击搜索按钮或按下回车键，Bootstrap Table就会根据关键字对表格中的数据进行搜索，并只显示符合搜索条件的数据。 搜索功能可以通过多种方式进行配置和定制。首先，可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值