2018-11-28(按钮以及按钮组)

bootstrap学习笔记

<div class="dropdown pull-right">//下拉列表里首先要放在一个大的dropdown里面

        <button class="btn btn-primary" data-toggle="dropdown">更多选项 <span class="caret"></span></button>

         //改下拉列表主按钮得有一个data-toggle="dropdown"用于实现下拉动作以及与列表联系起来的

        <ul class="dropdown-menu">//dropdown-menu用于与主下拉列表联系起来

          <li class=""><a href="">百度</a></li>

          <li class=""><a href="">谷歌</a></li>

          <li class=""><a href="">搜狐</a></li>

          <li class=""><a href="">360</a></li>

          <li class=""><a href="">必应</a></li>

        </ul>

<\div>




2.按钮组:
<div class="btn-group">//按钮组必须把所有按钮放入btn-group里,若要实现垂直按钮组,则改为btn-group-vertical

            <button class="btn  btn-danger">百度</button>

              <button class="btn btn-danger">百度</button>

              <div class="btn-group">//若要在按钮组里实现下拉菜单,需要放进一个btn-group里

                <div class="btn btn-danger dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"> </span></div>

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

                <li><a href="">百度</a></li>

                </ul>

              </div>

        </div>



两端对齐的按钮组嵌套下拉列表:

<div class="btn-group btn-group-justified">//两端对齐只要加入 btn-group-justified类,在里面所有按钮都要放入按钮组。

                  <div class="btn-group"><button class="btn btn-danger">lux</button></div>

                  <div class="btn-group"><button class="btn btn-danger">lux</button></div>

                  <div class="btn-group"><button class="btn btn-danger">lux</button></div>

                  <div class="btn-group"><button class="btn btn-danger">lux</button></div>

                  <div class="btn-group">

                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">lux <span class="caret"></span></button>//按钮下拉菜单与btn下拉菜单大同小异

                    <ul class="dropdown-menu">

                      <li><a href="">lux</a></li>

                      <li><a href="">lux</a></li>

                      <li><a href="">lux</a></li>

                      <li><a href="">lux</a></li>

                      <li><a href="">lux</a></li>

                    </ul>


                    </div>

          </div>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容