编程 Javascript

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>

结果：

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery插件开发之实现google+圈子选择功能

Mar 10 Javascript

javascript常用函数归纳整理

Oct 31 Javascript

jQuery版AJAX简易封装代码

Sep 14 Javascript

通过修改360抢票的刷新频率和突破8车次限制实现方法

Jan 04 Javascript

JavaScript 用fetch 实现异步下载文件功能

Jul 21 Javascript

node.js用fs.rename强制重命名或移动文件夹的方法

Dec 27 Javascript

vue 每次渲染完页面后div的滚动条保持在最底部的方法

Mar 17 Javascript

用Vue写一个分页器的示例代码

Apr 22 Javascript

vue用递归组件写树形控件的实例代码

Jul 19 Javascript

微信小程序顶部导航栏滑动tab效果

Jan 28 Javascript

微信小程序实现获取小程序码和二维码java接口开发

Mar 29 Javascript

Vue快速实现通用表单验证功能

Dec 05 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

MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机

2021/03/02 无线电

PHP 编程请选择正确的文本编辑软件

2006/12/21 PHP

PHP用GD库生成高质量的缩略图片

2011/03/09 PHP

php表单文件iframe异步上传实例讲解

2017/07/26 PHP

抽出www.templatemonster.com的鼠标悬停加载大图模板的代码

2007/07/11 Javascript

javascript 全角转换实现代码

2009/07/17 Javascript

基于jQuery的树控件实现代码(asp.net+json)

2010/07/11 Javascript

鼠标滑上去后图片放大浮出效果的js代码

2011/05/28 Javascript

Javascript变量函数浅析

2011/09/02 Javascript

jquery插件冲突(jquery.noconflict)解决方法分享

2014/03/20 Javascript

jQuery使用removeClass方法删除元素指定Class的方法

2015/03/26 Javascript

jQuery通过Ajax返回JSON数据

2015/04/28 Javascript

浅析Bootstrap缩略图组件与警示框组件

2016/04/29 Javascript

jQuery简单实现彩色云标签效果示例

2016/08/01 Javascript

Vue.js 2.0 和 React、Augular等其他前端框架大比拼

2016/10/08 Javascript

vue.js组件之间传递数据的方法

2017/07/10 Javascript

jQuery进阶实践之利用最优雅的方式如何写ajax请求

2017/12/20 jQuery

解决Vue中mounted钩子函数获取节点高度出错问题

2018/05/18 Javascript

Vue 路由过渡动效数据获取方法

2018/07/31 Javascript

使用react render props实现倒计时的示例代码

2018/12/06 Javascript

JavaScript实现打砖块游戏

2020/02/25 Javascript

Vue 的 v-model用法实例

2020/11/23 Vue.js

在Python中使用mongoengine操作MongoDB教程

2015/04/24 Python

利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例

2017/08/08 Python

Python 普通最小二乘法(OLS)进行多项式拟合的方法

2018/12/29 Python

python 并发编程多路复用IO模型详解

2019/08/20 Python

修复iPhone的safari浏览器上submit按钮圆角bug

2012/12/24 HTML / CSS

美国一家运动专业鞋类零售商：Warehouse Shoe Sale（WSS）

2018/03/28 全球购物

ProForm英国站点：健身房和健身器材网上商店

2019/06/05 全球购物

网络公司美工设计工作个人的自我评价

2013/11/03 职场文书

岗位聘任书范文

2014/03/29 职场文书

合同协议书格式

2014/04/18 职场文书

公司总经理助理岗位职责

2014/07/09 职场文书

少先队活动总结

2014/08/29 职场文书

800字作文之大雪

2019/12/04 职场文书

Python简易开发之制作计算器

2022/04/28 Python