angular13使用bootstrap3表格没有样式

Question

index.component.css 代码

/* ============================== 格式化 ============================== */

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

a:hover {
    text-decoration:none
}

/* ============================== 头部导航 ============================== */

header>nav {
    height: 70px;
    border-bottom: 1px solid #F0F0FA;
}

header>nav {
    padding: 0px 70px 0px 70px;
}

#menu>ul>li>a {
    display: block;
    line-height: 50px;
    margin-left: 15px;
    margin-right: 15px;
}

#menu>ul>li:hover{
    background-color: #F0F0FA;
}

/* ---------- Flex 容器布局设置 ---------- */

#welcome, #update, #menu>ul, header>nav {
    display: flex;
}

header>nav{
    align-items: center;
}

#update {
    justify-content: end;
}

#menu>ul{
    justify-content: space-around
}

/* ============================== 主体内容 ============================== */

index.component.html 代码

<header>
    <nav class="row">
        <div class="col-md-4">
            <div id="welcome">
                <h3>你好! Admin</h3>
            </div>
        </div>
        <div class="col-md-4">
            <div id="menu">
                <ul>
                    <li><a href="javascript:void(0)">菜单1</a></li>
                    <li><a href="javascript:void(0)">菜单2</a></li>
                    <li><a href="javascript:void(0)">菜单3</a></li>
                    <li><a href="javascript:void(0)">菜单4</a></li>
                    <li><a href="javascript:void(0)">菜单5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-4">
            <div id="update">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="bookName"></label>
                        <input type="text" class="form-control" id="bookName" placeholder="请输入书名">
                    </div>&nbsp;
                    <button class="btn btn-default">添加</button>
                </form>
            </div>
        </div>
    </nav>
</header>

<div id="main" class="container">
    <table class="table table-hover">
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Java</td>
            <td>
                <div class="btn-group">
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-edit"></span>
                    </button>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>MySQL</td>
            <td>
                <div class="btn-group">
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-edit"></span>
                    </button>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </div>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>Angular</td>
            <td>
                <div class="btn-group">
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-edit"></span>
                    </button>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </div>
            </td>
        </tr>
    </table>
</div>

效果图