[Bootstrap]组件(三)

输入框组

补给加额外元素.input-group-addon

外包元素.input-group>input-group-addon+form-control

<div class="input-group">
  额外元素
  <input type="text" class="form-control"/>
</div>

 

输入框组尺寸

控制类.input-group-*: .input-group-lg/.input-group-sm

<div class="input-group input-group-lg">
  额外元素
  <input type="text" class="form-control">
</div>

 

额外元素添加单选或多选

以附加元素被嵌套单选或多选择按钮元素

<div class="input-group">

    <input type="radio" />

  <input type="text" class="form-control" />
</div>

 

外加元素也按钮

额外按钮类.input-group-btn

<div class="input-group">

     <button class="btn btn-default">额外元素按钮</button>

  <input type="text"class="form-control" />
</div>

 

额外元素也下拉按钮菜单

.input-group-btn包含下拉仍钮菜单元素(包括触发器和下拉菜单)

<div class="input-group">
  <div class="input-group-btn">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button </button>
    <ul class="dropdown-menu">
      <li><a href="">item1</a></li>
      <li><a href="">item2</a></li>
    </ul>
  </div>
  <input type="text" class="form-control" />
</div>

 

外加元素呢分裂式按钮下拉菜单

外加元素包含分裂式按钮下拉菜单(按钮,触发器和下拉菜单)

<div class="input-group">
  <div class="input-group-btn">
    <button class="btn btn-default dropdown-toggle">button</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
    <ul class="dropdown-menu">
     <li><a href="">item1</a></li>
     <li><a href="">item2</a></li>
     </ul>
  </div>
  <input type="text" class="form-control" />
</div>

 

导航

基类.nav  {padding-left/margin-bottom/list-style}

 

签页导航

标签页类.nav-tabs  活动选项类.active 选项添加role=”presentation”

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#home">Home</a></li>
  <li role="presentation"><a href="#profile">Profile</a></li>
  <li role="presentation"><a href="#messages">Messages</a></li>
</ul>

 

胶囊式标签导航.nav-pills

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#home">Home</a></li>
  <li role="presentation"><a href="#profile">Profile</a></li>
  <li role="presentation"><a href="#messages">Messages</a></li>
</ul>

胶囊式标签导航(堆叠状).nav-stacked

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#home">Home</a></li>
  <li role="presentation"><a href="#profile">Profile</a></li>
  <li role="presentation"><a href="#messages">Messages</a></li>
</ul>

 

剥夺的链接

 对选择添加类.disabled

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class="disabled"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

 

带下拉菜单的价签页面

每当有一个挑选中补充加下拉菜单组件

<ul class="nav nav-*">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation" class="dropdown">
    <a href="" class="dropdown-toggle" data-toggle="dropdown">
      Messages 
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="">item1</a>
        <a href="">item2</a>
      </li>
    </ul>
  </li>
</ul>

 

下拉导航页面

外包元素>{[导航ul(基类.nav+样式类.*s)>选项li(基本挑role=”persentation”+下拉选项)]+[择对应内容]}

<div>
  <ul class="nav nav-*s" role="tablist">
    <li role="presentation" class="active"><a href="#item1" data-toggle="*">item1</a></li>
    <li role="presentation"><a href="#item2" data-toggle="*">item2</a></li>
    <li role="presentation"><a href="#item3" data-toggle="*">item3</a></li>
    <li role="presentation" class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          item4 
      </a>
      <ul class="dropdown-menu">
          <li><a href="#item4-1" data-toggle="*">item4-1</a></li>
          <li><a href="#item4-2" data-toggle="*">item4-2</a></li>
          <li><a href="#item4-3" data-toggle="*">item4-3</a></li>
        </ul>
      </li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="item1">item1-content</div>
    <div role="tabpanel" class="tab-pane" id="item2">item2-content</div>
    <div role="tabpanel" class="tab-pane" id="item3">item3-content</div>
    <div role="tabpanel" class="tab-pane" id="item4-1">item4-1-content</div>
    <div role="tabpanel" class="tab-pane" id="item4-2">item4-2-content</div>
    <div role="tabpanel" class="tab-pane" id="item4-3">item4-3-content</div>
  </div>
</div>

 

相关文章