美文网首页Web前端之路
Bootstrap组件 - 输入框组

Bootstrap组件 - 输入框组

作者: 蝴蝶结199007 | 来源:发表于2017-06-14 17:11 被阅读206次

    知识点

    通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon.input-group-btn 类,可以给 .form-control 的前面或后面添加额外的元素。

    Tips:这里请避免使用 <select> 元素,因为 WebKit 浏览器不能完全绘制它的样式;
    避免使用 <textarea> 元素,由于它们的 rows 属性在某些情况下不被支持;
    不要将表单组或栅格列(column)类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。

    .form-control 添加前缀或后缀元素的步骤如下:
    · 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
    · 接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
    · 把该 <span> 放置在 <input> 元素的前面或者后面。

    基本实例
    在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
    我们不支持在输入框的单独一侧添加多个额外元素(.input-group-addon 或 .input-group-btn)。
    我们不支持在单个输入框组中添加多个表单控件。

        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <span class="input-group-addon">.00</span>
        </div>
    

    尺寸
    .input-group 添加相应的尺寸类:
    .input-group-lg
    .input-group-sm
    .input-group-xs


    实践

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="Resource-type" content="Document"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>组件-输入框组</title>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <style>
            <!--
            .line{border-top:1px solid #afd9ee;margin:20px 0;}
            -->
        </style>
    </head>
    <body>
    <div class="container">
        <!--基本的输入框组-->
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <span class="input-group-addon">.00</span>
        </div>
        <div class="line"></div>
        <!--做一个邮箱地址的组合-->
        <div class="input-group">
            <span class="input-group-addon">Email</span>
            <input type="text" value="" name="" placeholder="邮箱地址" class="form-control" aria-label=""/>
            <span class="input-group-addon">@</span>
            <div class="input-group-btn">
                <button type="button" value="" name="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    163.com
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">162.com</a></li>
                    <li><a href="#">qq.com</a></li>
                </ul>
            </div>
        </div>
    
    </div>
    
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:Bootstrap组件 - 输入框组

        本文链接:https://www.haomeiwen.com/subject/iaasqxtx.html