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

setTimeout和setInterval的浏览器兼容性分析

Feb 27 Javascript

锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

Mar 24 Javascript

开发中可能会用到的jQuery小技巧

Mar 07 Javascript

JS实现黑色大气的二级导航菜单效果

Sep 18 Javascript

Bootstrap每天必学之日期控制

Mar 07 Javascript

详解JavaScript模块化开发

Dec 04 Javascript

快速掌握jquery分页插件jqPaginator的使用方法

Aug 09 jQuery

atom-design(Vue.js移动端组件库)手势组件使用教程

May 16 Javascript

json数据格式常见操作示例

Jun 13 Javascript

解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题

Sep 03 Javascript

Node绑定全局TraceID的实现方法

Nov 14 Javascript

Javascript 类型转换、封闭函数及常见内置对象操作示例

Nov 15 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