首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

分享Bootstrap简单表格、表单、登录页面

Posted in Javascript onAugust 04, 2017

1.表格

分享Bootstrap简单表格、表单、登录页面

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>表格</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet"> 
<script src="js/jquery-1.9.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
<h1>条纹状表格</h1> 
<table class="table table-striped"> 
  <thead> 
    <tr> 
      <th>编号</th> 
      <th>姓名</th> 
      <th>性别</th> 
      <th>年龄</th> 
      <th>地址</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
    <tr> 
      <td>1002</td> 
      <td>悟空</td> 
      <td>男</td> 
      <td>2000</td> 
      <td>水帘洞</td> 
    </tr>   <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
    <tr> 
      <td>1002</td> 
      <td>悟空</td> 
      <td>男</td> 
      <td>2000</td> 
      <td>水帘洞</td> 
    </tr>   <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
  </tbody> 
</table> 
<h1>带边框表格 鼠标悬停 紧缩表格</h1> 
<table class="table table-bordered table-hover table-condensed"> 
  <thead> 
    <tr> 
      <th>编号</th> 
      <th>姓名</th> 
      <th>性别</th> 
      <th>年龄</th> 
      <th>地址</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
    <tr> 
      <td>1002</td> 
      <td>悟空</td> 
      <td>男</td> 
      <td>2000</td> 
      <td>水帘洞</td> 
    </tr>   <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
    <tr> 
      <td>1002</td> 
      <td>悟空</td> 
      <td>男</td> 
      <td>2000</td> 
      <td>水帘洞</td> 
    </tr>   <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
  </tbody> 
</table> 
<h1>状态类</h1> 
<table class="table "> 
  <thead> 
    <tr class="active"> 
      <th>编号</th> 
      <th>姓名</th> 
      <th>性别</th> 
      <th>年龄</th> 
      <th>地址</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr class="success"> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
    <tr class="info"> 
      <td>1002</td> 
      <td>悟空</td> 
      <td>男</td> 
      <td>2000</td> 
      <td>水帘洞</td> 
    </tr>    
    <tr class="warning"> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
    <tr class="danger"> 
      <td>1002</td> 
      <td>悟空</td> 
      <td>男</td> 
      <td>2000</td> 
      <td>水帘洞</td> 
    </tr>   <tr> 
      <td>1001</td> 
      <td>八戒</td> 
      <td>男</td> 
      <td>1000</td> 
      <td>高老庄</td> 
    </tr> 
  </tbody> 
</table> 
</body> 
</html>

2.表单

分享Bootstrap简单表格、表单、登录页面

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>表单</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet"> 
<script src="js/jquery-1.9.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container"> 
<input type="text" name="" class=" form-control" placeholder="请输入"> 
<div class="form-group has-success has-feedback "> 
<label class="control-label">姓名：</label> 
<input type="text" name="" class=" form-control input-lg " placeholder="input-lg"> 
<span class="glyphicon glyphicon-ok form-control-feedback"></span> 
</div> 
<div class="form-group has-success has-feedback "> 
<label class="control-label">姓名：</label> 
<input type="text" name="" class=" form-control input-sm " placeholder="input-sm"> 
<span class="glyphicon glyphicon-ok form-control-feedback"></span> 
</div> 
<hr/> 
<h3>文本域</h3> 
<textarea class="form-control" rows="5" ></textarea> 
<h3>多选和单选框</h3> 
多选:<br/> 
<div class="checkbox"> 
  <label> 
    <input type="checkbox" value=""/> 
    看电影 
  </label> 
</div> 
<div class="checkbox"> 
  <label> 
    <input type="checkbox" value=""/> 
    看小说 
  </label> 
</div> 
<div class="checkbox"> 
  <label> 
    <input type="checkbox" value=""/> 
    玩游戏 
  </label> 
</div> 
单选:<br/> 
<div class="radio"> 
  <label> 
    <input type="radio" name="sex" value="保密"/>保密 
  </label> 
</div> 
<div class="radio"> 
  <label> 
    <input type="radio" name="sex" value="男"/>男 
  </label> 
</div> 
<div class="radio"> 
  <label> 
    <input type="radio" name="sex" value="女"/>女 
  </label> 
</div> 
<br/> 
一行显示：<br/> 
多选:<br/> 
<div class=" checkbox-inline"> 
  <label> 
    <input type="checkbox" value=""/> 
    看电影 
  </label> 
</div> 
<div class="checkbox-inline"> 
  <label> 
    <input type="checkbox" value=""/> 
    看小说 
  </label> 
</div> 
<div class="checkbox-inline"> 
  <label> 
    <input type="checkbox" value=""/> 
    玩游戏 
  </label> 
</div> 
单选:<br/> 
<div class="radio-inline"> 
  <label> 
    <input type="radio" name="sex" value="保密"/>保密 
  </label> 
</div> 
<div class="radio-inline"> 
  <label> 
    <input type="radio" name="sex" value="男"/>男 
  </label> 
</div> 
<div class="radio-inline"> 
  <label> 
    <input type="radio" name="sex" value="女"/>女 
  </label> 
</div> 
下拉列表： 
<select class="form-control"> 
  <option>请选择</option> 
  <option>技术部</option> 
  <option>研发部</option> 
  <option>后勤部</option> 
</select> 
</div> 
</body> 
</html>

登录1

分享Bootstrap简单表格、表单、登录页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jQuery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body> 
<div class="Container">
<div class="row">
  <div class="col-md-4 col-md-offset-4">
      <h1 class="page-header">用户登录</h1>
      <form role="form">
        <div class="form-group">
          <label for="userId">用户名：</label>
          <input type="text" class="form-control" placeholder="请输入账号" id="userId" name="userId">
        </div>
         <div class="form-group">
          <label for="password">密 码：</label>
          <input type="password" class="form-control" placeholder="请输入密码" id="password" name="password">
        </div>
        <div class="checkbox">
        <label>
          <input type="checkbox"/>记住密码
        </label>
        <br/>
        <input type="submit" value="登录" class="btn"/>
        </div>
      </form>
    </div>
  </div> 
</div>
</body>
</html>

分享Bootstrap简单表格、表单、登录页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
      <h1 class="page-header">用户登录</h1>
      <form class="form-inline" role="form">
        <div class="form-group">
          <div class="input-group" >
          <div class="input-group-addon">@</div>
          <input type="text" class="form-control" placeholder="请输入账号" id="userId" name="userId">
          </div>
        </div>
         <div class="form-group">
          <label for="password" class="sr-only">密 码：</label>
          <input type="password" class="form-control" placeholder="请输入密码" id="password" name="password">
        </div>
        <div class="checkbox">
        <label>
          <input type="checkbox"/>记住密码
        </label>
        <input type="submit" value="登录" class="btn"/>
        </div>
      </form>
</div>
</body>
</html>

分享Bootstrap简单表格、表单、登录页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class=" container">
<div class="row">
  <div class="col-md-6">
    <h2>用户登录</h2>
    <form class="form-horizontal" role="form">
         <div class="form-group has-success ">
            <label class="col-md-3 control-label" for="userId">账号：</label>
            <div class="col-md-6">
            <input type="text" class="form-control" placeholder="请输入账号" id="userId" name="userId">
            </div>
            <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
          </div>
            <div class="form-group has-error">
            <label class="col-md-3 control-label" for="password">密码：</label>
            <div class="col-md-6">
            <input type="password" class="form-control" placeholder="请输入密码" id="password" name="password">
            </div>
            </div>
            <div class="form-group">
            <div class="col-md-4 col-md-offset-3">
              <input type="submit" value="登录" class="btn"/>
                <input type="reset" value="重置" class="btn"/>
              </div>
            </div>
      </form>
    </div>
  </div>
</div>
</body>
</html>

分享Bootstrap简单表格、表单、登录页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class=" container">
<div class="row">
  <div class="col-md-6">
    <h2>用户登录</h2>
    <form class="form-horizontal" role="form">
         <div class="form-group">
            <label class="col-md-3 control-label" for="userId">账号：</label>
            <div class="col-md-6">
            <p class=" form-control-static">admin123456</p>
            </div>
          </div>
            <div class="form-group">
            <label class="col-md-3 control-label" for="password">密码：</label>
            <div class="col-md-6">
            <p class="form-control-static">123456</p>
            </div>
            </div>
      </form>   
    </div>
  </div>
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的分享Bootstrap简单表格、表单、登录页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

分享Bootstrap简单表格、表单、登录页面

- Author -

朝花夕拾y

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
最全正则表达式总结：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
WEEX环境搭建与入门详解
Oct 16 Javascript
原生js实现轮播图特效
May 04 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）
Aug 04 #Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
vue修改vue项目运行端口号的方法
Aug 04 #Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 #Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 #Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 #Javascript
微信小程序 五星评分的实现实例
Aug 04 #Javascript
gevent(1) Excel(4) 分区(2) 信息校验(1) Coroutine(1) greenlet(1) 正则表达式(3) 驱动模型(1) 静态压缩(1) 自动播放(1)
You might like
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
详解Vue.js分发之作用域槽
2017/06/13 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python 实现让字典的value 成为列表
2019/12/16 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
UGG雪地靴德国官网：UGG德国
2016/11/19 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
什么是JNDI的上下文？如何初始化JNDI上下文
2012/03/10 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
运动会跳远加油稿
2014/02/20 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS