2016年5月31日上午（传智Bootstrap笔记（Bootstrap 布局组件输入框组））

一、Bootstrap 输入框组

　　本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

　　通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如您可以添加美元符号，或者在Twitter用户名前添加@，或者应用程序接口所需要的其他公共的元素。

向.form-control添加前缀或后缀元素的步骤如下：

  • 把前缀或后缀元素放在一个带有.input-group 的 <div> 中。
  • 接着在相同的 <div> 内，在.input-group-addon 的 <span> 内放置额外的内容。
  • 把该 <span> 放置在 <input> 元素的前面或者后面。
  • 注意：将.input-group-addon 和 <input> 元素包在.input-group 之中。
  <div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="twitterhandle">
            </div>
            <br>
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span>
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span>
            </div>
        </form>
    </div>

　　　　　　　　　　

　　您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。

 <div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group input-group-lg">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="twitterhandle">
            </div>
            <br>

            <div class="input-group input-group-sm">
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span>
            </div>
            <br>
            <div class="input-group input-group-xs">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control">
                <span class="input-group-addon">.00</span>
            </div>
        </form>
    </div>

　　　　　　　　　　　　

　　您可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：

<div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <div class="row">
                <div class="col-lg-6">
                   <div class="input-group">
                   <span class="input-group-addon">
                      <input type="checkbox">
                   </span>
                        <input type="text" class="form-control">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 --><br>
                <div class="col-lg-6">
                   <div class="input-group">
                   <span class="input-group-addon">
                      <input type="radio">
                   </span>
                   <input type="text" class="form-control">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </form>
    </div>

　　　　　　　　

　　按钮插件也可以把按钮作为输入框组的前缀或者后缀元素，这个时候就不是添加 .input-group-addon，您需要使用.input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。

<div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-danger" type="button">
                                  Go
                            </button>
                       </span>
                       <input type="text" class="form-control">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 --><br>
                <div class="col-lg-6">
                    <div class="input-group">
                       <input type="text" class="form-control">
                       <span class="input-group-btn">
                          <button class="btn btn-danger" type="button">
                              Go
                          </button>
                       </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </form>
    </div>

　　　　　　　　　　　　

　　带有下拉菜单的按钮：在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：

 <div style="padding: 100px 100px 10px;">
        <form class="bs-example bs-example-form" role="form">
            <div class="row">
                <div class="col-lg-6">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                下拉菜单
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">功能</a></li>
                                <li><a href="#">另一个功能</a></li>
                                <li><a href="#">其他</a></li>
                                <li class="divider"></li>
                                <li><a href="#">分离的链接</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <input type="text" class="form-control">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 --><br>
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                下拉菜单
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li><a href="#">功能</a></li>
                                <li><a href="#">另一个功能</a></li>
                                <li><a href="#">其他</a></li>
                                <li class="divider"></li>
                                <li><a href="#">分离的链接</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </form>
    </div>

　　　　　　　　

　　分割的下拉菜单按钮：在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能，如下面的实例所示：　　

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-danger" tabindex="-1">
                            下拉菜单
                        </button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">功能</a></li>
                            <li><a href="#">另一个功能</a></li>
                            <li><a href="#">其他</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 --><br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-danger" tabindex="-1">                            下拉菜单
                        </button>
                        <button type="button" class="btn btn-default  dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">功能</a></li>
                            <li><a href="#">另一个功能</a></li>
                            <li><a href="#">其他</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

　　　　　　　　　　　　　　　　　　　　　　　　　　

时间： 2024-08-06 04:01:16

2016年5月31日上午（传智Bootstrap笔记（Bootstrap 布局组件输入框组））的相关文章

5月31日上午学习日志

5月31日上午写了一套四级真题并纠错改正总结,复习了一部分之前背的考研词汇,听外教的java课程,用扇贝app完成英语100个四级单词的记忆.

2016年5月29日上午（传智Bootstrap（笔记一））

一.Bootstrap简介 简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集. 基于html5.css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等. 要想使用Bootstrap,需要加载jquery.js 二.Bootstrap基本模板 HTML5文档类型定义.字符集设置.移动设备优先.引入css和js文件: (1)HTML5文档类型定义.

2016年5月30日上午（传智Bootstrap笔记六（图片样式））

为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗.行高更高的文本,如下面实例所示: <body style="padding:50px;background-color:#ccc;"> <hr> <h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例.这是一个演示引导主体副本用法的实例. 这是一个演示引导主体副本用

2016年3月31日渗透学习总结

今天又新学习了三个个漏洞,一个是截断上传,一个是iis写权限漏洞,还有一个就是php的文件包含漏洞. 截断上传:学习截断上传需要搭建一个dvwa的漏洞测试平台,直接从网上下载就可以.打开dvwa的网站后,有一个uplode的一个上传,难度有三种,可以自己选择,低级的是,上传任何类型的文件都可以,服务端不会对文件进行过滤,对于这样的网站,我们可以直接上传一个php的木马,然后用菜刀连接就可以.中级难度的是,网站会对上传的文件类型进行判断,如果不符合指定的文件类型,文件就不会被上传,这个时候就要用b

2016年12月31日 星期六 --出埃及记 Exodus 21:26

"If a man hits a manservant or maidservant in the eye and destroys it, he must let the servant go free to compensate for the eye. 人若打坏了他奴仆或是婢女的一只眼,就要因他的眼放他去得以自由.

2016年7月31日 星期日 --出埃及记 Exodus 15:27

Then they came to Elim, where there were twelve springs and seventy palm trees, and they camped there near the water. 他们到了以琳,在那里有十二股水泉,七十棵棕树,他们就在那里的水边安营.

2016年5月29日上午（菜鸟Bootstrap（less））

一.快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码.

2016年10月31日 星期一 --出埃及记 Exodus 19:16

On the morning of the third day there was thunder and lightning, with a thick cloud over the mountain, and a very loud trumpet blast. Everyone in the camp trembled. 到了第三天早晨,在山上有雷轰,闪电,和密云,并且角声甚大,营中的百姓尽都发颤.

2016年5月27日上午（妙味课堂js基础-3笔记一（事件））

一.event事件 1.什么是event事件对象? 用来获取事件的详细信息:鼠标位置.键盘按键 ——例子:获取鼠标位置:clientX ——document的本质:document.childNodes[0].tagName (1)首先对于点击事件,如果我们想要在页面打开后,在页面的任何一个地方点击都会弹出来一个框,那我们应该怎么做呢? <script type="text/javascript"> window.onload=function () { document.