鍍金池/ 問(wèn)答/Linux  HTML/ bookstrap面板

bookstrap面板

為什么引用pane沒(méi)有效果啊？下面的table都出效果了~

<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<body>
    <div id="app">
        
        
        <div class="panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
        </div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Time</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id    ">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <a href="">刪除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:[
                   {id:1, name:'奔馳',ctime: new Date()},
                   {id:2, name:'寶馬',ctime: new Date()}
                ]
            }
        })
    </script>
</body>

</html>
圖片描述

bookstrap4.0.0沒(méi)有么，只能用3？

回答
編輯回答
遲月

panel在Bootstrap4被官方刪除了->鏈接
解決辦法是，用card-header代替。

<div class="card">
    <div class="card-header">
        <h3>添加品牌</h3>
    </div>
</div>
2018年4月5日 14:46