Bootstrap每天必学之响应式导航、轮播图


Posted in Javascript onApril 25, 2016

本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分。

基本导航组件+响应式:

//基本导航组件+响应式
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand"
 style="margin:0;padding:0;"><img src="img/logo.png" alt="瓢城企训网"></a>
 <button type="button" class="navbar-toggle"
 data-toggle="collapse" data-target="#navbar-collapse">
 <span class="sr-only">切换导航</span>
 <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="glyphiconglyphicon-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>

后一节我们要在导航条的下方做一张轮播图,自动播放最新的重要动态。

//响应式轮播图
<div id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0"
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
 <div class="item active" style="background:#223240;">
 <a href="#"><img src="img/slide1.png" alt="第一张"></a>
 </div>
 <div class="item" style="background:#F5E4DC;">
 <a href="#"><img src="img/slide2.png" alt="第二张"></a>
 </div>
 <div class="item" style="background:#DE2A2D;">
 <a href="#"><img src="img/slide3.png" alt="第三张"></a>
 </div>
 </div>
 <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">‹</a>
 <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a>
</div>
//所需要的 jQuery 控制

$('#myCarousel').carousel({
 //设置自动播放/2 秒
 interval : 3000,
}); 
//调整轮播器箭头位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');
$(window).resize(function() {
 var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();
 $('.carousel-control').css('line-height', $height + 'px');
});
//所需要的 CSS
a:focus {
 outline: none;
}
.navbar-brand {
 padding: 0;
}
#myCarousel {
 margin: 50px 0 0 0;
}
.carousel-inner .item img {
 margin: 0 auto;
}
.carousel-control {
 font-size: 100px;
}

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
vue3.0 上手体验
Sep 21 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 #Javascript
下雪了 javascript实现雪花飞舞
Aug 02 #Javascript
基于node实现websocket协议
Apr 25 #Javascript
Bootstrap每天必学之导航组件
Apr 25 #Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
javascript断点调试心得分享
Apr 23 #Javascript
基于 Node.js 实现前后端分离
Apr 23 #Javascript
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
YII框架关联查询操作示例
2019/04/29 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
PHP笔试题
2012/02/22 面试题
后勤部经理岗位职责
2014/02/23 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
会计自荐信范文
2014/03/09 职场文书
心理健康活动总结
2014/04/30 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python实现Hash算法
2022/03/18 Python