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>

结果:

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

Javascript 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
js微信分享API
Oct 11 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
newxtree.js代码
2007/03/13 Javascript
javascript 常用方法总结
2009/06/03 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
Javascript的比较汇总
2016/07/25 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python编程实现归并排序
2017/04/14 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
计算机专业大学生的自我评价
2013/11/14 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
投标售后服务承诺书
2015/04/29 职场文书
正规借条模板
2015/05/26 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android