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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
vue实现通讯录功能
Jul 14 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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/10/09 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
用Python开发app后端有优势吗
2020/06/29 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
Sql面试题
2013/03/20 面试题
营业经理岗位职责
2013/11/10 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
节水倡议书范文
2014/04/15 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
学生逃课检讨书
2015/02/17 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python