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

扩展String功能方法

Sep 22 Javascript

JS 树形递归实例代码

May 18 Javascript

js解析与序列化json数据(三)json的解析探讨

Feb 01 Javascript

JS通过相同的name进行表格求和代码

Aug 18 Javascript

jquery控制显示服务器生成的图片流

Aug 04 Javascript

基于 Node.js 实现前后端分离

Apr 23 Javascript

jQuery旋转插件jqueryrotate用法详解

Oct 13 Javascript

canvas 弹幕效果（实例分享）

Jan 11 Javascript

js 判断一个数字是不是2的n次方幂的实例

Nov 26 Javascript

解决layui动态加载复选框无法选中的问题

Sep 20 Javascript

react的hooks的用法详解

Oct 12 Javascript

JS + HTML 罗盘式时钟的实现

May 21 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读MYSQL中文乱码的解决方法

2006/12/17 PHP

提高PHP编程效率引入缓存机制提升性能

2010/02/15 PHP

phpmail类发送邮件函数代码

2012/02/20 PHP

php采用curl访问域名返回405 method not allowed提示的解决方法

2014/06/26 PHP

微信公众平台天气预报功能开发

2014/07/06 PHP

php session的锁和并发

2016/01/22 PHP

thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法

2018/09/07 PHP

PHP PDO和消息队列的个人理解与应用实例分析

2019/11/25 PHP

PHP7 错误处理机制修改

2021/03/09 PHP

Nigma vs Liquid BO3 第一场2.14

2021/03/10 DOTA

jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项

2020/04/04 Javascript

ajax与302响应代码测试

2013/10/23 Javascript

微信小程序开发之相册选择和拍照详解及实例代码

2017/02/22 Javascript

AngularJS前端页面操作之用户修改密码功能示例

2017/03/27 Javascript

浅谈Node 调试工具入门教程

2018/03/20 Javascript

Javascript Dom元素获取和添加详解

2019/09/24 Javascript

JS中自定义事件的使用与触发操作实例分析

2019/11/01 Javascript

5分钟快速看懂ES6中的反射与代理

2019/12/19 Javascript

vue中touch和click共存的解决方式

2020/07/28 Javascript

[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛

2014/07/08 DOTA

Python translator使用实例

2008/09/06 Python

Python解析json文件相关知识学习

2016/03/01 Python

linux环境下python中MySQLdb模块的安装方法

2017/06/16 Python

Python批量查询域名是否被注册过

2017/06/21 Python

详解python中asyncio模块

2018/03/03 Python

详解python selenium 爬取网易云音乐歌单名

2019/03/28 Python

python3.7 的新特性详解

2019/07/25 Python

python实现企业微信定时发送文本消息的示例代码

2020/11/24 Python

日语专业推荐信

2013/11/12 职场文书

计算机专业学生求职信分享

2013/12/15 职场文书

公司前台辞职报告

2014/01/19 职场文书

人力资源经理的岗位职责范本

2014/02/28 职场文书

对照检查剖析材料

2014/09/30 职场文书

财务会计实训报告

2014/11/05 职场文书

用 Python 定义 Schema 并生成 Parquet 文件详情

2021/09/25 Python

实战快速定位MySQL的慢SQL

2022/03/22 MySQL