基于bootstrap实现信息收集卡 实现 导航栏 搜索框 以及表格的使用

已于 2022-07-09 07:43:44 修改
阅读量603 收藏 4
点赞数 1
分类专栏： bootstrap 文章标签： 大数据
于 2022-07-05 09:51:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46673625/article/details/125613629
版权 
<!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个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="jquery.js"></script>
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<div class="container">
   <div class="page-header">
        <h1>信息手机卡 <small>共三步</small></h1>
    </div>
    <div class="progress">
  <div class="progress-bar active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
  </div>
  <div class="panel-body">

      <div class="row">
          <div class="col-md-4 col-md-offset-1">
              <form class="form-horizontal">
              <div class="form-group">
                <label for="username" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="username" placeholder="姓名">
                </div>
              </div>
              <div class="form-group">
                <label for="phone" class="col-sm-2 control-label">手机</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="phone" placeholder="手机">
                </div>
              </div>

                  <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword" placeholder="密码">
                </div>
              </div>
                  <div class="form-group">
                <label for="headpic" class="col-sm-2 control-label">头像</label>
                <div class="col-sm-10">
                  <input type="file" id="headpic" placeholder="密码">
                    <p class="help-block">只支持jpg/png格式</p>
                </div>
              </div>
                   <div class="form-group">
                <label for="headpic" class="col-sm-2 control-label">属性</label>
                <div class="col-sm-10">
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                       我是一个好人
                      </label>
                    </div>
                    <div class="radio">
                      <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                        你是一个好人
                      </label>
                    </div>
                    <div class="radio disabled">
                      <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                        Option three is disabled
                      </label>
                    </div>
                </div>
              </div>
            </form>
          </div>

      </div>
  </div>
</div>
    <button class="btn btn-primary pull-right">

    </button>
</div>


</body>
</html>

实现 导航栏 搜索框 以及表格的使用

<!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个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    table td{
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    table th{
      text-align: center;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-default 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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</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">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
        <form class="form-inline">
          <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="搜索">
          </div>
          <button type="submit" class="btn btn-primary">搜索</button>
            <button class="btn btn-success pull-right">添加</button>
        </form>
      <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
            <th>hobby</th>
            <th>operation</th>
        </tr>
        </thead>
          <tbody>
          <td>1</td>
          <td>mike</td>
          <td>15</td>
          <td>sing</td>
          <td>amy</td>
          <td>
              <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
              <button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span>删除</button>
          </td>
          </tbody>

          <td>1</td>
          <td>mike</td>
          <td>15</td>
          <td>sing</td>
          <td>amy</td>
          <td>
              <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
              <button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span>删除</button>
          </td>
          </tbody>

          <td>1</td>
          <td>mike</td>
          <td>15</td>
          <td>sing</td>
          <td>amy</td>
          <td>
              <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
              <button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span>删除</button>
          </td>
          </tbody>

          <td>1</td>
          <td>mike</td>
          <td>15</td>
          <td>sing</td>
          <td>amy</td>
          <td>
              <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
              <button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span>删除</button>
          </td>
          </tbody>

          <td>1</td>
          <td>mike</td>
          <td>15</td>
          <td>sing</td>
          <td>amy</td>
          <td>
              <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
              <button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span>删除</button>
          </td>
          </tbody>

          <td>1</td>
          <td>mike</td>
          <td>15</td>
          <td>sing</td>
          <td>amy</td>
          <td>
              <button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
              <button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span>删除</button>
          </td>
          </tbody>
        </table>
        <nav aria-label="Page navigation" class="pull-right">
          <ul class="pagination">
            <li>
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li><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>
</div>


</body>
</html>

 

 

凤栖梧桐123
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Bootstrap框架模板
06-23
自己收集的6个压缩包，都是基于Bootstrap框架的后台模板，希望对大家有所帮助
CSS——利用bootstrap实现搜索界面
Fancymeng的博客
09-05 1574
本篇一如既往，说了CSS的方法，本次借助bootstrap 实现。此外，还有相关的具体实现哦~
bootstraptable表头添加自定义搜索框（带文本,下拉,弹窗多选搜索）
最新发布
2401_84094908的博客
04-03 742
shadeClose: true, //开启遮罩关闭。btn: [‘确认’, ‘取消’], //按钮。title: ‘前处理工序进度’,title: ‘色号/色名’,title: ‘开卡日期’,title: ‘订单类型’,title: ‘经营方式’,title: ‘品种信息’,title: ‘配方组合’,title: ‘计划米数’title: ‘卡号’,title: ‘批号’,title: ‘客户’,title: ‘颜色’,title: ‘工序’,//初始化过滤下拉内容。
使用bootstrap制作搜索框
热门推荐
wuhawang的博客
08-16 5万+
在项目开发过程中,我们或多或少都会使用到搜索选项, 那么如何制作一个标准,好看的搜索框呢,这里推荐bootstrap自带的一个控件-input-group 这个控件在bootstrap中文网上没有说明,所以需要去看官方的文档,地址在 input-group 先简单看下对于这个控件官方的说明 Input group Easily extend form controls by adding
bootStrap 搜索框
MZ199290的博客
03-30 6765
2、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
基于bootstrap实现收缩导航条
12-03
本文实例为大家分享了bootstrap实现收缩导航条的具体代码，供大家参考，具体内容如下 效果图 贴上我的代码 <!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器...
基于bootstrap实现多个下拉框同时搜索功能
08-29
基于bootstrap实现多个下拉框同时搜索功能是指使用bootstrap框架来实现多个下拉框同时进行搜索的功能。这种功能可以应用于各种Web应用程序中，例如电子商务网站、信息查询系统等。 在bootstrap框架中，使用Select2...
利用Bootstrap实现表格复选框checkbox全选
08-31
Bootstrap相信应该不用多...这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
基于Bootstrap使用jQuery实现简单可编辑表格
11-25
editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作，其中可以设置参数，如： operatePos 用于设置放置操作的列，从0开始，-1表示以最后一列作为放置操作的列；（这里的操作包括 编辑当前行、在当前行下...
BootStrap 搜索框
EASON198392的博客
01-14 454
【代码】BootStrap 搜索框。
利用BootStrap创建搜索框--」详解
NULL
07-01 3万+
今天学了bootstrap由于官网上没有搜索框,我要做一个网站正好需要,我就自己做了一个搜索框,话不多说直接上代码 下面是jsp代码 搜索 /* 搜索框 */ function onKeyDown(event){ va
使用Bootstrap制作导航栏
m0_64962002的博客
05-18 978
3:导航栏的位置(左对齐pull-left和右对齐pull-right)1:Bootstrap框架中导航栏右两种类型，分别是。(2):标签页类型的运行结果。(3):胶囊导航栏的基本代码。(2):左对齐的运行结果截图。(4):右对齐的运行结果截图。(4):胶囊导航栏的截图。(3):右对齐的基本代码。(1):左对齐的基本代码。注意:导航栏的位置默认是左对齐。
Bootstrap输入框组---搜索框实例
gyueh的博客
03-17 3812
搜索框样式1 <div class="col-lg-2 col-md-3 col-sm-3 col-xs-4 pull-right"> <div class="input-group"> <input type="text" class="form-control" placeholder="输入搜索内容"> <span class="in...
如何使用jq实现bootstrapTable以及使用其他搜索框控制bootstrapTable中的搜索
熟悉 vue2 vue3 jquery js echarts
03-06 1184
如上图 点击查询 需要在 bootstrap-table.js中新写入的自定义搜索方法 如果不想用自带的搜索 可以点击按钮触发将搜索字段改为新写的搜索框内容。官网链接：https://f4nniu.gitee.io/bootstrap-table-home/zh-cn/getting-started/先找到js文件里面的resetSearch 方法 在下面写入新方法。
结合Django和Bootstrap开发搜索框功能（详细教程，内含源代码，Windows平台开发）
钱彬的博客
03-05 3763
环境 python3.6.1 Django 1.11.14 windows 10 编译器 VS Code 基本流程 前端使用Bootstrap构建搜索框； 搜索框输入关键词按下回车，关键词数据以表单形式发送至后台服务器； 服务器收到请求，通过路由url解析后找到对应的视图处理函数进行处理； 视图处理函数从request.get中获得关键词数据，然后通过数据库匹配查...
bootstrap+form表单实现搜索按钮的简单案例
m0_73948849的博客
12-07 898
bootstrap+form表单实现搜索按钮的简单案例
Bootstrap-table 自定义搜索--queryParams
qq_40890601的博客
07-10 1万+
页面效果如下所示： 因为插件自带的搜索没有特定的搜索列，所以搜索特定列就只能我们自己设置了 客户名称这个栏位只搜索客户名称，图纸编号只能搜索图纸编号 具体怎么实现呢？必须用到一个属性queryParams，初始化表格的时候先把toolbar设置好 我的toolbar，id为上面设置的toolbar <form class="form-inline " id="toolbar"> <input type="text" class="form-control mb-2 mr-s
基于Flask框架，使用Bootstrap设计一个可以实现前后端交互的图表
05-13
好的，我们可以使用 Flask 和 Bootstrap 来实现一个简单的图表应用。具体步骤如下： 1. 安装 Flask 和 Bootstrap 可以使用 pip 命令来安装 Flask 和 Bootstrap： ``` pip install Flask pip install Flask-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值