CSS代码:

body{
        padding-top: 50px;
        padding-bottom: 50px;
        overflow: auto!important;
    }
    .modal{
        overflow: auto!important
    }
    .carousel{
        height: 395px;
        background-color: #000;
        margin-bottom: 40px;
    }
    .carousel .item{
        height: 395px;
        background-color: #000;
    }
    .carousel img{
        width: 100%;
    }
    .carousel-caption p{
        margin-bottom: 20px;
        line-height: 1.8;
        font-size: 15px;
    }
    #summary-container .col-md-4{
        text-align: center;
    }
    hr.divider{
        margin:40px 0;
    }
    .feature{
        padding: 30px 0;
    }
    .feature-heading{
        font-size: 40px;
        color: #2a6496;
        margin-top: 120px;
    }
    .feature-heading .text-muted{
        font-size: 25px;
        color: #999;
    }
    #demo-navbar li:hover{
        background-color: red;
    }

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">

<!--引用bootstrap的CSS样式-->
    <link rel="stylesheet" href="#">
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    <title>bootstrap开发一个网页</title>

</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
            <span class="sr-only">Toggle navigtion</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="##">现代浏览器博物馆</a>
        </div>
        <div class="collapse navbar-collapse" id="demo-navbar">
            <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="#tab_1">Chrome</a></li>
                    <li><a href="#tab_2">Firefox</a></li>
                    <li><a href="#tab_3">Opera</a></li>
                    <li><a href="#tab_4">Safari</a></li>
                </ul></li>
                <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- 图片变换 -->
<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>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
    </ol>
<!-- 图片 -->
<div class="carousel-inner">
    <div class="item active">
    <img src="#" alt="1 slide">
    <!-- 图片中添加文字 -->
    <div class="carousel-caption"><h2>看图说话</h2><p>这是第一张图片</p>
    <p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
    </div>
    <div class="item">
    <img src="#" alt="2 slide">
    <!-- 图片中添加文字 -->
    <div class="carousel-caption"><h2>看图说话</h2><p>这是第二张图片</p>
    <p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
    </div>
    <div class="item">
    <img src="#" alt="3 slide">
    <!-- 图片中添加文字 -->
    <div class="carousel-caption"><h2>看图说话</h2><p>这是第三张图片</p>
    <p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
    </div>
    <div class="item">
    <img src="#" alt="4 slide">
    <!-- 图片中添加文字 -->
    <div class="carousel-caption"><h2>看图说话</h2><p>这是第四张图片</p>
    <p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
    </div>
    <div class="item">
    <img src="#" alt="5 slide">
    <!-- 图片中添加文字 -->
    <div class="carousel-caption"><h2>看图说话</h2><p>这是第五张图片</p>
    <p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
    </div>
    <div class="item">
    <img src="#" alt="6 slide">
    <!-- 图片中添加文字 -->
    <div class="carousel-caption"><h2>看图说话</h2><p>这是第六张图片</p>
    <p><a href="##" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p></div>
    </div>
    </div>
</div>
<!-- 左右切换 -->
<a class="left carousel-control " href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">上一页</span></a>
<a class="right carousel-control " href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">下一页</span></a>
</div>
<!-- 三格布局栅栏系统 -->
<div class="container"  id="summary-container">
    <div class="row">
        <div class="col-md-4">
            <img src="#" class="img-circle" alt="chrome">
            <h3>图片1</h3>
            <p>不要说话</p>
            <p><a href="##" class="btn btn-lg btn-primary" role="button">点击下载</a></p>
        </div>
        <div class="col-md-4">
            <img src="#" class="img-circle" alt="chrome">
            <h3>图片2</h3>
            <p>不要说话</p>
            <p><a href="##" class="btn btn-lg btn-primary" role="button">点击下载</a></p>
        </div>
        <div class="col-md-4">
            <img src="#" class="img-circle" alt="chrome">
            <h3>图片3</h3>
            <p>不要说话</p>
            <p><a href="##" class="btn btn-lg btn-primary" role="button">点击下载</a></p>
        </div>
    </div>
    <!-- 划分线 -->
    <hr class="divider">
    <!-- 标签页 -->
    <ul class="nav nav-tabs" role="tablist" id="tab_list">
        <li class="active"><a href="#tab_1" role="tab" data-toggle="tab">1</a></li>
        <li><a href="#tab_2" role="tab" data-toggle="tab">2</a></li>
        <li><a href="#tab_3" role="tab" data-toggle="tab">3</a></li>
        <li><a href="#tab_4" role="tab" data-toggle="tab">4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab_1">
        <div class="row feature">
            <div class="col-md-5">
                <img src="go.jpg" class="feature-image img-responsive" alt="1">
            </div>
            <div class="col-md-7">
                <h3 class="feature-heading">11111<span class="text-muted">one</span></h3>
                <p class="lead">11111111111111111111111111111111111</p>
            </div>
        </div>
        </div>
        <div class="tab-pane" id="tab_2">
        <div class="row feature">
            <div class="col-md-7">
                <img src="go.jpg" class="feature-image img-responsive" alt="2">
            </div>
            <div class="col-md-5">
                <h3 class="feature-heading">2222<span class="text-muted">two</span></h3>
                <p class="lead">222222222222222222222222222222222</p>
            </div>
            </div>
        </div>
        <div class="tab-pane" id="tab_3">
        <div class="row feature">
            <div class="col-md-5">
                <img src="go.jpg" class="feature-image img-responsive" alt="3">
            </div>
            <div class="col-md-7">
                <h3 class="feature-heading">3333<span class="text-muted">three</span></h3>
                <p class="lead">333333333333333333333333333333333</p>
            </div>
            </div>
        </div>
        <div class="tab-pane" id="tab_4">
        <div class="row feature">
            <div class="col-md-7">
                <img src="#" class="feature-image img-responsive" alt="4">
            </div>
            <div class="col-md-5">
                <h3 class="feature-heading">44444<span class="text-muted">four</span></h3>
                <p class="lead">444444444444444444444</p>
            </div>
            </div>
        </div>
    </div>
</div>
<!-- 划分线 -->
<hr class="divider">
<!-- 底部版权 -->
<footer>
    <p class="pull-right"><a href="#top">回到顶部</a></p>
    <p>2016*******</p>
</footer>
<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" 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>
                <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
            </div>
        </div>
    </div>
</div>

<!--引用jquery-->
    <script type="text/javascript" src="j#"></script>

<!--引用bootstrap.js-->
    <script src="#"></script>

Jquery代码：

(function(){
var Modal = {};
//解决Modal弹出时页面左右移动问题
Modal.adjustBody_beforeShow = function(){
    console.log("1")
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
  $('body').css({
    'overflow' : 'hidden',
    'margin-left' : '18px'
  });
  $('.modal').css({'overflow-y':'scroll'})
}else{
  $('body').css({
    'overflow' : 'auto',
    'margin-left' : '0'
  });
  $('.modal').css({'overflow-y':'auto'})
}
}
Modal.adjustBody_afterShow = function(){
    console.log("2")
var body_scrollHeight = $('body')[0].scrollHeight;
var docHeight = document.documentElement.clientHeight;
if(body_scrollHeight > docHeight){
  $('body').css({
    'overflow' : 'auto',
    'margin-left' : '0'
  });
}else{
  $('body').css({
    'overflow' : 'auto',
    'margin-left' : '0'
  });
}
}
$('#about').modal('hide');
$('#about').on('show.bs.modal', function (event) {
  Modal.adjustBody_beforeShow();
});
$('#about').on('hidden.bs.modal', function (event) {
  Modal.adjustBody_afterShow();
});
})();

bootstrap开发一个简单网页。的更多相关文章

  1. Python开发一个简单的BBS论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  2. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  3. 重新想象 Windows 8 Store Apps (64) - 后台任务: 开发一个简单的后台任务

    [源码下载] 重新想象 Windows 8 Store Apps (64) - 后台任务: 开发一个简单的后台任务 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 后 ...

  4. Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...

  5. 作业1开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  6. django学习-11.开发一个简单的醉得意菜单和人均支付金额查询页面

    1.前言 刚好最近跟技术部门的[产品人员+UI人员+测试人员],组成了一桌可以去公司楼下醉得意餐厅吃饭的小team. 所以为了实现这些主要点餐功能: 提高每天中午点餐效率,把点餐时间由20分钟优化为1 ...

  7. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  8. 自己动手模拟开发一个简单的Web服务器

    开篇:每当我们将开发好的ASP.NET网站部署到IIS服务器中,在浏览器正常浏览页面时,可曾想过Web服务器是怎么工作的,其原理是什么?“纸上得来终觉浅,绝知此事要躬行”,于是我们自己模拟一个简单的W ...

  9. 【UI插件】开发一个简单日历插件（上）

    前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...

随机推荐

  1. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  2. Linux常见查看硬件信息指令

    CPUlscpu 查看的是CPU的统计信息./proc/cpuinfo 查看每个cpu信息,如每个CPU的型号,主频等. 内存free -m 概要查看内存情况cat /proc/meminfo 查看内 ...

  3. Java 根据经纬度计算两点之间的距离

    package xxx.driver.business.utils; /** * <p>Represents a point on the surface of a sphere. (Th ...

  4. Sql基础

    SELECT 列名称 FROM 表名称 SELECT * FROM 表名称 SELECT DISTINCT Company FROM Orders 去重 SELECT 列名称 FROM 表名称 WHE ...

  5. 阿里云ECS服务器配置（Ubuntu+JAVA+Tomcat+Mysql）

    最近购买了阿里云的ECS服务器,就服务器的安装配置做简要的说明,也方便日后查看. 1.远程操作服务器 远程操作服务器可以使用putty工具,下载地址:http://pan.baidu.com/s/1q ...

  6. UVA10325 The Lottery（容斥原理）

    题意: 给n,m,和m个数(k1~km).求1~n中有多少个数不是(k1~km)中任意一数的倍数. 题解: 容斥模板题.反面考虑,a的倍数有n/a个:既是a,也是b的倍数,即lcm(a,b)的倍数有n ...

  7. activity的启动模式

    有四种启动模式:standard.singleTop.singleTask.singleInstance. 可在AndroidManifest.xml设置android:launchMode属性,如: ...

  8. [LeetCode] Evaluate Division 求除法表达式的值

    Equations are given in the format A / B = k, where A and B are variables represented as strings, and ...

  9. 从点云到网格（三）Poisson重建

    Possion重建是Kazhdan等2006年提出的网格重建方法[1].Possion重建的输入是点云及其法向量,输出是三维网格.Poisson有公开的源代码[2].PCL中也有Poisson的实现. ...

  10. FineUI（专业版）公测版发布（这速度，真TM快！）

    经过近一年的筹备.编码和测试,FineUI(专业版)公测版终于和大家见面了!现在就来体验一下专业版飞一般的速度吧:http://fineui.com/demo_pro/FineUI(专业版)首页:ht ...