web程序设计（10）——制作网站首页（boostrap）

实验要求

设计一张网页，网页包括下列元素，网页的实例详见下页的图片

实验目的

1. 熟悉掌握bootstrap框架

实验内容

1. 可以到官方网站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>

2. 设置body的字体

body {
   
            font-family: Microsoft YaHei, Arial, Helvetica, sansserif !important;
            font-weight: bold !important;
        }

3. 首先设置网站的导航栏，
   向 ’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>

效果图：