BootStrap组件

巨幕
<div?class="jumbotron">
??<div?class="container">
????...
??</div>
</div>
页头
?<nav?class="navbar?navbar-inverse?navbar-fixed-top">
????????<div?class="container">
???????????<div?class="navbar-header">
??????????? ?<button?class="navbar-toggle?collapsed"?data-toggle="collapse"?data-target="#links">
????????????????????<span?class="icon-bar"></span>
????????????????????<span?class="icon-bar"></span>
????????????????????<span?class="icon-bar"></span>?????????????
????????????????<

tton>

??????????? <img?src="img/logoMsg.png"?class="img-responsive"?width="100px"?height="100px"/>
???????????</div>
???????????<div?class="collapse?navbar-collapse"?id="links">
??????????? <ul?class="nav?navbar-nav">
??????????? <li><a>买票</a><

>

??????????? <li><a>购车</a><

>

??????????? <li?class="dropdown">
??????????? <a?data-toggle="dropdown"?class="dropdown-toggle">支付方式</a>
??????????? <ul?class="dropdown-menu">
??????????? <li><a?href="">QQ支付</a><

>

??????????? <li><a?href="">微信支付</a><

>

??????????? <li><a?href="">支付宝支付</a><a?class="badge">NEW?VOID</a><

>

??????????? </ul>
??????????? <

>

??????????? </ul>
??????????? ?<div?class="navbar-form?navbar-left">
??????????? <div?class="form-group">
??????????? <div?class="input-group">
??????????? <input?type="text"?class="form-control"?/>
??????????? <div?class="input-group-btn">
??????????? <button?class="btn?btn-default">
??????????? <i?class="fa?fa-search"></i>
??????????? <

tton>

??????????? </div>
??????????? </div>
??????????? </div>
???????????</div>
???????????<div?class="navbar-form?navbar-right">
??????????? <div?class="form-group">
????????????????????????<button?class="btn?btn-primary?btn-sm">登录<

tton>

????????????????????</div>
????????????????????<div?class="form-group">
????????????????????????<button?class="btn?btn-danger?btn-sm">注册<

tton>

????????????????????</div>
???????????</div>
???????????</div>
????????</div>
????</nav>
媒体
<div?class="media">
??<div?class="media-left">
????<a?href="#">
??????<img?class="media-object"?src="..."?alt="...">
????</a>
??</div>
??<div?class="media-body">
????<h4?class="media-heading">Media?heading</h4>
????...
??</div>
</div>
下拉菜单
<div?class="dropdown">
??<button?class="btn?btn-default?dropdown-toggle"?type="button"?id="dropdownMenu1"?data-toggle="dropdown"?aria-haspopup="true"?aria-expanded="true">
????Dropdown
????<span?class="caret"></span>
??<

tton>

??<ul?class="dropdown-menu"?aria-labelledby="dropdownMenu1">
????<li><a?href="#">Action</a><

>

????<li><a?href="#">Another?action</a><

>

????<li><a?href="#">Something?else?here</a><

>

????<li?role="separator"?class="divider"><

>

????<li><a?href="#">Separated?link</a><

>

??</ul>
</div>
分割线
<li?role="separator"?class="divider"><

>?