默认样式的导航条

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(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. Maven安装和eclipse里面的配置

    一 . Maven简单介绍 Apache Maven是个项目管理和自动构建工具,基于项目对象模型(POM)的概念.       作用:完成项目的相关操作,如:编译,构建,单元测试,安装,网站生成和基于 ...

  2. 路飞学城Python-Day79

    27-url控制器之path方法 由于基于re_path的路径编写方式是重复性高的编写url,如果规则改变了,则对应的要去修改很多url,这样是很不方便的 所以采用Django2.0的path去编写u ...

  3. jmeter目录讲解

    1.jmeter目录详解 2.这是bin目录下的examples 3.这是bin目录下的report-template 注意啦:jmeterw.cmd运行不带命令的窗口会侵占8080端口,会和tomc ...

  4. mongoDB authentication

    转自:http://blog.csdn.net/allen_jinjie/article/details/9235073 1. 最开始的时候,我们启动mongodb,但是不包含--auth参数: E: ...

  5. strtotime的一个使用问题

    我在开发过程中遇到这么这个问题,因为赶进度,没有记下来处理方案,在鸟哥的博客看到原理分析,很到位!平时开发中总是急着处理问题,没有深入分析和记录问题. 1.问题: 今天是2018-07-31 执行代码 ...

  6. github发布博客

    创建github项目:  名字为:{{你的帐号}}.github.io clone项目,创建并提交推送一个index页面 如: <!DOCTYPE html> <html> & ...

  7. Cookie 工具类

    一.导入 jar 包 <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet ...

  8. CF909A Generate Login

    CF909A Generate Login 题意翻译 给定两个用空格分隔的字符串,分别取两字符串的任意非空前缀,将两前缀合并为一个新的字符串,求可行字典序最小的字符串. 题目描述 The prefer ...

  9. java中继承关系学习小结

    继承:把多个类中同样的内容提取出来.定义到一个类中,其它类仅仅须要继承该类.就能够使用该类公开的属性和公开的方法.   继承的优点:提高代码的复用性.提高代码的可维护性.让类与类之间产生关系,是多态存 ...

  10. ORM进阶之Hibernate中对象的三大状态解析

    ORM进阶之 ORM简单介绍 ORM进阶之Hibernate简单介绍及框架搭 ORM进阶之Hibernate的三大对象 ORM进阶之Hibernate中对象的三大状态解析 在Hibernatea中每一 ...