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. android Activity介绍

    一般情况下,Android程序的流程都运行在activity中,activity具有自己的生命周期,由系统来控制.可以使用onSaveInstanceState()和onRestoreInstance ...

  2. android Base64 加密

    一 Base64加密 import java.io.ByteArrayOutputStream;import java.io.IOException;import java.io.OutputStre ...

  3. 易企秀微场景2016最新完整版V10.5,小编亲测修复众多错误

    易企秀V10.5更新说明1.修复拨号英文错误2.修复转送场景问题3.修复设置场景密码乱码问题4.修复前台批量删除客户图片5.修复数据收集分页问题6.修复图片分类错乱问题7.修复音乐和特效冲突问题8.修 ...

  4. 12、产品经理要阅读的书籍 - IT软件人员书籍系列文章

    产品经理是软件产品的主要领导者.不同于项目经理,产品经理是对产品负责,更多的是负责产品的设计定型:而项目经理则对项目负责,更多的是负责项目软件的实现.产品经理的一些工作,和项目经理是一致的,比如需求分 ...

  5. 【译】Spring 4 @Profile注解示例

    前言 译文链接:http://websystique.com/spring/spring-profile-example/ 本文将探索Spring中的@Profile注解,可以实现不同环境(开发.测试 ...

  6. Oracle XMLTable 使用教程与实例

    从Oracle 10g开始,甲骨文公司新增了XQuery和XMLTable两个功能作为处理XML的武器. XMLQuery一样,您可以使用XQuery语言构造XML数据和查询XML和关系数据.你可以使 ...

  7. 测试EntityFramework，Z.EntityFramework.Extensions，原生语句在不同的查询中的表现。原来池化与非池化设定是有巨大的影响的。

    Insert测试,只测试1000条的情况,多了在实际的项目中应该就要另行处理了. using System; using System.Collections.Generic; using Syste ...

  8. openstack七大模块概述

    前言 OpenStack主要由七部分组成,分别是Identify, Image, Network, Compute, Block Storage, Object Storage, Dashboard, ...

  9. 基于corosync+pacemaker+drbd+LNMP做web服务器的高可用集群

    实验系统:CentOS 6.6_x86_64 实验前提: 1)提前准备好编译环境,防火墙和selinux都关闭: 2)本配置共有两个测试节点,分别coro1和coro2,对应的IP地址分别为192.1 ...

  10. Ubuntu 14.04 LTS 下升级 gcc 到 gcc-4.9、gcc-5 版本

    如果没记错的话,阿里云ECS上的Ubuntu也是LTS版本. 如果还在使用较旧版本的Ubuntu,或者是Ubuntu LTS,那么我们是很难体验新版gcc的.怎么办呢? 我们或许可以自己去编译用旧版本 ...