bootstrap学习12-响应式嵌入组件

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_30747253

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daniel-lij/p/6391203.html

本文介绍了Bootstrap框架中列表组和面板组件的使用方法及示例代码，包括不同样式和状态的列表项、链接和按钮形式的列表项、定制内容等，并展示了如何使用面板组件来构建登录注册窗口等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>列表组面板和嵌入组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body style="margin:50px;">
      <!--
      这是列表组组件:badge自带徽章 disable 禁用 适用于做侧栏
      -->
<ul class="list-group">
    <li class="list-group-item">1.这是第一页</li>
    <li class="list-group-item">2.这是第二页<span class="badge">10</span></li>
    <li class="list-group-item disable">3.这是第三页</li>
    <li class="list-group-item list-group-item-warning">4.这是第四页</li>
</ul>
<!--链接和首选  active 首选项-->
<div class="list-group">
    <a href="#" class="list-group-item">1.这是第一页</a>
    <a class="list-group-item active" >2.这是第二页<span class="badge">10</span></a>
    <a class="list-group-item">3.这是第三页</a>
    <a class="list-group-item">4.这是第四页</a>
</div>
<!--button列表  active 首选项-->
<div class="list-group">
    <button href="#" class="list-group-item">1.这是第一页</button>
    <button class="list-group-item active" >2.这是第二页<span class="badge">10</span></button>
    <button class="list-group-item">3.这是第三页</button>
    <button class="list-group-item">4.这是第四页</button>
</div>
<!--定制内容-->
<div class="list-group">
    <a href="#" class="list-group-item">
        <h3>世界</h3>
        <span>你好bootstrap</span>
        </a>
    <a class="list-group-item active" >2.这是第二页<span class="badge">10</span></a>
    <a class="list-group-item">3.这是第三页</a>
    <a class="list-group-item">4.这是第四页</a>
</div>

<!--面板组件是用来存放内容的组件: 登录注册小窗口-->
<div class="panel panel-default">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<div class="panel-footer">面板底部</div>
</div>
<!--面板的六大情景类 default success warning info danger primary
-->
<div class="panel panel-danger">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<div class="panel-footer">面板底部</div>
</div>
<!--添加表格-->
<div class="panel panel-danger">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<table class="table">
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
  </tr>
   <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
  </tr>    
</table>
<div class="panel-footer">面板底部</div>
</div>
    <!--添加列表-->
<div class="panel panel-danger">
<div class="panel-heading">标题区域</div>
<div class="panel-body">面板容器</div>
<ul class="list-group">
    <li class="list-group-item">1.这是第一页</li>
    <li class="list-group-item">2.这是第二页<span class="badge">10</span></li>
    <li class="list-group-item disable">3.这是第三页</li>
    <li class="list-group-item list-group-item-warning">4.这是第四页</li>
</ul>
<div class="panel-footer">面板底部</div>
</div>

<!--
响应式嵌入组件可以直接用于 iframe embed video and object
-->
<div class="container">
    <h3>响应式嵌入组件</h3>
    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="http://www.iqiyi.com/v_19rra5ok9c.html?fc=87bbded392d221f5" ></iframe>
    </div>
    <hr/>
        <div class="embed-responsive embed-responsive-4by3">
    <embed class="embed-responsive-item" src="http://www.iqiyi.com/v_19rra5ok9c.html?fc=87bbded392d221f5" 
        width="350px" height="240px" align="middle"
        ></embed>
    </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>