编程 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 相关文章推荐

CSS和Javascript简单复习资料

Jun 29 Javascript

基于jQuery的图片左右无缝滚动插件

May 23 Javascript

js中匿名函数的创建与调用方法分析

Dec 19 Javascript

解决ueditor jquery javascript 取值问题

Dec 30 Javascript

Bootstrap每天必学之面板

Nov 30 Javascript

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

Jan 12 Javascript

JS实现的在线调色板实例(附demo源码下载)

Mar 01 Javascript

JS实现颜色梯度与渐变效果完整实例

Dec 30 Javascript

浅谈Angular4中常用管道

Sep 27 Javascript

微信小程序项目实践之主页tab选项实现

Jul 18 Javascript

vue项目搭建以及全家桶的使用详细教程(小结)

Dec 19 Javascript

在Chrome DevTools中调试JavaScript的实现

Apr 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操作MongoDB基础教程（连接、新增、修改、删除、查询）

2014/03/25 PHP

CodeIgniter针对lighttpd服务器URL重写的方法

2015/06/10 PHP

制作个性化的WordPress登陆界面的实例教程

2016/05/21 PHP

php rmdir使用递归函数删除非空目录实例详解

2016/10/20 PHP

Yii2 如何在modules中添加验证码的方法

2017/06/19 PHP

php二维码生成以及下载实现

2017/09/28 PHP

PHP PDOStatement::getColumnMeta讲解

2019/02/01 PHP

基于jquery的气泡提示效果

2010/05/31 Javascript

JavaScript开发规范要求(规范化代码)

2010/08/16 Javascript

js 中{},[]中括号,大括号使用详解

2011/05/12 Javascript

关于JS控制代码暂停的实现方法分享

2012/10/11 Javascript

Bootstrap每天必学之轮播（Carousel）插件

2016/04/25 Javascript

Javascript+CSS3实现进度条效果

2016/10/28 Javascript

js原生之焦点图转换加定时器实例

2016/12/12 Javascript

JavaScript实现Fly Bird小游戏

2016/12/15 Javascript

jQuery实现两个select控件的互移操作

2016/12/22 Javascript

jq checkbox 的全选并ajax传参的实例

2017/04/01 Javascript

Bootstrap Table使用整理(二)

2017/06/09 Javascript

基于nodejs+express4.X实现文件下载的实例代码

2017/07/13 NodeJs

Javascript中将变量转换为字符串的三种方法

2017/09/19 Javascript

详解vue移动端日期选择组件

2018/02/22 Javascript

JS实现的排列组合算法示例

2019/07/16 Javascript

详解Vue中的基本语法和常用指令

2019/07/23 Javascript

Vue插件之滑动验证码用法详解

2020/04/05 Javascript

python生成指定尺寸缩略图的示例

2014/05/07 Python

python根据开头和结尾字符串获取中间字符串的方法

2015/03/26 Python

详谈Numpy中数组重塑、合并与拆分方法

2018/04/17 Python

用openCV和Python 实现图片对比,并标识出不同点的方式

2019/12/19 Python

Python基于Socket实现简易多人聊天室的示例代码

2020/11/29 Python

css3学习之2D转换功能详解

2016/12/23 HTML / CSS

YSL圣罗兰美妆官方旗舰店：购买YSL口红

2018/04/16 全球购物

倡议书格式

2014/04/14 职场文书

中学感恩教育活动总结

2015/05/05 职场文书

盗窃罪辩护词范文

2015/05/21 职场文书

最美劳动诗，致敬所有的劳动者！

2019/07/12 职场文书

浅谈react useEffect闭包的坑

2021/06/08 Javascript