发表于: 2017-04-05 23:59:30
1 640
今天完成的事:
导航栏代码:
<header>
<div class="container">
<div class="top">
<span style="color: #26a26f">咨询电话:010-59478634</span>
<button class="download"><img src="image/wechat.png"></button>
<button class="download"><img src="image/weibo.png"></button>
<button class="download"><img src="image/qq.png"></button>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse example">
<ul class="nav navbar-nav">
<li><a href="#" class="about">首页</a></li>
<li><a href="#" class="about">职业</a></li>
<li><a href="#" class="about">学习</a></li>
<li><a href="#" class="about">关于</a></li>
</ul>
</div>
</div>
</header>
轮播图的制作
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/image.png" >
</div>
<div class="item">
<img src="image/image2.png" >
</div>
<div class="item">
<img src="image/image3.png" >
</div>
<div class="item">
<img src="image/image4.png" >
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
栅格布局制作
明天计划的事情:
任务8和9一起完成
问题:
我header缩放后的按钮没有下拉菜单,无法解决。
收获:
bootstrap的栅格化系统总共有这么几种变化。·
第一:样式有三个固定宽度和一个自适应宽度,分别是750、970 和1170固定宽,在小于768的时候则是采用屏幕宽度-30(左右15像素)的宽度。
第二:通过不同宽度的标签来改变在不同宽度下的栏目宽度变化,比如在1200的时候,可以使用col-lg-8与col-lg-4,那么在970的时候可以使用col-md-6与col-md-6了。这时候两种不同屏幕的显示时不同的。
评论