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

addEventListener和attachEvent二者绑定的执行函数中的this不相同

Dec 09 Javascript

js类型转换与引用类型详解(Boolean_Number_String)

Mar 07 Javascript

深入理解Javascript中this的作用域

Aug 12 Javascript

Jquery和BigFileUpload实现大文件上传及进度条显示

Jun 27 Javascript

AngularJS实现的输入框字数限制提醒功能示例

Oct 26 Javascript

在vue中添加Echarts图表的基本使用教程

Nov 22 Javascript

JS实现的缓冲运动效果示例

Apr 30 Javascript

微信小程序登录对接Django后端实现JWT方式验证登录详解

Jul 29 Javascript

微信小程序本地存储实现每日签到、连续签到功能

Oct 09 Javascript

Node使用Selenium进行前端自动化操作的代码实现

Oct 10 Javascript

Vue实现跑马灯效果

May 25 Javascript

如何构建 vue-ssr 项目的方法步骤

Aug 04 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极大的增强功能和性能

2006/10/09 PHP

php框架Phpbean说明

2008/01/10 PHP

解析php中反射的应用

2013/06/18 PHP

PHP实现删除非站内外部链接实例代码

2014/06/17 PHP

在Linux系统的服务器上隐藏PHP版本号的方法

2015/06/06 PHP

laravel框架关于搜索功能的实现

2018/03/15 PHP

PHP实现多图上传和单图上传功能

2018/05/17 PHP

PHP数据源架构模式之表入口模式实例分析

2020/01/23 PHP

PHP文件操作简单介绍及函数汇总

2020/12/11 PHP

jquery复选框CHECKBOX全选、反选

2008/08/30 Javascript

jquery中this的使用说明

2010/09/06 Javascript

js自执行函数的几种不同写法的比较

2012/08/16 Javascript

在JS中解析HTML字符串示例代码

2014/04/16 Javascript

Jquery实现Div上下移动示例

2014/04/23 Javascript

jQuery中事件对象e的事件冒泡用法示例介绍

2014/04/25 Javascript

javaScript中slice函数用法实例分析

2015/06/08 Javascript

基于JS实现导航条之调用网页助手小精灵的方法

2016/06/17 Javascript

浅析JavaScript中作用域和作用域链

2016/12/06 Javascript

JS实现快递单打印功能【推荐】

2018/06/21 Javascript

微信小程序实现自动定位功能

2018/10/31 Javascript

微信小程序使用字体图标的方法

2019/05/23 Javascript

解决vue cli使用typescript后打包巨慢的问题

2019/09/30 Javascript

使用python分析统计自己微信朋友的信息

2019/07/19 Python

Django打印出在数据库中执行的语句问题

2019/07/25 Python

解决Python计算矩阵乘向量,矩阵乘实数的一些小错误

2019/08/26 Python

使用Puppeteer爬取微信文章的实现

2020/02/11 Python

PyQt5-QDateEdit的简单使用操作

2020/07/12 Python

Python2与Python3关于字符串编码处理的差别总结

2020/09/07 Python

Html5 语法与规则简要概述

2014/07/29 HTML / CSS

一家专门经营包包的英国网站：MyBag

2019/09/08 全球购物

中科软测试工程师面试题

2012/06/16 面试题

幼儿园中班教学反思

2014/02/10 职场文书

主题党日活动总结

2014/07/08 职场文书

2015年乡镇平安建设工作总结

2015/05/13 职场文书

小学2016年第十八届推普周活动总结

2016/04/05 职场文书

Python编写可视化界面的全过程（Python+PyCharm+PyQt）

2021/05/17 Python