编程 Javascript

Bootstrap输入框组件简单实现代码

Posted in Javascript onMarch 06, 2017

Bootstrap输入框组件的学习代码，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- span的位置决定前后 -->
<!-- input-group-addon\input-group\form-control缺一不可 -->

<div class="input-group">
<!-- 前面 -->
<span class="input-group-addon">@
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br/>

<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">@
</span>
</div>
<br/>
<!-- 大号 -->
<div class="input-group input-group-lg">
<span class="input-group-addon">@
</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">qq
</span>
</div>
<br/>

<!-- form表单 form-control的效果-->
<form action="" method="post" role="form">
<div class="form-group">
<label for="username">username:</label>
<input class="form-control" id="username" name="username" type="text"><br>
</div>
<div class="form-group">
<label>password:</label>
<input class="form-control" name="password" type="text"><br>
</div>
<input type="submit" value="submit"><input type="reset" value="reset">
</form>

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

结果：

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 通过事件委派一次绑定多种事件，以减少事件冗余

Jun 30 Javascript

jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

Sep 22 Javascript

Javascript学习笔记之函数篇（二） : this 的工作机制

Jun 24 Javascript

JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

Oct 08 Javascript

jQuery validate插件submitHandler提交导致死循环解决方法

Jan 21 Javascript

js一维数组、多维数组和对象的混合使用方法

Apr 03 Javascript

基于jquery实现ajax无刷新评论

Aug 19 Javascript

浅谈jquery点击label触发2次的问题

Jun 12 Javascript

jQuery实现左侧导航模块的显示与隐藏效果

Jul 04 Javascript

jQuery的事件预绑定

Dec 05 Javascript

详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

Oct 26 Javascript

js序列化和反序列化的使用讲解

Jan 19 Javascript

原生JS实现圣旨卷轴展开效果

Mar 06 #Javascript

js中setTimeout的妙用--防止循环超时

Mar 06 #Javascript

Bootstrap表单简单实现代码

Mar 06 #Javascript

微信小程序scroll-view实现横向滚动和上拉加载示例

Mar 06 #Javascript

Js自动截取字符串长度,添加省略号(……)的实现方法

Mar 06 #Javascript

Bootstrap显示与隐藏简单实现代码

Mar 06 #Javascript

jQuery时间验证和转换为标准格式的时间格式

Mar 06 #Javascript

You might like

php字符串截取问题

2006/11/28 PHP

php中取得文件的后缀名？

2012/02/20 PHP

解析thinkphp中的导入文件标签

2013/06/20 PHP

PHP实现网页内容html标签补全和过滤的方法小结【2种方法】

2017/04/27 PHP

php如何把表单内容提交到数据库

2019/07/08 PHP

PHP pthreads v3下worker和pool的使用方法示例

2020/02/21 PHP

php7 图形用户界面GUI 开发示例

2020/02/22 PHP

YUI 读码日记之 YAHOO.lang.is*

2008/03/22 Javascript

Javascript下判断是否为闰年的Datetime包

2010/10/26 Javascript

HTML颜色选择器实现代码

2010/11/23 Javascript

javascript中文本框中输入法切换的问题

2013/12/10 Javascript

js实现iframe自动自适应高度的方法

2015/02/17 Javascript

浅谈Javascript线程及定时机制

2015/07/02 Javascript

浅析Javascript中bind()方法的使用与实现

2016/05/30 Javascript

javascript浏览器用户代理检测脚本实现方法

2017/10/27 Javascript

JS实现简单省市二级联动

2019/11/27 Javascript

精读《Vue3.0 Function API》

2020/05/20 Javascript

python在Windows下安装setuptools(easy_install工具)步骤详解

2016/07/01 Python

Python实现随机选择元素功能

2017/09/14 Python

实时获取Python的print输出流方法

2019/01/07 Python

浅谈Python程序的错误:变量未定义

2020/06/02 Python

使用CSS3的font-face字体嵌入样式的方法讲解

2016/05/13 HTML / CSS

CSS3实现文本垂直排列的方法

2018/07/10 HTML / CSS

印度尼西亚最大和最全面的网络商城：Blibli.com

2017/10/04 全球购物

幼儿园家长评语

2014/02/10 职场文书

教师节活动主持词

2014/04/02 职场文书

党员干部群众路线个人整改措施

2014/09/18 职场文书

银行反四风对照检查材料

2014/09/29 职场文书

2014年测量员工作总结

2014/12/12 职场文书

小学生通知书评语

2014/12/31 职场文书

客房领班岗位职责

2015/02/11 职场文书

小学数学教师研修日志

2015/11/13 职场文书

交通安全学习心得体会

2016/01/18 职场文书

检讨书之工作不认真

2019/08/14 职场文书

原生JS封装vue Tab切换效果

2021/04/28 Vue.js

Python测试框架pytest高阶用法全面详解

2022/06/01 Python