bootstrap布局（一）

最新推荐文章于 2023-09-05 11:21:09 发布

鲸鱼姐

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量568

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/90245980

版权

bootstrap 专栏收录该内容

42 篇文章 7 订阅

订阅专栏

boostrap布局

先介绍下bootstrap简单的结构

Container-》row-》column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>

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

<body>
<div class="container">
    <!--顶部导航-->
    <div class="row">
        <div class="nav col-lg-12 ">
            <ul class="nav nav-tabs">
                <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-sm-2">
            <ul class="nav nav-list">
                <li class="nav-header">List header</li>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">Applications</a></li>
                <li class="nav-header">Another list header</li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-10">
            <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="assets/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>

</html>
</body>
</html>