bootstrap输入框组使用方法
本文实例为大家分享了bootstrap输入框组的使用方法，供大家参考，具体内容如下
<!doctype html>
<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</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<div class="container">
<div class="row">
<div class="input-group"><!--输入框组-->
<span class="input-group-addon">@</span>
<!--input-group-addon给输入框前后添加辅助的额外元素-->
<input type="text" class="form-control"/>
</div>
</div>
<!--输入框组的大小-->
<div class="row" style="margin-top:10px;">
<div class="input-group input-group-lg">
<!--input-group-lg为输入框组尺寸还有md,sm-->
<span class="input-group-addon">@</span>
<!--给输入框前后添加辅助的额外元素-->
<input type="text" class="form-control"/>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"/>
<!--输入框组添加额外元素为checkbox，还可以是radio-->
</span>
<input type="text" class="form-control"/>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default">搜索</button>
</span>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">学院课程<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li>
</ul>
</div>
<input type="text" class="form-control"/>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
主要内容：基本的输入框组,实例,输入框组的大小,实例,复选框和单选插件,实例,按钮插件,实例,带有下拉菜单的按钮,实例,分割的下拉菜单按钮,实例本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。 向 .form
-
本文向大家介绍Bootstrap输入框组件使用详解，包括了Bootstrap输入框组件使用详解的使用技巧和注意事项，需要的朋友参考一下 Bootstrap输入框组件的使用方法，具体内容如下 .input-group——设置div为输入框组； .input-group-lg、.input-group-sm、.input-group-xs——改变输入框组的尺寸； .input-group-addon—
-
本文向大家介绍Vue数字输入框组件的使用方法，包括了Vue数字输入框组件的使用方法的使用技巧和注意事项，需要的朋友参考一下 最近在通过《Vue.js实战》系统学习Vue，虽然在项目中已多次使用Vue进行开发，但是对于一些非常基础性的知识点还不是很了解，因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。 源代码：数字输入框组件 项目整体结构 ├── src 项目代码 │ ├── common
-
本文向大家介绍学习使用Bootstrap输入框、导航、分页等常用组件，包括了学习使用Bootstrap输入框、导航、分页等常用组件的使用技巧和注意事项，需要的朋友参考一下 Bootstrap输入框和导航组件 一.下拉菜单 下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。 按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置datatoggle=”dropdow
-
通过在一个文本输入框<input>的任一侧添加文本、按钮以及按钮组，很容易扩展表单控件。 基本示例 把一个附加内容或按钮放在输入框的任一侧。你可以把它们同时放在输入框的两侧。我们不支持在同一侧放多个附加内容，同样也不支持多个表单控件放在一个输入框组中。 <div class="input-group"> <span class="input-group-addon" id="basic-ad
-
本文向大家介绍Vue.js数字输入框组件使用方法详解，包括了Vue.js数字输入框组件使用方法详解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue.js数字输入框组件的具体实现代码，供大家参考，具体内容如下 效果 入口页 index.html 数字输入框组件 input-number.js 根实例 更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。 关于vue.j