Bootstrap_Button+Input组件

07120665a058关注IP属地: 陕西

2016.12.15 17:23:37字数 222阅读 530

1、按钮

• 按钮组

• 示例

<div class="btn-group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button></div>

• 效果图

  

• 按钮工具栏

• 释义：把一组 <div class="btn-group"> 放进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件

• 示例

<div class="btn-toolbar" role="toolbar">
     <div class="btn-group">...</div>
     <div class="btn-group">...</div>
     <div class="btn-group">...</div></div>

• 效果图

  

• <a> 元素

• 释义：只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中就可以达到<a>的效果

<div class="btn-group btn-group-justified"> ...</div>

• <button> 元素

• 释义：为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中

• 示例

<div class="btn-group btn-group-justified">
      <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
      </div></div>

• 效果图

  

• 分裂式按钮下拉菜单

• 释义：分裂式按钮下拉菜单需要改变一些标记，即多一个分开的按钮

• 示例

<div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>                //分割线        <li><a href="#">Separated link</a></li>
      </ul></div>

• 效果图

  

• 向上弹出式菜单

• 释义：给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开

• 示例

<div class="btn-group dropup"> ....</div>

• 效果图

  

2、输入框

• 输入框组

• 示例

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

• 效果图

  

官方网站：