bootstrap导航栏PC端移动端之不同样式
在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因。
首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏:
这是我网站的移动端导航栏,看着就难受:
我用谷歌浏览器F12调试,发现了一个东西:
它的意思是说在宽度大于或等于768px时执行的样式代码,刚刚好这也是移动端样式和PC端样式的分水岭,随之我写了:
贴代码:
@media (max-width:768px) { .navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 6px;
}
}
这样子就OK了。
再贴一下我的网站的导航栏截图:
bootstrap导航栏PC端移动端之不同样式的更多相关文章
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- 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导航栏.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导航栏的辛酸史
昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...
- eclipse Maven Bootstrap 导航栏
1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...
随机推荐
- 四十八.监控概述 、 Zabbix基础 、 Zabbix监控服务
1.常用系统监控命令 查看内存信息 查看交换分区信息 查看磁盘信息 查看CPU信息 查看网卡信息 查看端口信息 查看网络连接信息 一般企业做监控的目的:实时报告系统状态,提前发现系统的问题. 监 ...
- BSGS ! x
一.引入: 若存在一个式子a^b ≡ c (mod p) (p ≡ 1000000007,且0<a,b,c<p) 已知a,b,求c. 这不就是快速幂嘛! 已知a,c,求b. 这就是我们需 ...
- (转)Git操作
本地修改了许多文件,其中有些是新增的,因为开发需要这些都不要了,想要丢弃掉,可以使用如下命令: git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态 git stash # ...
- 解决tomcat7控制台中文乱码问题
控制台启动会有乱码,找了很多方法都不行,最后找到一个可用的方法,非常简单 打开tomcat/conf/logging.properties找到java.util.logging.ConsoleHand ...
- Spring Cloud|高可用的Eureka集群服务
Eureka,作为spring cloud的服务发现与注册中心,在整个的微服务体系中,处于核心位置.单一的eureka服务,显然不能满足高可用的实际生产环境,这就要求我们配置一个能够应对各种突发情况, ...
- 牛顿法与拟牛顿法(四) BFGS 算法
转自 https://blog.csdn.net/itplus/article/details/21897443
- 如何查看linux内核中驱动的初始化顺序?
答:通过生成的System.map可以查看到,主要关注__initcall_<module_entry_function>_init<level>,如: __initcall_ ...
- SQL-W3School-高级:SQL ALIAS(别名)
ylbtech-SQL-W3School-高级:SQL ALIAS(别名) 1.返回顶部 1. 通过使用 SQL,可以为列名称和表名称指定别名(Alias). SQL Alias 表的 SQL Ali ...
- [Java复习] Spring IoC
1. Spring bean的生命周期? 1. 对Bean进行实例化(相当于new) 对于BeanFactory 当客户向容器请求一个尚未初始化的bean(或初始化bean需要注入另外一个尚未初始化的 ...
- Servlet 的三种跳转方式
1.Forword request.getRequestDispatcher (“url”).forword (request,response) 是请求转发,也就是说,一个 Servlet 向当前的 ...