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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
小程序实现文字循环滚动动画
Jun 14 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 FPDF类库应用实现代码
2009/03/20 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript this用法小结
2008/12/19 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python多图片合并PDF的方法
2019/01/03 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
12月小学生校园广播稿
2014/02/04 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
书法社团活动总结
2015/05/07 职场文书
办公经费申请报告
2015/05/15 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS