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. [每日一题] OCP1z0-047 :2013-08-25 正则表达式REGEXP_LIKE-----‘harddisks’.................108

    正确答案:AB A. 'hard+.s'能够匹配harddisks,以hard开头,其中表达式的d+号代表任意个d(至少出现一次d),“.”代表除了换行符之外的任意字符, 可以代表d和s之间的&quo ...

  2. 算法笔记_134:字符串编辑距离(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 给定一个源串和目标串,能够进行如下操作: 在任意位置上插入一个字符: 替换掉任意字符: 删除任意字符. 写一个程序,实现返回最小操作次数,使得对源串 ...

  3. ML 与 DM 工具 Weka 的使用

    1.关于Weka Weka 的全名是怀卡托智能分析环境(Waikato Environment for Knowledge Analysis),是一款免费的.非商业化(与之对应的是SPSS公司商业数据 ...

  4. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

  5. ajax表单提交较慢原因的解决办法

    ajax提交表单时,发现过了好长时间才有反应.使用F12打开开发人员工具一看,发现提示“provisional headers are shown”. 百度了一下,才知道可能是ajax异步提交和for ...

  6. Android编程的写法规范

    一.获取View对象 1.private EditText m_txtSmsPhone = null;//定义一个EditText控件的调用对象 m_表示为View对象 txt表示文本框 2.在pro ...

  7. C# BackgroundWorker的Bug???

    废话不多说,上代码: public partial class Form1 : Form { BackgroundWorker _bgWorker; int count; public Form1() ...

  8. 使用Open Live Writer写博客

    1. 下载安装软件 安装包路径http://openlivewriter.org/ 2.配置 打开软件后会提示你配置博客账号地址 3.安装代码高亮插件 下载插件源代码https://pan.baidu ...

  9. jQuery knowledge

    I have used jquery for many years, but didn't list the problem I ever meeting, so here is a list of ...

  10. AutoFac文档(转载)

    目录 开始 注册组件 控制范围和生命周期 用模块结构化Autofac xml配置 与.net集成 深入理解Autofac 指导 关于 词汇表 开始 程序集 如果你正在使用Nuget包管理器,你可以通过 ...