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

来源：互联网发布：java 去掉图片水印编辑：程序博客网时间：2024/05/10 20:04

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;}

0 0