Bootstrap学习笔记03

第三部分：BootStrap组件

第一节：Glyphicons  字体图标

<bodystyle="padding:20px">

<divclass="btn-toolbar"role="toolbar">

  <divclass="btn-group">

    <buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-align-left"></span><spanclass="sr-only">左对齐</span></button>

    <buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-align-center"></span><spanclass="sr-only">中间对齐</span></button>

    <buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-align-right"></span><spanclass="sr-only">右对齐</span></button>

    <buttontype="button"class="btn btn-default"><spanclass="glyphicon glyphicon-align-justify"></span><spanclass="sr-only">两端对齐</span></button>

  </div>

</div>

<hr/>

<divclass="btn-toolbar"role="toolbar">

  <buttontype="button"class="btn btn-default btn-lg"><spanclass="glyphicon glyphicon-star"></span> Star</button>

  <buttontype="button"class="btn btn-default"><spanclass="glyphiconglyphicon-star"></span> Star</button>

  <buttontype="button"class="btn btn-default btn-sm"><spanclass="glyphicon glyphicon-star"></span> Star</button>

  <buttontype="button"class="btn btn-default btn-xs"><spanclass="glyphicon glyphicon-star"></span> Star</button>

</div>

</body>

第二节：下拉菜单组件

1.基本的下拉菜单组件

<bodystyle="padding:20px">

<divclass="dropdown">

  <buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">

    Dropdown

    <spanclass="caret"></span>

  </button>

  <ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu1">

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Action</a></li>

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Another action</a></li>

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Something else here</a></li>

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Separated link</a></li>

  </ul>

</div>

</body>

 

2.对齐

 

<bodystyle="padding:20px">

<divclass="dropdown"style="width:250px">

  <buttonclass="btnbtn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">

    Dropdown

    <spanclass="caret"></span>

  </button>

  <ulclass="dropdown-menudropdown-menu-right"role="menu"aria-labelledby="dropdownMenu1">

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Action</a></li>

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Another action</a></li>

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Something else here</a></li>

    <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Separated link</a></li>

  </ul>

</div>

</body>

 

 

3.标题

 

<bodystyle="padding:20px">

<divclass="dropdown">

  <buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">

    Dropdown

    <spanclass="caret"></span>

  </button>

  <ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu2">

     <lirole="presentation"class="dropdown-header">Dropdown header</li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Action</a></li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Another action</a></li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Something else here</a></li>

     <lirole="presentation"class="dropdown-header">Dropdown header</li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Separated link</a></li>

   </ul>

</div>

</body>

 

 

1.  分割线

 

 

<bodystyle="padding:20px">

<divclass="dropdown"style="width:250px">

  <buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">

    Dropdown

    <spanclass="caret"></span>

  </button>

  <ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenuDivider">

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Action</a></li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Another action</a></li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Something else here</a></li>

     <lirole="presentation"class="divider"></li>

     <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Separated link</a></li>

   </ul>

</div>

</body>

 

2.  禁用的菜单项

 

<bodystyle="padding:20px">

<divclass="dropdown"style="width:250px">

  <buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">

    Dropdown

    <spanclass="caret"></span>

  </button>

  <ulclass="dropdown-menu"role="menu"aria-labelledby="dropdownMenu3">

      <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Regular link</a></li>

      <lirole="presentation"class="disabled"><arole="menuitem"tabindex="-1"href="#">Disabled link</a></li>

      <lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Another link</a></li>

    </ul>

</div>

</body>

第三节：按钮组组件

1.  基本实例

 

<bodystyle="padding:20px">

<divclass="btn-group">

  <buttontype="button"class="btnbtn-default">Left</button>

  <buttontype="button"class="btnbtn-default">Middle</button>

  <buttontype="button"class="btnbtn-default">Right</button>

</div>

</body>

 

 

2.  按钮工具栏

 

<bodystyle="padding:20px">

<divclass="btn-toolbar"role="toolbar"style="margin:0;">

  <divclass="btn-group">

    <buttontype="button"class="btnbtn-default">1</button>

    <buttontype="button"class="btnbtn-default">2</button>

    <buttontype="button"class="btnbtn-default">3</button>

    <buttontype="button"class="btnbtn-default">4</button>

  </div>

  <divclass="btn-group">

    <buttontype="button"class="btnbtn-default">5</button>

    <buttontype="button"class="btnbtn-default">6</button>

    <buttontype="button"class="btnbtn-default">7</button>

  </div>

  <divclass="btn-group">

    <buttontype="button"class="btnbtn-default">8</button>

  </div>

</div>

</body>

 

3.  尺寸

 

<bodystyle="padding:20px">

<div>

  <divclass="btn-toolbar"role="toolbar">

    <divclass="btn-groupbtn-group-lg">

      <buttontype="button"class="btn btn-default">Left</button>

      <buttontype="button"class="btnbtn-default">Middle</button>

      <buttontype="button"class="btnbtn-default">Right</button>

    </div>

  </div>

  <hr/>

  <divclass="btn-toolbar"role="toolbar">

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-default">Left</button>

      <buttontype="button"class="btnbtn-default">Middle</button>

      <buttontype="button"class="btnbtn-default">Right</button>

    </div>

  </div>

  <hr/>

  <divclass="btn-toolbar"role="toolbar">

    <divclass="btn-groupbtn-group-sm">

      <buttontype="button"class="btnbtn-default">Left</button>

      <buttontype="button"class="btnbtn-default">Middle</button>

      <buttontype="button"class="btnbtn-default">Right</button>

    </div>

  </div>

  <hr/>

  <divclass="btn-toolbar"role="toolbar">

    <divclass="btn-group btn-group-xs">

      <buttontype="button"class="btnbtn-default">Left</button>

      <buttontype="button"class="btnbtn-default">Middle</button>

      <buttontype="button"class="btnbtn-default">Right</button>

    </div>

  </div>

</div>

</body>

 

 

 

4.  嵌套

 

<bodystyle="padding:20px">

<divclass="btn-group">

  <buttontype="button"class="btnbtn-default">1</button>

  <buttontype="button"class="btnbtn-default">2</button>

  <divclass="btn-group">

    <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">

      Dropdown

      <spanclass="caret"></span>

    </button>

    <ulclass="dropdown-menu"role="menu">

      <li><ahref="#">Dropdown link</a></li>

      <li><ahref="#">Dropdown link</a></li>

    </ul>

  </div>

</div>

</body>

5.  垂直排列

 

<bodystyle="padding:20px">

<divclass="btn-group-vertical">

  <buttontype="button"class="btnbtn-default">Button</button>

  <buttontype="button"class="btnbtn-default">Button</button>

  <divclass="btn-group">

    <buttonid="btnGroupVerticalDrop1"type="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown"aria-expanded="false">

      Dropdown

      <spanclass="caret"></span>

    </button>

    <ulclass="dropdown-menu"role="menu"aria-labelledby="btnGroupVerticalDrop1">

      <li><ahref="#">Dropdown link</a></li>

      <li><ahref="#">Dropdown link</a></li>

    </ul>

  </div>

  <buttontype="button"class="btnbtn-default">Button</button>

  <buttontype="button"class="btnbtn-default">Button</button>

  <divclass="btn-group">

    <buttonid="btnGroupVerticalDrop2"type="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">

      Dropdown

      <spanclass="caret"></span>

    </button>

    <ulclass="dropdown-menu"role="menu"aria-labelledby="btnGroupVerticalDrop2">

      <li><ahref="#">Dropdown link</a></li>

      <li><ahref="#">Dropdown link</a></li>

    </ul>

  </div>

  <divclass="btn-group">

    <buttonid="btnGroupVerticalDrop3"type="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">

      Dropdown

      <spanclass="caret"></span>

    </button>

    <ulclass="dropdown-menu"role="menu"aria-labelledby="btnGroupVerticalDrop3">

      <li><ahref="#">Dropdown link</a></li>

      <li><ahref="#">Dropdown link</a></li>

    </ul>

  </div>

  <divclass="btn-group">

    <buttonid="btnGroupVerticalDrop4"type="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">

      Dropdown

      <spanclass="caret"></span>

    </button>

    <ulclass="dropdown-menu"role="menu"aria-labelledby="btnGroupVerticalDrop4">

      <li><ahref="#">Dropdown link</a></li>

      <li><ahref="#">Dropdown link</a></li>

    </ul>

  </div>

</div>

</body>

 

6.  两端对齐的按钮组

 

<bodystyle="padding:20px">

<div>

  <divclass="btn-groupbtn-group-justified">

    <ahref="#"class="btn btn-default"role="button">Left</a>

    <ahref="#"class="btn btn-default"role="button">Middle</a>

    <ahref="#"class="btn btn-default"role="button">Right</a>

  </div>

  <br>

  <divclass="btn-group btn-group-justified">

    <ahref="#"class="btn btn-default"role="button">Left</a>

    <ahref="#"class="btn btn-default"role="button">Middle</a>

    <divclass="btn-group">

      <ahref="#"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-expanded="false">

        Dropdown <span class="caret"></span>

      </a>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div>

  </div>

  <hr/>

  <divclass="btn-group btn-group-justified">

     <divclass="btn-group">

       <buttontype="button"class="btnbtn-default">Left</button>

     </div>

     <divclass="btn-group">

       <buttontype="button"class="btnbtn-default">Middle</button>

     </div>

     <divclass="btn-group">

       <buttontype="button"class="btnbtn-default">Right</button>

     </div>

   </div>

</div>

 

 

</body>

第四节：按钮式下拉菜单

1.  单按钮下拉菜单

 

<bodystyle="padding:20px">

<divclass="bs-example">

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">Default

<spanclass="caret"></span></button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

</div>

<!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-primary dropdown-toggle"data-toggle="dropdown">Primary<span class="caret"></span></button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

</div>

<!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-success dropdown-toggle"data-toggle="dropdown">Success<span class="caret"></span></button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

</div>

<!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btn btn-infodropdown-toggle"data-toggle="dropdown">Info<span class="caret"></span></button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

</div>

<!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-warning dropdown-toggle"data-toggle="dropdown">Warning<span class="caret"></span></button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

</div>

<!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btn btn-dangerdropdown-toggle"data-toggle="dropdown">Danger<span class="caret"></span></button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

  </div>

</body>

 

 

2.分裂式按钮下拉菜单

 

 

<styletype="text/css">

  .dropdown-toggle{

    height: 34px;

  }

</style>

</head>

<bodystyle="padding:20px">

<divclass="bs-example">

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-default">Default</button>

      <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">

        <spanclass="caret"></span>

        <spanclass="sr-only">ToggleDropdown</span>

      </button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-primary">Primary</button>

      <buttontype="button"class="btnbtn-primary dropdown-toggle"data-toggle="dropdown">

        <spanclass="caret"></span>

        <spanclass="sr-only">ToggleDropdown</span>

      </button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-success">Success</button>

      <buttontype="button"class="btnbtn-success dropdown-toggle"data-toggle="dropdown">

        <spanclass="caret"></span>

        <spanclass="sr-only">ToggleDropdown</span>

      </button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-info">Info</button>

      <buttontype="button"class="btn btn-infodropdown-toggle"data-toggle="dropdown">

        <spanclass="caret"></span>

        <spanclass="sr-only">ToggleDropdown</span>

      </button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-warning">Warning</button>

      <buttontype="button"class="btnbtn-warning dropdown-toggle"data-toggle="dropdown"aria-expanded="false">

        <spanclass="caret"></span>

        <spanclass="sr-only">ToggleDropdown</span>

      </button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

    <divclass="btn-group">

      <buttontype="button"class="btnbtn-danger">Danger</button>

      <buttontype="button"class="btn btn-dangerdropdown-toggle"data-toggle="dropdown">

        <spanclass="caret"></span>

        <spanclass="sr-only">Toggle Dropdown</span>

      </button>

      <ulclass="dropdown-menu"role="menu">

        <li><ahref="#">Action</a></li>

        <li><ahref="#">Another action</a></li>

        <li><ahref="#">Something else here</a></li>

        <liclass="divider"></li>

        <li><ahref="#">Separated link</a></li>

      </ul>

    </div><!-- /btn-group -->

  </div>

</body>

 

 

 

3.尺寸

<bodystyle="padding:20px">

<divclass="bs-example">

    <divclass="btn-toolbar"role="toolbar">

      <divclass="btn-group">

        <buttonclass="btn btn-default btn-lg dropdown-toggle"type="button"data-toggle="dropdown"aria-expanded="false">

          Large button <span class="caret"></span>

        </button>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group -->

    </div><!-- /btn-toolbar -->

    <hr/>

    <divclass="btn-toolbar"role="toolbar">

      <divclass="btn-group">

        <buttonclass="btn btn-default btn-sm dropdown-toggle"type="button"data-toggle="dropdown">

          Small button <span class="caret"></span>

        </button>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group -->

    </div><!-- /btn-toolbar -->

    <hr/>

    <divclass="btn-toolbar"role="toolbar">

      <divclass="btn-group">

        <buttonclass="btn btn-default btn-xs dropdown-toggle"type="button"data-toggle="dropdown">

          Extra small button <span class="caret"></span>

        </button>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group -->

    </div><!-- /btn-toolbar -->

  </div>

</body>

 

 

4.向上弹出菜单

<styletype="text/css">

    .dropdown-toggle{

        height: 34px;

     }

</style>

</head>

<bodystyle="padding-left:50px;padding-top:400px">

<divclass="bs-example">

    <divclass="btn-toolbar"role="toolbar">

      <divclass="btn-group dropup">

        <buttontype="button"class="btn btn-default">Dropup</button>

        <buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"aria-expanded="false">

          <spanclass="caret"></span>

          <spanclass="sr-only">ToggleDropdown</span>

        </button>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group-->

      <divclass="btn-group dropup">

        <buttontype="button"class="btn btn-primary">Rightdropup</button>

        <buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown"aria-expanded="false">

          <spanclass="caret"></span>

          <spanclass="sr-only">ToggleDropdown</span>

        </button>

        <ulclass="dropdown-menudropdown-menu-right"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group-->

    </div>

  </div>

</body>

 

 

第五节：输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group 赋予.input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

 

1.  基本实例

 

<bodystyle="padding:20px">

<divclass="input-group">

  <spanclass="input-group-addon">@</span>

  <inputtype="text"class="form-control"placeholder="Username">

</div>

<br/>

<divclass="input-group">

  <inputtype="text"class="form-control">

  <spanclass="input-group-addon">.00</span>

</div>

<br/>

<divclass="input-group">

  <spanclass="input-group-addon">$</span>

  <inputtype="text"class="form-control">

  <spanclass="input-group-addon">.00</span>

</div>

<br/>

</body>

 

 

2.  尺寸

 

<bodystyle="padding:20px">

<divclass="input-groupinput-group-lg">

  <spanclass="input-group-addon">@</span>

  <inputtype="text"class="form-control"placeholder="Username">

</div>

<br/>

<divclass="input-group">

  <spanclass="input-group-addon">@</span>

  <inputtype="text"class="form-control"placeholder="Username">

</div>

<br/>

<divclass="input-group input-group-sm">

  <spanclass="input-group-addon">@</span>

  <inputtype="text"class="form-control"placeholder="Username">

</div>

<br/>

</body>

 

 

3.  作为额外元素的多选框和单选框

 

<bodystyle="padding:20px">

<divclass="row">

  <divclass="col-lg-6">

    <divclass="input-group">

      <spanclass="input-group-addon">

        <inputtype="checkbox">

      </span>

      <inputtype="text"class="form-control">

    </div><!--/input-group -->

  </div><!-- /.col-lg-6-->

  <divclass="col-lg-6">

    <divclass="input-group">

      <spanclass="input-group-addon">

        <inputtype="radio">

      </span>

      <inputtype="text"class="form-control">

    </div><!--/input-group -->

  </div><!-- /.col-lg-6-->

</div><!--/.row -->

 

</body>

 

4.  作为额外元素的按钮

 

 

<bodystyle="padding:20px">

<divclass="row">

  <divclass="col-lg-6">

    <divclass="input-group">

      <spanclass="input-group-btn">

        <buttonclass="btnbtn-default"type="button">Go!</button>

      </span>

      <inputtype="text"class="form-control">

    </div><!-- /input-group -->

  </div><!-- /.col-lg-6 -->

  <divclass="col-lg-6">

    <divclass="input-group">

      <inputtype="text"class="form-control">

      <spanclass="input-group-btn">

        <buttonclass="btn btn-default"type="button">Go!</button>

      </span>

    </div><!-- /input-group -->

  </div><!-- /.col-lg-6 -->

</div><!--/.row -->

 

</body>

 

 

 

5.  作为额外元素的按钮式下拉菜单

 

<bodystyle="padding:20px">

<divclass="row">

  <divclass="col-lg-6">

    <divclass="input-group">

      <divclass="input-group-btn">

        <buttontype="button"class="btnbtn-defaultdropdown-toggle"data-toggle="dropdown">Action<span class="caret"></span></button>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group -->

      <inputtype="text"class="form-control">

    </div><!-- /input-group -->

  </div><!-- /.col-lg-6 -->

  <divclass="col-lg-6">

    <divclass="input-group">

      <inputtype="text"class="form-control">

      <divclass="input-group-btn">

        <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown">Action<span class="caret"></span></button>

        <ulclass="dropdown-menu dropdown-menu-right"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </div><!-- /btn-group -->

    </div><!-- /input-group -->

  </div><!-- /.col-lg-6 -->

</div><!-- /.row -->

 

</body>

 

 

 

6.  作为额外元素的分裂式按钮下拉菜单

 

<styletype="text/css">

    .dropdown-toggle{

        height: 34px;

     }

</style>

</head>

<bodystyle="padding:20px">

    <divclass="row">

      <divclass="col-lg-6">

        <divclass="input-group">

          <divclass="input-group-btn open">

            <buttontype="button"class="btnbtn-default"tabindex="-1">Action</button>

            <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown"tabindex="-1"aria-expanded="true">

              <spanclass="caret"></span>

              <spanclass="sr-only">ToggleDropdown</span>

            </button>

            <ulclass="dropdown-menu"role="menu">

              <li><ahref="#">Action</a></li>

              <li><ahref="#">Another action</a></li>

              <li><ahref="#">Something else here</a></li>

              <liclass="divider"></li>

              <li><ahref="#">Separated link</a></li>

            </ul>

          </div>

          <inputtype="text"class="form-control">

        </div><!--/.input-group -->

      </div><!-- /.col-lg-6 -->

      <divclass="col-lg-6">

        <divclass="input-group">

          <inputtype="text"class="form-control">

          <divclass="input-group-btn">

            <buttontype="button"class="btnbtn-default"tabindex="-1">Action</button>

            <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown"tabindex="-1">

              <spanclass="caret"></span>

              <spanclass="sr-only">ToggleDropdown</span>

            </button>

            <ulclass="dropdown-menu dropdown-menu-right"role="menu">

              <li><ahref="#">Action</a></li>

              <li><ahref="#">Another action</a></li>

              <li><ahref="#">Something else here</a></li>

              <liclass="divider"></li>

              <li><ahref="#">Separated link</a></li>

            </ul>

          </div>

        </div><!--/.input-group -->

      </div><!-- /.col-lg-6 -->

    </div><!-- /.row -->

</body>

第六节：导航

1.   标签页

 

<bodystyle="padding:20px">

<ulclass="navnav-tabs"role="tablist">

  <lirole="presentation"class="active"><ahref="#">Home</a></li>

  <lirole="presentation"><ahref="#">Profile</a></li>

  <lirole="presentation"><ahref="#">Messages</a></li>

</ul>

 

</body>

 

 

2.胶囊式标签页

 

 

<bodystyle="padding:20px">

<ulclass="navnav-pills"role="tablist">

  <lirole="presentation"class="active"><ahref="#">Home</a></li>

  <lirole="presentation"><ahref="#">Profile</a></li>

  <lirole="presentation"><ahref="#">Messages</a></li>

</ul>

<hr/>

<ulclass="nav nav-pillsnav-stacked"role="tablist">

  <lirole="presentation"class="active"><ahref="#">Home</a></li>

  <lirole="presentation"><ahref="#">Profile</a></li>

  <lirole="presentation"><ahref="#">Messages</a></li>

</ul>

</body>

 

 

 

3.两端对齐的标签页

 

 

<bodystyle="padding:20px">

<divclass="bs-example">

    <ulclass="nav nav-tabsnav-justified"role="tablist">

      <lirole="presentation"class="active"><ahref="#">Home</a></li>

      <lirole="presentation"><ahref="#">Profile</a></li>

      <lirole="presentation"><ahref="#">Messages</a></li>

    </ul>

    <br>

    <ulclass="nav nav-pillsnav-justified"role="tablist">

      <lirole="presentation"class="active"><ahref="#">Home</a></li>

      <lirole="presentation"><ahref="#">Profile</a></li>

      <lirole="presentation"><ahref="#">Messages</a></li>

    </ul>

  </div>

</body>

4.禁用的链接

 

<bodystyle="padding:20px">

<divclass="bs-example">

    <ulclass="nav nav-pills"role="tablist">

      <lirole="presentation"><ahref="#">Clickable link</a></li>

      <lirole="presentation"><ahref="#">Clickable link</a></li>

      <lirole="presentation"class="disabled"><ahref="#">Disabled link</a></li>

    </ul>

  </div>

</body>

 

 

3.  添加下拉菜单

 

<bodystyle="padding:20px">

<divclass="bs-example">

    <ulclass="navnav-tabs"role="tablist">

      <lirole="presentation"class="active"><ahref="#">Home</a></li>

      <lirole="presentation"><ahref="#">Help</a></li>

      <lirole="presentation"class="dropdown">

        <aclass="dropdown-toggle"data-toggle="dropdown"href="#"aria-expanded="false">

          Dropdown <span class="caret"></span>

        </a>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </li>

    </ul>

  </div>

 <hr/>

 <divclass="bs-example">

    <ulclass="navnav-pills"role="tablist">

      <lirole="presentation"class="active"><ahref="#">Home</a></li>

      <lirole="presentation"><ahref="#">Help</a></li>

      <lirole="presentation"class="dropdown">

        <aclass="dropdown-toggle"data-toggle="dropdown"href="#">

          Dropdown <span class="caret"></span>

        </a>

        <ulclass="dropdown-menu"role="menu">

          <li><ahref="#">Action</a></li>

          <li><ahref="#">Another action</a></li>

          <li><ahref="#">Something else here</a></li>

          <liclass="divider"></li>

          <li><ahref="#">Separated link</a></li>

        </ul>

      </li>

    </ul>

  </div>

</body>

第七节：导航条

1.默认样式的导航条

 

 

<bodystyle="padding:20px">

<navclass="navbarnavbar-default"role="navigation">

  <divclass="container-fluid">

    <!--Brand and toggle get grouped for better mobile display -->

    <divclass="navbar-header">

      <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1">

        <spanclass="sr-only">Toggle navigation</span>

        <spanclass="icon-bar"></span>

        <spanclass="icon-bar"></span>

        <spanclass="icon-bar"></span>

      </button>

      <aclass="navbar-brand"href="#">Brand</a>

    </div>

 

    <!--Collect thenav links, forms, and other content for toggling -->

    <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1">

      <ulclass="nav navbar-nav">

        <liclass="active"><ahref="#">Link</a></li>

        <li><ahref="#">Link</a></li>

        <liclass="dropdown">

          <ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown<spanclass="caret"></span></a>

          <ulclass="dropdown-menu"role="menu">

            <li><ahref="#">Action</a></li>

            <li><ahref="#">Another action</a></li>

            <li><ahref="#">Something else here</a></li>

            <liclass="divider"></li>

            <li><ahref="#">Separated link</a></li>

            <liclass="divider"></li>

            <li><ahref="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <formclass="navbar-formnavbar-left"role="search">

        <divclass="form-group">

          <inputtype="text"class="form-control"placeholder="Search">

        </div>

        <buttontype="submit"class="btnbtn-default">Submit</button>

      </form>

      <ulclass="nav navbar-navnavbar-right">

        <li><ahref="#">Link</a></li>

        <liclass="dropdown">

          <ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown<spanclass="caret"></span></a>

          <ulclass="dropdown-menu"role="menu">

            <li><ahref="#">Action</a></li>

            <li><ahref="#">Another action</a></li>

            <li><ahref="#">Something else here</a></li>

            <liclass="divider"></li>

            <li><ahref="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

<divstyle="height:1500px"></div>

</body>

2.   Brand image

 

<bodystyle="padding:20px">

<navclass="navbarnavbar-default"role="navigation">

      <divclass="container-fluid">

        <divclass="navbar-header">

          <aclass="navbar-brand"href="#">

            <imgalt="Brand"height="20"src="brand.png">

          </a>

        </div>

      </div>

    </nav>

</body>

 

 

3.表单

 

 

<bodystyle="padding:20px">

<navclass="navbarnavbar-default"role="navigation">

     <divclass="container-fluid">

      <divclass="navbar-header">

        <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-2">

          <spanclass="sr-only">Toggle navigation</span>

          <spanclass="icon-bar"></span>

          <spanclass="icon-bar"></span>

          <spanclass="icon-bar"></span>

        </button>

        <aclass="navbar-brand"href="#">Brand</a>

      </div>

      <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-2">

        <formclass="navbar-formnavbar-left"role="search">

          <divclass="form-group">

            <inputtype="text"class="form-control"placeholder="Search">

          </div>

          <buttontype="submit"class="btnbtn-default">Submit</button>

        </form>

      </div>

    </div>

  </nav>

</body>

 

 

 

 

4.文本

<bodystyle="padding:20px">

<navclass="navbarnavbar-default"role="navigation">

      <divclass="container-fluid">

        <divclass="navbar-header">

          <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-4">

            <spanclass="sr-only">Toggle navigation</span>

            <spanclass="icon-bar"></span>

            <spanclass="icon-bar"></span>

            <spanclass="icon-bar"></span>

          </button>

          <aclass="navbar-brand"href="#">Brand</a>

        </div>

        <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-4">

          <pclass="navbar-text">Signed in as MarkOtto</p>

        </div>

      </div>

    </nav>

</body>

 

 

 

5.非导航的链接

 

 

<bodystyle="padding:20px">

<navclass="navbarnavbar-default"role="navigation">

      <divclass="container-fluid">

        <divclass="navbar-header">

          <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-5">

            <spanclass="sr-only">Toggle navigation</span>

            <spanclass="icon-bar"></span>

            <spanclass="icon-bar"></span>

            <spanclass="icon-bar"></span>

          </button>

          <aclass="navbar-brand"href="#">Brand</a>

        </div>

        <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-5">

          <pclass="navbar-textnavbar-right">Signed in as<a href="http://www.java1234.com"target="_blank"class="navbar-link">java知识分享网</a></p>

        </div>

      </div>

    </nav>

</body>

 

 

 

 

6.固定在顶部

 

<body style="padding:20px">

<nav class="navbarnavbar-defaultnavbar-fixed-top"role="navigation">

      <!-- We use the fluid option here to avoid overriding the fixedwidth of a normal container within the narrow content columns. -->

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button"class="navbar-togglecollapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand"href="#">Brand</a>

        </div>

 

        <div class="collapsenavbar-collapse" id="bs-example-navbar-collapse-6">

          <ul class="navnavbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">Link</a></li>

            <li><a href="#">Link</a></li>

          </ul>

        </div><!--/.navbar-collapse -->

      </div>

    </nav>

<div style="height:1500px"></div>

</body>

 

 

 

 

7.固定在底部

<bodystyle="padding:20px">

<navclass="navbarnavbar-defaultnavbar-fixed-bottom"role="navigation">

      <!-- Weuse the fluid option here to avoid overriding the fixed width of a normalcontainer within the narrow content columns. -->

      <divclass="container-fluid">

        <divclass="navbar-header">

          <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-7">

            <spanclass="sr-only">Toggle navigation</span>

            <spanclass="icon-bar"></span>

            <spanclass="icon-bar"></span>

            <spanclass="icon-bar"></span>

          </button>

          <aclass="navbar-brand"href="#">Brand</a>

        </div>

 

        <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-7">

          <ulclass="nav navbar-nav">

            <liclass="active"><ahref="#">Home</a></li>

            <li><ahref="#">Link</a></li>

            <li><ahref="#">Link</a></li>

          </ul>

        </div><!-- /.navbar-collapse -->

      </div>

    </nav>

<divstyle="height:1500px"></div>

</body>

 

 

 

8.静止在顶部

<body style="padding:20px">

<nav class="navbarnavbar-default navbar-static-top" role="navigation">

      <!-- We use the fluid option here to avoid overriding the fixedwidth of a normal container within the narrow content columns. -->

      <div class="container-fluid">

        <div class="navbar-header">

          <button type="button"class="navbar-togglecollapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand"href="#">Brand</a>

        </div>

 

        <!-- Collect thenav links, forms, and othercontent for toggling -->

        <div class="collapsenavbar-collapse" id="bs-example-navbar-collapse-8">

          <ul class="navnavbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">Link</a></li>

            <li><a href="#">Link</a></li>

          </ul>

        </div><!--/.navbar-collapse -->

      </div>

    </nav>

<div style="height:1500px"></div>

</body>

 

 

9.反色的导航条

<body style="padding:20px">

<nav class="navbar navbar-inverse"role="navigation">

      <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobiledisplay -->

        <div class="navbar-header">

          <button type="button"class="navbar-togglecollapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand"href="#">Brand</a>

        </div>

 

        <!-- Collect thenav links, forms, and othercontent for toggling -->

        <div class="collapsenavbar-collapse" id="bs-example-navbar-collapse-9">

          <ul class="navnavbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">Link</a></li>

            <li><a href="#">Link</a></li>

          </ul>

        </div><!--/.navbar-collapse -->

      </div><!--/.container-fluid -->

    </nav>

</body>

 

 

 

第八节：导航路径

<bodystyle="padding:20px">

<divclass="bs-example">

    <olclass="breadcrumb">

      <liclass="active">Home</li>

    </ol>

    <olclass="breadcrumb">

      <li><ahref="#">Home</a></li>

      <liclass="active">Library</li>

    </ol>

    <olclass="breadcrumb"style="margin-bottom:5px;">

      <li><ahref="#">Home</a></li>

      <li><ahref="#">Library</a></li>

      <liclass="active">Data</li>

    </ol>

  </div>

</body>

 

 

 

 

 

第九节：分页

1.  默认分页

 

 

<bodystyle="padding:20px">

<nav>

  <ulclass="pagination">

    <li><ahref="#">&laquo;</a></li>

    <li><ahref="#">1</a></li>

    <li><ahref="#">2</a></li>

    <li><ahref="#">3</a></li>

    <li><ahref="#">4</a></li>

    <li><ahref="#">5</a></li>

    <li><ahref="#">&raquo;</a></li>

  </ul>

</nav>

 

</body>

 

 

 

2.  禁用和激活状态

 

 

<bodystyle="padding:20px">

<nav>

      <ulclass="pagination">

        <liclass="disabled"><ahref="#">«</a></li>

        <liclass="active"><ahref="#">1<span class="sr-only">(current)</span></a></li>

        <li><ahref="#">2</a></li>

        <li><ahref="#">3</a></li>

        <li><ahref="#">4</a></li>

        <li><ahref="#">5</a></li>

        <li><ahref="#">»</a></li>

     </ul>

   </nav>

</body>

 

 

 

3.尺寸

 

<body style="padding:20px">

<div class="bs-example">

    <nav>

      <ul class="paginationpagination-lg">

        <li><a href="#">«</a></li>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">5</a></li>

        <li><a href="#">»</a></li>

      </ul>

    </nav>

    <nav>

      <ul class="pagination">

        <li><a href="#">«</a></li>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">5</a></li>

        <li><a href="#">»</a></li>

      </ul>

    </nav>

    <nav>

      <ul class="paginationpagination-sm">

        <li><a href="#">«</a></li>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">5</a></li>

        <li><a href="#">»</a></li>

      </ul>

    </nav>

  </div>

</body>

 

4.翻页

 

<bodystyle="padding:20px">

<nav>

  <ulclass="pager">

    <li><ahref="#">Previous</a></li>

    <li><ahref="#">Next</a></li>

  </ul>

</nav>

 

</body>

 

 

5.对齐链接

 

<bodystyle="padding:20px">

<nav>

  <ulclass="pager">

    <liclass="previous"><ahref="#">&larr; Older</a></li>

    <liclass="next"><ahref="#">Newer&rarr;</a></li>

  </ul>

</nav>

 

</body>

 

 

6.可选的禁用状态

 

<bodystyle="padding:20px">

<nav>

  <ulclass="pager">

    <liclass="previous disabled"><ahref="#">&larr; Older</a></li>

    <liclass="next"><ahref="#">Newer&rarr;</a></li>

  </ul>

</nav>

 

</body>

 

 

第十节：标签

<bodystyle="padding:20px">

<divclass="bs-example">

    <h1>Example heading<span class="labellabel-default">New</span></h1>

    <h2>Example heading<span class="labellabel-default">New</span></h2>

    <h3>Example heading<span class="labellabel-default">New</span></h3>

    <h4>Example heading<span class="labellabel-default">New</span></h4>

    <h5>Example heading<span class="labellabel-default">New</span></h5>

    <h6>Example heading<span class="labellabel-default">New</span></h6>

  </div>

  <hr/>

  <spanclass="labellabel-default">Default</span>

<spanclass="labellabel-primary">Primary</span>

<spanclass="labellabel-success">Success</span>

<spanclass="labellabel-info">Info</span>

<spanclass="labellabel-warning">Warning</span>

<spanclass="labellabel-danger">Danger</span>

 

</body>

第十一节：徽章组件

 

<body style="padding:20px">

<a href="#">Inbox<span class="badge">42</span></a>

 

<button class="btnbtn-primary" type="button">

  Messages <span class="badge">4</span>

</button>

<hr/>

<ul class="navnav-pills"role="tablist">

  <lirole="presentation"class="active"><a href="#">Home<span class="badge">42</span></a></li>

  <lirole="presentation"><a href="#">Profile</a></li>

  <lirole="presentation"><a href="#">Messages<span class="badge">3</span></a></li>

</ul>

 

</body>

第十二节：巨幕组件

<bodystyle="padding:20px">

    <divclass="jumbotron">

      <divstyle="padding:30px">

         <h1>Hello, world!</h1>

         <p>This is a simplehero unit, a simplejumbotron-style component for calling extraattention to featured content or information.</p>

         <p><aclass="btn btn-primary btn-lg"href="#"role="button">Learn more</a></p>

        </div>

    </div>

</body>

第十三节：页头组件

 

 

<bodystyle="padding:20px">

<divclass="page-header">

  <h1>Example page header<small>Subtext for header</small></h1>

</div>

 

</body>

第十四节：缩略图组件

<body style="padding:20px">

<div class="row">

      <div class="col-xs-6col-md-3">

        <a href="#"class="thumbnail">

          <img src="a.jpg"data-holder-rendered="true" style="height: 180px; width: 100%;display: block;">

        </a>

      </div>

      <div class="col-xs-6col-md-3">

        <a href="#"class="thumbnail">

          <img src="b.jpg"data-holder-rendered="true" style="height: 180px; width: 100%;display: block;">

        </a>

      </div>

      <div class="col-xs-6col-md-3">

        <a href="#"class="thumbnail">

          <img src="c.jpg"data-holder-rendered="true" style="height: 180px; width: 100%;display: block;">

        </a>

      </div>

      <div class="col-xs-6col-md-3">

        <a href="#"class="thumbnail">

          <img src="d.jpg"data-holder-rendered="true" style="height: 180px; width: 100%;display: block;">

        </a>

      </div>

    </div>

    <hr/>

    <div class="row">

      <div class="col-sm-6col-md-4">

        <div class="thumbnail">

          <img data-src="holder.js/100%x200" alt="100%x200"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjkzIiB5PSIxMDAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTFwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4yNDJ4MjAwPC90ZXh0PjwvZz48L3N2Zz4="data-holder-rendered="true" style="height: 200px; width: 100%;display: block;">

          <div class="caption">

            <h3>Thumbnail label</h3>

            <p>Crasjusto odio, dapibus acfacilisis in, egestas eget quam. Donec idelitnon mi porta gravida at eget metus. Nullamid dolor idnibh ultricies vehicula ut id elit.</p>

            <p><a href="#" class="btn btn-primary"role="button">Button</a><a href="#"class="btnbtn-default"role="button">Button</a></p>

          </div>

        </div>

      </div>

      <div class="col-sm-6col-md-4">

        <div class="thumbnail">

          <img data-src="holder.js/100%x200" alt="100%x200"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjkzIiB5PSIxMDAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTFwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4yNDJ4MjAwPC90ZXh0PjwvZz48L3N2Zz4="data-holder-rendered="true" style="height: 200px; width: 100%;display: block;">

          <div class="caption">

            <h3>Thumbnaillabel</h3>

            <p>Crasjusto odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non miporta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut idelit.</p>

            <p><a href="#" class="btn btn-primary"role="button">Button</a><a href="#"class="btnbtn-default"role="button">Button</a></p>

          </div>

        </div>

      </div>

      <div class="col-sm-6col-md-4">

        <div class="thumbnail">

          <img data-src="holder.js/100%x200" alt="100%x200"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjkzIiB5PSIxMDAiIHN0eWxlPSJmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MTFwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4yNDJ4MjAwPC90ZXh0PjwvZz48L3N2Zz4="data-holder-rendered="true" style="height: 200px; width: 100%;display: block;">

          <div class="caption">

            <h3>Thumbnaillabel</h3>

            <p>Crasjusto odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non miporta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut idelit.</p>

            <p><a href="#" class="btn btn-primary"role="button">Button</a><a href="#"class="btnbtn-default"role="button">Button</a></p>

          </div>

        </div>

      </div>

    </div>

</body>

 

第十五节：警告框组件

 

<body style="padding:20px">

<div class="bs-example">

  <div class="alertalert-success"role="alert">

    <strong>Well done!</strong>You successfully read this important alert message.

  </div>

  <div class="alertalert-info"role="alert">

    <strong>Heads up!</strong>This alert needs your attention, but it's not super important.

  </div>

  <div class="alert alert-warning"role="alert">

    <strong>Warning!</strong>Better check yourself, you're not looking too good.

  </div>

  <div class="alertalert-danger"role="alert">

    <strong>Oh snap!</strong>Change a few things up and try submitting again.

  </div>

</div>

<hr/>

<div class="alertalert-warning alert-dismissible"role="alert">

  <button type="button"class="close"data-dismiss="alert"><spanaria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

  <strong>Warning!</strong>Better check yourself, you're not looking too good.

</div>

<hr/>

<div class="bs-example">

  <div class="alertalert-success"role="alert">

    <strong>Well done!</strong>You successfully read <a href="#"class="alert-link">this important alertmessage</a>.

  </div>

  <div class="alertalert-info"role="alert">

    <strong>Heads up!</strong>This<a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.

  </div>

  <div class="alertalert-warning"role="alert">

    <strong>Warning!</strong>Better check yourself, you're <a href="#"class="alert-link">not looking too good</a>.

  </div>

  <div class="alertalert-danger"role="alert">

    <strong>Oh snap!</strong><a href="#"class="alert-link">Change a few things up</a> and try submittingagain.

  </div>

</div>

</body>

第十六节：进度条组件

1.基本实例

 

<bodystyle="padding:20px">

<divclass="progress">

  <divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%;">

    <spanclass="sr-only">60% Complete</span>

  </div>

</div>

</body>

 

 

2.带有提示便签的进度条

<bodystyle="padding:20px">

<divclass="progress">

  <divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%;">

    60%

  </div>

</div>

</body>

 

 

3.进度数值较低的情况

 

<body style="padding:20px">

<div class="progress">

  <div class="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100">

    0%

  </div>

</div>

<div class="progress">

  <div class="progress-bar"role="progressbar"aria-valuenow="2"aria-valuemin="0"aria-valuemax="100" style="width:2%;">

    2%

  </div>

</div>

</body>

 

 

4.根据情景变化效果

 

<body style="padding:20px">

<div class="progress">

  <div class="progress-bar progress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100" style="width:40%">

    <span class="sr-only">40% Complete (success)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-barprogress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width:20%">

    <span class="sr-only">20% Complete</span>

  </div>

</div>

<div class="progress">

  <div class="progress-barprogress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%">

    <span class="sr-only">60% Complete (warning)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-barprogress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width:80%">

    <span class="sr-only">80% Complete (danger)</span>

  </div>

</div>

 

</body>

 

 

 

5.条纹效果

 

<bodystyle="padding:20px">

<divclass="progress">

  <divclass="progress-bar progress-bar-success progress-bar-striped"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width:40%">

    <spanclass="sr-only">40% Complete (success)</span>

  </div>

</div>

<divclass="progress">

  <divclass="progress-bar progress-bar-infoprogress-bar-striped"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width:20%">

    <spanclass="sr-only">20% Complete</span>

  </div>

</div>

<divclass="progress">

  <divclass="progress-bar progress-bar-warningprogress-bar-striped"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%">

    <spanclass="sr-only">60% Complete (warning)</span>

  </div>

</div>

<divclass="progress">

  <divclass="progress-bar progress-bar-dangerprogress-bar-striped"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width:80%">

    <spanclass="sr-only">80% Complete (danger)</span>

  </div>

</div>

 

</body>

4.  动画效果

 

 

<scripttype="text/javascript">

   functiontoggle(){

      if($("#p1").hasClass("active")){

         $("#p1").removeClass("active");

      }else{

         $("#p1").addClass("active");

      }

   }

</script>

<styletype="text/css">

 

</style>

</head>

<bodystyle="padding:20px">

<divclass="bs-example">

  <divclass="progress">

    <divid="p1"class="progress-barprogress-bar-striped " role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-valuemax="100"style="width:45%"><spanclass="sr-only">45% Complete</span></div>

  </div>

  <buttontype="button"class="btnbtn-default bs-docs-activate-animated-progressbar"data-toggle="button"aria-pressed="false"autocomplete="off"onclick="toggle()">Toggle animation</button>

</div>

</body>

 

 

 

7.堆叠效果

 

<bodystyle="padding:20px">

<divclass="progress">

  <divclass="progress-bar progress-bar-success"style="width:35%">

    <spanclass="sr-only">35% Complete (success)</span>

  </div>

  <divclass="progress-bar progress-bar-warningprogress-bar-striped"style="width:20%">

    <spanclass="sr-only">20% Complete (warning)</span>

  </div>

  <divclass="progress-bar progress-bar-danger"style="width:10%">

    <spanclass="sr-only">10% Complete (danger)</span>

  </div>

</div>

 

</body>

 

 

第十七节：媒体对象组件

 

1.  默认样式

 

 

 

<bodystyle="padding:20px">

<div class="bs-example">

    <divclass="media">

      <aclass="media-left"href="#">

        <imgclass="media-object"data-src="holder.js/64x64"alt="64x64"src="../img/1.jpg"data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

      <divclass="media-body">

        <h4class="media-heading">Media heading</h4>

        Cras sit amet nibhlibero, ingravida nulla. Nulla vel metusscelerisque ante sollicitudin commodo.Cras purusodio, vestibulum in vulputate at, tempus viverraturpis.Fusce condimentum nunc ac nisivulputate fringilla. Donec lacinia congue felisinfaucibus.

      </div>

    </div>

    <divclass="media">

      <aclass="media-left"href="#">

        <imgclass="media-object"data-src="holder.js/64x64"alt="64x64"src="../img/1.jpg"data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

      <divclass="media-body">

        <h4class="media-heading">Media heading</h4>

        Cras sit amet nibhlibero, ingravida nulla. Nulla vel metusscelerisque ante sollicitudin commodo.Cras purusodio, vestibulum in vulputate at, tempus viverraturpis.Fusce condimentum nunc ac nisivulputate fringilla. Donec lacinia conguefelis in faucibus.

        <divclass="media">

          <aclass="media-left"href="#">

            <imgclass="media-object"data-src="holder.js/64x64"alt="64x64"src="../img/1.jpg"data-holder-rendered="true"style="width:64px;height: 64px;">

          </a>

          <divclass="media-body">

            <h4class="media-heading">Nested media heading</h4>

            Cras sit amet nibh libero, ingravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fuscecondimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis infaucibus.

          </div>

        </div>

      </div>

    </div>

    <divclass="media">

      <divclass="media-body">

        <h4class="media-heading">Media heading</h4>

        Cras sit amet nibh libero, in gravidanulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at, tempus viverra turpis.

      </div>

      <aclass="media-right"href="#">

        <imgdata-src="holder.js/64x64"alt="64x64"src="../img/1.jpg"data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

    </div>

    <divclass="media">

      <aclass="media-left"href="#">

        <imgdata-src="holder.js/64x64"alt="64x64"src="../img/1.jpg"data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

      <divclass="media-body">

        <h4class="media-heading">Media heading</h4>

        Cras sit amet nibh libero, in gravidanulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at, tempus viverra turpis.

      </div>

      <aclass="media-right"href="#">

        <imgdata-src="holder.js/64x64"alt="64x64"src="../img/1.jpg"data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

    </div>

  </div>

</body>

 

2. Media alignment

 

<bodystyle="padding:20px">

<divclass="bs-example">

    <divclass="media">

      <aclass="media-left"href="#">

        <imgdata-src="holder.js/64x64"alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

      <divclass="media-body">

        <h4class="media-heading">Top aligned media</h4>

        <p>Cras sitametnibh libero, in gravida nulla. Nulla velmetus scelerisque antesollicitudin commodo. Craspurus odio, vestibulum in vulputate at,tempusviverra turpis. Fusce condimentum nunc acnisi vulputate fringilla.Donec lacinia conguefelis in faucibus.</p>

        <p>Donecsed odiodui. Nullam quis risus eget urna mollisornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes,nascetur ridiculus mus.</p>

      </div>

    </div>

    <divclass="media">

      <aclass="media-left media-middle"href="#">

        <imgdata-src="holder.js/64x64"alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

      <divclass="media-body">

        <h4class="media-heading">Middle aligned media</h4>

        <p>Cras sitametnibh libero, in gravida nulla. Nulla vel metus scelerisque antesollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempusviverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Doneclacinia congue felis in faucibus.</p>

        <p>Donec sedodio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

      </div>

    </div>

    <divclass="media">

      <aclass="media-left media-bottom"href="#">

        <imgdata-src="holder.js/64x64"alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true"style="width:64px;height: 64px;">

      </a>

      <divclass="media-body">

        <h4class="media-heading">Bottom aligned media</h4>

        <p>Cras sitamet nibh libero, in gravida nulla. Nulla vel metus scelerisque antesollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempusviverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Doneclacinia congue felis in faucibus.</p>

        <p>Donec sedodio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociisnatoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

      </div>

    </div>

  </div>

</body>

3.媒体对象列表

 

 

 

<body style="padding:20px">

<div class="bs-example">

    <ul class="media-list">

      <li class="media">

        <a class="media-left"href="#">

          <img data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;">

        </a>

        <div class="media-body">

          <h4 class="media-heading">Media heading</h4>

          <p>Cras sitamet nibh libero, in gravidanulla. Nulla vel metus scelerisque antesollicitudincommodo. Cras purus odio, vestibulum in vulputateat,tempus viverra turpis.</p>

          <!-- Nested media object -->

          <div class="media">

            <a class="media-left"href="#">

              <img data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;">

            </a>

            <div class="media-body">

              <h4 class="media-heading">Nested media heading</h4>

              Cras sit amet nibhlibero, ingravida nulla. Nulla vel metusscelerisque ante sollicitudin commodo.Cras purusodio, vestibulum in vulputate at, tempus viverraturpis.

              <!-- Nested media object -->

              <div class="media">

                <a class="media-left"href="#">

                  <img data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;">

                </a>

                <div class="media-body">

                  <h4 class="media-heading">Nested media heading</h4>

                  Cras sit amet nibhlibero, ingravida nulla. Nulla vel metusscelerisque ante sollicitudin commodo.Cras purusodio, vestibulum in vulputate at, tempus viverraturpis.

                </div>

              </div>

            </div>

          </div>

          <!-- Nested media object -->

          <div class="media">

            <a class="media-left"href="#">

              <img data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjE0LjUiIHk9IjMyIiBzdHlsZT0iZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9nPjwvc3ZnPg=="data-holder-rendered="true" style="width: 64px; height: 64px;">

            </a>

            <div class="media-body">

              <h4 class="media-heading">Nested media heading</h4>

              Cras sit amet nibh libero, ingravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis.

            </div>

          </div>

        </div>

      </li>

    </ul>

  </div>

</body>

 

第十八节：列表组组件

1.  基本实例

 

<bodystyle="padding:20px">

<ulclass="list-group">

  <liclass="list-group-item">Crasjusto odio</li>

  <liclass="list-group-item">Dapibusac facilisis in</li>

  <liclass="list-group-item">Morbileo risus</li>

  <liclass="list-group-item">Portaac consectetur ac</li>

  <liclass="list-group-item">Vestibulum ateros</li>

</ul>

</body>

 

 

2.徽章

 

<bodystyle="padding:20px">

<ulclass="list-group">

  <liclass="list-group-item">

    <spanclass="badge">14</span>

    Cras justo odio

  </li>

  <liclass="list-group-item">

    <spanclass="badge">2</span>

    Dapibus ac facilisisin

  </li>

  <liclass="list-group-item">

    <spanclass="badge">1</span>

    Morbi leo risus

  </li>

</ul>

</body>

 

 

3.链接

 

<bodystyle="padding:20px">

<divclass="list-group">

  <ahref="#"class="list-group-item active">

    Cras justo odio

  </a>

  <ahref="#"class="list-group-item">Dapibusac facilisis in</a>

  <ahref="#"class="list-group-item">Morbileo risus</a>

  <ahref="#"class="list-group-item">Portaac consectetur ac</a>

  <ahref="#"class="list-group-item">Vestibulum at eros</a>

  <ahref="http://www.java1234.com"target="_blank"class="list-group-item">Java知识分享网</a>

</div>

</body>

 

 

4.被禁用的条目

 

<bodystyle="padding:20px">

<divclass="list-group">

  <ahref="#"class="list-group-item disabled">

    Cras justo odio

  </a>

  <ahref="#"class="list-group-item">Dapibusac facilisis in</a>

  <ahref="#"class="list-group-item">Morbileo risus</a>

  <ahref="#"class="list-group-item">Portaac consectetur ac</a>

  <ahref="#"class="list-group-item">Vestibulum at eros</a>

</div>

</body>

 

 

5.情景类

 

 

<bodystyle="padding:20px">

<ulclass="list-group">

  <liclass="list-group-item list-group-item-success">Dapibusac facilisis in</li>

  <liclass="list-group-item list-group-item-info">Cras sit amet nibh libero</li>

  <liclass="list-group-item list-group-item-warning">Portaac consectetur ac</li>

  <liclass="list-group-item list-group-item-danger">Vestibulum at eros</li>

</ul>

<divclass="list-group">

  <ahref="#"class="list-group-itemlist-group-item-success">Dapibusac facilisisin</a>

  <ahref="#"class="list-group-itemlist-group-item-info">Cras sit amet nibhlibero</a>

  <ahref="#"class="list-group-itemlist-group-item-warning">Portaac consecteturac</a>

  <ahref="#"class="list-group-itemlist-group-item-danger">Vestibulum at eros</a>

</div>

</body>

 

6.定制内容

<bodystyle="padding:20px">

<divclass="list-group">

      <ahref="#"class="list-group-itemactive">

        <h4class="list-group-item-heading">List group item heading</h4>

        <pclass="list-group-item-text">Donec id elitnon mi porta gravida at eget metus. Maecenassed diam eget risus varius blandit.</p>

      </a>

      <ahref="#"class="list-group-item">

        <h4class="list-group-item-heading">List group item heading</h4>

        <pclass="list-group-item-text">Donec id elitnon mi porta gravida at eget metus. Maecenassed diam eget risus varius blandit.</p>

      </a>

      <ahref="#"class="list-group-item">

        <h4class="list-group-item-heading">List group item heading</h4>

        <pclass="list-group-item-text">Donec id elitnon mi porta gravida at eget metus. Maecenassed diam eget risus varius blandit.</p>

      </a>

    </div>

</body>

 

第十九节：面板组件

1.基本实例

 

<bodystyle="padding:20px">

<divclass="panelpanel-default">

  <divclass="panel-body">

    Basic panel example

  </div>

</div>

</body>

 

 

 

 

2.带标题的面板

<bodystyle="padding:20px">

<divclass="panelpanel-default">

  <divclass="panel-heading">Panel heading withouttitle</div>

  <divclass="panel-body">

    Panel content

  </div>

</div>

 

<divclass="panelpanel-default">

  <divclass="panel-heading">

    <h3class="panel-title">Panel title</h3>

  </div>

  <divclass="panel-body">

    Panel content

  </div>

</div>

</body>

 

3.带脚注的面板

<bodystyle="padding:20px">

<divclass="panelpanel-default">

  <divclass="panel-body">

    Panel content

  </div>

  <divclass="panel-footer">Panel footer</div>

</div>

</body>

 

 

4.情景效果

 

 

 

<bodystyle="padding:20px">

<divclass="bs-example">

    <divclass="panelpanel-primary">

      <divclass="panel-heading">

        <h3class="panel-title">Panel title</h3>

      </div>

      <divclass="panel-body">

        Panel content

      </div>

    </div>

    <divclass="panelpanel-success">

      <divclass="panel-heading">

        <h3class="panel-title">Panel title</h3>

      </div>

      <divclass="panel-body">

        Panel content

      </div>

    </div>

    <divclass="panelpanel-info">

      <divclass="panel-heading">

        <h3class="panel-title">Panel title</h3>

      </div>

      <divclass="panel-body">

        Panel content

      </div>

    </div>

    <divclass="panelpanel-warning">

      <divclass="panel-heading">

        <h3class="panel-title">Panel title</h3>

      </div>

      <divclass="panel-body">

        Panel content

      </div>

    </div>

    <divclass="panelpanel-danger">

      <divclass="panel-heading">

        <h3class="panel-title">Panel title</h3>

      </div>

      <divclass="panel-body">

        Panel content

      </div>

    </div>

  </div>

</body>

 

 

 

 

 

 

 

5.带表格的面板

 

<bodystyle="padding:20px">

<divclass="panelpanel-default">

      <!--Default panel contents -->

      <divclass="panel-heading">Panel heading</div>

      <divclass="panel-body">

        <p>Pellentesque ornare sem laciniaquam</p>

      </div>

 

      <!--Table -->

      <tableclass="table">

        <thead>

          <tr>

            <th>#</th>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Username</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>1</td>

            <td>Mark</td>

            <td>Otto</td>

            <td>@mdo</td>

          </tr>

          <tr>

            <td>2</td>

            <td>Jacob</td>

            <td>Thornton</td>

            <td>@fat</td>

          </tr>

          <tr>

            <td>3</td>

            <td>Larry</td>

            <td>the Bird</td>

            <td>@twitter</td>

          </tr>

        </tbody>

      </table>

    </div>

<hr/>

<divclass="panelpanel-default">

      <!--Default panel contents -->

      <divclass="panel-heading">Panel heading</div>

 

      <!--Table -->

      <tableclass="table">

        <thead>

          <tr>

            <th>#</th>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Username</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>1</td>

            <td>Mark</td>

            <td>Otto</td>

            <td>@mdo</td>

          </tr>

          <tr>

            <td>2</td>

            <td>Jacob</td>

            <td>Thornton</td>

            <td>@fat</td>

          </tr>

          <tr>

            <td>3</td>

            <td>Larry</td>

            <td>the Bird</td>

            <td>@twitter</td>

          </tr>

        </tbody>

      </table>

    </div>

</body>

 

 

 

 

 

 

 

6.带列表组的面板

<bodystyle="padding:20px">

<divclass="panel panel-default">

      <!--Default panel contents -->

      <divclass="panel-heading">Panel heading</div>

      <divclass="panel-body">

        <p>Some defaultpanel content here.Nulla vitae</p>

      </div>

 

      <!--List group -->

      <ulclass="list-group">

        <liclass="list-group-item">Crasjusto odio</li>

        <liclass="list-group-item">Dapibusac facilisis in</li>

        <liclass="list-group-item">Morbileo risus</li>

        <liclass="list-group-item">Portaac consectetur ac</li>

        <liclass="list-group-item">Vestibulum ateros</li>

      </ul>

    </div>

</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第二十节：响应式嵌入组件

 

body style="padding:20px">

<!-- 16:9 aspect ratio-->

<divclass="embed-responsiveembed-responsive-16by9">

  <iframeclass="embed-responsive-item"src="pic.jpg"></iframe>

</div>

<hr/>

<!-- 4:3 aspect ratio-->

<divclass="embed-responsiveembed-responsive-4by3">

  <iframeclass="embed-responsive-item"src="pic.jpg"></iframe>

</div>

</body>

 

 

第二十一节：Well  组件

<bodystyle="padding:20px">

<divclass="well">

  Look, I'm in a well!

</div>

<hr/>

<divclass="wellwell-lg">

  Look, I'm in a large well!

</div>

<hr/>

<divclass="wellwell-sm">

  Look, I'm in a small well!

</div>

</body>