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实现的论坛常用的运行代码的效果
Jul 15 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python查看数据类型的方法
2019/10/12 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
如何编写python的daemon程序
2021/01/07 Python
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
文明班级建设方案
2014/05/15 职场文书
导师工作推荐信范文
2014/05/17 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
客房领班岗位职责
2015/02/11 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2015年教师节感言
2015/08/03 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
详解Python中*args和**kwargs的使用
2022/04/07 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS