bootstrap-输入框组

<!--
    input-group             只能针对输入框,输入框组
    input-group-addon        给输入框前后添加的额外元素
    input-group-btn            添加的额外元素是按钮;
-->
<div class="container">
    <div class="row">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control"/>
        </div>
    </div>

    <!-- 额外内容里放的是checkbox / radio -->
    <div class="row" style="margin-top:10px">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">
                <input type="checkbox" />
            </span>
            <input type="text" class="form-control"/>
        </div>
    </div>
    <div class="row" style="margin-top:10px">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">
                <input type="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="#">html</a></li>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">bootstrap</a></li>
                </ul>
            </div>
            <input type="text" class="form-control"/>
        </div>
    </div>
</div>

效果:

时间: 2024-11-07 03:41:07

bootstrap-输入框组的相关文章

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap&lt;基础十六&gt; 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实

Bootstrap &lt;基础十九&gt;分页

Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提供的处理分页的 class. Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页. <ul class="pagination"> <li><a href="#">«</a><

Bootstrap&lt;基础十&gt; 响应式实用工具

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换.   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-* 隐藏 可见 隐藏 隐藏 .visible-

Bootstrap&lt;基础十四&gt; 按钮下拉菜单

使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单&

Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title> <li

bootstrap基础学习五篇

bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的

Bootstrap基础(十):响应式实用工具

Bootstrap 响应式实用工具 Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换.   超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-* 隐藏

&lt;Bootstrap&gt; 学习笔记五. 按钮组的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet&

Bootstrap3基础 input-group glyphicon 输入框组与可爱的glyphicon图标

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu