任务1:bootstrap的简单学习

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>简单的学习</title>

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

    <!--引入font-awesome的css文件-->

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

        <!--加个图标 fa代表大小-->

        <i class="fa fa-camera-retro fa-1x"></i>

        <i class="fa fa-camera-retrofa-2x"></i>

        <i class="fa fa-weixin fa-3x"></i>

        <i class="fa fa-weixin fa-4x"></i>

        <i class="fa fa-weixin fa-5x"></i>

        <i class="fa fa-weixin fa-8x"></i>

        <!--列表-->

        <div class="list-group">

          <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  主页</a>

          <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  分类</a>

          <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  计数</a>

          <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  设置</a>

        </div>

        <!--旋转-->

        <i class="fa fa-weixin fa-spin fa-5x"></i>

        <i class="fa fa-spinner fa-spin fa-5x"></i>

        <i class="fa fa-circle-o-notch fa-spin fa-5x"></i>

        <i class="fa fa-refresh fa-spin fa-5x"></i>

        <i class="fa fa-cog fa-spin fa-5x"></i>

        <i class="fa fa-spinner fa-pulse fa-5x"></i>

        <!--层叠-->

        <span class="fa-stack fa-4x">

          <i class="fa fa-weixin fa-stack-1x"></i>

          <i class="fa fa-ban fa-stack-2x text-danger"></i>

        </span>

        <!--按钮组-->

        <div class="btn-group btn-group-lg" role="group" aria-label="...">

          <button type="button" class="btn btn-default">Left</button>

          <button type="button" class="btn btn-default">Middle</button>

          <button type="button" class="btn btn-default">Right</button>

        </div>

        <!--进度条-->

        <div class="progress">

          <div id="b1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">

            <span class="sr-only">45% Complete</span>

          </div>

        </div>

    </div>

</div>

<!--准备环境-->

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

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

<script>

    var width=0;

    var t;

    var $myBar = $("#b1")

    function changeWidth(){

        if (width<100){

            width++;

            $myBar.css("width",width+"%").text(width+"%")

        }else {

            clearInterval(t);

        }

    }

    t=setInterval(changeWidth,200);

</script>

</body>

</html>

　　

任务2:轮播图

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>轮播图</title>

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

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <ol class="carousel-indicators">

            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#carousel-example-generic" data-slide-to="1"></li>

            <li data-target="#carousel-example-generic" data-slide-to="2"></li>

        </ol>

        <!-- Wrapper for slides -->

        <div class="carousel-inner" role="listbox">

            <div class="item active">

                <img src="https://imgsa.baidu.com/forum/w%3D580/sign=1ea72de920738bd4c421b239918b876c/dfc558accbef76098f25cbab20dda3cc7cd99e8f.jpg" alt="...">

                <div class="carousel-caption">

                    <h3>秋日</h3>

                </div>

            </div>

            <div class="item">

                <img src="https://imgsa.baidu.com/forum/w%3D580/sign=e153f95501b30f24359aec0bf894d192/251502610c33874471227d485f0fd9f9d62aa0d6.jpg" alt="...">

                <div class="carousel-caption">

                    <h3>1234</h3>

                </div>

            </div>

            <div class="item">

                <img src="https://imgsa.baidu.com/forum/w%3D580/sign=e7e27834e724b899de3c79305e071d59/ea30483eb80e7bec9b3d51d5212eb9389a506bd6.jpg" alt="...">

                <div class="carousel-caption">

                    <h3>1234</h3>

                </div>

            </div>

            ...

        </div>

        <!-- Controls -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </a>

    </div>

</div>

<!--准备环境-->

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

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

</body>

</html>

　　

<day006>bootstrap的简单学习 + 轮播图的更多相关文章

  1. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  2. 最最最简单的轮播图(JQuery)

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  4. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  5. JQuery手写一个简单的轮播图

    做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...

  6. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  7. Bootstrap中手指控制轮播图切换

    通过手指的滑动来控制轮播图中的图片内容的切换 // 1. 获取手指在轮播图元素上的一个滑动方向(左右) // 获取界面上的轮播图容器 var $carousels = $('.carousel'); ...

  8. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

  9. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

随机推荐

  1. Struts2配置详情

    Struts2的核心功能是action,对于开发人员来说,使用Struts2主要就是编写action,action类通常都要实现com.opensymphony.xwork2.Action接口,并实现 ...

  2. NX二次开发-UFUN创建B面UF_MODL_create_bsurf

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> //创建一个B面 ;//U方向极数 ;//V方向极数 ;//U方向规则 ;//V ...

  3. Java-Class-C：org.springframework.http.converter.StringHttpMessageConverter

    ylbtech-Java-Class-C:org.springframework.http.converter.StringHttpMessageConverter 1.返回顶部 1.1. impor ...

  4. 微信-小程序-开发文档-服务端-模板消息：templateMessage.send

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.send 1.返回顶部 1. templateMessage.send 本接口应在服务器端调用,详细说明参见服 ...

  5. [转]如何升级gcc版本

    首先需要准备需要材料:gcc4.4.2版需要安装gmp4.2.0+和mpfr2.3.0+,到GMP的网站(http://gmplib.org/)上下载gmp-4.3.1.tar.gz 和mprf的网站 ...

  6. 拾遗：sed&vim

    一.sed查漏补缺 1.sed x,+y,从第x行的开始,向下连续y行(包含x行在内是y+1行!) f@z ~/testdir $ cat -n x.awk #!/usr/bin/awk -f BEG ...

  7. ECMAScript1.2 表达式|语句|break|continue

    表达式 一个表达式可以产生一个值,有可能是运算,函数调用, 有可能是字面量,表达式可以放在任何需要值的地方. 语句 语句可以理解为一个行为,循环语句和判断语句就是典型的语句. 一个程序有很多个语句组成 ...

  8. Array类型中的检测数组，转换方法，栈方法，队列方法

    我的新博客==> http://www.suanliutudousi.com/2017/08/24/array%E7%B1%BB%E5%9E%8B%E4%B8%AD%E7%9A%84%E6%A3 ...

  9. 《Java语言程序设计》编程练习6.18(检测密码)

    6.18 (检测密码)一些网站对于密码具有一些规则.编写一个方法,检测字符串是否是一个有效密码.     假定密码规则如下:     • 密码必须至少8位字符.     • 密码仅能包含字母和数字. ...

  10. 解决OCX 在 非开发电脑上注册出错的问题

    这几天遇到一个问题,就是在我自己电脑上开发的OCX 放在其他电脑上居然注册失败,管理员运行也不行,老是会蹦出这样的错误,最后呢终于让我找到一个线索就是在开发电脑上可以安装,在无开发环境上很大概率安装失 ...