前端基础之《Bootstrap（10）—CSS组件_媒体对象、列表组、面板》

一、媒体对象

1、介绍
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

发表回复、评论的场景。

2、样式
.media
.media-left：左边的
.media-object：左边里面的
.media-body：右边的
.media-heading：右边里面的

3、回复就是拿一份media搁到p标签下面

<div class="media">
    <div class="media-left">
        <div class="media-object">
            <img src="holder.js/100x100">
        div>
    div>
    <div class="media-body">
        <div class="media-heading">
            <h2>linux技术h2>
            <p>linux技术linux技术linux技术linux技术linux技术p>
 
            <div class="media">
                <div class="media-left">
                    <div class="media-object">
                        <img src="holder.js/100x100">
                    div>
                div>
                <div class="media-body">
                    <div class="media-heading">
                        <h2>linux技术h2>
                        <p>linux技术linux技术linux技术linux技术linux技术p>
                    div>
                div>
            div>
            <div class="media">
                <div class="media-left">
                    <div class="media-object">
                        <img src="holder.js/100x100">
                    div>
                div>
                <div class="media-body">
                    <div class="media-heading">
                        <h2>linux技术h2>
                        <p>linux技术linux技术linux技术linux技术linux技术p>
                    div>
                div>
            div>
            <div class="media">
                <div class="media-left">
                    <div class="media-object">
                        <img src="holder.js/100x100">
                    div>
                div>
                <div class="media-body">
                    <div class="media-heading">
                        <h2>linux技术h2>
                        <p>linux技术linux技术linux技术linux技术linux技术p>
                    div>
                div>
            div>
            
        div>
    div>
div>
<div class="media">
    <div class="media-left">
        <div class="media-object">
            <img src="holder.js/100x100">
        div>
    div>
    <div class="media-body">
        <div class="media-heading">
            <h2>linux技术h2>
            <p>linux技术linux技术linux技术linux技术linux技术p>
        div>
    div>
div>
<div class="media">
    <div class="media-left">
        <div class="media-object">
            <img src="holder.js/100x100">
        div>
    div>
    <div class="media-body">
        <div class="media-heading">
            <h2>linux技术h2>
            <p>linux技术linux技术linux技术linux技术linux技术p>
        div>
    div>
div>
<div class="media">
    <div class="media-left">
        <div class="media-object">
            <img src="holder.js/100x100">
        div>
    div>
    <div class="media-body">
        <div class="media-heading">
            <h2>linux技术h2>
            <p>linux技术linux技术linux技术linux技术linux技术p>
        div>
    div>
div>

4、位置
.media-left：靠左边
.media-right：靠右边

5、对齐
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
.media-middle：居中
.media-top：顶端
.media-bottom：底部

二、列表组

1、基本列表组
最简单的列表组仅仅是一个带有多个列表条目的无序列表。
.list-group：列表组
.list-group-item：列表项

<ul class="list-group">
    <li class="list-group-item">linuxli>
    <li class="list-group-item">linuxli>
    <li class="list-group-item">linuxli>
    <li class="list-group-item">linuxli>
ul>

2、链接列表组
用a链接做列表组。

<div class="list-group">
    <a href="" class="list-group-item active">linuxa>
    <a href="" class="list-group-item">linuxa>
    <a href="" class="list-group-item">linuxa>
    <a href="" class="list-group-item">linuxa>
div>

3、按钮列表组
用按钮做列表组。

<div class="list-group">
    <button class="list-group-item">linuxbutton>
    <button class="list-group-item">linuxbutton>
    <button class="list-group-item">linuxbutton>
    <button class="list-group-item">linuxbutton>
div>

4、列表组颜色
.list-group-item-success：绿色
.list-group-item-info：青色
.list-group-item-warning：黄色
.list-group-item-danger：红色

5、定制内容
列表组中的每个元素都可以是任何HTML内容，类似新闻
.list-group-item-heading：新闻标题
.list-group-item-text：新闻简单概括

<div class="list-group">
    <a href="" class="list-group-item">
        <h2 class="list-group-item-header">linuxh2>
        <p class="list-group-item-text">linux技术linux技术linux技术linux技术linux技术p>
    a>
div>

三、面板

1、面板
.panel：面板
.panel-heading：面板头部
.panel-title：标题
.panel-body：面板体部
.panel-footer：面板尾部

2、颜色
.panel-primary：蓝色
.panel-success：绿色
.panel-info：青色
.panel-warning：黄色
.panel-danger：红色

<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">
            <h1>百度新闻h1>
        div>
    div>
    <div class="panel-body">
        <h2>linuxh2>
    div>
    <div class="panel-footer">
        <p>linux技术linux技术linux技术linux技术linux技术p>
    div>
div>

3、面板里带表格
把.panel-body给去了，表格就能无缝对接。

<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">
            <h1>百度新闻h1>
        div>
    div>
    <table class="table table-striped table-hover table-bordered">
        <tr>
            <th>idth>
            <th>usernameth>
            <th>passwordth>
        tr>
        <tr>
            <td>001td>
            <td>002td>
            <td>003td>
        tr>
    table>
    <div class="panel-footer">
        <p>linux技术linux技术linux技术linux技术linux技术p>
    div>
div>

四、