输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：表单控件状态(焦点)</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="focus" class="control-label col-sm-2">焦点：</label>
<div class="col-sm-10">
<input type="text" id="focus" class="form-control" placeholder="获取焦点" />
</div>
</div>
</form>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：表单控件状态(焦点)的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Bootstrap之表单控件状态

    Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态.   一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...

  3. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  4. Bootstrap历练实例：表单控件状态(禁用的字段集fieldset)

    禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件. <!DOCTYPE html>& ...

  5. Bootstrap历练实例：表单控件状态(禁用)

    禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. < ...

  6. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap历练实例：导航中的表单

    Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例 ...

  8. Bootstrap历练实例：表单帮助文件

    Bootstrap表单控件可以在输入框input上有一个块级帮助文本,为了添加一个占用整个宽度的内容块,请在input后添加help-block. 实例: <!DOCTYPE html>& ...

  9. Bootstrap历练实例：表单控件大小

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

随机推荐

  1. 381. Insert Delete GetRandom O(1) - Duplicates allowed

    Design a data structure that supports all following operations in average O(1) time. Note: Duplicate ...

  2. 洛谷P2480 [SDOI2010]古代猪文（卢卡斯定理+中国剩余定理）

    传送门 好吧我数学差的好像不是一点半点…… 题目求的是$G^{\sum_{d|n}C^d_n}mod\ 999911659$ 我们可以利用费马小定理$a^{k}\equiv a^{k\ mod\ (p ...

  3. [Xcode 实际操作]八、网络与多线程-(12)使用异步Post方式查询IP地址信息

    目录:[Swift]Xcode实际操作 本文将演示如何通过Post请求,异步获取IP地址信息. 异步请求与同步请求相比,不会阻塞程序的主线程,而会建立一个新的线程. 在项目导航区,打开视图控制器的代码 ...

  4. js对象—类型和属性特性

    前言 权威指南中摘要的,工作中用不到的,重要的js基础. 三类对象两类属性 内置对象(native object) 是由ECMScript规范定义的对象或者类.例如:函数,数组,日期,正则... 宿主 ...

  5. 在指定的ChartArea中显示Series

    WinForm的Chart有Series, ChartArea,输出图表就往Serie里扔数据就可以了,很方便是吧.我原想Area和serie有上下级关系,可是我错了,Area和Serie并没有上下级 ...

  6. dbutils下载

  7. 相册选择头像或者拍照 上传头像以NSData 图片二进制格式 表单上传

    一.点击头像图片 或者按钮 在相册选择照片返回img,网络上传头像要用data表单上传 (1)上传头像属性 // 图片二进制格式 表单上传 @property (nonatomic, strong) ...

  8. django项目设置

    1 项目下的文件 用于项目设定的setting.py 用于url规则匹配的urls.py 用于创建socket对象的wsgi.py 2 urls django2.0相比1.x,在url匹配语法上有很大 ...

  9. jmeter diff测试

    1.准备接口数据(对比字段,即json数据中需要提取的key对应的值进行对比) 2.配置获取EXCEL数据 3.新建线程,并建两个http请求,分别用于请求新旧接口 4.提取需要对比的内容 5.赋值变 ...

  10. laravel配合swoole使用总结

    最近对接硬件做了两个项目,用到了swoole 第一个是门禁系统,需要远程开门.离线报警.定时开门.离线刷卡等功能 1.远程开门: 目前用cli创建个临时客户端连接服务端发送命令,服务端处理完成后客户端 ...