首页 > 代码库 > bootstrap做的导航

bootstrap做的导航

2024-08-31 18:53:09   215人阅读

顶部导航：nav-tabs

左边导航：nav-list

响应式布局：div嵌套 ~ container、row、ol-lg-X

效果：

技术分享

源码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>1</title>
        <link rel="stylesheet" href="dist/css/bootstrap.css" />
        <link rel="stylesheet" href="dist/css/bootstrap-theme.css" />
    </head>

    <body>
        <div class="container">
            <!--顶部导航-->
            <div class="row">
                <div class="nav col-lg-12 navbar-brand">
                    <ul class="nav nav-tabs navbar-default ">
                        <li>
                            <a>首页</a>
                        </li>
                        <li class="active">
                            <a>水果</a>
                        </li>
                        <li>
                            <a>自我介绍</a>
                        </li>
                        <li>
                            <a>fuxk</a>
                        </li>
                    </ul>
                </div>
            </div>
            <br />
            <!--内容-->
            <div class="row">
                <div class="col-lg-1">
                    <ul class="nav nav-list navbar-default nav-pills ">
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li class="active">
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                        <li>
                            <a>XXXX</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-11">
                    <table class="table table-hover">
                        <thead>
                            <tr class="alert-info active table-">
                                <td><b>名称</b></td>
                                <td><b>单价</b></td>
                                <td><b>库存</b></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>番茄</td>
                                <td>1.1</td>
                                <td>3</td>
                            </tr>
                            <tr>
                                <td>苹果</td>
                                <td>2.5</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>哈密瓜</td>
                                <td>2.5</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>草莓</td>
                                <td>2.5</td>
                                <td>10</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="dist/js/jquery-3.1.1.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
    </body>

</html>

 

bootstrap做的导航


联系
我们