bootstrap导航栏的辛酸史
昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢。不过还好昨天写了一些内容。现在奉上。不作更改。
今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。)
我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨晚在完玩狼人杀后,突然灵机一闪。
能不能通过内部的固定高度,来实现垂直平分的效果呢。
在查看psd图的效果是导航栏的a是垂直平分的。
那么我可否通过固定a超链接的高度来实现垂直平分呢?
<div "h-nav">
<nav "container navbar navbar-default" role="navigation">
<div "row">
<div "navbar-header df-jcsbc">
<a "navbar-brand" href="#">
<img src="img/test8-1/logo6.png" "">
</a>
<button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div>
<div "collapse navbar-collapse" id="navbar-collapse">
<ul id="h-cell-1" "nav navbar-nav lsno navbar-right">
<li ""><a href="test9-1.html">首页</a></li>
<li ""><a href="test9-3.html"><span "dib">职业</span></a></li>
<li ""><a href="test9-2.html"><span "dib pat">推荐</span></a></li>
<li ""><a href="#"><span "dib pat">关于</span></a></li>
</ul>
</div>
</div>
</nav>
</div>
带着这种想法,我设定了如下属性。
#h-cell-1 a{
display:inline-block;
height:97px;
margin-left:32px;
font-size:17.8px;
text-decoration: none;color:white;
}
为此怎么实现垂直居中呢?
第一点想到的是position定位了
既然要实现相对于a超链接的position,那么必须引入一个span盒子了。
<li ""><a href="test9-2.html"><span "dib pat">推荐</span></a></li>
然后增加
#h-cell-1 li{height:97px;}
#h-cell-1 a{
display:inline-block;
position:relative;
width:40px;
height:97px;
margin-left:32px;
border-bottom:2px solid #20B176;
font-size:17.8px;
text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}
就可实现垂直居中了!
但另外一个问题又接着出现了,在galaxy5的小屏幕下,下拉菜单的li间距太大,不美观。
又该怎么办呢?
这个是在28号晚上想到方法的。灵感也是看了其他同学的日报。他们提到媒体查询。
好,什么是媒体查询。建议百度。这里不做介绍。
媒体查询是吧,好那么久好办了。
@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:;padding:;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}
ok,完美。
但是还有问题啊!
图标,和按钮原本是不垂直居中的啊!那这个怎么搞!
<div "navbar-header df-jcsbc">
<a "navbar-brand" href="#">
<img src="img/test8-1/logo6.png" "">
</a>
<button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div>
他们不是都在navbar-header的盒子里吗?
那不能通过flex两端对齐来实现垂直吗?
试试看
加了个
.df-jcsbc{display:flex;justify-content: space-between;align-items: center;}
但是效果不理想啊!总体来说,.navbar-brand 和navbra-toggle实现了垂直居中。
那,怎么办呢?
我是直接弄
.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:; }
.navbar-header img{position:absolute;
left:20px;}
.navbar-header button{position:absolute;
margin:;
right:20px;}
padding和margin来使他们让出位置来的。
然后通过定位稍微调了点左右距离。
最后就可以实现垂直居中了。
明天及今天计划的事情:(是按照大娃师兄,提出的UI自检 :首先对照字体大小,颜色,边距,定位等问题,之后在不同的分辨率下查看是否有布局错乱,不协调等问题。来做test10。)
bootstrap导航栏的辛酸史的更多相关文章
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- bootstrap导航栏.nav与.navbar区别
刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...
- Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
- bootstrap导航栏PC端移动端之不同样式
在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因. 首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏: 这是我网站的移动端导航栏,看着就难受: 我用谷歌浏览器F12 ...
- eclipse Maven Bootstrap 导航栏
1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...
随机推荐
- 基本css拼图形
关闭按钮: <em class="close"></em> .close { width: 16px; height: 16px; text-align: ...
- spring 和 mybatis 整合过程 (包含分页)
1.spring-mybatis.xml : 配置 SqlSessionFactory 和 MapperScannerConfigurer <bean id="sqlSessio ...
- peaks
给定一个无向图,点有点权边有边权 Q次询问,每次询问从点v开始只经过边权<=x的边能到达所有点中点权第k大值,无解输出-1 N<=1e5,M,Q<=5e5 建立大根kruskal重构 ...
- Windows多个应用程序共享全局变量,静态变量
默认情况下exe不同实例使用copy-on-write技术避免共享数据,比如运行了两个exe,最开始它们使用的都是一份虚拟内存页,然后第一个实例修改了全局变量, 这时候COW就会复制那一页,然后将第一 ...
- 梯度下降&随机梯度下降&批梯度下降
梯度下降法 下面的h(x)是要拟合的函数,J(θ)损失函数,theta是参数,要迭代求解的值,theta求解出来了那最终要拟合的函数h(θ)就出来了.其中m是训练集的记录条数,j是参数的个数. 梯 ...
- 洛谷P2071 座位安排
题目背景 公元二零一四年四月十七日,小明参加了省赛,在一路上,他遇到了许多问题,请你帮他解决. 题目描述 已知车上有N排座位,有N*2个人参加省赛,每排座位只能坐两人,且每个人都有自己想坐的排数,问最 ...
- django内置服务器
单进程多线程的 多线程用来并发,各个线程之间不会阻塞,每个线程对应一个连接
- vue学习二:
vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind: ...
- 利用DSB2017冠军开源代码为LUNA16生成mask
代码地址:https://github.com/lfz/DSB2017 先展示下生成的mask与真实mask subset9 subset8 subset7 subset6 subset5 subse ...
- python3 杂记
python3 杂记 test001 --test001.py ( from test2.test002 import * def test1(): print('1') if __nam ...