Bootstrap项目实战--响应式导航

学习要点:

  1.响应式导航

一.响应式导航

基本导航组件+响应式

第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部
navbar样式class类,写在导航<nav>里,声明导航区域(项目实战Bootstrap)
navbar-default样式class类,写在导航<nav>里,设置导航默认样式(项目实战Bootstrap)
navbar-fixed-top样式class类,写在导航<nav>里,设置导航条固定在顶部(项目实战Bootstrap)

第二步,设置导航内容区域固定布局,最大宽度1140
container样式class类,写在导航内容区域<div>里,设置导航内容区域固定布局,最大宽度1140(项目实战Bootstrap)

第三步,设置导航标题区域
navbar-header样式class类,写在导航标题区域<div>里,设置导航标题区域样式(项目实战Bootstrap)
navbar-brand样式class类,写在导航标题内容<a>里,设置导航标题内容样式(项目实战Bootstrap)
navbar-toggle样式class类,写在导航标题<button>里,设置导航标题里响应式按钮样式(项目实战Bootstrap)
icon-bar样式class类,写在导航标题按钮<span>里,设置导航响应式按钮文字样式,也就是一横,写3个就是三横(项目实战Bootstrap)

第四步,设置导航折叠区域来写导航列表
collapse样式class类,写在导航列表区域<div>里,设置导航列表折叠区域(项目实战Bootstrap)
navbar-collapse样式class类,写在导航列表区域<div>里,设置导航列表折叠样式(项目实战Bootstrap)
nav样式class类,写在导航列表区域<ul>里,设置导航列表区域(项目实战Bootstrap)
navbar-nav样式class类,写在导航列表区域<ul>里,设置导航列表样式(项目实战Bootstrap)
navbar-right样式class类,写在导航列表区域<ul>里,设置导航列表右浮动(项目实战Bootstrap)
active样式class类,写在导航列表区域<li>里,设置当前导航列表项首选(项目实战Bootstrap)
glyphicon样式class类,写在导航列表区域<li>里,设置当前导航列表项图标(项目实战Bootstrap)

第五步,事件绑定
将导航列表的折叠区域设置一个id,在导航按钮上关联折叠区域的id
data-target="#navbar-collapse"写在导航按钮<button>里,将按钮事件关联折叠区域的id(项目实战Bootstrap)
data-toggle="collapse"写在导航按钮<button>里,设置导航事件,点击折叠和收缩(项目实战Bootstrap)

html

<nav class="navbar navbar-default navbar-fixed-top">                <!--声明导航区域,设置导航默认样式,设置导航条固定在顶部-->
<div class="container"> <!--设置固定布局,最大宽度1140-->
<div class="navbar-header"> <!--设置导航标题区域-->
<a href="#" class="navbar-brand" style="padding:0;"><img src="img/logo.png" alt="瓢城企训网"></a> <!--设置导航标内容-->
<button type="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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse"> <!--设置导航折叠区域,设置导航折叠样式-->
<ul class="nav navbar-nav navbar-right" style="margin-top:0"> <!--设置列表区域,导航列表默认样式,导航列表右浮动-->
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <!--设置当前列表首先-->
<li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li> <!--设置当前列表图标-->
<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>

css

@charset "utf-8";
/*导航部分-------------------------------------------------------------------------------------------------------------*/
/*导航区域背景色*/
.navbar{
background-color: #2056AC;
}
/*导航a首选标签,聚集光标和鼠标放上去背景色*/
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{
background-color: #FE7C19;
color: #FFFFFF;
}
/*导航a标签,聚集光标和鼠标放上去背景色*/
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{
background-color: #FE7C19;
color: #FFFFFF;
}
/*导航条文字颜色*/
.navbar-default .navbar-nav > li > a{
color: #FFFFFF;
}
/*导航条按钮背景色*/
.navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background-color: #ddd;
}
/*导航条按钮文字三横背景和文字颜色*/
.navbar-default .navbar-toggle .icon-bar{
background-color: #f5f5f5;
border-radius: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
display: block;
height: 2px;
width: 18px;
}

第二百五十节,Bootstrap项目实战--响应式导航的更多相关文章

  1. 第二百五十一节,Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  2. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  3. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  4. 第二百五十二节,Bootstrap项目实战-首页

    Bootstrap项目实战-首页 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  5. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  6. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

  7. 第二百五十五节,Bootstrap项目实战--关于

    Bootstrap项目实战--关于 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  8. 第二百五十四节,Bootstrap项目实战--案例

    Bootstrap项目实战--案例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  9. 第二百五十三节,Bootstrap项目实战-资讯

    Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

随机推荐

  1. QQ互联简单例子,七彩花都提供

    QQ互联简单例子 源码由七彩花都论坛提供 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  2. IO核心代码

  3. Python list删除元素

    pop()方法 pop(n) 从list删除元素Paul同学刚来几天又要转走了,那么我们怎么把Paul 从现有的list中删除呢?如果Paul同学排在最后一个,我们可以用list的pop()方法删除: ...

  4. 16-spring学习-配置文件操作

    实际使用:配置文件 spring的核心就是一个配置文件.所以只有将表达式应用到配置文件上才会特别有意义. 范例:利用配置文件,编写表达式应用 <bean id="str" c ...

  5. ie6/7 bug大全

     1. ie6/7下ul高度变高  li 加 vertical-align:bottom; 2.ie6不支持min-height a:height:auto !important; height:10 ...

  6. CentOS7——gitlab本地git仓库搭建 以及web hook配置

    整个搭建用的都是各种默认设置,所以没有用到高深的的东西,比较简单,比较傻瓜式,这篇也仅仅是一个入门. 另外本文具有时效性,浏览本文请注意发表时间,为防止过时产生误导,本文尽量把 “如何得知应该这样做” ...

  7. 利用JMX统计远程JAVA进程的CPU和Memory---jVM managerment API

    从JAVA 5开始,JDK提供了一些JVM检测的API,这就是有名的java.lang.management 包,包里提供了许多MXBean的接口类,可以很方便的获取到JVM的内存.GC.线程.锁.c ...

  8. php.ini中的pcre

    当页面代码没有任何问题,也没有报错.但是页面的循环很多,请求导致开销很大的时候,有可能要改php.ini中的pcre部分. [Pcre]pcre.recursion_limit=-1pcre.back ...

  9. Intellij IDEA 使用技巧一

    前言 个人之前一直用eclipse做c++.java开发,换到新公司,大家都用IDEA开发工具,所以最近也在学习,总结下个人心得. 1.文本编辑 删除    ctr + y         复制   ...

  10. iOS 获得通讯录中联系人的所有属性--b

    ABAddressBookRef addressBook = ABAddressBookCreate(); CFArrayRef results = ABAddressBookCopyArrayOfA ...