Bootstrap学习笔记—做一个简单的底部导航条

最新推荐文章于 2024-02-07 20:27:19 发布

风醉流觞

最新推荐文章于 2024-02-07 20:27:19 发布

阅读量1.4w

点赞数 2

分类专栏： Bootstrap学习文章标签： bootstrap 导航

本文链接：https://blog.csdn.net/flywaterfree/article/details/51078001

版权

Bootstrap学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Bootstrap学习笔记—做一个简单的底部导航条

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Main_Nav_Bottom</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
    </head><!-- 在头部引入bootstrap的css包与js包 -->

    <body>  
        <div class="main_nav_bottom">
                <nav class="navbar navbar-default navbar-fixed-bottom">
                    <div class="container" align="center">
                        <style>
                            .nav-tabs
                            {
                                text-align: center;
                                height: 40px;
                                line-height: 40px;
                            }
                        </style>
                        <ul class="nav nav-tabs nav-tabs-justified">
                            <div class="row" align="center">
                                <div class="col-md-4 col-sm-4 col-xs-4" align="center"><li><a href="#">Bootstrap1</a></li></div>
                                <div class="col-md-4 col-sm-4 col-xs-4" align="center"><li><a href="#">Bootstrap2</a></li></div>
                                <div class="col-md-4 col-sm-4 col-xs-4" align="center"><li><a href="#">Bootstrap3</a></li></div>
                            </div>
                        </ul>
                    </div>
                </nav>
            </div>  
    </body>
</html>

注释：

1、添加.navbar-fixed-bottom类可使导航条固定在底部；

2、包含一个.container 或 .container-fluid容器，让导航条居中，并在两侧添加内补（padding）；

3、<ul class="nav nav-tabs nav-tabs-justified">

nav-tabs(标签式导航) 、 nav-justified(等宽式)；

4、确定一个行row，想要使导航条分为三段，则col-md-4 col-sm-4 col-xs-4；

5、因为想使导航条的文字水平垂直居中，就写了个css

.nav-tabs
{
     text-align: center;
     height: 40px;
     line-height: 40px;
}

风醉流觞

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记—做一个简单的底部导航条

Bootstrap学习笔记—做一个简单的底部导航条代码：<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Main_Nav_Bottom</title> <link rel="style
复制链接

扫一扫