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 ...
随机推荐
- 【题解】[Nwerc 2006]escape -C++
Description 给出数字N(1<=N<=10000),X(1<=x<=1000),Y(1<=Y<=1000),代表有N个敌人分布一个X行Y列的矩阵上 矩形的 ...
- 009_linuxC++之_友元函数
(一)定义:友元函数是指某些虽然不是类成员却能够访问类的所有成员的函数.类授予它的友元特别的访问权.通常同一个开发者会出于技术和非技术的原因,控制类的友元和成员函数(否则当你想更新你的类时,还要征得其 ...
- Flutter布局4--Row
Row 简介 mainAxisAlignment:主轴布局方式,row主轴方向是水平方向 crossAxisAlignment: 交叉轴的布局方式,对于row来说就是垂直方向的布局方式 Row 是一个 ...
- webpack项目怎样修改package项目名称
使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. ...
- scss的使用
看到一篇很好的文章,感觉不用我自己总结了, 上个链接:https://blog.csdn.net/zhouzuoluo/article/details/81010331
- 二十七、Linux内核管理
内核组成: uname命令 内核:uname,mkinitrd,dracut 模块: lsmod,modinfo,depmod,modprobe,insmod,rmmod /proc,sysctl,/ ...
- java试题复盘——11月25日
上: 11.下列表述错误的是?(D) A.int是基本类型,直接存数值,Integer是对象,用一个引用指向这个对象. B.在子类构造方法中使用super()显示调用父类的构造方法,super()必须 ...
- 解决Android Studio 打开Flutter 项目,找不到设备的问题
开始设置了ANDROID_HOME环境变量后,发现Flutter 识别不了安卓SDK, 使用命令配置发现配置是失败的,貌似是不支持路径里有空格 复制一份SDK到没有空格的路径后,SDK就能识别了,并且 ...
- super关键字和调用父类构造方法
表示父类对象的默认引用 如果子类要调用父类被覆盖的实例方法,可用super作为调用者调用父类被覆盖的实例方法. 使用super调用父类方法 使用super调用父类的构造方法 调用构造方法 本类中调用另 ...
- SpringBoot2.0 Actuator 监控参数说明
主要内容更 监控参数说明 Maven坐标 <dependency> <groupId>org.springframework.boot</groupId> < ...