zoukankan      html  css  js  c++  java
  • Bootstrap 学习笔记11 按钮和折叠插件

     复选框:

        <div class="btn-group" data-toggle="buttons">
            <label for="sex" class="btn btn-primary active">
                <input type="checkbox" name="fa" value="体育" checked>体育
            </label>
            <label for="sex" class="btn btn-primary">
                <input type="checkbox" name="fa" value="音乐">音乐
            </label>
            <label for="sex" class="btn btn-primary">
                <input type="checkbox" name="fa" value="绘画" checked>绘画
            </label>
            <label for="sex" class="btn btn-primary">
                <input type="checkbox" name="fa" value="IT" checked>IT
            </label>
        </div>

      手风琴折叠:点击第二个第一个折叠

    <!-- 手风琴折叠插件 -->
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分连接</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse">
                    <div class="panel-body">
                        第一部分内容
                    </div>
                </div>
            </div>
        
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第2部分连接</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        第2部分内容
                    </div>
                </div>
            </div>
    
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第3部分连接</a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                    <div class="panel-body">
                        第3部分内容
                    </div>
                </div>
            </div>
    
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第4部分连接</a>
                    </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse">
                    <div class="panel-body">
                        第4部分内容
                    </div>
                </div>
            </div>
        </div>

      不建议JS语法写:

  • 相关阅读:
    企业微信小程序用getImageInfo保存图片提示fail download image fail
    post提交定义传输数据格式-设置请求头content-type
    微信小程序-wxml模板页面逻辑运算
    微信小程序-页面间传参
    微信小程序-wxml标签绑定data值传参给js方法(事件传参)
    微信小程序-子组件调用父组件
    微信小程序-调用组件内方法(父组件调用子组件)
    input中number类型去掉上下箭头
    js slice 截取数组或字符串
    vue组件库小练习——目录
  • 原文地址:https://www.cnblogs.com/lixuchun/p/9167149.html
Copyright © 2011-2022 走看看