bootstrap之navbar
.navbar——设置nav元素为导航条组件;
.navbar-default——指定导航条组件为默认主题;
.navbar-inverse——指定导航条组件为黑色主题;
.navbar-fixed-top——设置导航条组件固定在顶部;
.navbar-fixed-bottom——设置导航条组件固定在底部;
.container-fluid——设置宽度充满父元素,即为100%;
.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮;
.navbar-toggle——设置button元素为导航条组件的切换钮;
.collapsed——设置button元素为在视口小于768px时才显示;
.navbar-brand——设置导航条组件内的品牌图标;
navbar-brand默认是放文字的,也可以放图片,但必须是小图片,如果图片太大,位置就会靠下.
例子:
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> STEM教育</a></div></div>
</nav>
</body>
代码执行时,样式是这样的:
我们发现图标和字体是错位了。我们只需要在加入:display: inline;就可以了,加入后的代码如下:
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
</head>
<body><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;display:inline;"> STEM教育</a></div></div>
</nav>
</body>~
代码执行后,样式如下图,已经成为我们想要的样子了:
也可以这样写:
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
<style>.navbar-brand>img {display: inline;}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;"> STEM教育</a></div></div>
</nav>
</body>~
效果是一样的:
解释:
display:inline 的作用是设置对象做为行内元素显示,也就是它能够将垂直排列变成横向排列。
.collapse——设置div元素为视口大于768px时显示;
.navbar-collapse——设置div元素为导航条组件各列表项的父元素;
这里说的有点不清楚,我解释一下,collapse的作用是为了当浏览器的窗口宽度小于768px的时候,将设置为collapse样式的div元素内的所有其它元素都折叠起来,以一个列表的形式显示。
例子:
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐;
.navbar-right——设置导航条内元素向右对齐;
当出现navbar-right时:~
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐;
.navbar-right——设置导航条内元素向右对齐;
当出现navbar-right时:
<div class="navbar-collapse collapse"><form class="navbar-form"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span class="input-group-btn"><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div></form><ul class="nav navbar-nav navbar-right"><li><a ><span class="glyphicon glyphicon-log-in"></span> 登录</a></li><li><a ><span class="glyphicon glyphicon-log-out"></span> 退出</a></li></ul>
</div>~
运行结果如下:
可以看出form和ul不在同一行,这是因为ul使用navbar-right指定靠右显示,而form并未指定靠左还是靠右。应该将form指定靠左显示,即设置样式为navbar-left:
<div class="navbar-collapse collapse"><form class="navbar-form navbar-left"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span class="input-group-btn"><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div></form><ul class="nav navbar-nav navbar-right"><li><a ><span class="glyphicon glyphicon-log-in"></span> 登录</a></li><li><a ><span class="glyphicon glyphicon-log-out"></span> 退出</a></li></ul>
</div>
执行解决为:
在ul标签中使用了navbar-nav的样式,如果没有使用的话:
<ul class="nav navbar-right"><li><a ><span class="glyphicon glyphicon-log-in"></span> 登录</a></li><li><a ><span class="glyphicon glyphicon-log-out"></span> 退出</a></li>
</ul>
会导致两个li标签在不同的行,加上navbar-nav后,可以使两个li标签在同一行显示。
.navbar-form——为导航条组件内部的表单组件;
.navbar-form:主要调整所有form都为行内元素
.navbar-btn——为导航条组件内部的按钮样式;
.navbar-text——为导航条组件内部的文本样式;
.navbar-link——在标准的导航组件之外添加标准链接,让链接有正确的颜色和反色设置;
.breadcrumb——设置列表元素显示为路径导航组件;
form-goup和input-goup参考:https://blog.csdn.net/qq_15267341/article/details/54016811写的很好哦。
<span class="glyphicon glyphicon-search"></span> //通常用户放在搜索字体的前面,显示一个小小的搜索图标,如下图:
input-group-btn的作用:
例子:
<form class="navbar-form"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div>
</form>
想要将搜索放在文本框后面,只需要将入input-group-btn样式就可以了:
<div class="navbar-collapse collapse"><form class="navbar-form"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span class="input-group-btn"><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div></form>
</div>
运行结果如下:
如果将input-group-btn换成input-group-addon后,就会变成如下的样子:
是不是很难看?
bootstrap之navbar相关推荐
- 带徽标的Bootstrap 3 Navbar
本文翻译自:Bootstrap 3 Navbar with Logo I want to use the Bootstrap 3 default navbar with an image logo i ...
- 三、Bootstrap之Navbar属性整理
Bootstrap之Navbar属性整理 参考资料 container Navbar属性 参考资料 row和col可以参考一下: https://blog.csdn.net/yzy85/article ...
- bootstrap之navbar样式
一.前言 现在开始介绍bootstrap的导航条(navbar)样式. 二.源码 1.navbar.less 1.1.navbar.less源码 //// Navbars// ------------ ...
- 具有左,中或右对齐项的Bootstrap NavBar
本文翻译自:Bootstrap NavBar with left, center or right aligned items In Bootstrap , what is the most plat ...
- 【读书笔记《Bootstrap 实战》】2.作品展示站点
假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...
- Bootstrap 导航条
导航条(navbar)是一个常用的组件,也是 Bootstrap 的特色功能.导航条一般包含站点名和几个导航链接.还可以对导航条加以扩展,添加表单控件和下拉菜单等. 基本导航条 基本导航条中包含站点名 ...
- 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表
我想让我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题. 我还想丢失菜单标题旁边的小箭头. #1楼 这将隐藏上升的 .navbar .dropdown-menu:before {disp ...
- Boostrap nav和navbar的详细使用
bootstrap之navbar nav和navbar的区别是nav不能折叠,navbar可以折叠 container:固定960px宽度,(如果又引入了响应式样式,则会适当调整,例如1600*900 ...
- Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
最新文章
- 日常运维管理技巧十七(Nethogs进程流量监控工具)(转载)
- [学习笔记]Silverlight4 RIA 开发全程解析[项目全程记录]----第二章--为站点流行而准备:提供一个可扩展的体系结构(写作中)...
- 互联网分布式架构--演进过程
- 蓝桥杯-拿糖果(java)
- hdu 1024(滚动数组优化)
- SQL中CONVERT转化函数的用法[个人推荐]
- 树莓派使用STEP1:装系统
- swagger core 和 swagger ui 如何关联【窥探】
- 讯飞输入法pad版x86_讯飞搜狗为何抵不过百度输入法?读完你就明白了
- winform 开发涉及到的问题
- Google Play 应用迁移
- javacv 人脸追踪_基于JavaCV的人脸识别程序
- MySQL遇到错误:1217 - Cannot delete or update a parent row: a foreign key constraint fails
- python小游戏——俄罗斯方块
- MAC 强制退出程序
- Lamp 服务器环境安装
- 怎样把其他格式的音频文件转换成MP3格式的
- git处理 Update failed cannot lock
- 8年程序猿告诉你程序员能赚大钱么?
- 次世代游戏建模学习之PBR游戏模型流程到底是怎么样?
热门文章
- js遍历map(js遍历map对象)
- Photoshop 2023 Beta Ai 爱国版 安装包
- LeetCode 买卖股票的最佳时机 - 超详细讲解系列题
- 《梦境杀手》(Dreamkiller)完整硬盘版[压缩包]
- 直播运营应该具备哪些技能
- 「建模学习」Zbrush中凹凸贴图、法线贴图和置换贴图的区别
- Talend“作业设计模式”和最佳实践
- 利用chrome检查网页
- SQL数据库(分页查询、DCL 数据控制语言、通用函数、约束、多表查询)
- python中shutil是什么意思_python中shutil模块