直接上代码：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <title>Nav_Bottom</title>

        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/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>

最终效果图如下：

Bootstrap 固定底部导航栏菜单的更多相关文章

  1. bootstrap 固定底部导航自适应

    在使用bootstrap 底部导航的时候遇到了一个问题 -- 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖 自己写了一个JS脚本,解决自适应的问题 <nav class=&qu ...

  2. 固定底部导航菜单-续集（BottomMenu-移动端V3.0）

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  3. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  4. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  5. 底部导航栏使用BottomNavigationBar

    1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...

  6. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  7. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  8. Android UI-仿微信底部导航栏布局

    现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢.我们开发的主要的还是讲的是如何如 ...

  9. React-native 底部导航栏(二)

    1.组件安装:npm install react-native-router-flux --save 2.定义菜单图片和文字: import React, { Component } from 're ...

随机推荐

  1. Kettle系列: Kettle并行执行Trans后的合并问题

    我们在作业开发中为了处理效率, 经常需要并行执行一些trans, 等它们执行完毕后, 需要执行另外一些trans, 从流程上也就是分支+汇合. 粗看起来很简单, Kettle中对接一下这些组件就搞定了 ...

  2. C# Math.Round实现中国式四舍五入

    decimal sum = 11111.334; sum = , MidpointRounding.AwayFromZero);  sum:11111.33decimal sum = 11111.34 ...

  3. Devexpress dll搜集

    Devexpress一部分在全局dll中,需要分析缺哪些dll,有两种方式1.打包,安装时会自动提示 2.使用自带分析工具Assembly deployment tool

  4. 微信接口 output {"errMsg":"translateVoice:fail, the permission value is offline verifying"}

    jsApiList : [ 'checkJsApi', 'startRecord', 'stopRecord','translateVoice','scanQRCode', 'openCard' ]增 ...

  5. mysql 5.7 ERROR 1054(42S22) Unknown column 'password' in ‘field list’ 报错

    mysql 忘记密码 报错?ERROR 1054(42S22) Unknown column 'password' in ‘field list’原因:5.7版本下的mysql数据库下已经没有pass ...

  6. Java SE之正则表达式一：概述

    正则表达式 概念 定义:符合一定规则的表达式 作用:用于专门操作字符串 特点:用于一些特定的符号表示代码的操作,这样就简化了长篇的程序代码 好处:可以简化对字符串的复杂操作 弊端:符号定义越多,正则越 ...

  7. ThinkPHP5基础学习（慕课版）

    一.thinkphp 5.0 的安装及配置 二.URL和路由 三.请求和相应 四.视图和模板 五.数据库的操作 六.模型的操作

  8. 用JavaMail通过QQ邮箱来发送邮件（第一篇博客，备忘）

    1.先启用QQ邮箱里POP3/STMP服务:生成授权码 2.导入mail.jar包(不要用太古董的技术,你懂得) 3.注意要在代码里加上开启SSL加密的代码 4.直接上代码 import java.u ...

  9. 【译】第十一篇 SQL Server安全审核

    本篇文章是SQL Server安全系列的第十一篇,详细内容请参考原文. SQL Server审核SQL Server审核是指你可以在数据库或服务器实例监控事件.审核日志包含你选择捕获的事件的列表,在服 ...

  10. linux 共享内存的理解

    1.  共享内存是在shmget时创建出来的, 在 shmget(USER_SHARE_MEM_KEY,  sizeof(ADDR_NODE) , IPC_CREAT|0666)) ==-1) 的 s ...