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

纯js实现的论坛常用的运行代码的效果

Jul 15 Javascript

基于jquery的复制网页内容到WORD的实现代码

Feb 16 Javascript

JS是按值传递还是按引用传递

Jan 30 Javascript

jquery Deferred 快速解决异步回调的问题

Apr 05 Javascript

分分钟玩转Vue.js组件

Oct 25 Javascript

ES6 系列之 WeakMap的使用示例

Aug 06 Javascript

axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

May 02 Javascript

微信小程序如何利用getCurrentPages进行页面传值

Jul 01 Javascript

使用vue实现多规格选择实例（SKU）

Aug 23 Javascript

JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例

Nov 18 jQuery

node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例

Feb 11 Javascript

elementui的el-popover修改样式不生效的解决

Jun 30 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

使用PHPCMS搭建wap手机网站

2015/09/20 PHP

微信开发之网页授权获取用户信息(二)

2016/01/08 PHP

PHP页面输出时js设置input框的选中值

2016/09/30 PHP

laravel 实现设置时区的简单方法

2019/10/10 PHP

基于jquery的不规则矩形的排列实现代码

2012/04/16 Javascript

javascript中数组中求最大值示例代码

2013/12/18 Javascript

jQuery仿Flash上下翻动的中英文导航菜单实例

2015/03/10 Javascript

JavaScript在网页中画圆的函数arc使用方法

2015/11/13 Javascript

微信小程序之拖拽排序（代码分享）

2017/01/21 Javascript

JS实现关键词高亮显示正则匹配

2018/06/22 Javascript

vue实现PC端录音功能的实例代码

2019/06/05 Javascript

JS中FormData类实现文件上传

2020/03/27 Javascript

vue el-tree 默认展开第一个节点的实现代码

2020/05/15 Javascript

简介Python的collections模块中defaultdict类型的用法

2016/07/07 Python

解决pandas.DataFrame.fillna 填充Nan失败的问题

2018/11/06 Python

Python利用matplotlib做图中图及次坐标轴的实例

2019/07/08 Python

Python csv模块使用方法代码实例

2019/08/29 Python

python查看数据类型的方法

2019/10/12 Python

Pycharm debug调试时带参数过程解析

2020/02/03 Python

Python列表去重复项的N种方法(实例代码)

2020/05/12 Python

keras小技巧——获取某一个网络层的输出方式

2020/05/23 Python

python3+opencv 使用灰度直方图来判断图片的亮暗操作

2020/06/02 Python

如何编写python的daemon程序

2021/01/07 Python

法国隐形眼镜网站：VisionDirect.fr

2020/03/03 全球购物

String、StringBuffer、StringBuilder有区别

2015/09/18 面试题

文明班级建设方案

2014/05/15 职场文书

导师工作推荐信范文

2014/05/17 职场文书

我的中国梦演讲稿300字

2014/08/19 职场文书

客房领班岗位职责

2015/02/11 职场文书

从事会计工作年限证明

2015/06/23 职场文书

2015年教师节感言

2015/08/03 职场文书

详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法

2021/04/25 Python

详解Java实践之抽象工厂模式

2021/06/18 Java/Android

详解Python中*args和**kwargs的使用

2022/04/07 Python

SpringBoot中获取profile的方法详解

2022/04/08 Java/Android

CSS中使用grid布局实现一套模板多种布局

2022/07/15 HTML / CSS