booterStrap体验-首页改造-响应式导航栏(1)
来源:互联网 发布:matlab分水岭分割算法 编辑:程序博客网 时间:2024/06/18 00:06
闲暇之余想要学习下booterstrap,正好在一个设计网站看到了一些有响应式布局的设计图。已经将纯css写过一遍首页,现在着手使用booterstrap进行改造。首先了解下修改booterstrap导航需要用到哪些类,样式后期再改。需要达到的效果如下所示:
纯css的HTML如下:
<nav id="top-nav"> <div class="nav-btn"> <span></span> <span></span> <span></span> </div> </nav> <header id="header"> <div class="layout"> <h1 class="logo"><a href="#"><span>GIRL’s</span> DRESS</h1></a> <nav class="nav-list"> <a href="#" class="active">首页</a> <a href="#">品牌理念</a> <a href="#">女士时尚</a> <a href="#">时尚资讯</a> <a href="#">联系我们</a> </nav> </div> </header>
改造之后:
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <!--小屏幕导航按钮和logo--> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand"><span>GIRL’s</span> DRESS</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#" class="active">首页</a> </li> <li> <a href="#">品牌理念</a> </li> <li> <a href="#">女士时尚</a> </li> <li> <a href="#">时尚资讯</a> </li> <li> <a href="#">联系我们</a> </li> </ul> </div> </nav>
在改造导航栏之前,先要知道一个概念:booterstrap的collapse插件。
可以通过两种方式来添加collapse插件
- 通过data属性,向元素添加data-toggle=“collapse”以及data-target。要确保要进行折叠的元素上已经加有collapse类,并且data-target属性接受一个css选择器和id选择器。如果想要一开始是展开的,则需要在要折叠的元素上增加一个class为in;
- 通过js来激活collapse方法
改造步骤:
1. 使用nav标签作为导航,增加navbar、navbar-default、navbar-fixed-top类。navbar-fixed-top的作用是将导航栏固定在页面顶部;
2. 创建一个容器,视宽度情况选用class为container还是container-fluid;container是固定宽高,而container-fluid是宽度为窗口的100%;
3. 定义一个div,带有navbar-header类,内含。navbar-brand类,作为网页的logo;
4. 想要做到响应式效果,就得booterstrapcollapse插件。就像上述代码,将导航信息列表包含在带有navbar-collapse、collapse类的div中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse
感悟:
1. booterstrap是基于jquery的响应式布局,目前我觉得比较方便的是它不需要写好几套布局来适应不同的屏幕,所带的一些类比较快捷。
2. 在对booterstrap进行样式覆盖时,可以在Chrome的开发工具下选中要覆盖样式的元素,先在浏览器上暂时性修改其样式。
- booterStrap体验-首页改造-响应式导航栏(1)
- booterStrap体验-首页改造-响应式导航栏(2)
- booterStrap体验-首页改造-轮播图
- 响应式导航栏
- 响应式导航栏
- 响应式的导航栏
- 寒假项目1-动态链表体验(改造)(1)
- Ecshop修改首页导航栏--“首页”
- PHP 首页导航栏源代码
- 首页导航栏的制作
- 响应式导航设计(仿写csdn博客网站的导航栏)
- Bootstrap学习--响应式导航栏
- Bootstrap3.3.5响应式导航栏 实例
- Bootstrap实现响应式导航栏效果
- 使用bootstrap制作响应式导航栏
- 总结 响应式网站的导航栏
- bootstrap响应式导航
- bootstrap响应式导航
- 预处理与结构体
- L1-004. 计算摄氏温度
- Quartz教程 第12课 Quartz的其它特性
- 理解Maven中的SNAPSHOT版本和正式版本
- 解决中文乱码问题
- booterStrap体验-首页改造-响应式导航栏(1)
- [LeetCode]二叉树层次遍历讲解与实例
- JavaScript深拷贝和浅拷贝
- 【安全牛学习笔记】Web开发中的涉及到的权限问题
- 绝对路径和相对路径,创建目录和删除
- 理解GCD中任务和队列执行的原理
- UVALive 5733|Iterated Difference|暴力
- 员工是公司最大的投资人
- Quartz快速入门指导