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

　　很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：

　　 .navbar-fixed-top：导航条固定在浏览器窗口顶部

　　.navbar-fixed-bottom：导航条固定在浏览器窗口底部

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

时间： 2024-10-05 04:09:27

Bootstrap系列 -- 43. 固定导航条的相关文章

Bootstrap系列 -- 38. 基础导航条

在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default” “.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置 <div class="navbar navbar-default" role="navigati

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

页首固定导航条 #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

Bootstrap系列 -- 37. 基础导航样式

Bootstrap框架中制作导航条主要通过“.nav”样式.默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”.“nav-pills”之类.比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式 <ul class="nav nav-tabs"> <li><a href="##">Home</a></li&

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="en"><head> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <tit

bootstrap组件学习之导航条

Bootstrap3中的导航条主要包含品牌项(brand).菜单项(menu).表单项(form)等元素. 大屏下,各元素呈水平排列.小屏中,各元素默认隐藏,仅显示品牌项和一个折叠按钮.点击折叠按钮后,菜单和表单元素呈现为堆叠排列.由此可见,导航条由两个部分组成,一个是导航主题,由 .navbar-header 实现,另外一个是导航链接,由 .nav .navbar-nav 实现.它们都包含在组合类 .navbar .navbar-default 中. .navbar 类负责构建一个相对定位,5

Bootstrap 组件中的导航条

先查看效果: 该导航条可以适应不同尺寸的页面(如手机屏幕.电脑屏幕) 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor

Bootstrap系列 -- 44. 分页导航

带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法. <ul class="pagination"> <li><a href="#">«</a></li>

（滚动出现）固定导航条

<!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: -