改进Bootstrap中的响应式侧边栏

侧边栏在响应式设计中起到很大的作用，当屏幕小到手机的屏幕时，能够自适应屏幕大小的侧边栏固然能够为网站添加色彩，那么在Bootstrap的框架中提供了导航条和下拉菜单的组件，详情请自行到官网Bootstrap的文档查看，这里就不作介绍了。

本文是将其中的导航条和下拉菜单进行结合，然后设计并改进了侧边栏的制作。

html:

<div class="container"><nav class="navbar navbar-default mynavbar"><div class="container-fluid"><!--按钮--><div class="navbar-header"><button type="button" class="navbar-toggle collapsed btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><!-- 导航条内容 --><div class="collapse navbar-collapse" id="side-menu"><ul class="nav navbar-nav" id="side-item"><li><a href="#">后端开发</a></li><li><a href="#">数据库</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端开发 <span class="caret"></span></a><!--下拉菜单按钮--><ul class="dropdown-menu"><li><a href="#">HTML/CSS</a></li><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li><li><a href="#">Bootstrap</a></li><li><a href="#">node.js</a></li></ul></li><li><a href="#">移动开发</a></li><li><a href="#">视觉设计</a></li><li><a href="#">云计算</a></li></ul></div></div></nav>
</div>

css:

        .mynavbar{background-color: #fff;border:none;}.navbar-header,#side-item{background-color: #0b3558;}#side-menu>ul>li>a{color:#fff;font-size: 18px;font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;}#side-menu>ul{width: 100%;}#side-menu>ul>li{text-align: center;width: 16%;margin-left: 5px;}#side-menu .dropdown-menu {border: none;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);}#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover {color: #24b0ff;text-decoration: none;background-color: transparent;}.btn-sider{float: left;border:none;outline: none;margin-left: 10px;}.mynavbar .btn-sider .icon-bar{background-color:#fff;width:23px;height:3px;}.mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover {background-color: transparent;}@media (max-width: 768px) {.container {padding-left: 0px;}#side-menu{border: none;}#side-item{background: rgba(43, 54, 67, 0.97);}#side-menu>ul {margin-top: 0px;margin-right: 0px;margin-left: -15px;margin-bottom: 0px;width: 40%;height: 999px;}#side-menu>ul>li {text-align: left;width:100%;margin-left:0px;}#side-menu>ul>li a{font-size:16px;}#side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{background-color: #38a99c;color:#fff;}#side-menu .dropdown-menu{box-shadow:none;}#side-menu .dropdown-menu li a{padding-top:10px;color:#fff;}}

改进Bootstrap中的响应式侧边栏相关推荐

html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
springboot异步注解_Spring Boot 2 ：Spring Boot 中的响应式编程和 WebFlux 入门
[小宅按]Spring 5.0 中发布了重量级组件 Webflux,拉起了响应式编程的规模使用序幕. WebFlux 使用的场景是异步非阻塞的,使用 Webflux 作为系统解决方案,在大多数场景下可 ...
（转）Spring Boot 2 (十)：Spring Boot 中的响应式编程和 WebFlux 入门
http://www.ityouknow.com/springboot/2019/02/12/spring-boot-webflux.html Spring 5.0 中发布了重量级组件 Webflux ...
分享几个好看的Bootstrap后台管理响应式模板
原文地址:http://www.75271.com/1105.html 分享几个好看的Bootstrap后台管理响应式模板 1/charisma 国内下载地址:https://yunpan.cn/c6 ...
Bootstrap实现的响应式APP下载页面代码
这次分享的是,一个设计优雅的APP下载页面主题,这套HTML是用当下最流行的Bootstrap框架实现的版本是v3.3.3,这套代码非常适合再次开发,代码简介没有多余的部分,结构组织清晰,代码注释完整 ...
【Vue3中的响应式原理】
Vue3响应式原理在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题.但是在Vue3中,这些问题都得以解决. Vue2中的响应式原理首先我们先看一下V ...
BootStrap之前奏响应式布局
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架一.响应式布局 1.1 历史问题回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...

改进Bootstrap中的响应式侧边栏

改进Bootstrap中的响应式侧边栏相关推荐

最新文章

热门文章