bootstrap 表单控件 控件状态 控件大小 help-block

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head> <body>
<div class="container"> <p class="btn-primary">表单控件</p>
<input type="text" placeholder="this is text">
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select name="" id="" multiple>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<div class="checkbox">
<label for="">
<input type="checkbox"> abc
</label>
</div>
<div class="radio">
<label for="">
<input type="radio" name="A" value="A" checked="">A
</label>
</div>
<div class="radio">
<label for="">
<input type="radio" name="A" value="B">B
</label>
</div>
<div class="checkbox-inline">
<label for="">
<input type="checkbox"> ABC
</label>
</div>
<div class="radio-inline">
<label for="">
<input type="radio"> A
</label>
</div>
<p class="btn-primary">控件状态</p>
<input type="text" value="ABC" disabled="disabled">
<input type="text" value="set class disabled is useless" class="disabled">
<input type="text" value="ABC">
<p class="btn-primary">验证提示状态</p>
<div class="form-group has-warning">
<label for="inputwarning" class="control-label">input Warning</label>
<input type="text" class="form-control" id="inputwarning">
</div>
<div class="form-group has-error">
<label for="inputerror" class="control-label">input Error</label>
<input type="text" class="form-control" id="inputerror">
</div>
<div class="form-group has-success">
<label for="inputsuccess" class="control-label">input Success</label>
<input type="text" class="form-control" id="inputsuccess">
</div>
<div class="form-group has-warning has-feedback">
<label for="inputwarning" class="control-label">input Warning</label>
<input type="text" class="form-control" id="inputwarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputerror" class="control-label">input Error</label>
<input type="text" class="form-control" id="inputerror">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<label for="inputsuccess" class="control-label">input Success</label>
<input type="text" class="form-control" id="inputsuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<p class="btn-primary">控件大小</p>
<div class="row">
<div class="col-xs-2">
<input type="text" class="input-lg form-control" placeholder='.col-xs-2'>
</div>
<div class="col-xs-3">
<input type="text" class="input-sm form-control" placeholder='.col-xs-3'>
</div>
</div>
<p class="btn-primary">.help-block</p>
<span>this is span before help-block</span>
<span class="help-block">this is help block span</span>
<span>this is span after help-block</span>
</div>
</body> </html>

bootstrap 表单控件 控件状态 控件大小 help-block的更多相关文章

  1. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  2. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  3. 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...

  4. bootstrap 表单类

    bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form&q ...

  5. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  6. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  7. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  8. 测开之路一百一十一:bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  9. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

随机推荐

  1. zepto的源代码注释(转)

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  2. 拓扑排序的经典题目 UVA1572

    紫书172的例题: 题目大意:有n种正放形,每种正方形的数量可视为无限多.已知边与边之间的结合规则,而且正方形可以任意旋转和反转,问这n中正方形是否可以拼成无限大的图案 思路:首先因为是要无穷大,所以 ...

  3. fork,exec,source

    http://alsww.blog.51cto.com/2001924/1113112 http://stackoverflow.com/questions/1127502/start-stop-da ...

  4. Keil 二进制数输入宏

    源:http://hi.baidu.com/skystalker/item/e7679cd79c6f751220e250c1?qq-pf-to=pcqq.c2c 在C语言中有十进制,十六进制,八进制; ...

  5. RS485通讯协议的应用 (转)

    源:http://blog.chinaunix.net/uid-26921272-id-3506640.html RS485缺点: RS485总线是一种常规的通信总线,它不能够做总线的自动仲裁,也就是 ...

  6. js timer

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. Ueditor的配置及使用

    Ueditor官网:http://ueditor.baidu.com/website/    (项目需要JSP版本:UTF-8版) 1.配置 <script type="text/ja ...

  8. HUST 1353 Dartboard

    构造.应该有多种构造方法.做的时候WA了好几发,怀疑做法是错的,事实上是代码写搓了.. 我是这样构造的:先从上往下左右放奇数,再从下往上左右填偶数 (一)如果n/2是偶数(以12为例) 左边列是内环, ...

  9. iOS 键盘类型UIKeyboardType

    UIKeyboardTypeDefault: UIKeyboardTypeASCIICapable: UIKeyboardTypeNumbersAndPunctuation: UIKeyboardTy ...

  10. Tomcat热部署:Maven项目一键部署到Tomcat服务器 - 支持多环境

    参考:Eclipse中的Maven项目一键部署到Tomcat服务器 - 支持多环境部署 命令 debug模式设置关联源码 eclipse --> 项目右键 --> Debug As --& ...