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. GCD的相关函数使用

    GCD 是iOS多线程实现方案之一,非常常用 英文翻译过来就是伟大的中枢调度器,也有人戏称为是牛逼的中枢调度器 是苹果公司为多核的并行运算提出的解决方案 1.一次性函数 dispatch_once 顾 ...

  2. Highchart基础教程－图表的主要组成

    一.Highchar图表的主要组成 1.图表标题(Title):图表包含标题和副表题(subTitle,可选). 2.坐标轴(Axis):包括x轴(xAxis)和y轴(yAxis).多个数据列可以共同 ...

  3. PowerDesigner从SqlServer数据库中导入实体模型

    PowerDesigner从SqlServer数据库中导入实体模型 时间 2013-06-28 10:26:34 CSDN博客 原文  http://blog.csdn.net/sxycxwb/art ...

  4. Oracle hint

    1.use_concat 网上说法: CONCATENATION和UNION/UNION ALL操作比较类似,根据OR查询条件,将一个查询分解为两个或更多的部分,然后在去掉两个部分重复的记录.由于CO ...

  5. 用lumen构建API的相关流程

    概述 Lumen是一个基于Laravel的微框架,主要用于小型应用和微服务,专注于性能和速度的优化,该框架一个重要的应用就是构建 RESTAPI. 为什么用Lumen构建REST API Lumen访 ...

  6. linux基础：第三关课前考试题整理

    1.如何取得/etc/hosts 文件的权限对应的数字内容,如-rw-r--r-- 为 644, 要求使用命令取得644 这样的数字. [root@server ~]# stat /etc/hosts ...

  7. C# 闭包问题-你被”坑“过吗？

    引言 闭包是什么?以前看面试题的时候才发现这个名词. 闭包在实际项目中会有什么问题?现在就让我们一起来看下这个不太熟悉的名词. 如果在实际工作中用到了匿名函数和lamada表达式,那你就应该高度注意啦 ...

  8. monkey之monkey日志分析

    一.初步分析方法:Monkey测试出现错误后,一般的差错步骤为以下几步:1.找到是monkey里面的哪个地方出错2.查看Monkey里面出错前的一些事件动作,并手动执行该动作3.若以上步骤还不能找出, ...

  9. xib和storyBoard哪些事之UIimage和按钮注意事项

    1.uiimageView 和按钮比较特殊,可以只设置其x,y就可以. 2.可以设置其丝例,如1:1,或者当前图片的比例,这样保证不会变形,设置比例在自身上点击control拉个线,选择 3.在右侧就 ...

  10. mysql 文件导入方法总结

    数据导入3三种方法 一.phpMyAdmin 限制大小:2M 1.创建数据库 2.导入.sql或.sql.zip文件 大数据导入方法一:http://jingyan.baidu.com/article ...