输入框焦点

当输入框 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. Lightoj 1021【状压DP（未搞）】

    状态压缩一下,然后DP还是很容易想到,dp[i][j]表示状态为i时,模 k 为 j 的排列数的个数,然后每次对一个状态扩展,添加新的数字: 然而那个取膜没懂.....

  2. POJ3737【数学】

    高中数学题?初中吧///然后注意一下POJ的double输出用%f.......... #include <iostream> #include <stdio.h> #incl ...

  3. Unity2016 Unity3D开发VR游戏的经验

    http://z.youxiputao.com/articles/8313 在4月12日的Unite 2016大会上,暴风魔镜高级产品经理吴涛分享他用Unity3D开发VR游戏的经验,以下为分享实录: ...

  4. 三星Gear VR与Oculus Rift DK2全方位比拼

    网易数码1月6日消息,Oculus Rift DK2并不是面向消费者的产品,而三星Gear VR则进入了大众市场.虽然二者有点不同,但还是值得对比一番,看看Gear VR相比当下虚拟现实领域佼佼者Oc ...

  5. C++函数返回值与引用

    对于函数的返回值,看似简单,但并非如此,比如: int func(int a);该函数会返回一个int型,如果进行一个调用int result=func(3);会发生什么情况? 首先,func将返回值 ...

  6. 类的property特性

    目录 什么是 property特性 简单示例 property属性的两种方式 装饰器 类属性方式 property+类的封装 应用 私有属性添加getter和setter方法 使用property升级 ...

  7. UITableView以及cell属性

    在ios的UI中UITableView是个常用且强大的控件 基本使用: 1>设置代理,一般把控制器设为代理:self.tableView.delegate = self; 2>遵守代理的协 ...

  8. P1290-关灯

    描述 Description 宁智贤得到了一份有趣而高薪的工作.每天早晨她必须关掉她所在村庄的街灯.所有的街灯都被设置在一条直路的同一侧.宁智贤每晚到早晨5点钟都在晚会上,然后她开始关灯.开始时,她站 ...

  9. 2019最好用的自动化测试工具Top 10，果断收藏！

    经常有人在公众号留言或是后台问我,做自动化测试用哪个工具好,或是学哪门编程语言好呢? 这个时候总是无奈的说: 你应该学习Python 或是Java. 你应该掌握Selenium. 又或者你需要学会jm ...

  10. A - Beautiful numbers

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...