版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_22903531/article/details/78386974
Bootatrap导航和轮播以及栅格布局的实现
一、导航
1、导航很简单
<!--使用了BOOTSTRAP的导航条-->
<nav class="navbar navbar-default navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<img src="img/logo.png">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
解释: .container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
.navbar-fixed-top固定在顶部
在实现CSS中:
.body{
padding-top: 70px;
}
主要是和下面的导航条有个间距。
二、轮播
2、轮播需要注意CSS的书写
<!-- 广告轮播 -->
<div id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
<li data-target="#ad-carousel" data-slide-to="1"></li>
<li data-target="#ad-carousel" data-slide-to="2"></li>
<li data-target="#ad-carousel" data-slide-to="3"></li>
<li data-target="#ad-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/chrome-big.jpg" alt="1 slide">
<div class="container">
<div class="carousel-caption">
<h1>Chrome</h1>
<p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
role="button" target="_blank">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/firefox-big.jpg" alt="2 slide">
<div class="container">
<div class="carousel-caption">
<h1>Firefox</h1>
<p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/safari-big.jpg" alt="3 slide">
<div class="container">
<div class="carousel-caption">
<h1>Safari</h1>
<p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/opera-big.jpg" alt="4 slide">
<div class="container">
<div class="carousel-caption">
<h1>Opera</h1>
<p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/ie-big.jpg" alt="5 slide">
<div class="container">
<div class="carousel-caption">
<h1>IE</h1>
<p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>
<p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
role="button">点我下载</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
解释:
<ol class="carousel-indicators"> </ol>
这个是定义轮播图片下面切换的小点点。
在为了兼容所有浏览器浏览轮播实现图片100%浏览
.carousel img{
width: 100%;
}
三、栅格
<!---布局------->
<div class="container container-style">
<div class="row" >
<div class="col-sm-4">
<img src="img/chrome-logo-small.jpg">
<h2>Chrome</h2>
<p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>
<p><a class="btn btn-default container-button" href="#" role="button">点我下载</a></p>
</div>
<div class="col-sm-4">
<img src="img/firefox-logo-small.jpg">
<h2>Firefox</h2>
<p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>
<p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
</div>
<div class="col-sm-4">
<img src="img/safari-logo-small.jpg">
<h2>Safari</h2>
<p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
<p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
</div>
</div>
</div>
</div>
主要是分了三列去布局。这样响应式布局兼容。
css代码:
*<!--布局----->*/
让字体居中
.container-style .col-sm-4{
text-align: center;
}
.container-style .col-sm-4 p{
color: #5bc0de;
}
设置当鼠标经过图片时候放大为原来的1.3倍效果:
.container-style .col-sm-4 img:hover{
transform: scale(1.3);
}
一直很喜欢bs,现在还在好好学习js加油。