⑥bootstrap表单使用基础案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移动设备优先-->
<title>bootstrap</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.table-hover{background-color: #e29c84;}
</style>
</head>
<body>
<div class="container">
<form action="#" method="post">
<fieldset>
<legend>用户登陆</legend>
<div class="form-group">
<!--距离下一个div bottom15px-->
<label>用户名:</label>
<input type="text" class="form-control" name="name" placeholder="输入用户名" />
<!--form-control沾满容器长度-->
</div>
<div class=" form-group">
<label>密码：</label>
<input type="password" class="form-control" name="pwd" />
</div>
<div class="checkbox">
<label><input type="checkbox" />记住密码</label>
</div>
<button type="submit" class="btn btn-default">登陆</button>
</fieldset>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移动设备优先-->
<title>bootstrap</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.table-hover{background-color: #e29c84;}
</style>
</head>
<body>
<div class="container">
<form action="#" method="post" class="form-inline">
<fieldset>
<legend>用户登陆</legend>
<div class="form-group">
<!--距离下一个div bottom15px-->
<label class="sr-only">用户名:</label>
<input type="text" class="form-control" name="name" placeholder="输入用户名" />
<!--form-control沾满容器长度-->
</div>
<div class=" form-group">
<label>密码：</label>
<input type="password" class="form-control" name="pwd" />
</div>
<div class="checkbox">
<label><input type="checkbox" />记住密码</label>
</div>
<button type="submit" class="btn btn-default">登陆</button>
</fieldset>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移动设备优先-->
<title>bootstrap</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.table-hover{background-color: #e29c84;}
</style>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="from">
<!--form-horizontal水平样式为下面的格子布局铺垫就是做了一些边距-->
<div class="form-group">
<label class=" col-sm-2 control-label">用户名:</label>
<!--control-label消除间距对齐-->
<div class="col-sm-8">
<input type="text" class="form-control"/>
<!--form-control沾满全屏-->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">密码:</label>
<div class="col-sm-8">
<input type="password" class="form-control"/>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移动设备优先-->
<title>bootstrap</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.table-hover{background-color: #e29c84;}
</style>
</head>
<body>
<div class="container">
<form>
<fieldset>
<div class="radio">
<label><input type="radio" name="sex" value="M" />男</label>
</div>
<div class="checkbox">
<label><input type="checkbox" />中国</label>
</div>
<div class="checkbox">
<label><input type="checkbox" checked/>中国</label>
</div>
<div class="checkbox">
<label><input type="checkbox" />中国</label>
</div>
<div class="checkbox">
<label class="checkbox-inline"> <input type="checkbox" > 1</label>
<label class="checkbox-inline"> <input type="checkbox"> 2</label>
<label class="checkbox-inline"> <input type="checkbox" > 3</label>
</div>
<div class=" form-group has-success">
<label class="control-label">用户名 ：</label>
<input type="tel" placeholder="输入电话号" class="form-control" autofocus/>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
</fieldset>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--移动设备优先-->
<title>bootstrap</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.table-hover{background-color: #e29c84;}
</style>
</head>
<body>
<div class="container">
<form action="#" method="post">
<div class="form-group has-feedback">
<label>用户名:</label>
<input type="text" class="form-control" name="name" placeholder="输入用户名" />
<span class="glyphicon glyphicon-eye-open form-control-feedback" aria-hidden="true"></span>
</div>
<div>
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
</div>
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
<div class="form-group">
<div class="row">
<div class="col-sm-3">
<input type="tel" class="form-control" />
</div>
<div class="col-sm-6">
<input type="tel" class="form-control" />
</div>
</div>
</div>
</form>
</div>
</body>
</html>
⑥bootstrap表单使用基础案例的更多相关文章
- 第二百三十四节，Bootstrap表单和图片
Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表单 Bootstrap ...
- Bootstrap表单
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...
- bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- 基于Bootstrap表单验证
基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...
- 测开之路一百一十一：bootstrap表单
bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...
- bootstrap 表单类
bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form> 添加 role="form&q ...
随机推荐
- PHP合并两张图片（水印）
$dst_im = "http://img6.cache.netease.com/photo/0001/2016-04-15/BKMTUO8900AP0001.jpg"; $src ...
- Jmeter脚本调试——关联（正则表达式）
关联,在脚本中,是必应用到的一个设置方法,将脚本中,每次都会动态变化的特殊值进行关联.一个能正确执行的脚本,都需要进行关联(LR.jmeter). Jmeter关联: 在脚本回放过程中,客户端发出请求 ...
- Python系列之内置函数
内置函数 一.数学运算类: abs(a):求绝对值如果参数是个复数则返回复数的模. a = abs(-1) print(a) >>>1 compilex([real[, imag]] ...
- 分页查询不知你是否真正的懂和PHP的正则的应用和一些性能优化
一.不废话太多 直接进入例子. 1 问题: 有一张收藏表,里面存储的是用户和图书ID.数据量为1亿.现在要求分页获取所有用户ID(不重复),写下你的sql语句. 表结构大致如下: ...
- Weave Scope 多主机监控 - 每天5分钟玩转 Docker 容器技术（81）
除了监控容器,Weave Scope 还可以监控 Docker Host. 点击顶部 HOSTS 菜单项,地图将显示当前 host. 与容器类似,点击该 host 图标将显示详细信息. host 当前 ...
- 接口自动化测试方案PHP + mysql
接口测试在测试工作中是很常见的工作,但是在以往的接口测试工作中借助的一般是第三方插件.python开发的发送请求脚本.LR脚本.Jmeter脚本,之前也使用python开发了一套接口自动化测试系统,但 ...
- win10 uwp 通知Toast
win10通知使用Toast 可以使用win10 模板添加通知 var t = Windows.UI.Notifications.ToastTemplateType.ToastText02; 使用Ge ...
- hdu4821 String
您也可以在我的个人博客中阅读此文章:跳转 题意 一个字符串S 问其中有几个子串能满足以下条件:1.长度为m*l2.可以被分成m个l长的不同的子串问题就变成了如何快速的判断着m个子串是否存在相同的 思路 ...
- hibernate使用注解简化开发
简述 在编写hibernate的时候,需要将实体类映射到数据库中的表.通常需要一个配置文件(hibernate.cfg.xml),一个实体类(XX.Java),还有一个映射文件(XX.hbm.xml) ...
- zabbix杂文
ps:这是从我原来记录的地方直接copy的,很杂乱,不过主要我想记录当时的思路,乱就乱了...... 背景: 这是进公司的第一个正式任务(之前在测试环境熟悉),所以基本上最近一段时间都在弄这个东西,一 ...