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

JavaScript中的集合及效率

Jan 08 Javascript

js类式继承的具体实现方法

Dec 31 Javascript

jquery bind(click)传参让列表中每行绑定一个事件

Aug 06 Javascript

JavaScript将字符串转换为整数的方法

Apr 14 Javascript

jquery+css实现的红色线条横向二级菜单效果

Aug 22 Javascript

JS实现的自定义右键菜单实例二则

Sep 01 Javascript

JS显示日历和天气的方法

Mar 01 Javascript

ES6/JavaScript使用技巧分享

Dec 14 Javascript

快速解决vue-cli不能初始化webpack模板的问题

Mar 20 Javascript

基于rollup的组件库打包体积优化小结

Jun 18 Javascript

解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题

Sep 25 Javascript

js指定日期增加指定月份的实现方法

Dec 19 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

Drupal读取Excel并导入数据库实例

2014/03/02 PHP

ThinkPHP3.1的Widget新用法

2014/06/19 PHP

PHP使用strtotime计算两个给定日期之间天数的方法

2015/03/18 PHP

thinkPHP5框架中widget的功能与用法详解

2018/06/11 PHP

tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】

2020/05/26 PHP

类似CSDN图片切换效果脚本

2009/09/17 Javascript

javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异

2010/12/25 Javascript

javascript各浏览器中option元素的表现差异

2011/04/07 Javascript

浅析js封装和作用域

2013/07/09 Javascript

node.js中的fs.appendFile方法使用说明

2014/12/17 Javascript

js实现文本框中输入文字页面中div层同步获取文本框内容的方法

2015/03/03 Javascript

jQuery插件Tooltipster实现漂亮的工具提示

2015/04/12 Javascript

WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现

2016/01/12 Javascript

BootStrapValidator初使用教程详解

2017/02/10 Javascript

Javascript循环删除数组中元素的几种方法示例

2017/05/18 Javascript

第一个Vue插件从封装到发布

2017/11/22 Javascript

基于vue监听滚动事件实现锚点链接平滑滚动的方法

2018/01/17 Javascript

NW.js 简介与使用方法

2018/02/01 Javascript

vue弹窗消息组件的使用方法

2020/09/24 Javascript

JavaScript 下载svg图片为png格式

2018/06/21 Javascript

记录vue项目中遇到的一点小问题

2019/05/14 Javascript

复习Python中的字符串知识点

2015/04/14 Python

python的numpy模块安装不成功简单解决方法总结

2017/12/23 Python

基于Python中单例模式的几种实现方式及优化详解

2018/01/09 Python

pygame游戏之旅按钮上添加文字的方法

2018/11/21 Python

vue常用指令代码实例总结

2020/03/16 Python

销售演讲稿范文

2014/01/08 职场文书

大学英语演讲稿（中英文对照）

2014/01/14 职场文书

事业单位鉴定材料

2014/05/25 职场文书

驾驶员安全责任书范本

2014/07/24 职场文书

邹越感恩父母演讲稿

2014/08/28 职场文书

2019年干货：自我鉴定

2019/03/25 职场文书

分析mysql中一条SQL查询语句是如何执行的

2021/06/21 MySQL

灵能百分百第三季什么时候来？

2022/03/15 日漫

python区块链实现简版工作量证明

2022/05/25 Python

spring boot实现文件上传

2022/08/14 Java/Android