Home >Web Front-end >Bootstrap Tutorial >A brief discussion on panel layout in bootstrap
A brief discussion on panel layout in bootstrap
- 青灯夜游forward
- 2021-01-11 18:44:542964browse
This article will introduce to you the panel layout in bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
bootstrap tutorial"
bootstrap panel layout
- Used for page column display
1. Effect
<!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>
For more programming related knowledge, please Visit:
The above is the detailed content of A brief discussion on panel layout in bootstrap. For more information, please follow other related articles on the PHP Chinese website!