微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap源码解读媒体对象、列表组和面板10

媒体对象

基础媒体对象

例如:

rush:xhtml;">
全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!

实现原理只是设置他们之间的间距。

媒体对象的嵌套

只需要将另一个媒体对象结构放置在媒体对象的主体“media-body”内即可。

媒体对象列表

使用ul,并且在ul上添加类名“media-list”,而在li上使用类名“media”即可。 媒体对象列表只是把列表的左间距置0以及去掉了项目列表符号,实现源码如下:

列表组

基础列表组

基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,也可以是ol或者div元素 list-group-item:列表项,常用的是li元素,也可以是div元素 例如:

  • 主要设置了其间距,边框和圆角。实现源码如下:

    带徽章的列表组

    其实就是将徽章组件和基础列表组结合在一起。只需要在“list-group-item”中添加徽章组件“badge”即可。例如:

    列表项1
  • 列表项2
  • 列表项3
  • 实现原理就是给徽章设置了一个右浮动,如果有两个徽章同时在一个列表项中出现时,设置了他们之间的距离。实现源码如下:

    .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; }

    带链接的列表组

    要让列表组带链接,我们可以给列表项的文本添加链接标签,然后增加style=”display: block”使整行可点击。例如:

  • 不过Bootstrap有另外的实现方式,就是把ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。例如:

    rush:xhtml;">

    主要是给文本去掉了下划线,增加悬浮效果。实现源码如下:

    <div class="jb51code">
    <pre class="brush:css;">
    a.list-group-item {
    color: #555;
    }
    a.list-group-item .list-group-item-heading {
    color: #333;
    }
    a.list-group-item:hover,a.list-group-item:focus {
    color: #555;
    text-decoration: none;
    background-color: #f5f5f5;
    }

    自定义列表组

    在链接列表组的基础上新增了两个样式: list-group-item-heading:用来定义列表项头部样式 list-group-item-text:用来定义列表项主要内容 例如:

    实现源码如下:

    small,.list-group-item.active:hover .list-group-item-heading > small,.list-group-item.active:focus .list-group-item-heading > small,.list-group-item.active .list-group-item-heading > .small,.list-group-item.active:hover .list-group-item-heading > .small,.list-group-item.active:focus .list-group-item-heading > .small { color: inherit; } .list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text { color: #e1edf7; } .list-group-item-heading { margin-top: 0; margin-bottom: 5px; } .list-group-item-text { margin-bottom: 0; line-height: 1.3; }

    列表项的状态设置

    在对应的列表项中添加类名“active/disabled”即可。

    彩色列表组

    在“list-group-item”基础上增加对应的类名即可: list-group-item-success:成功绿 list-group-item-info:信息蓝 list-group-item-warning:警告黄 list-group-item-danger:错误红 实现原理其实仅仅是修改了背景、文本和边框的颜色而已。

    面板

    基础面板

    基础面板就是div容器运用了“panel”样式,产生一个具有边框的文本显示块,然后在里面添加一个“div.panel-body”来放置面板主体内容。由于“panel”不控制主题颜色,所以我们在“panel”的基础上增加一个控制颜色的主题“panel-default”。例如:

    rush:xhtml;">

    实现源码如下:

    rush:css;"> .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-Box-shadow: 0 1px 1px rgba(0,.05); Box-shadow: 0 1px 1px rgba(0,.05); } .panel-body { padding: 15px; }

    面板的头和尾

    使用panel-heading和panel-footer即可。例如:

    rush:xhtml;">
    heading">头部内容
    正文内容

    实现源码如下:

    .dropdown .dropdown-toggle { color: inherit; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-title > a { color: inherit; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }

    彩色面板

    面板组件除了认的主题样式panel-default之外,还有以下几种彩色主题样式: panel-primary:重点蓝 panel-success:成功绿 panel-info:信息蓝 panel-warning:警告黄 panel-danger:危险红 例如:

    面板中嵌套表格

    例如:

    rush:xhtml;">
    heading">这里是标题
    这里是正文

    表头1 内容1内容2内容3

    我们这里吧table放在和panel-body平级的地方。把table放在panel-body里面也可以,不过由于panel-body设置了一个padding:15px的值,所以那样的话表格和面板边缘会有一点间距,不太好看。

    面板中嵌套列表组

    例如:

    rush:xhtml;">
    heading">这里是标题
    这里是正文

    本文系列教程整理到: 专题中,欢迎点击学习。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    表头2 表头3