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. ubuntu自动执行

    一般先写个sh脚本文件---->要执行的语句写入sh文件----->chromd -x ???.sh增加权限即可 crontab -e * * * * * /home/???.sh */1 ...

  2. ASP.NET MVC Filters 4种默认过滤器的使用【附示例】

    过滤器(Filters)的出现使得我们可以在ASP.NET MVC程序里更好的控制浏览器请求过来的URL,不是每个请求都会响应内容,只响应特定内容给那些有特定权限的用户,过滤器理论上有以下功能: 判断 ...

  3. PhpStorm 相关激活方式

    点击进入下面网站: http://idea.lanyus.com/

  4. 数据库实战案例—————记一次TempDB暴增的问题排查

    前言 很多时候数据库的TempDB.日志等文件的暴增可能导致磁盘空间被占满,如果日常配置不到位,往往会导致数据库故障,业务被迫中断. 这种文件暴增很难排查,经验不足的一些运维人员可能更是无法排查具体原 ...

  5. java.lang.UnsatisfiedLinkError: %1 不是有效的 Win32 应用程序。

    JNA 调用 dll 库时,保错: ///////////////// 通过 JNA 引入 DLL 库 //////////// /** * ID_FprCap.dll 负责指纹的采集, 指纹仪的初始 ...

  6. 前端开发必备！Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  7. 04.ubuntu下kvm 命令行安装64位ubuntu报"Couldn't find hvm kernel for Ubuntu tree."的问题

    1.安装ubuntu时使用的virt-install的配置: virt-install \ --name test4 \ --ram 1024 \ --disk path=/data/01_ubunt ...

  8. NRF24L01 无线模块的使用

    NRF24L01 是一款工作在2.4-2.5GHz通用ISM频段的单片收发芯片 工作电压:1.9-3.6V低电压工作 高速率:2Mbps,由于空中传输时间很短,极大的降低了无线传输中的碰撞现象 多频点 ...

  9. WORD中字数和字符

    在WORD中,一个汉字算1个字符,也算是1个字,一个标点符号也算1个字符,也算是1个字,WORD中字符数的统计分为(不计空格)和(计空格)的两种. 如果一篇文章仅由汉字和标点符号组成,那么字数=字符数 ...

  10. Linux下使用crontab定时备份日志

    上周学习了Linux,其中有使用crontab定时备份日志的内容,现把主要步骤记录如下: 首先需要备份的日志的源目录位于/opt/lampp/logs/access_log 备份到/tmp/logs下 ...