输入框焦点

当输入框 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. 在maven中引入本地jar包的方法

    一.第一种方式: 1.电脑安装maven 2.下载jar.例如 gj.jar 3.把jar随便放一个位置 4.在jar包目录下打开cmd输入: mvn install:install-file -Df ...

  2. C语言提高代码效率的几种方法

    一段完美的代码不仅在于找到一个给定的问题的解决方案,但在它的简单性,有效性,紧凑性和效率(内存).设计的代码比实际执行更难.因此,每一个程序员当用C语言开发时,都应该保持这些基本的东西在头脑中.本文向 ...

  3. nginx+vue实现项目动静分离

    一般的企业都会采用前后端分离的方式来开发.部署项目,这样做的好处是更好的让前后台各司其职.另外也由于nginx是一个轻量级的静态资源服务器,其高并发也是其优点之一.这样可以减轻双方服务器的压力,同时又 ...

  4. 自定义的cell上面有图片时，如果产生了重用，图片可能会错乱问题

    当被重用的cell将要显示时,会调用这个方法,这个方法最大的用武之地是当你自定义的cell上面有图片时,如果产生了重用,图片可能会错乱(当图片来自异步下载时及其明显),这时我们可以重写这个方法把内容抹 ...

  5. zh-cn、en-us、zh-tw等表示语言(文化)代码与国家地区对照表(最全的各国地区对照表)

    af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG ...

  6. Codeforces Round #547 (Div. 3) D. Colored Boots

    链接:https://codeforces.com/contest/1141/problem/D 题意: 给连个n长度的字符串. 求两个字符串相同字符对应位置的对数,并挨个打印. 字符:?可以代替任何 ...

  7. 1-24List三个子类的特点

    List的三个子类的特点 因为三个类都实现了List接口,所以里面的方法都差不多,那这三个类都有什么特点呢? ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. Vect ...

  8. CentOS 部署RabbitMQ集群

    1. 准备两台CentOS,信息如下: node1:10.0.0.123 node2:10.0.0.124 修改hostname请参照: $ hostname # 查看当前的hostname $ ho ...

  9. Github开源项目单

    以下涉及到的数据统计与 2019 年 5 月 1 日 12 点,数据来源:https://github.com/trending/java?since=monthly . 下面的内容从 Java 学习 ...

  10. android开发学习 ------- android studio 同时用svn和git 进行代码管理 出现的问题

    svn和git的工作机制:  SVN 是集中式或者有中心式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以首先要从中央服务器哪里得到最新的版本,然后干活,干完后,需要 ...