Bootstrap-列表组面板和嵌入组件

来源：互联网发布：怎么查看淘宝客pid 编辑：程序博客网时间：2024/05/22 08:26
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="css/bootstrap.min.css"></head><body style="margin: 100px;"><!--列表组组件 基本格式--><ul class="list-group">    <li class="list-group-item">1页</li>    <li class="list-group-item">2页</li>    <li class="list-group-item">3页</li>    <li class="list-group-item">4页</li>    <!--列表项带勋章-->    <li class="list-group-item">咳咳咳<span class="badge">10</span></li></ul><!--链接和首选--><div class="list-group">    <a href="#" class="list-group-item">1页</a>    <a href="#" class="list-group-item active" >2页</a>    <a href="#" class="list-group-item">3页</a>    <a href="#" class="list-group-item">4页</a>    <!--列表项带勋章-->    <a class="list-group-item">咳咳咳<span class="badge">10</span></a></div><!--定制内容--><div class="list-group">    <a href="#" class="list-group-item">        哈哈哈        <h4>详细内容</h4>    </a>    <a href="#" class="list-group-item active" >2页</a>    <a href="#" class="list-group-item">3页</a>    <a href="#" class="list-group-item">4页</a></div><!--面板组件--><div class="panel panel-danger">    <div class="panel-heading">       <h3 class="panel-title">我是标题</h3>    </div>    <div class="panel-body">        我是一个面板容器        <table class="table">            <tr>                <th>1</th>                <th>2</th>                <th>2</th>            </tr>            <tr>                <td>1</td>                <td>1</td>                <td>1</td>            </tr>        </table>    </div>    <div class="panel-footer">        我是底部    </div></div><!--响应式嵌入组件：可用于：<iframe> <embed> <video> <object>-->   <div class="embed-responsive embed-responsive-16by9">       <embed src="" type=""/>   </div><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html>
阅读全文
0 0