bootstrop媒体对象、面板和Well

媒体对象

 

<div class="media">

    <div class="media-left">

        <a href="#">

            <img src="imgs/meinv.jpg" class="media-object" width="200" height="200">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">这是一个美女</h4>

        <p>这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女</p>

    </div>

</div>

媒体对象列表

 

<ul class="media-list">

    <li class="media">

        <a href="#" class="media-left">

            <img src="imgs/meinv.jpg" alt="" width="100" height="100">

        </a>

        <div class="media-body">

            <h4>这是一位美女</h4>

            <p>这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女</p>

            <p>这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女</p>

        </div>

    </li>

<li class="media">

        <a href="#" class="media-left">

            <img src="imgs/meinv.jpg" alt="" width="100" height="100">

        </a>

        <div class="media-body">

            <h4>这是一位美女</h4>

            <p>这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女</p>

            <p>这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女这是一个美女</p>

        </div>

    </li>

</ul>

 

面板

 

<div class="panel panel-default">

     <div class="panel-heading">

          学习网站

     </div>

     <div class="panel-body">

          welcome!

     </div>

     <div class="panel-footer">

          www.jikexueyuan.com

     </div>

</div>

可以嵌套表格，和列表

 

well组件的应用