ch09-分页、标签组件.ppt

第9章分页、标签组件路径组件分页组件标签徽章（badge）教学内容路径组件一、路径组件：路径组件也叫做面包屑导航。//面包屑导航ulclass=breadcrumb liahref=#首页/a/li liahref=#新闻/a/li liahref=#产品/a/li liahref=#关于/a/li/ul路径组件二、分页组件：分页组件可以提供带有展示页面的功能。1.默认分页ulclass=pagination liahref=#laquo;/a/li liclass=activeahref=#1/a/li liahref=#2/a/li liahref=#3/a/li liahref=#4/a/li liahref=#5/a/li liahref=#6/a/li liahref=#7/a/li liahref=#raquo;/a/li/ul路径组件2.首选项和禁用liclass=activeahref=#1/a/liliclass=disabledahref=#2/a/li3.设置尺寸，常见的有：lg、默认、sm。ulclass=paginationpagination-lg4.翻页效果ulclass=pager liahref=#上一页/a/li liahref=#下一页/a/li/ul路径组件5.对齐翻页链接ulclass=pagerliclass=previousahref=#上一页/a/liliclass=nextahref=#下一页/a/li/ul6.翻页项禁用liclass=previousdisabledahref=#上一页/a/li标签三、标签：1.在文本后面带上标签p标签的spanclass=labellabel-default用法1/span/p2.不同色调的标签p标签的spanclass=labellabel-primary用法2/span/pp标签的spanclass=labellabel-success用法3/span/pp标签的spanclass=labellabel-info用法4/span/pp标签的spanclass=labellabel-warning用法5/span/pp标签的spanclass=labellabel-danger用法6/span/p徽章（badge）四、徽章（badge）：1.未读信息数量徽章ahref=#信息spanclass=badge10/span/a2.按钮中使用徽章buttonclass=btnbtn-success提交spanclass=badge3/span/button3.激活状态自动适配色调ulclass=navnav-pillsliclass=activeahref=#首页spanclass=badge2/span/a/liliahref=#资讯/a/li/ul路径组件分页组件标签徽章（badge）本讲总结作业：一、作业内容： 1.路径组件 2.分页组件 3.标签 4.徽章（badge）