bootstrap基本组件

bootstrap分页

 

<nav>

     <ul class="pagination">

      <li><a href="#">&laquo;</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="#">&raquo;</a></li>        

     </ul>

</nav>

 

不可点击

<nav>

     <ul class="pagination pagination-sm">

          <li class="disabled"><a href="#">&laquo;</a></li>

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

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

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

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

     </ul>

</nav>

 

翻页效果

 

<nav>

     <ul class="pager">

          <li><a href="">上一页</a></li>

          <li><a href="">下一页</a></li>

     </ul>

</nav>

 

箭头

<nav>

     <ul class="pager">

          <li class="previous disabled">&larr;向前</li>

          <li class="next">&rarr;向后</li>

     </ul>

</nav>

 

巨幕

 

<!--巨幕-->

<div class="jumbotron">

    <h1>hello,world</h1>

    <p>你好，汪星人！</p>

    <p><a class="btn btn-info btn-lg" href="#" role="button">lear more</a></p>

</div>

 

徽章

<!--徽章-->

<a href="#">短信消息<span class="badge">30</span></a>

<ul class="nav nav-pills" role="rablist">

    <li role="presentation" class="active"><a href="#">home<span class="badge">20</span></a></li>

    <li role="presentation"><a href="#">home<span class="badge">20</span></a></li>

    <li role="presentation"><a href="#">home<span class="badge">20</span></a></li>

</ul>

 

页头

<div class="page-header">

     <h1>欢迎你，<small>喵星人</small></h1>

</div>

 

缩略图

<div class="row">

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

          <div class="thumbnail">

               <img src="8.jpg">

               <div class="caption">

                    <h3>一张美女的图片</h3>

                    <p>大家都喜欢美女</p>

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

               </div>

          </div>

     </div>

</div>