bootstrap-固定导航条

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>固定导航条</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      　<div class="navbar-header">
      　    <a href="##" class="navbar-brand">慕课网</a>
      　</div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
         </ul>
    </div>

    <div class="content">我是内容</div>
    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
      　<div class="navbar-header">
      　    <a href="##" class="navbar-brand">慕课网</a>
      　</div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
         </ul>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-10-14 12:44:08

bootstrap-固定导航条的相关文章

Bootstrap系列 -- 43. 固定导航条

很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定在浏览器窗口顶部 .navbar-fixed-bottom:导航条固定在浏览器窗口底部 <div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div>

Bootstrap之导航条，分页导航

导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 基础导航条使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使

页首固定导航条和页底固定导航条

页首固定导航条 #topNav { position:fixed; top:0; _ position:absolute; _top:expression_r(eval_r(document.documentElement.scrollTop)); overflow:auto; z-index:9999; } 页尾固定导航条 body { background-image:url(about:blank);background-attachment:fixed; } #bottomNav { b

JS实现网页下拉一段后固定导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Bootstrap（导航条）

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>顶部导航

bootstrap－导航条

默认样式的导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链接已经被弃用了. 导航条内所包含元素溢出由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间,你可能会遇到导航条中的内容折行的情况(也就是导航条占据两行).解决办法如下: 减少导航条内所有元素所占据的宽度. 在某些尺寸的屏幕上(利用响应式工具类)隐藏导航条内的一些元素. 修

bootstrap制作导航条

bootstrap 导航条摸索了好久,要不就是左边和右边不会水平对齐,要不就是颜色不一样,菜鸟最后终于搞定,直接把代码放这里,以后直接用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&

（滚动出现）固定导航条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } .menu.f{ position: fixed; top: 0; left: 50%; margin-left: -

Bootstrap导航条

前面的话导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条基础导航条在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

神奇的Bootstrap 导航条全面实战篇

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/52056377 导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> &l