输入框焦点

当输入框 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. POJ2406【KMP-next数组】

    关于next的解释原文:点点点 //#include <bits/stdc++.h> #include<cstdio> #include<string.h> #in ...

  2. 选择Go语言的12个理由

    编者按:多核化和集群化是互联网时代的典型特征,那语言需要哪些特性来应对这些特征呢?多数语言在语法层面并不直接支持协程,而通过库的方式支持的协程的功能也并不完整,比如仅仅提供协程的创建.销毁与切换等能力 ...

  3. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:8. 委托事件

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  4. 基于IDEA采用springboot+Mybatis搭建ssm框架简单demo项目的搭建配置流程

    一.通过对比可以原始SSM搭建流程,spring boot省去了大量的配置,极大提高了开发者的效率.原始SSM框架搭建流程见博客: https://www.cnblogs.com/No2-explor ...

  5. 存储-InfluxDB

    1 TSDB influxDB是一个time series时间序列数据库. 在监控系统的开发中,大体分为采集-存储-可视化三个大类.监控指标有很显著的时间特征数据,一般采用TSDB存储. 在TSDB中 ...

  6. scrapy分布式原理

    scrapy分布式原理   关于Scrapy工作流程回顾 Scrapy单机架构 上图的架构其实就是一种单机架构,只在本机维护一个爬取队列,Scheduler进行调度,而要实现多态服务器共同爬取数据关键 ...

  7. YII报错笔记:<pre>PHP Notice &#039;yii\base\ErrorException&#039; with message &#039;Uninitialized string offset: 0&#039; in /my/test/project/iot/vendor/yiisoft/yii2/base/Model.php:778

    YII常见报错笔记 报错返回的代码如下: <pre>PHP Notice 'yii\base\ErrorException' with message 'Uninitialized str ...

  8. Metasploits之Adobe阅读器漏洞

    实验环境:Kali 2.0+Windows XP+Adobe Reader 9.3.0 类别:缓冲区溢出 描述:这个漏洞针对Adobe阅读器9.3.4之前的版本,一个名为SING表对象中一个名为uni ...

  9. asp.net mvc 中使用 iframe 加载相应的静态html页面进行显示

     <iframe src='<%=ResolveUrl("~/Content/HTML_file/Agreement.html")%>' <%@ Page ...

  10. 杂谈 什么是伪共享(false sharing)?

    问题 (1)什么是 CPU 缓存行? (2)什么是内存屏障? (3)什么是伪共享? (4)如何避免伪共享? CPU缓存架构 CPU 是计算机的心脏,所有运算和程序最终都要由它来执行. 主内存(RAM) ...