首页
所有分类
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读取RSS数据
Jan 20 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 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
404(1) mysqldump(1) xps(1) protocol(1) csgo(1) Stater(1) CAD(1) macos(1) XPathParser(1) sock(2)
You might like
php ci框架验证码实例分析
2013/06/26 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Cpy和Python的效率对比
2015/03/20 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
python实现换位加密算法的示例
2018/10/14 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python实现人机猜拳小游戏
2020/02/03 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
利用python生成照片墙的示例代码
2020/04/09 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
澳大利亚男士西服品牌：M.J.Bale
2018/02/06 全球购物
英国探险旅游专家：Explore
2018/12/20 全球购物
linux面试题参考答案（5）
2016/11/05 面试题
大学校务公开实施方案
2014/03/31 职场文书
股东协议书
2014/04/14 职场文书
实习协议书范本
2014/09/25 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
给老婆的检讨书（搞笑版）
2015/05/06 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers