Bootstrap--响应式图片轮播

<div class="row">
    <div class="span12">
        <section id="carousel">
            <div class="page-header">
                <h1>轮播(Carousel) <small>bootstrap-carousel.js</small></h1>
            </div>

            <div class="bs-docs-example">
                <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">
                            <img src="~/Images/1.jpg" />
                            <div class="carousel-caption">
                                <h4>First Thumbnail label</h4>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="~/Images/1.jpg" />
                            <div class="carousel-caption">
                                <h4>Second Thumbnail label</h4>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="~/Images/1.jpg" />
                            <div class="carousel-caption">
                                <h4>Third Thumbnail label</h4>
                                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                </div>
            </div>
        </section>

    </div>
</div>

  

时间: 2024-10-13 19:53:15

Bootstrap--响应式图片轮播的相关文章

【JavaScript】使用Bootstrap来编写 图片轮播Carousel

图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小. 如果使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间. 同时说一下,Carousel这个词的本义是回旋木马. 一.基本目标 在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明. 由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但

使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当然实现了个不靠谱的,在前台还能看见用户密码 ·····功能是这个意思hhhh 在register也就是注册界面部分的代码: <script> $('#submit').on("click ", function () { var a = $('#login input[name

沉浸式图片轮播器 -- DDGBannerScrollView使用文档

写在前面 几乎每个app都会用到图片轮播器,而且图片轮播器也越来越高大上,沉浸式等拉高了APP的档次 ,没有一个高大上的图片轮播器,都不好意思上架. 像一些知名的app都采用了图片轮播的背景渐变色,举几个栗子:优酷的首页,喜马拉雅,蜻蜓fm,哔哩哔哩漫画等, page索引也是玩的很高大上,系统的早已满足不了了需求. 鉴于此和项目的需要,在前人的基础上,整理了一个这个库,志在简单的几句代码,就能让应用看上去高大上. github:[DDGBannerScrollView](https://gith

bootstrap 响应式图片自适应图片大小

<img src="..." class="img-responsive center-block" > 或者 $(window).load(function(){       $(".panel-body img").addClass("img-responsive center-block");   }) 我的应用 <img id="logo" src="../../asse

手机响应式js轮播基础

onmousedown --->ontuchstart onmousemove --->ontouchmove onmouseup --->ontouchend ontuchstart & ontouchmove & ontouchend 必须通过事件绑定的形式添加; 尽快的把页面呈现给用户:window.onload ----> 不靠谱;DOMContentLoaded clientX ---> ev.targetTouches,是一个列表,使用的时候需要加

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果?

js原生代码之图片轮播

话不多说说,直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="./public/js/jquery-1.11.2-min.js">&l