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 ...
随机推荐
- iframe子页面调用父页面js函数
window.parent.document.getElementById("test").value; jQuery方法为: $(window.parent.document). ...
- MongoDB_基础知识
mongoDB术语:database-数据库,collection-数据库表/集合,document-数据记录行/文档,field-数据字段/域,index-索引,primary key-主键(Mon ...
- 【udacity】机器学习
Evernote Export 2.人工智能简介 机器学习源自于人工智能,在此方向上,该领域有分为不同学派,机器学习主要关注的是制造能够自主动作的机器 3.人工智能难题 1.所有智能体都只有很少的计算 ...
- P1111 修复公路 (prim)
题目背景 A地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 题目描述 给出A地区的村庄数N,和公路数M,公路是双向的.并告诉你每条公路的连着哪两个村庄,并告诉你什么时 ...
- 使用 Laravel 5.5+ 更好的来实现 404 响应
译文首发于 使用 Laravel 5.5+ 更好的来实现 404 响应,转载请注明出处! Laravel 5.5.10 封装了两个有用的路由器方法,可以帮助我们为用户提供更好的 404 页面.现在,当 ...
- Linux设备驱动--块设备(一)之概念和框架(转)
基本概念 块设备(blockdevice) --- 是一种具有一定结构的随机存取设备,对这种设备的读写是按块进行的,他使用缓冲区来存放暂时的数据,待条件成熟后,从缓存一次性写入设备或者从设备一次性 ...
- Elasticsearch 入门 - 安装、启动和配置
安装 请参阅elastic官网 :Installing Elasticsearch 启动 使用 ./bin/elasticsearch 命令即可启动 使用 ./bin/elasticsearch -d ...
- android window类
Android的Window类(一) Android的GUI层并不复杂.它的复杂度类似于WGUI这类基于布局和对话框的GUI,与MFC.QT等大型框架没有可比性,甚至飞漫魏永明的MiniGUI都比它复 ...
- 企业级工作流解决方案(十三)--集成Abp和ng-alain--数据库读写分离
说到程序里面数据库管理,无非就是两件事情,一是数据库操作,对于数据库的操作,各种程序语言都有封装,也就是所谓的ORM框架,.net 方向一般用得比较多和就是.net framework和dapper, ...
- 【ACM-ICPC 2018 沈阳赛区网络预赛 K】Supreme Number
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然每个数字只可能是1,3,5,7 然后如果3,5,7这些数字出现两次以上.显然两个3||5||7都能被11整除. 然后1的话最多能 ...