实验要求
设计一张网页,网页包括下列元素,网页的实例详见下页的图片
实验目的
- 熟悉掌握bootstrap框架
实验内容
- 可以到官方网站http://getbootstrap.com/ 上下载 Bootstrap 的最新版本,也可以直接链接官方网站提供的源代码
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
- 设置body的字体
body {
font-family: Microsoft YaHei, Arial, Helvetica, sansserif !important;
font-weight: bold !important;
}
- 首先设置网站的导航栏,
向 ’nav‘ 标签添加 class .navbar,向nav的元素添加 role=“navigation”,有助于增加可访问性。直接在标签内设置了背景颜色为红棕色。
向 ’div‘ 元素添加一个标题 class .navbar-header,可以在这里写比较大字体的导航
使用基本的胶囊式导航菜单,在ul中使用class.nav 和class .nav-pills,为了让导航栏占据一整行并居中,使用class. nav-justified。
每个列表项都可以链接到网页的某一位置,所以在’a‘中添加href="#c1",表示点击之后转到页面中id=c1的位置,由于此时在首页,所以在这个列表项的class填入active,意思是此为当前位置
HTML:
<nav class="navbar-nav" role="navigation" style="background-color: brown;">
<div class="navbar-header">
<ul class="nav nav-pills nav-justified">
<li class="acive"><a href="#">首页</a></li>
<li><a href="#c1">解决方案</a></li>
<li><a href="#c2">服务</a></li>
<li><a href="#c3">产品</a></li>
<li><a href="#c4">客户案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</nav>
效果图:
4. 设置轮播图,分为三步:
首先设置一个容器,class为carousel slide,使用bootstrap提供的CSS
设置轮播指标,即设置一个有序列表,class为carousel-indicators,设置data-slide-to的值从0开始
设置轮播项目,可以是图片,内嵌框架、视频或者其他元素,这里使用的是帅哥的照片,外部div的class设为carousel-inner,里面的div的class值为item
设置轮播导航,这里设置往左往右的格式,使用链接,将链接a的class一个设为left carousel-control,另一个设为right carousel-control,显示为向左向右的图标,用class="glyphicon glyphicon-chevron-left"的span实现。还使用了class="sr-only"的previous按钮,表示只在阅读模式下显示这个按钮。
Html:
<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="#c2" data-slide-to="1"></li>
<li data-target="#c3" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="banner10.jpg" alt="First slide">
</div>
<div class="item">
<img src="banner20.jpg" alt="Second slide">
</div>
<div class="item">
<img src="banner30.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div