24
2020
04

Bootstrap:做一个简单的底部导航条

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;

}



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

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


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。