Bootstrap: 样式CSS：carousel轮换 图片的使用

时间：2022-09-23 15:55:18

Bootstrap 轮播（Carousel）插件

　　Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

Bootstrap: 样式CSS：carousel轮换 图片的使用如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。

js和css的引入：

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

     <script type="text/javascript" src="scripts/jquery/1.10.2/jquery.min.js"></script>

     <script type="text/javascript" src="scripts/bootstrap/3.3.4/js/bootstrap.min.js"></script>

html代码

<body>

        <div id="myCarousel" class="carousel slide">

            <!-- 轮播（Carousel）指标 -->

           <ol class="carousel-indicators">

              <li data-target="#myCarousel" data-slide-to="" class="active"></li>

              <li data-target="#myCarousel" data-slide-to=""></li>

              <li data-target="#myCarousel" data-slide-to=""></li>

           </ol>

            <!-- 轮播（Carousel）项目 -->

           <div class="carousel-inner">

              <div class="item active">

                <img src="data:images/snLine.gif" alt="First slide">

            </div>

            <div class="item">

                <img src="data:images/snLine.jpg" alt="Second slide">

            </div>

            <div class="item">

                <img src="data:images/usLine2.jpg" alt="Third slide">

            </div>

           </div>

            <!-- 轮播（Carousel）导航 -->

           <a class="carousel-control left" href="#myCarousel"

              data-slide="prev">&lsaquo;</a>

           <a class="carousel-control right" href="#myCarousel"

              data-slide="next">&rsaquo;</a>

        </div>

 </body>

效果图：

Bootstrap: 样式CSS：carousel轮换 图片的使用

Bootstrap: 样式CSS：carousel轮换 图片的使用的更多相关文章

  1. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  2. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  3. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  4. bootstrap课程4 bootstrap的css样式有哪些内容需要注意

    bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...

  5. 从覆盖bootstrap样式谈css选择器优先级

    样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...

  6. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  7. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

随机推荐

  1. Socket简单使用

    客户端代码: import java.io.*; import java.net.*; public class DailyAdviceClient { public void go(){ try{ ...

  2. 主机和虚拟机不能ping通问题

    VMware的三种网络模式附上: 在vmw中,默认有3个虚拟交换机 分别是VMnet0(桥接).VMnet1(主机网络)以及VMnet8(NAT) 还可以根据需要添加VMnet2~VMnet7和VMn ...

  3. Web UI自动化测试中绕开验证码登陆方式浅谈

    web自动化测试中让测试者感到困惑的是登陆验证码,每次都不一样.现在推荐一种绕开验证码登陆的方式,其实就是将web浏览器获取的登陆cookie加载到程序中就可以了,这样程序就会认为你已经登陆,就可以跳 ...

  4. 转大写字母-&lpar;ASCII表&rpar;

    #include<stdio.h> /* 转大写,ASCII表.大写与小写相差32 */ char upper(char c) { if(c>='a'&&c<= ...

  5. 常用的phpstorm设置

    1.始终在项目编辑器中显示行号[Show line numbers],可以通过File->Setting->Editor->Appearance->Show line numb ...

  6. easyui valid

    /** * 包含easyui的扩展和常用的方法 * * @author * * @version 20120806 */ var wjc = $.extend({}, wjc);/* 定义全局对象,类 ...

  7. show&lpar;&rpar;与showDialog&lpar;&rpar;的区别

    A.WinForm中窗体显示  显示窗体可以有以下2种方法:  Form.ShowDialog方法 (窗体显示为模式窗体) Form.Show方法 (窗体显示为无模式窗体) 2者具体区别如下: 1.在 ...

  8. mysql 两个时间段的差&comma;可以是秒&comma;天&comma;星期&comma;月份&comma;年&period;&period;&period;

    SELECT TIMESTAMPDIFF(SECOND, now(), "2012-11-11 00:00:00") 语法为:TIMESTAMPDIFF(unit,datetime ...

  9. docker应用实例——httpd

    docker可以用来创建虚拟环境跑应用,各个应用能起到隔离作用. 步骤也很简单,就是获取(下拉镜像)应用,然后进行安装就可以了 1.搜索镜像,比如我想虚拟一个httpd应用,可以看到,有httpd这个 ...

  10. python设计模式第十九天【职责链模式】

    1.应用场景 (1)将一个任务拆分为具有顺序的多个部分,每个类完成相应的部分,并且顺序执行 (2)软件窗口的消息传播 (3)SERVLET容积的过滤器Filter的实现 2.代码实现 #!/usr/b ...

相关文章