分享Bootstrap简单表格、表单、登录页面
作者：朝花夕拾y 发布时间：2024-04-10 13:50:42
标签：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简单表格、表单、登录页面网站的支持！
来源：http://blog.csdn.net/yxm121404121/article/details/76671716
0
投稿猜你喜欢
本文实例为大家分享了Python实现k-means算法的具体代码，供大家参考，具体内容如下这也是周志华《机器学习》的习题9.4。 数据集是西- 布局管理就是管理图形窗口中各个部件的位置和排列。图形窗口中的大量部件也需要通过布局管理，对部件进行整理分组、排列定位，才能使界面整齐有序、美
- 目录前言查询使用场景案例时间区间查询查询日期今天时间比较数据常用的周期时间查询mysql日期时间函数1 得当前日期+时间（date + ti
- 首先说明，Supervisor 只能安装在 Python 2.x 环境中！但是基本上所有的 Linux 都同时预装了 Python 2.x
- 写个小教程，以期能让大家对jQuery有所了解，甚至喜欢上它（请不要怪我）。不废话，先说明我们的目的。我们知道，当代浏览器（modern b
- 什么是PromisePromise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，
- Perl对文件的操作，跟其它的语言类似，无非也就是打开，读与写的操作。1. 打开文件#! c:/perl/bin/perl -w use u
- 本文实例讲述了flask框架路由常用定义方式。分享给大家供大家参考，具体如下：路由的各种定义方式请求方式限定使用 methods 参数指定可
- 前言本文总结了mysql中DCL，常用的一些权限控制，后续使用到其他会继续补充。一、用户控制管理创建用户create user '用
- 一、python读取和写入文件内容任务：在cmd默认登陆目录中建立一个命名为test.txt的文件并写入内容“welco
- 可以说这个功能，在我理解了前面的“贪吃蛇”之后，实在是与刚开始想象的难度差了好多，当然是这种方式有取巧之嫌，终归是实现了功能，我们来进行分析
- PDOStatement::columnCountPDOStatement::columnCount — 返回结果集中的列数。(PHP 5
- IE测试通过，FF有点小BUGCls_Leibie.asp代码如下:<％ '数据库字段为类属性，添加、删除、修改、操
- 本文是一篇关于《Effective Python》书中一节的学习笔记，记录了示例代码和思路。如果函数要产生一系列结果，那么最简单的做法就是把
- 大家在安装程序或下载文件时，通常都能看到进度条，提示你当前任务的进度。其实，在python中实现这个功能很简单，下面是具体代码。在实际应用中
- 相信不少人，写代码忘我的时候，都会忘记层级之间的缩进，导致代码，看着非常不清晰，这个时候，你是否还在手动一点点缩进，这个时候，我们需要利用编
- 接收邮件import poplib,pdb,email,re,timefrom email import headerPOP_ADDR =
- 我们知道，session是一种会话技术，用来实现跨脚本共享数据或者检测跟踪用户状态。session的工作原理（1）当一个session第一次
- 本文效果图：🌻正文注意：我们介绍一下本次开发使用的是uniapp，本次分享内容的搜索框为禁止输入搜索框，点击跳转专属搜索页面。🍉1、查阅官网
- 选择最实用来谈一下首先，你要慎重选择你就业的城市。这点是目前多数人都忽略的重要因素。无论你的设计思路和发展方向都要依托你所在城市来作为载体。
