bootstrap第三天

一、输入框组

         在输入框的任意一侧或同时添加额外元素或按钮，并且还可以改变整体的尺寸（lg等），只支持<input>标签，另外输入框组中的工具提示和弹出框需要特别的设置：为.input-group中所包含的元素应用工具提示（tooltip）或（popover弹出框）时，必须设置container:'body'参数，为的是避免副作用；不要和其他组件混合使用：不要和表单组或栅格列类直接和输入框组混合使用，而是将输入框组嵌套到表单组或栅格的相关元素的内部

代码如下：

       <div class="input-group input-group-lg">

            <span class="input-group-addon">@</span>

            <input type="text" class="form-control" placeholder="Username">

        </div>

        <hr>

        <div class="input-group">

            <input type="text" class="form-control">

            <span class="input-group-addon">0.0</span>

        </div>

        <hr>

        <div class="input-group">

            <span class="input-group-addon">$&l
4000
t;/span>

            <input type="text" class="form-control">

            <span class="input-group-addon">0.0</span>

        </div>

二、一些表单的简单样式

       <form role="form">

            <div class="form-group">

                <label for="exampleInputEmail1">Email address</label>

                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

            </div>

            <div class="form-group">

                <label for="exampleInputPassword">password</label>

                <input type="password" class="form-control" id="examplePassword" placeholder="enter password">

            </div>

            <div class="form-group">

                <label for="exampleInputFile">file</label>

                <input type="file" class="form-control" id="exampleInputFile" placeholder="enter file">

            </div>

            <div class="checkbox">

                <label>

                    <input type="checkbox">check me out

                </label>

            </div>

            <button type="submit" class="btn btn-default">submit</button>

        </form>

三、分列式按钮下拉菜单

       最外层是一个btn-group的div里面包括一个<button>和一个按钮下拉菜单

代码如下：

       <div class="btn-group">

        <button type="button" class="btn btn-danger">action</button>

        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">

            <span class="caret"></span>

            <span class="sr-only">toggle dropdown</span><!--sr-only表示隐藏不管什么元素添加了这个东西都会被隐藏起来-->

        </button>

        <ul class="dropdown-menu" role="menu">

            <li><a href="#">action</a></li>

            <li><a href="#">another action</a></li>

            <li><a href="#">something else</a></li>

        </ul>

    </div>

四、向上弹出式菜单

       给父元素添加.dropdown类就能使出发的下拉菜单朝上方打开

代码如下：

       <div class="btn-group dropup">

        <button type="button" class="btn btn-success">Dropup</button>

        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">

            <span class="caret"></span>

            <span class="sr-only">toggle dropdown</span>

        </button>

        <ul class="dropdown-menu"role="menu">

            <li><a href="#">number one</a></li>

            <li><a href="#">number two</a></li>

            <li><a href="#">number three</a></li>

        </ul>

    </div>

五、作为额外元素的多选框或单选框

       可以将多选框或单选框作为额外的元素添加到输入框组中

代码如下：

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

        </div>

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

        </div>

    </div>