Bootstrap 华理教务处信息网

时间：2016-07-06 15:06:00 阅读：350 评论：0 收藏：0 [点我收藏+]

标签：

引入 head

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华东理工大学教务处信息网</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="http://libs.baidu.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此段为移动设备所必须
接下来是引入百度CDN

栅格系统 grid

http://v3.bootcss.com/css/#grid

.container-fluid 100%宽度此为移动设备所必须
.container下只能有row元素
.row下只能有col-md-* 即栏元素
col之和为12
但是
col元素下又可包含row元素
参考
http://v3.bootcss.com/css/#grid-nesting

导航 nav

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <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 class="visible-xs">
            <a class="navbar-brand" href="#">
              华东理工大学教务处信息网
            </a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">概况简介</a></li>
            <li><a href="#">新闻公告</a></li>
            <li><a href="#">人才培养</a></li>
            <li><a href="#">教学研究</a></li>
            <li><a href="#">教学成果</a></li>
            <li><a href="#">教学评估</a></li>
            <li><a href="#">教务考务</a></li>
            <li><a href="#">招生信息</a></li>
            <li><a href="#">质量监控</a></li>
            <li><a href="#">公共服务</a></li>
          </ul>
        </div>
      </nav>

这段代码实现了导航
使用.navbar-fixed-top 使导航栏置顶适应移动设备、
同时

<body style="padding:30px">

给body加入内边距CSS 否则置顶的导航栏会遮住最上面的元素

<div class="page-header hidden-xs">
    <h1>
        <img alt="Bootstrap Image Preview" src="banner.jpg" 
          style="display:inline-block;height: auto; width:100%"/>
    </h1>
</div>

.page-header页头

style="display:inline-block;height: auto; width:100%"

这段CSS使图片可以适应宽度自带的.img-responsive 无效？
http://v3.bootcss.com/css/#images

.hidden-xs
在极小设备（手机隐藏）
参考：
http://v3.bootcss.com/css/#responsive-utilities-classes

全部代码

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华东理工大学教务处信息网</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="http://libs.baidu.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding:30px">
  <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header hidden-xs">
                <h1>
                  <img alt="Bootstrap Image Preview" src="banner.jpg" 
          style="display:inline-block;height: auto; width:100%"/>
                </h1>
            </div>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <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 class="visible-xs">
            <a class="navbar-brand" href="#">
              华东理工大学教务处信息网
            </a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">概况简介</a></li>
            <li><a href="#">新闻公告</a></li>
            <li><a href="#">人才培养</a></li>
            <li><a href="#">教学研究</a></li>
            <li><a href="#">教学成果</a></li>
            <li><a href="#">教学评估</a></li>
            <li><a href="#">教务考务</a></li>
            <li><a href="#">招生信息</a></li>
            <li><a href="#">质量监控</a></li>
            <li><a href="#">公共服务</a></li>
          </ul>
        </div>
      </nav>

        </div>
    </div>
  <div class="row">
    <div class="col-md-4">
      <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="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="1.jpg " alt="First slide" style="display:inline-block;height: 100%; width:100%">
         <div class="carousel-caption">徐汇校区-青春河畔</div>
      </div>
      <div class="item">
         <img src="2.jpg" alt="Second slide"  style="display:inline-block;height: 100%; width:100%">
         <div class="carousel-caption">徐汇校区-图书馆外景</div>
      </div>
      <div class="item">
         <img src="3.jpg" alt="3th slide"  style="display:inline-block;height: 100%; width:100%">
         <div class="carousel-caption">徐汇校区-晨读</div>
      </div>
      <div class="item">
         <img src="4.jpg" alt="4th slide"  style="display:inline-block;height: 100%; width:100%">
         <div class="carousel-caption">徐汇校区-教学八楼</div>
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 
      <h1>教务管理</h1>
      <div class="list-group">
        <h2>学生自助系统</h2>
        <a href="#" class="list-group-item">返校学习管理信息系统</a>
        <a href="#" class="list-group-item">素质教育成绩查询</a>
        <a href="#" class="list-group-item">短学期选课平台</a>
        <a href="#" class="list-group-item">学生评教系统</a>
        <h2>教务管理系统</h2>
        <a href="#" class="list-group-item">教师平台</a>
        <a href="#" class="list-group-item">重读选课平台</a>
        <a href="#" class="list-group-item">学生选课平台</a>
        <a href="#" class="list-group-item">综合查询(学生、教师、家长</a>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
      <h1>新闻公告</h1>
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="table">
            <caption>教学运行办公室</caption>
            <tbody>
              <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
           </tbody>
         </table>
        </div>
                <div class="table-responsive">
          <table class="table">
            <caption>考务管理办公室</caption>
            <tbody>
              <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
           </tbody>
         </table>
        </div>      
      </div>
      <div class="col-md-6">
                <div class="table-responsive">
          <table class="table">
            <caption>质量保障及行政管理办公室</caption>
            <tbody>
              <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
           </tbody>
         </table>
        </div>
                <div class="table-responsive">
          <table class="table">
            <caption>学院教务信息</caption>
            <tbody>
              <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
                           <tr>
                <th>20152学期本科生放假通...</th>
                <th>2016-06-29</th>
              </tr>
           </tbody>
         </table>
        </div>
      </div>
      </div>
    </div>
    <div class="col-md-2">
      <iframe src="http://59.78.108.73/jwc/index.php" width="101" height="128" allowtransparency="true"   scrolling="no"  frameborder="0"></iframe>
      <h4>
        2016年7月6日星期三
      </h4>
      <div class="list-group">
        <h1>信息服务</h1>
        <a href="#" class="list-group-item">课程中心</a>
        <a href="#" class="list-group-item">校园慕课平台</a>
        <a href="#" class="list-group-item">学生评教结果查看</a>
        <a href="#" class="list-group-item">创新教育体系</a>
        <a href="#" class="list-group-item">USRP平台</a>
        <a href="#" class="list-group-item">教务档案平台</a>
        <a href="#" class="list-group-item">业绩点系统</a>
        <a href="#" class="list-group-item">本科专业平台</a>
      </div>
      <div class="list-group">
        <h1>公共服务</h1>
        <a href="#" class="list-group-item">课程中英文对照</a>
        <a href="#" class="list-group-item">课历与上课时间表</a>
        <a href="#" class="list-group-item">下载中心</a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="row footer-bottom">
        <ul class="list-inline text-center">
          <p>版权所有 华东理工大学教务处</p>
          <p>地址:上海市梅陇路130号 邮编:200237 E-Mail:jwc.eucst.edu.cn
        </ul>
      </div>
    </div>
  </div>
</body>
</html>