Bootstrap学习笔记之css组件(3)(2)

分页标题#e#

<!-- 导航条 collapsed表示折叠--> <nav> <div> <div> --导航条头部 <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#"> brand </a> </div> <div> --折叠栏目 <ul> <li><a href="#">Link <span>current</span></a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> <li role="separator"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Submit</button> </form> <ul> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- navbar-collapse 折叠--> </div> </nav> <!-- button中的三横 --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div>

实现效果如下：

即当我浏览器屏幕缩小时，原先的组件都将变为跟brand一行的  右边的折叠行（三横线）。点击该三横按钮，则组件将显示出来。

三、分页组件

注意点：

1：使用类pagination(加pagination-lg类可使其变大)

2：实现翻页对齐与实现翻页两端对齐（前和后分别位于两端）。

贴码如下：

<!-- 分页 类--> <nav> <ul> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </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="#" aria-label="next"><span aria-hidden="true">&raquo;</span></a></li> </ul> </nav>

如果实现分页变大直接加上<ul >即可。

实现翻页效果如下：主要用到pager类

<!--翻页--> <nav> <ul> <li><a href="#">previous</a></li> <li><a href="#">next</a></li> </ul> </nav> <!--对齐链接分居两端加了previous类和next类--> <nav> <ul> <li><a href="#"><span aria-hidden="true">&larr;</span>older</a></li> <li><a href="#">newer<span aria-hidden="true">&rarr;</span></a></li> </ul> </nav>

上面两个的效果如下：

四、徽章

作用：将信息以醒目的数字呈现出来。

<!--徽章 --> <a href="#">Inbox<span>42</span></a> <button type="button"> Message<span>4</span> </button>

效果如下：

添加此类badge类，也可配合导航等一起使用。

 五、缩略图组件

配合栅格系统和类thumbnail来一起使用。贴码如下：可自行测试