导航代码HTML：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <title>项目实战</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

    <!-- navbar-fixed-top 置顶在最上面 -->

    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <!-- brand 商标品牌 -->

                <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>

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/JavaScript">

</script>

</body>

</html>

Bootstrap 学习笔记 项目实战 响应式导航栏的更多相关文章

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

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

  2. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  3. Bootstrap 学习笔记 项目实战 首页内容介绍 上

    效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

  4. Bootstrap 学习笔记 项目实战 首页内容介绍 下

    最终效果: HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

  5. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

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

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

  7. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  8. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  9. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

随机推荐

  1. VMware Workstation 卸载时卡在“正在卸载网络驱动程序(Virtual Network Editor夯死)”

    出现此种问题,以下方式均无法成功卸载: 控制面板-卸载程序(Virtual Network Editor 未响应) Geek 卸载VMware Workstation(Virtual Network ...

  2. /proc/sys/fs/file-max

    Linux的/proc/sys/fs/file-max决定了当前内核可以打开的最大的文件句柄数. 查看当前的值: cat /proc/sys/fs/file-max 这个值在kernel的文档里是这样 ...

  3. Codeforces Round #430 (Div. 2) - B

    题目链接:http://codeforces.com/contest/842/problem/B 题意:给定一个圆心在原点(0,0)半径为r的大圆和一个圆内的圆环长度d,然后给你n个小圆,问你有多少个 ...

  4. 洛谷P1879 [USACO06NOV]玉米田Corn Fields （状态压缩DP）

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...

  5. Chrome设置--disable-web-security解决跨域问题

    这里介绍的是--disable-web-security参数.这个参数可以降低chrome浏览器的安全性,禁用同源策略,利于开发人员本地调试. (1)新建一个chrome快捷方式,右键“属性”,“快捷 ...

  6. Java面试之基础篇（2）

    11.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用 ...

  7. 字符串截取模板 && POJ 3450、3080 ( 暴力枚举子串 && KMP匹配 )

    //截取字符串 ch 的 st~en 这一段子串返回子串的首地址 //注意用完需要根据需要最后free()掉 char* substring(char* ch,int st,int en) { ; c ...

  8. Activiti7入门(五)

    1 创建流程 首先选中存放图形的目录(本次我们选择 resources 下的 bpmn 目录),点击菜单: New-BpmnFile,如下图所示: 起完名字 holiday 后(默认扩展名为 bpmn ...

  9. 【bzoj1146】[CTSC2008]网络管理Network

    题目描述: M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条 ...

  10. Distinctive Image Features from Scale-Invariant Keypoints(SIFT) 基于尺度不变关键点的特征描述子——2004年

    Abstract摘要本文提出了一种从图像中提取特征不变性的方法,该方法可用于在对象或场景的不同视图之间进行可靠的匹配(适用场景和任务).这些特征对图像的尺度和旋转不变性,并且在很大范围的仿射失真.3d ...