bootstrap中的panel布局用于做什么，如何实现-群英

bootstrap中的panel布局用于做什么，如何实现

Admin发表于 2022-06-24 17:32:04753 次浏览

这篇文章主要为大家详细介绍了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布局用于做什么，如何实现已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： bootstrap

上一篇： bootstrap里面可关闭tab是如何实现的呢？

下一篇：前端html5框架有几种，分别是什么