Bootstrap 怎么安装？and图片轮播

最新推荐文章于 2024-08-15 18:19:19 发布

YXYAshin

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量355

点赞数

分类专栏： bootstrap 文章标签： bootstrap 前端开发前端

本文链接：https://blog.csdn.net/YXYAshin/article/details/78067599

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了Bootstrap的安装方法，特别适合前端开发新手。强调Bootstrap不需要通过开发工具导入，使用Sublime等前端编辑器即可直接编辑页面。同时，文章还讲解了如何实现一个简单的图片轮播效果。

摘要由CSDN通过智能技术生成

是的，我最初一直在百度这个问题，作为一只小白，分不清前端后台的框架，执着的以为bootstrap也可以导进类似myeclipse之类的开发工具里面

事实上，只需要一个sublime或者其他前端开发工具就可以直接编辑页面，蠢货蠢货。。。。

【实现一个简单的图片轮播】

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>

	<!-- 引入 Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){
	$('.circleContent').carousel({interval:1000});//每隔1秒自动轮播
	});
	</script>
	</head>
	<body>


	<div class="post">
	<!-- /.user-block -->
	<div class="row margin-bottom" style="margin-top: 30px">
	<div class="col-sm-6">
	<!--<img class="img-responsive" src="dist/img/photo1.png" alt="Photo">-->
	<div class="row">
	<!-- /.col -->
	<div class="col-md-12" style="margin-top: 20px">
	<div class="box box-solid">
	<!-- /.box-header -->
	<div class="box-body">
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
	<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
	<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
	<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
	</ol>
	<div class="carousel-inner">
	<div class="item">
	<img src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap" alt="First slide">
	<div class="carousel-caption">
	First Slide
	</div>
	</div>
	<div class="item">
	<img src="http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap" alt="Second slide">
	<div class="carousel-caption">
	Second Slide
	</div>
	</div>
	<div class="item active">
	<img src="http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap" alt="Third slide">

	<div class="carousel-caption">
	Third Slide
	</div>
	</div>
	</div>
	<!--
	<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
	<span class="fa fa-angle-left"></span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
	<span class="fa fa-angle-right"></span>
	</a>
	-->
	</div>
	</div>
	<!-- /.box-body -->
	</div>
	<!-- /.box -->
	</div>
	<!-- /.col -->
	</div>
	<!-- /.row -->
	<!-- END ACCORDION & CAROUSEL-->
	</div>
	<!-- /.col -->

	</div>
	<!-- /.row -->
	</div>







	<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
	<script src="https://code.jquery.com/jquery.js"></script>
	<!-- 包括所有已编译的插件 -->
	<script src="js/bootstrap.min.js"></script>

	</body>
	</html>

效果如下：

YXYAshin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 怎么安装？and图片轮播

是的，我最初一直在百度这个问题，作为一只小白，分不清前端后台的框架，执着的以为bootstrap也可以导进类似myeclipse之类的开发工具里面事实上，只需要一个sublime或者其他前端开发工具就可以直接编辑页面，蠢货蠢货。。。。【实现一个简单的图片轮播】 charset="utf-8">
复制链接

扫一扫

专栏目录