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 ...
随机推荐
- webservice的优缺点
优点: 1.采用xml支持跨平台远程调用. 2.基于http的soap协议,可跨越防火墙 3.支持面向对象开发 4.有利于软件和数据的重用,实现松耦合. 缺点: 1.由于soap是基于xml传输,本身 ...
- strconv
导入strconv包 Append Format Parse 字符串转其他类型 parse返回两个值,一个转换值,一个err,没有错误时,err返回的是nil,有错误,err接受错误信息. 整型转字符 ...
- c实现双向链表
实现双向链表:创建.插入.删除 #include <iostream> #include <stdio.h> #include <string.h> #includ ...
- iOS Jenkins 自动化打包构建
前言 在测试app项目过程中,通常都是需要开发打测试包给到测试,但是无论是iOS还是Android的打包过程都是相当漫长的,频繁的回归测试需要频繁的打包,对于开发同学影响还是蛮大的.因此在这种情况下, ...
- Java并发概念-2
一,死锁: 所谓死锁: 是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在 ...
- postgre-插入数据时的单引号问题
场景: 将一个HTML页面存储到数据库中 问题: HTML页面中既包含单引号也包含双引号 解决办法: 双单引号 INSERT INTO table VALUES ('<html><s ...
- Contest Hunter 3101
题目 Contest Hunter 3101 阶乘分解 原题传送门 题目分析 这里介绍一个本蒟蒻自己\(yy\)出来的方法. 我们发现,对于某一个单个的整数\(n\),若\(n\)能被某一个数\(x\ ...
- ICEM—气体罐子
原视频下载地址:https://yunpan.cn/cPfzaLzkcFXVK 访问密码 62cf
- onNewIntent
当Activity不是Standard模式,并且被复用的时候,会触发onNewIntent(Intent intent) 这个方法,一般用来获取新的Intent传递的数据 我们一般会把MainAcit ...
- shell生成指定范围随即整数
#!/bin/bash function rand(){ min=$ max=$(($-$min+)) num=$( | cksum | awk -F ' ' '{print $1}') echo $ ...