bootstrap panel 布局

panel

    • 1. 效果
    • 2. 基于bootstrap实现

  • 用于页面分专栏展示

1. 效果

bootstrap panel 布局_第1张图片

bootstrap panel 布局_第2张图片
bootstrap panel 布局_第3张图片

  • 成品
    bootstrap panel 布局_第4张图片

2. 基于bootstrap实现


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

你可能感兴趣的:(#,html5,&,css3,JavaWeb,bootstrap)