默认样式的导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

两端对齐的导航条导航链接已经被弃用了。

导航条内所包含元素溢出

由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间,你可能会遇到导航条中的内容折行的情况(也就是导航条占据两行)。解决办法如下:

  1. 减少导航条内所有元素所占据的宽度。
  2. 在某些尺寸的屏幕上(利用 响应式工具类)隐藏导航条内的一些元素。
  3. 修改导航条在水平排列和折叠排列互相转化时,触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现,或者自己重写相关的媒体查询代码,覆盖 Bootstrap 的默认值。

    依赖 JavaScript

    如果 JavaScript 被禁用,并且视口(viewport)足够窄,致使导航条折叠起来,导航条将不能被打开,.navbar-collapse 内所包含的内容也将不可见。

    修改视口的阈值,从而影响导航条的排列模式

    当浏览器视口(viewport)的宽度小于 @grid-float-breakpoint 值时,导航条内部的元素变为折叠排列,也就是变现为移动设备展现模式;当浏览器视口(viewport)的宽度大于@grid-float-breakpoint 值时,导航条内部的元素变为水平排列,也就是变现为非移动设备展现模式。通过调整源码中的这个值,就可以控制导航条何时堆叠排列,何时水平排列。默认值是 768px (小屏幕 -- 或者说是平板 --的最小值,或者说是平板)。

bootstrap-导航条的更多相关文章

  1. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  2. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  3. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  4. bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何

    bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...

  5. 浅谈Bootstrap——导航条起步

    不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...

  6. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Bootstrap——导航条(navbar)

    导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...

  8. bootstrap导航条组件

    一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...

  9. bootstrap导航条等样例持续更新》。。

    1.导航条 <!-- 导航条 --> <nav class="navbar navbar-static-top navbar-inverse"> <d ...

  10. bootstrap导航条相关知识

    在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...

随机推荐

  1. Python中生成器,迭代器,以及一些常用的内置函数.

    知识点总结 生成器 生成器的本质就是迭代器. 迭代器:Python中提供的已经写好的工具或者通过数据转化得来的. 生成器:需要我们自己用Python代码构建的 创建生成器的三种方法: 通过生成器函数 ...

  2. ES6标准入门(第三版)学习笔记(1)

    ES6声明变量的六种方法 ES5只有两种 var,function命令 ES6新增了let,const,class,import命令 验证var与let用法上的不同 var a = []; for ( ...

  3. Hadoop安装和使用

    1.安装 1.1.下载hadoop-2.5.1.tar.gz 1.2.解压至安装目录 tar -zxv -f hadoop-2.5.1.tar.gz -C ../soft/ 1.3.配置hadoop相 ...

  4. C++ auto类型说明符

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50864612 编程时常常需要把表达式的 ...

  5. File System Design Case Studies

    SRC=http://www.cs.rutgers.edu/~pxk/416/notes/13-fs-studies.html Paul Krzyzanowski April 24, 2014 Int ...

  6. 电脑-制作WIN7启动U盘

    1.需要准备的工具:win7系统盘(安装盘,不是ghost),软碟通工具,大于4G的U盘

  7. 【Web API系列教程】3.4 — 实战:处理数据(处理实体关系)

    前言 本部分描写叙述了EF怎样载入相关实体的细节,而且怎样在你的模型类中处理环形导航属性.(本部分预备了背景知识,而这不是完毕这个教程所必须的.你也能够跳到第五节) 预载入和延迟载入 预载入和延迟载入 ...

  8. OpenStack Heat总结之:Icehouse中通过Heat+Ceilometer实现Autoscaling

    在I版本号中,Heat中加入了对于AutoScaling资源的支持.github上也提供了相应的AutoScaling的模板(https://github.com/openstack/heat-tem ...

  9. MFC窗口去边框、置顶、全屏、激活

    静态移除长提边框非常easy,直接设置"Border"属性为"none"就可以 "Maximize Box", "Minimize ...

  10. android TextView加边框

    为TextView加边框.须要在drawable建xml文件,里面设置shape来设置文本框的特殊效果. <?xml version="1.0" encoding=" ...