bootstrap-导航条
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
两端对齐的导航条导航链接已经被弃用了。
导航条内所包含元素溢出
由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间,你可能会遇到导航条中的内容折行的情况(也就是导航条占据两行)。解决办法如下:
- 减少导航条内所有元素所占据的宽度。
- 在某些尺寸的屏幕上(利用 响应式工具类)隐藏导航条内的一些元素。
- 修改导航条在水平排列和折叠排列互相转化时,触发这个转化的最小屏幕宽度值。可以通过修改
@grid-float-breakpoint
变量实现,或者自己重写相关的媒体查询代码,覆盖 Bootstrap 的默认值。依赖 JavaScript
如果 JavaScript 被禁用,并且视口(viewport)足够窄,致使导航条折叠起来,导航条将不能被打开,
.navbar-collapse
内所包含的内容也将不可见。修改视口的阈值,从而影响导航条的排列模式
当浏览器视口(viewport)的宽度小于
@grid-float-breakpoint
值时,导航条内部的元素变为折叠排列,也就是变现为移动设备展现模式;当浏览器视口(viewport)的宽度大于@grid-float-breakpoint
值时,导航条内部的元素变为水平排列,也就是变现为非移动设备展现模式。通过调整源码中的这个值,就可以控制导航条何时堆叠排列,何时水平排列。默认值是768px
(小屏幕 -- 或者说是平板 --的最小值,或者说是平板)。
bootstrap-导航条的更多相关文章
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
- 浅谈Bootstrap——导航条起步
不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap——导航条(navbar)
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...
- bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
- bootstrap导航条等样例持续更新》。。
1.导航条 <!-- 导航条 --> <nav class="navbar navbar-static-top navbar-inverse"> <d ...
- bootstrap导航条相关知识
在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...
随机推荐
- 动漫绘画软件优动漫PAINT最近所用文件
在使用优动漫PAINT的时候有时候会遇到这样的问题,近期编辑的文件找不见了,或者想要接着之前的文件进行编辑,如何快速找到这些文件呢?其实在最近所用文件中一目了,本文我们一起来看看. 如果您想接着上次未 ...
- 如何在IE11中设置兼容模式?设置的具体方法
IE11浏览器软件版本:简体中文正式版 For Win7网络工具立即查看 1.同样进入需要兼容性模式的网站,点击菜单栏位工具--F12开发者人员工具!如下图所示. 2.在开发者选项左下侧菜单栏位,点击 ...
- php 的多进程
php的多进程处理依赖于pcntl扩展,通过pcntl_fork创建子进程来进行并行处理 例子1: <?php $pid = pcntl_fork(); if($pid == -1) { //错 ...
- django模板使用
概述 模板由两部分组成,HTML代码,逻辑控制代码,作用:快速生成HTML页面,优点:模板的设计实现了业务逻辑与现实内容的分离 定义模板 挖坑与继承 模板继承可以减少页面的内容的重复定义,实现页面的重 ...
- Django模型Model的定义
概述 Django对各种数据库提供了很好的支持,Django为这些数据库提供了统一的调用API,可以根据不同的业务需求选择不同的数据库. 模型.属性.表.字段间的关系 一个模型类在数据库中对应一张表, ...
- struts配置 WEB得拷贝要注意的事项
原始WEB文件tutoral===>新文件tutoralTest 要将靠拷贝的文件的contextRoot修改(一定要修改)
- mysql数据库优化原则
一.一个例子 数据库需要处理的行数: 189444*1877*13482~~~479亿 如果在关联字段上加上合适的索引: 数据库需要处理的行数:368006*1*3*1~~~110万 MySQL通常是 ...
- cogs 1143. [石门中学2009] 切割树
1143. [石门中学2009] 切割树 ★ 输入文件:treecut.in 输出文件:treecut.out 简单对比时间限制:1 s 内存限制:128 MB treecut 题目描 ...
- six.moves的用法
six是用来兼容python 2 和 3的,我猜名字就是用的2和3的最小公倍数. six.moves 是用来处理那些在2 和 3里面函数的位置有变化的,直接用six.moves就可以屏蔽掉这些变化 P ...
- OpenSSL简单介绍及在Windows、Linux、Mac系统上的编译步骤
OpenSSL介绍:OpenSSL是一个强大的安全套接字层password库,囊括基本的password算法.经常使用的密钥和证书封装管理功能及SSL协议.并提供丰富的应用程序供測试或其他目的使用. ...