相关推荐：《bootstrap教程》
bootstrap panel 布局
- 用于页面分专栏展示
1. 效果
- 成品
2. 基于bootstrap实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>panel 布局</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container"> <!--面板控制-->
<!-- 标题链接 -->
<div class="col-xs-12" style="margin-top: 5px;">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab" style="color: red;">
<div class="top-title">推荐音乐</div>
</a>
</li>
<li role="presentation">
<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
<div class="top-title">热歌榜</div>
</a>
</li>
<li role="presentation">
<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
<div class="top-title">搜索</div>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<!---->
<div role="tabpanel" class="tab-pane active" id="home">
推荐音乐面板主体
</div>
<!---->
<div role="tabpanel" class="tab-pane" id="profile" style="">
热歌榜
</div>
<!---->
<div role="tabpanel" class="tab-pane" id="messages">
搜索框
</div>
</div>
</div>
</body>
</html>更多编程相关知识，请访问：编程入门！！
以上就是浅谈bootstrap中的panel布局的详细内容，更多请关注php中文网其它相关文章！
声明：本文转载于：csdn，如有侵犯，请联系admin@php.cn删除
上一篇：bootstrap能开发移动端吗 下一篇：bootstrap怎么改字体
