<day006>bootstrap的简单学习 + 轮播图
任务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的简单学习 + 轮播图的更多相关文章
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- 最最最简单的轮播图(JQuery)
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- Bootstrap中手指控制轮播图切换
通过手指的滑动来控制轮播图中的图片内容的切换 // 1. 获取手指在轮播图元素上的一个滑动方向(左右) // 获取界面上的轮播图容器 var $carousels = $('.carousel'); ...
- 原生js用div实现简单的轮播图
文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
随机推荐
- Delphi StringGrid常用属性和常用操作
StringGrid组件用于建立显示字符串的网格,与电子表格相似.它可使表格中的字符串和相关对象操作简单化.StringGrid组件提供了许多可控制网格外观念的属性,以及利用表格的结构响应用户操作的事 ...
- delphi 压缩
DELPHI 通过ZLib来压缩文件夹 unit Unit1; interface uses ZLib, Windows, Messages, SysUtils, Variants, Classes, ...
- 阿里云ecs(phpstudy一件包)
选择语言 保存并连接 Linux硬盘挂载是比较常见的管理操作之一.默认情况下数据盘没有挂载,需要手动挂载到系统中. 具体操作是分三步: 硬盘挂载1)需 ...
- Mysql命令增加、修改、删除表字段
alter add 命令用来增加表的字段: alter add命令格式:alter table 表名 add字段 类型 其他:如下所示: ) comment '单位' alter drop 命令删除表 ...
- 【POJ】1321棋盘问题
题目链接:http://poj.org/problem?id=1321 题意:见题干,很清楚了. 题解:简单dfs,参照八皇后 代码: #include<iostream> #includ ...
- 三层(3-tier architecture)基础
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lhc2207221755/article/details/24802053 之前看过非常多关 ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- 【第三周读书笔记】浅谈node.js中的异步回调和用js-xlsx操作Excel表格
在初步学习了node.js之后,我发现他的时序问题我一直都很模糊不清,所以我专门学习了一下这一块. 首先我们来形象地理解一下进程和线程: 进程:CPU执行任务的模块.线程:模块中的最小单元. 例如:c ...
- .net Core开源框架NetModular记录
NetModular 源码: https://github.com/iamoldli/NetModular 文档: https://nm.iamoldli.com/docs/guide/
- _proto_和prototype
_proto_和prototype 实例对象中有一个属性,_proto_,也是对象,叫原型,不是标准的属性,浏览器使用的, 构造函数中有一个属性,Prototype,也是对象,叫原型,是标准属性,程序 ...