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. Git和Code Review流程

    Code Review流程1.根据开发任务,建立git分支, 分支名称模式为feature/任务名,比如关于API相关的一项任务,建立分支feature/api.git checkout -b fea ...

  2. MySQL Performance-Schema(三) 实践篇

    前一篇文章我们分析了Performance-Schema中每个表的用途,以及主要字段的含义,比较侧重于理论的介绍.这篇文章我主要从DBA的角度出发,详细介绍如何通过Performance-Schema ...

  3. mybatis-generator-gui--一个mybatis代码自动生成界面工具

    mybatis-generator-gui是什么 介绍mybatis-generator-gui之前,有必要介绍一下什么是mybatis generator(熟悉的同学可以跳过这一节).我们都知道,通 ...

  4. C++实例讲解Binder通信

    binder是android里面的通信机制,这就不说它如何如何好了,Goog已经说过了,这里不多说.binder是一个面向对象的编程方法,大量使用虚函数类.最近研究binder看到一网友写的,就借鉴一 ...

  5. 方法传参(JAVA与C的比较)

    java代码:public class Test{ static int e; // 默认是0 static String f; //默认是null public static void main(S ...

  6. java实现单链表的整表创建

    package com.java.dataStruct; public class Node<E> { E item; Node next; public Node(){ } public ...

  7. 【每日一linux命令5】命令的结合与定向

    命令中除了一般命令外,还有管道(或称途径)(|)与定向(>或>>). 管道(途径)的用法: "命令一[选项]"|"命令二[选项]",也就是将& ...

  8. [LeetCode] Nth Highest Salary 第N高薪水

    Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...

  9. [LeetCode] Candy 分糖果问题

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  10. 单例模式中用volatile和synchronized来满足双重检查锁机制

    背景:我们在实现单例模式的时候往往会忽略掉多线程的情况,就是写的代码在单线程的情况下是没问题的,但是一碰到多个线程的时候,由于代码没写好,就会引发很多问题,而且这些问题都是很隐蔽和很难排查的. 例子1 ...