Bootstrap04

Bootstrap04概述

一.输入框组

1.左侧添加文字

            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input class="form-control" type="text" name="" id="" value="" />
            </div>

 

2.右侧添加文字

            <div class="input-group">
                <input class="form-control" type="text" name="" id="" value="" />
                <span class="input-group-addon">@qq.com</span>
            </div>

 

3.两侧添加文字

            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input class="form-control" type="text" name="" id="" value="" />
                <span class="input-group-addon">.00</span>
            </div>

 

3.左侧使用复选框+单选框(注意:实现单选框效果,需要添加name属性)

            <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox" name="" id="" value="" />
                </span>
                <input class="form-control" type="text" name="" id="" value="" />
            </div>
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="radio" name="sex" id="" value="" />
                </span>
                <input class="form-control" type="text" name="" id="" value="" />
            </div>
            <div class="input-group">
                <span class="input-group-addon">
                    <input type="radio" name="sex" id="" value="" />
                </span>
                <input class="form-control" type="text" name="" id="" value="" />
            </div>

 

4.右侧使用按钮

 

            <div class="input-group">
                <input class="form-control" type="text" name="" id="" val..ue="" />
                <div class="input-group-btn">
                    <button class="btn btn-primary">提交</button>
                </div>
            </div>

 

 

 

5.左侧使用下拉菜单

            <div class="input-group">
                <div class="input-group-btn">
                    <button class="btn btn-warning" data-toggle="dropdown">搜索
标签：12,标签,洗发水,沐浴露,label,导航,Bootstrap04	

来源： https://www.cnblogs.com/meizi-ajj/p/10446263.html