[Bootstrap] component (3): bootstrap component

[Bootstrap] component (3): bootstrap component

Input box Group

Add additional element. input-group-addon

Outsourcing element. input-group> input-group-addon + form-control

<Div class = "input-group"> <span class = "input-group-addon"> additional elements </span> <input type = "text" class = "form- control "/> </div>

 

Input box group size

Control class. input-group-*:. input-group-lg/. input-group-sm

<Div class = "input-group-lg"> <span class = "input-group-addon" id = "sizing-addon1"> additional elements </span> <input type = "text" class = "form-control"> </div>

 

Add one or more additional elements

Nested single-or multiple-choice button elements in additional elements

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

 

Extra element is button

Extra button class. input-group-btn

<Div class = "input-group"> <span class = "input-group-btn"> <button class = "btn-default"> additional element buttons </button> </span> <input type = "text" class = "form-control"/> </div>

 

The additional element is the drop-down menu.

. Input-group-btn contains drop-down button menu elements (including triggers and drop-down menus)

<div class="input-group">  <div class="input-group-btn">    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></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>

 

The extra element is the split button drop-down menu.

Extra elements include split button drop-down menus (buttons, triggers, and drop-down menus)

<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"><span class="caret"></span></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>

 

Navigation

Base class. nav {padding-left/margin-bottom/list-style}

 

Tab navigation

Tab class. nav-tabs activity option class. active option add 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>

 

Capsule tag navigation. 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>

Capsule tag navigation (stacked). 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 Link

Add class. disabled to the option

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

 

Tag page with drop-down menu

Add a drop-down menu component to an option

<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 <span class="caret"></span>    </a>    <ul class="dropdown-menu">      <li>        <a href="">item1</a>        <a href="">item2</a>      </li>    </ul>  </li></ul>

 

Drop-down navigation page

Outsourcing element> {[navigation ul (base class. nav + style class. * s)> Option li (basic option role = "persentation" + drop-down option)] + [Option content]}

<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 <span class="caret"></span>      </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>