집 > 기사 > 웹 프론트엔드 > 부트스트랩의 패널 레이아웃에 대한 간략한 토론

부트스트랩의 패널 레이아웃에 대한 간략한 토론

青灯夜游앞으로: 2021-01-11 18:44:542911검색

이 글에서는 bootstrap의 패널 레이아웃을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장 사항: "부트스트랩 튜토리얼"

부트스트랩 패널 레이아웃

페이지 열 표시용

완제품.

2. 부트스트랩 구현을 기반으로 합니다.

<!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>

프로그래밍 소개

를 방문하세요! !

위 내용은 부트스트랩의 패널 레이아웃에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

bootstrap

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：부트스트랩으로 모바일 단말기를 개발할 수 있나요?다음 기사：부트스트랩으로 모바일 단말기를 개발할 수 있나요?