在此之前,我先说我之所以要改变网站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 ...
随机推荐
-
vim简明教程
在shell中新建一个文件 # vim a.txt vim有三种模式:一般模式.插入模式.底行模式 三种工作模式 1.命令模式 移动光标 hjkl yy 复制 nyy 从光标向下复制n行 0 移动光标 ...
-
C++操作MySQL大量数据插入效率低下的解决方法
#include <iostream> #include <winsock2.h> #include <string> #include "mysql.h ...
-
Sqlserver2005日志文件太大,使其减小的方法
Sqlserver2005日志文件太大,使其减小的方法: 运行下面的三行 dbName为数据库名: backup log dbNamewith NO_LOG backup log dbNamewith ...
-
Watch out for these 10 common pitfalls of experienced Java developers &; architects--转
原文地址:http://zeroturnaround.com/rebellabs/watch-out-for-these-10-common-pitfalls-of-experienced-java- ...
-
js----对象的创建
js创建对象的三种方法 在介绍之前一定要弄清楚一个概念,比如var a = new Object(); 这里的a并不是一个对象,而是一个对象的实例. 一.用Json创造 var a = {b:1,c: ...
-
PHP中使用curlL实现GET和POST请求的方法
基本结构 (1)初始化 curl_init() (2)设置变量 curl_setopt() .最为重要,一切玄妙均在此.有一长串cURL参数可供设置,它们能指定URL请求的各个细节.要一次性全部看完并 ...
-
【二十四】使用mysqli扩展类批量执行多条sql语句
批量处理多个sql语句 <?php //批量执行多个dml语句 // $mysqli=new mysqli("localhost","root",&quo ...
-
Codeforces Round #436 (Div. 2) A,B,D
A. Fair Game 题目链接:http://codeforces.com/contest/864/problem/A 水题 #include<iostream> #include&l ...
-
canvas绘图实现浏览器等待效果
一:创建画布 <canvas width="600" height="600" id="canvas" style="bor ...
-
C# 字符串的操作
var tStr = "0|1:开门|2:关门|3:门检失败|4:开门|5:开门|6:关门"; ).Split(], s.Split(]).Replace(").Repl ...