Web前端 — Bootstrap（6）

Bootstrap本次知识点

1.按钮组件

2.输入框

1. 按钮组件

（1）基本按钮组件

      <div class="btn-group">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>

（2）按钮工具栏

      <div class="btn-toolbar">
          <div class="btn-group">
              <button class="btn btn-default">left</button>
              <button class="btn btn-default">middle</button>
              <button class="btn btn-default">right</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">left</button>
              <button class="btn btn-default">middle</button>
              <button class="btn btn-default">right</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">更多</button>
          </div>
      </div>

（3）按钮的大小

      <div class="btn-group btn-group-lg">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>
      <div class="btn-group btn-group-sm">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>
      <div class="btn-group btn-group-xs">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <button class="btn btn-default">right</button>
      </div>

（4）嵌套

扫描二维码关注公众号，回复： 3044929 查看本文章

      <div class="btn-group">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <div class="btn-group">
             <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span></button>
             <ul class="dropdown-menu">
                  <li><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
             </ul>
          </div>
      </div>

（5）垂直的按钮组

      <div class="btn-group-vertical">
          <button class="btn btn-default">left</button>
          <button class="btn btn-default">middle</button>
          <div class="btn-group">
             <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span></button>
             <ul class="dropdown-menu">
                  <li><a href="">1</a></li>
                  <li><a href="">2</a></li>
                  <li><a href="">3</a></li>
             </ul>
          </div>
      </div>

（6）两端对齐排列的按钮组

      <div class="btn-group btn-group-justified">
          <div class="btn-group">
              <button class="btn btn-default">left</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">middle</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-default">right</button>
          </div>
      </div>
      <div class="btn-group btn-group-justified">
          <!--<div class="btn-group">-->    为了浏览器兼容问题使用btn-group包裹
              <a href="" class="btn btn-default">left</a>
          <!--</div>-->
          <!--<div class="btn-group">-->
              <a href="" class="btn btn-default">middle</a>
          <!--</div>-->
          <!--<div class="btn-group">-->
              <a href="" class="btn btn-default">right</a>
          <!--</div>-->
      </div>

（7）按钮式下拉菜单

<1>单按钮下拉菜单

      <div class="btn-group">
         <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
         <ul class="dropdown-menu">
             <li><a href="">html</a></li>
             <li><a href="">javascript</a></li>
             <li><a href="">jQuery</a></li>
         </ul>
      </div>

<2>分裂式按钮下拉菜单

         <div class="btn-group">
             <button class="btn btn-default">Default</button>
             <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="">jQuery</a></li>
             </ul>
         </div>

<3>按钮下拉菜单的大小

       <div class="btn-group">
         <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
             <ul class="dropdown-menu">
                 <li><a href="">html</a></li>
                 <li><a href="">javascript</a></li>
                 <li><a href="">jQuery</a></li>
             </ul>
       </div>

<4>向上弹出式菜单

     <div class="btn-group dropup">
         <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
             <ul class="dropdown-menu">
                 <li><a href="">html</a></li>
                 <li><a href="">javascript</a></li>
                 <li><a href="">jQuery</a></li>
             </ul>
     </div>

2.输入框

（1）基本的输入框组

      <form action="">
          <div class="input-group">
              <span class="input-group-addon">@</span>
              <input type="text" class="form-control"/>
          </div>
          <div class="input-group">
              <input type="text" class="form-control"/>
              <span class="input-group-addon">.00</span>
          </div>
          <div class="input-group">
              <span class="input-group-addon">$</span>
              <input type="text" class="form-control"/>
              <span class="input-group-addon">.00</span>
          </div>
      </form>

（2）输入框组的大小

      <form action="">
          <div class="input-group input-group-lg">
              <span class="input-group-addon">@</span>
              <input type="text" class="form-control"/>
          </div>
      </form>

（3）复选框和单选框的插件

      <form action="">
          <div class="row">
               <div class="col-md-6">
                   <div class="input-group">
                       <span class="input-group-addon">
                           <input type="checkbox"/>
                       </span>
                       <input type="text" class="form-control"/>
                   </div>
               </div>
          </div>
      </form>

（4）按钮插件

      <form action="">
          <div class="row">
              <div class="col-md-6">
                  <div class="input-group">
                      <span class="input-group-btn">
                          <button class="btn btn-default">Go</button>
                      </span>
                      <input class="form-control" type="text"/>
                  </div>
              </div>
          </div>
      </form>

（5）按钮式下拉菜单

      <form action="">
          <div class="row">
              <div class="col-md-6">
                  <div class="input-group">
                      <div class="input-group-btn">
                          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
                          <ul class="dropdown-menu">
                              <li><a href="">资讯</a></li>
                              <li><a href="">新闻</a></li>
                              <li><a href="">关于</a></li>
                          </ul>
                      </div>
                      <input class="form-control" type="text"/>
                  </div>
              </div>
          </div>
      </form>

（6）分列式按钮下拉菜单

      <form action="">
          <div class="row">
              <div class="col-md-6">
                  <div class="input-group">
                      <div class="input-group-btn">
                          <button class="btn btn-default">dropdown</button>
                          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu">
                              <li><a href="">资讯</a></li>
                              <li><a href="">新闻</a></li>
                              <li><a href="">关于</a></li>
                          </ul>
                      </div>
                      <input class="form-control" type="text"/>
                  </div>
              </div>
          </div>
      </form>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80451109

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！