输入框焦点

当输入框 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. 2016四川省赛A,C【写了1w个if的水题】

    A题: #include <iostream> #include <stdio.h> #include <string.h> #include <algori ...

  2. get 和 post 请求的区别（转）

    转自 http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html http://www.nowamagic.net/librarys/ve ...

  3. Java并发编程笔记

    进程:程序的一次运行活动. 线程:程序的一个控制流程.用于执行一个任务.是cpu进行调度的最小单位. 死锁:所有的线程继续执行所需要的资源都被其他线程占用,导致所有线程都不能继续执行. 死锁的情景:1 ...

  4. 在centos7下搭建nginx环境，并配置负载均衡，最终能达到通过域名直接访问的目的

    1.关于nginx:个人理解的nginx它的主要用途就是负载均衡,当然可能还有其他一些功能可能我们不长用到,我们通过nginx可以干什么呢?为什么要引入它呢?原因是当有高并发访问服务器时,服务器可能会 ...

  5. scrapy框架中Download Middleware用法

    scrapy框架中Download Middleware用法   Downloader Middleware处理的过程主要在调度器发送requests请求的时候以及网页将response结果返回给sp ...

  6. GYM 101889F（树状数组）

    bit扫描坐标套路题,注意有重复的点,莽WA了. const int maxn = 1e5 + 5; struct node { ll B, F, D; bool operator < (con ...

  7. Hive_Hive的管理_web界面方式

    端口:9999启动方式: hive --service hwi &通过浏览器访问:http://<IP地址>:9999/hwi/ 执行启动命令后,报错,找不到hive-hwi-*. ...

  8. 关于Chrome和Opera中draw Image（）方法无法在canvas画布中绘制图片的问题

    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=d ...

  9. 详解JS作用域（一）

    一.什么是作用域 存储和访问变量,是任何一种编程语言最基本的功能之一,变量存在哪里?程序需要时如何找到它?这些问题需要一套良好的规则来规范,这套规则,就成为作用域. 二.编译原理 js通常归类为解释语 ...

  10. 使用tmodjs

    1.安装 npm install -g tmodjs 2.配置 我的模板都放在tpl文件夹中,htmls用于存放模板页面,每一个后缀名都是.html,而build用于存放编译后输出的模板js. 如果不 ...