《ONE一个》这个网站使用了Bootstrap进行网站布局,网站很利落。
今天在学习Bootstrap的时候对这个网站进行了研究,初学Bootstrap的同学们可以研究一些这个网站的前端源码。
接下来说说我今天的Bootstrap的学习情况。
完成后的效果
(图片素材来自于《ONE一个》)
上源码
(源码学习了菜鸟教程)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Bootstrap Basic</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div clas="col-sm-7 col-md-6 col-lg-6">
<div id="myCarousel" class="carousel slide">
<!-- 轮播(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>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../image/custom.jpg" alt="first">
<div class="carousel-caption">图片标题</div>
</div>
<div class="item">
<img src="../image/custom(1).jpg" alt="second">
<div class="carousel-caption">图片标题</div>
</div>
<div class="item">
<img src="../image/custom(2).jpg" alt="third">
<div class="carousel-caption">图片标题</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
</body>
</html>
学习心得
- 三个部分:轮播指标(carousel-indicators)、轮播项目(carousel-inner)、轮播导航(Carousel-control)
2.使用 开源中国在线工具可以在研究在线网站时候,对于压缩了的CSS代码进行格式化,方便学习。