标签：cti line drop add tabs gre 插件 动画效果 info
1 <div class="dropdown"> 2 <!-- Link or button to toggle dropdown --> 3 <ul class="dropdown- menu" role="menu" aria-labelledby="dLabel"> 4 <li><a tabindex="-1" href="#">Action</a></li> 5 <li><a tabindex="-1" href="#">Another action</a></li> 6 <li><a tabindex="-1" href="#">Something else here</a></li> 7 <li class="divider"></li> 8 <li><a tabindex="-1" href="#">Separated link</a></li> 9 </ul> 10 </div>
1 <div class="btn- group"> 2 <button class="btn">Left</button> 3 <button class="btn">Middle</button> 4 <button class="btn">Right</button> 5 </div>
按钮组还可以从能上表现得像单元框（一次只能有一个按钮被选中）或复选框（可同时选中多个按钮）。详见JavaScript插件文档。
带有下拉菜单的按钮必须单独包裹在.btn- group中，然后才能放入.btn-toolbar中，只有这样才能正确渲染整个组件。
1 <div class="btn- group"> 2 <a class="btn dropdown- toggle" data-toggle="dropdown" href="#"> 3 Action 4 <span class="caret"></span> 5 </a> 6 <ul class="dropdown- menu"> 7 <!-- dropdown menu links --> 8 </ul> 9 </div>
.btn-mini、.btn-small、.btn- large 按钮尺寸1 <div class="btn- group"> 2 <button class="btn">Action</button> 3 <button class="btn dropdown-toggle" data-toggle="dropdown"> 4 <span class="caret"></span> 5 </button> 6 <ul class="dropdown- menu"> 7 <!-- dropdown menu links --> 8 </ul> 9 </div>
1 <ul class="nav"> 2 <li class="active"> 3 <a href="#">首页</a> 4 </li> 5 <li><a href="#">...</a></li> 6 <li><a href="#">...</a></li> 7 </ul>
1 <div class="navbar"> 2 <div class="navbar- inner"> 3 <a class="brand" href="#">Title</a> 4 <ul class="nav"> 5 <li class="active"><a href="#">首页</a></li> 6 <li><a href="#">Link</a></li> 7 <li><a href="#">Link</a></li> 8 </ul> 9 </div> 10 </div>
1 <ul class="breadcrumb"> 2 <li><a href="#">首页</a> <span class="divider">/</span></li> 3 <li><a href="#">Library</a> <span class="divider">/</span></li> 4 <li class="active">Data</li> 5 </ul>
类似与导航，用于页面跳转
1 <div class="pagination"> 2 <ul> 3 <li><a href="#">Prev</a></li> 4 <li><a href="#">1</a></li> 5 <li><a href="#">2</a></li> 6 <li><a href="#">3</a></li> 7 <li><a href="#">4</a></li> 8 <li><a href="#">5</a></li> 9 <li><a href="#">Next</a></li> 10 </ul> 11 </div>
.label、.badge 标签、徽章
1 <div class="hero-unit"> 2 <h1>Heading</h1> 3 <p>Tagline</p> 4 <p> 5 <a class="btn btn-primary btn-large"> 6 Learn more 7 </a> 8 </p> 9 </div>
用于展示网页的重点内容，适合营销类或内容类网站
1 <div class="page-header"> 2 <h1>Example page header <small>Subtext for header</small></h1> 3 </div>
将页面标题与页面内容分离
1 <ul class="thumbnails"> 2 <li class="span4"> 3 <a href="#" class="thumbnail"> 4 <img data-src="holder.js/300x200" alt=""> 5 </a> 6 </li> 7 ... 8 </ul>
以上单纯以图片显示
1 <ul class="thumbnails"> 2 <li class="span4"> 3 <div class="thumbnail"> 4 <img data-src="holder.js/300x200" alt=""> 5 <h3>Thumbnail label</h3> 6 <p>Thumbnail caption...</p> 7 </div> 8 </li> 9 ... 10 </ul>
1 <div class="alert"> 2 <button type="button" class="close" data-dismiss="alert">×</button> 3 <strong>Warning!</strong> Best check yourself, you‘re not looking too good. 4 <a href="#" class="close" data-dismiss="alert">×</a> 5 </div>
1 <div class="progress"> 2 <div class="bar" style="width: 60%;"></div> 3 </div>
1 <div class="progress"> 2 <div class="bar bar-success" style="width: 35%;"></div> 3 <div class="bar bar-warning" style="width: 20%;"></div> 4 <div class="bar bar-danger" style="width: 10%;"></div> 5 </div>
1 <div class="media"> 2 <a class="pull-left" href="#"> 3 <img class="media-object" data-src="holder.js/64x64"> 4 </a> 5 <div class="media-body"> 6 <h4 class="media-heading">Media heading</h4> 7 ... 8 9 <!-- Nested media object --> 10 <div class="media"> 11 ... 12 </div> 13 </div> 14 </div>
可嵌套使用，可以方便地模拟评论或文章列表
1 <div class="well"> 2 ... 3 </div>
为页面元素添加简单的嵌入效果
1 <button class="close">×</button> 2 <!-- 或者 --> 3 <a class="close" href="#">×</a>
标签：cti line drop add tabs gre 插件 动画效果 info
原文地址：http://www.cnblogs.com/cjc917/p/7412794.html
