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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
YUI模块开发原理详解
Nov 18 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
js作用域及作用域链工作引擎
Jul 07 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中try catch捕获异常实例详解
2014/11/21 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Python完全新手教程
2007/02/08 Python
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python笔记之代理模式
2019/11/20 Python
一文读懂Python 枚举
2020/08/25 Python
法制宣传教育方案
2014/05/09 职场文书
课外科技活动总结
2014/08/27 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
一文简单了解MySQL前缀索引
2022/04/03 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android