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組件的應用