bootstrap尝试用法

最新推荐文章于 2023-04-18 01:04:00 发布

xuqi7

最新推荐文章于 2023-04-18 01:04:00 发布

阅读量432

点赞数

分类专栏：杂

本文链接：https://blog.csdn.net/xuqi7/article/details/74788059

版权

杂专栏收录该内容

95 篇文章 0 订阅

订阅专栏

bootstrap 的特点是把网页宽分成12份，响应式布局，不多做介绍，bootstrap中文网

bootstrap基本框架

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>demo1</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
</head>
<body>
<h1>hello world</h1>

<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>

也可以用cdn

bootstrap--胶囊导航

<ul class="nav nav-pills">
<li class="active">
<a href="#">主页</a>
</li>
<li>
<a href="#">慕课网</a>
</li>
<li>
<a href="#">教书匠</a>
</li>
</ul>

bootsrap--轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval=3000>
<!-- 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="img/downloadbanner.png" alt="download">
</div>
<div class="item">
<img src="img/index_banner_showdata.png" alt="showdata">
</div>
<div class="item">
<img src="img/index_banner03.png" alt="03">
</div>
</div>
</div>