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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
Vue中computed及watch区别实例解析
Aug 01 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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php实现天干地支计算器示例
2014/03/14 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
原生js实现购物车
2020/09/23 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
巴西网上药房:onofre
2016/11/21 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
小学少先队活动方案
2014/02/18 职场文书
社区健康教育实施方案
2014/03/18 职场文书
家长寄语大全
2014/04/02 职场文书
家长学校工作方案
2014/05/07 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
小升初自荐信范文
2015/03/05 职场文书
合同补充协议书
2016/03/24 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
JavaScript实现音乐播放器
2022/08/14 Javascript