基于Bootstrap的网页开发

Bootstrap简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。

bootstrap：
简单灵活的用于搭建web页面的html、css、js的工具集
基于html5、css3
简单强大的前端开发框架

优点：

具有漂亮设计、
友好的学习曲线、
卓越的兼容性、
12列响应式栅格结构、
丰富组件

导航条及下拉菜单制作

导航条基本结构：
用<nav class=“navbar navbar-default navbar-fixed-top navbar-inverse” role=“navigation”>标签声明.

navbar代表这是一个导航条，会应用导航条的样式，
navbar-default代表这是一个默认的导航条样式（为白色），
role=“navigation”代表这是一个导航条,主要用于屏幕阅读器，方便视力障碍者阅读。
navbar-fixed-top可以使导航条固定在顶部，固定的导航条会遮住页面上其他内容，除非给body元素设置padding，导航条的默认宽度是50px，可设置：body{padding-top:70px;}，
添加navbar-inverse可使导航条变为黑色

内容包裹在<div class="container-fluid">或<div class="container">中，

class=“container”代表居中的固定大小的导航条，

class="container-fluid"代表导航条自适应浏览器大小的.
<div class="navbar-header">代表导航条头部,其中包含一段代码使在屏幕宽度小于一定值时导航条的按钮会折叠为一个下拉图标，代码如下：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">brand</a>(为最左侧的文字，如：现代浏览器)

代码示例：

<!-- 导航条 -->
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">现代浏览器博物馆</a>
      </div>
      <div class="navbar-collapse collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">综述</a></li>
          <li><a href="#">简介</a></li>
          <li class="dropdown">
            <a href="##" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Chrome</a></li>
              <li><a href="#">Firefox</a></li>
              <li><a href="#">Opera</a></li>
              <li class="divider"></li>
              <li><a href="#">Safari</a></li>
            </ul>
          </li>
          <li><a href="#">关于</a></li>
        </ul>
      </div>
    </div>
    </nav>

轮播图carousel制作

<div id="slidershow" class="carousel" data-ride="carousel">
<!-- 设置图片轮播的顺序 -->
      <ol class="carousel-indicators">
          <li class="active" data-target="#slidershow" data-slide-to="0"></li>
          <li data-target="#slidershow" data-slide-to="1"></li>
          ...
      </ol>
      <!-- 设置轮播图片 -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="images/chrome-big.jpg" alt="">
          <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="" role="button" target="_blank">点击下载</a>
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          ....
        </div>
      </div>
      <!-- 设置轮播图片控制器 -->
      <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

选项卡制作

<!-- 选项卡组件 -->
      <ul id="myTab" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
        <li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
        ...
      </ul>
      <!-- 选项卡面板 -->
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="tab-chrome">
          <div class="row feature">
            <div class="col-md-7">
              <h2 class="feature-heading">Google Chrome<small>使用最广的浏览器</small></h2>
              <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器...
              </p>
            </div>
            <div class="col-md-5">
              <img class="img-responsive" src="images/chrome-logo.jpg" alt="chrome">
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab-firefox">
          <div class="row feature">
        ......
          </div>
        </div>
      </div>

<li><a data-toggle="modal" href="#about">关于</a></li>
<div class="modal fade" id="about">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                 <h4 class="modal-title">关于</h4>
             </div>
             <div class="modal-body">
                 <p>慕课网隶属于北...</p>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
             </div>
         </div>
     </div>
   </div>

Demo下载

视频课件地址：在线浏览
Demo1: 基于Bootstrap的网页开发：下载地址

Demo2：基于Bootstrap框架的管理系统页面：下载地址

Bootstrap简介

导航条及下拉菜单制作

轮播图carousel制作

选项卡制作

弹出框(modal)制作

Demo下载