bootstrap中的panel布局用于做什么，如何实现
导读：这篇文章主要为大家详细介绍了bootstrap中的panel布局用于做什么，如何实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助。 本篇文章给大家介绍一下bootstrap中的pa...
这篇文章主要为大家详细介绍了bootstrap中的panel布局用于做什么，如何实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望对大家学习或工作能有帮助。本篇文章给大家介绍一下bootstrap中的panel布局。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
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布局用于做什么，如何实现”的内容就介绍到这，感谢各位的阅读，相信大家对bootstrap中的panel布局用于做什么，如何实现已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： bootstrap中的panel布局用于做什么，如何实现
本文地址： https://pptw.com/jishu/654070.html