Bootstrap样式

来源:互联网 发布:玲珑网游加速器mac 编辑:程序博客网 时间:2024/03/29 20:22

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>



0 0
原创粉丝点击