首页
所有分类
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 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
记录一次websocket封装的过程
Nov 23 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
主持词(345) 决心书(42) 建议书(203) 竞聘书(31) 承诺书(369) 责任书(145) 活动总结(790) 广告词(105) 聘任书(31) 请假条(31)
You might like
PHP重定向的3种方式
2013/03/07 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）
2017/08/16 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python将list转为matrix的方法
2018/12/12 Python
Python列表对象实现原理详解
2019/07/01 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python socket模块方法实现详解
2019/11/05 Python
Django 自动生成api接口文档教程
2019/11/19 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
CSS3 rgb and rgba（透明色）的使用详解
2020/09/25 HTML / CSS
房屋出租协议书
2014/04/10 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
化学工程专业求职信
2014/08/10 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
《秋思》教学反思
2016/02/23 职场文书
2019年度开业庆典祝福语大全！
2019/07/05 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
python xlwt模块的使用解析
2021/04/13 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python
python三子棋游戏
2022/05/04 Python
基于Python实现nc批量转tif格式
2022/08/14 Python