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

1.表格

<!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.表单

<!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

<!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>

<!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>

<!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>

<!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简单表格、表单、登录页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap flask登录页面编写实例

    bootstrap flask登录页面编写实例

    本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助. Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .在一般应用或个人开发中,可以很容易的写出应用.本篇就结合bootstrap,写一个简单的login界面. 一.效果图 无图无真像,先上效果图: flask-bootstrap flask-login 二.目录结构 该代码写时采

  • require.js与bootstrap结合实现简单的页面登录和页面跳转功能

    require.js与bootstrap结合实现简单的页面登录和页面跳转功能

    小颖的这个demo其实很简单的,大家一起来先来看看页面效果图: 目录: 代码: inde.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>require.j

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

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

    1.表格 <!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&

  • JavaScript实现表格表单的随机选择和简单的随机点名

    JavaScript实现表格表单的随机选择和简单的随机点名

    目录 一.表格表单的随机选择 1.H5的布局 2.CSS布局 3.JS的布局 二.简单的随机点名 1.H5布局 2.CSS布局 3.JS布局 三.可以自己暂停的随机点名 一.表格表单的随机选择 效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局 第一步: 可以给整个表格内容设置一个内边距,里面的文字可以自己添加,这里用了英文乱码,没有任何的其他意义,只是一个展示效果. 可以给整个表格内容设置一个内边距,里面的文字可以自己添加,这里用了英文乱码,没有任何的其他意义,只是一个展示效果. 可

  • SpringSecurity 默认表单登录页展示流程源码

    SpringSecurity 默认表单登录页展示流程源码 本篇主要讲解 SpringSecurity提供的默认表单登录页 它是如何展示的的流程, 涉及 1.FilterSecurityInterceptor, 2.ExceptionTranslationFilc,xmccmc,ter , 3.DefaultLoginPageGeneratingFilter 过滤器, 并且简单介绍了 AccessDecisionManager 投票机制  1.准备工作(体验SpringSecurity默认表单认证

  • SpringBoot基于SpringSecurity表单登录和权限验证的示例

    一.简介 上篇介绍了一个自己做的管理系统,最近空闲的时间自己在继续做,把之前登录时候自定义的拦截器过滤器换成了基于SpringSecurity来做,其中遇到了很多坑,总结下,大家有遇到类似问题的话就当是为大家闭坑吧. 二.项目实现功能和成果展示 首先来看下登录界面:这是我输入的一个正确的信息,点击登录后SpringSecurity会根据你输入的用户名和密码去验证是否正确,如果正确的话就去你定义的页面,我这里定义的是查询教师信息页面.来看下代码吧. 三.准备工作(前台页面.实体类) 实体类Teac

  • symfony表单与页面实现技巧

    本文实例讲述了symfony表单与页面实现技巧.分享给大家供大家参考.具体如下: symfony开发很简洁,但是功能的数量仍然很缺乏.现在是时候进行一些askeet站点与用户之间的交互了.而HTML交互的根本--除了起链接--就是表单了. 这里我们的目标是允许用户登陆,并在主页的问题列表中进行翻阅.这对于开发而言是很快的,并且可以让我们回忆起前面的内容. 登陆表单 在测试数据中存在用户,但是程序却没有办法来进行验证.下面我们要在程序的每一个页面添加一个登陆表单.打开全局的布局文件askeet/a

  • Struts2中Action三种接收参数形式与简单的表单验证功能

    有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的Action接收参数的形式,直接在我们的Action类中添加成员变量,这样就可以完成Action接收参数的操作,具体内容详见代码展示: 这里我们以登录验证为例,进行代码展示,首先是我们的Action类: /*** * 最基本的接收参数形式 * @author jho * http://localhos

  • Spring Security 表单登录功能的实现方法

    1.简介 本文将重点介绍使用 Spring Security 登录. 本文将构建在之前简单的 Spring MVC示例 之上,因为这是设置Web应用程序和登录机制的必不可少的. 2. Maven 依赖 要将Maven依赖项添加到项目中,请参阅Spring Security with Maven 一文. 标准的 spring-security-web 和 spring-security-config 都是必需的. 3. Spring Security Java配置 我们首先创建一个扩展 WebSe

  • SpringSecurity 自定义表单登录的实现

    SpringSecurity 自定义表单登录的实现

    本篇主要讲解 在SpringSecurity中 如何 自定义表单登录 , SpringSecurity默认提供了一个表单登录,但是实际项目里肯定无法使用的,本篇就主要讲解如何自定义表单登录 1.创建SpringSecurity项目 1.1 使用IDEA 先通过IDEA 创建一个SpringBoot项目 并且依赖SpringSecurity,Web依赖 此时pom.xml会自动添加 <dependency> <groupId>org.springframework.boot</

  • Python爬虫之Selenium中frame/iframe表单嵌套页面

    Python爬虫之Selenium中frame/iframe表单嵌套页面

    在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌页面上的元素无法直接定位.这时就需要通过switch_to.frame()方法将当前定位的主体切换为frame/iframe表单的内嵌页面中. 本章中用到的关键方法如下: switch_to.frame():切换为frame/iframe表单的内嵌页面中 switch_to.parent_frame():退出内嵌页面 以ip138网站为例 f

  • BootStrap中的表单大全

    表单 基础表单 对于表单中的input.textarea.select,一般我都会加上类"form-control",它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单).并且每个元素(包括label和待输入元素)都会加上"form-group".它的样式只有一个.margin-bottom:15px. <form action=""> <div class="form-group"> &l

随机推荐