Bootstrap样式

zhuiluodeyun88

于 2016-10-16 23:22:16 发布

阅读量151

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 响应式

本文链接：https://blog.csdn.net/zhuiluodeyun88/article/details/52834132

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.基本格式

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<title>bootstrap</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
		<link rel="stylesheet" type="text/css" href="css/main.css" >
	</head>
	<body>
		<script src="/jsjquery.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

2.导航条

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<a href="index.html" class="navbar-brand logo"><img href="img/logo.png"></a>
		<button type="button" class="navbar-toggle" data-toggle="collapse"  data-target="#navbar-collapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		</div>
	</div>
</nav>

navbar-defalut:导航条默认样式；

navbar-inverse:另一种样式；

navbar-fixed-top:导航条固定在页面顶部；

navbar-static-top:导航条静止在顶部；

navbar-brand:品牌图标；

navbar-toggle:导航条切换；

data-toggle:"collapse";折叠；

data-target:"#id";目标；

3.轮播图

<div id="#myCarousel" class="carousel">
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousle-inner">
		<div class="item active"><img src="img/a.png"></div>
		<div class="item"><img src="b.png"></div>
		<div class="item"><img src="c.png"></div>
	</div>
	<a href="#myCarousel" data-slide="prev" class="carousel-control left">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a href="#myCarousel" data-slide="next" class="carousel-control right">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>