Bootstrap媒体列表

!DOCTYPE htmlhtmlheadtitleTry v1.2 Bootstrap Online/titlelink href=/bootstrap/css/bootstrap.min.css rel=stylesheet

编程学习网为您整理以下代码实例,主要实现:Bootstrap媒体列表,希望可以帮到各位朋友。

<!DOCTYPE HTML>
<HTML>
<head>
   <Title>Try v1.2 bootstrap Online</Title>
   <link href="/bootstrap/CSS/bootstrap.min.CSS" rel="stylesheet">
   <script src="/scripts/jquery.min.Js"></script>
   <script src="/bootstrap/Js/bootstrap.min.Js"></script>
</head>
<body>

<ul class = "media-List">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
      </a>

      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>

         <p>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </p>

         <!-- nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                  alt = "Generic placeholder image">
            </a>

            <div class = "media-body">
               <h4 class = "media-heading">nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.

               <!-- nested media object -->
               <div class = "media">
                  <a class = "pull-left" href = "#">
                     <img class = "media-object" src = "/bootstrap/images/64.jpg" 
                        alt = "Generic placeholder image">
                  </a>

                  <div class = "media-body">
                     <h4 class = "media-heading">nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>

               </div>
            </div>

         </div>

         <!-- nested media object -->
         <div class = "media">
            <a class = "pull-left" href = "#">
               <img class = "media-object" src = "/bootstrap/images/64.jpg"
                  alt = "Generic placeholder image">
            </a>

            <div class = "media-body">
               <h4 class = "media-heading">nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>

         </div>
      </div>
   </li>

   <li class = "media">
      <a class = "pull-right" href = "#">
         <img class = "media-object" src = "/bootstrap/images/64.jpg" 
            alt = "Generic placeholder image">
      </a>

      <div class = "media-body">
         <h4 class = "media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>

   </li>
</ul>

</body>
</HTML>
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐