zoukankan      html  css  js  c++  java
  • 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>

    效果:

  • 相关阅读:
    C# 解决组合优化问题
    <@spring.message "index.title"/>
    服务容错处理库Polly使用
    Pycharm使用入门
    JS知识点
    design pattern
    java的NIO
    Promise
    Docker Compose + Spring Boot + Nginx + Mysql
    苹果开发者账号如何多人协作进行开发和真机调试XCode
  • 原文地址:https://www.cnblogs.com/tenWood/p/6136131.html
Copyright © 2011-2022 走看看