上一次写的《【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众巨幕式风格页面》（点击打开链接）

部分老一辈的需求可能对这样的后现代的风格并不惬意，

没关系，我们全然能够改变布局

拉成门户式的风格，

他们立即屁颠屁颠地接受了：

首先，门户式的布局的大概你要清楚，

这一才利于我们高速布局

开头是一个较小的巨幕，

之后是一个导航栏。这里还是用到了button组

接着是各个专栏，这里是关于bootstrap栅格系统与面板的运用

最后是版权信息，这里还是一个面板

反正个人认为这样的门户式的布局风格烂大街，但不知道为何似乎非常受众的样子。

我们须要准备东西相同仅仅是photoshop里面的一幅高度为1的渐变条，

首先打开photoshop，新建一个1024x1的图像，宽度任意。尽量宽就能够了，图像是1就能够了，前景色为深绿色R:0 G:140 B:0，背景色为浅绿色R:100 G:200 B:100，用渐变工具拉出例如以下的图像，怎么拉都能够向左往右拉能够，向中间往两边也能够，看个人喜好：

这是我们须要准备的唯一一个图像。能够把photoshop关闭，抛在一边。把这个图像保存在站点project目录。

这个图像才6k左右，根本不影响载入。

之后，详细的网页代码例如以下，原理与《【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众巨幕式风格页面》（点击打开链接）中的各个部分全然一模一样，仅仅是代码的位置不同而已，这里就不再叙述。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>testa</title>

		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

		<link href="css/bootstrap.css" rel="stylesheet" media="screen">

		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

		<script type="text/javascript" src="js/bootstrap.js"></script>

		<style type="text/css">

		h1,h2,h3,h4,h5 {

			font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",

			Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",

			"WenQuanYi Micro Hei", sans-serif;

		}

		</style>

	</head>

	<body>

        <div class="container">

            <div class="jumbotron masthead"

            style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align:center">

                <h1>

                    <font color="#ffffff">Banner : the Main headline</font>

                </h1>

                <h2>

                    <font color="#ffffff">Sub-heading</font>

                </h2>

            </div>

            <div class="panel panel-success">

                <div class="btn-group btn-group-justified">

                <div class="btn-group">

                        <a href="#" class="btn btn-success">

                            button1

                        </a>

                </div>

                <div class="btn-group">

                        <a href="#" class="btn btn-success">

                            button2

                        </a>

                </div>

                <div class="btn-group">

                    <button type="button" class="btn btn-success dropdown-toggle"

                        data-toggle="dropdown">

                        Dropdown1

                        <span class="caret"></span>

                    </button>

                    <ul class="dropdown-menu" role="menu">

                        <li>

                            <a href="#">button1</a>

                        </li>

                        <li>

                            <a href="#">button2</a>

                        </li>

                    </ul>

                </div>

                <div class="btn-group">

                    <button type="button" class="btn btn-success dropdown-toggle"

                        data-toggle="dropdown">

                        Dropdown2

                        <span class="caret"></span>

                    </button>

                    <ul class="dropdown-menu" role="menu">

                        <li>

                            <a href="#">button1</a>

                        </li>

                        <li>

                            <a href="#">button2</a>

                        </li>

                        <li>

                            <a href="#">button3</a>

                        </li>

                        <li class="divider"></li>

                        <li>

                            <a href="#">button4</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

        <div class="container">

			<div class="row">

				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ">

					<div class="panel panel-default">

						<div class="panel-body">

							<h3>

								Column1

							</h3>

							<p>

								...

							</p>

							<p>

								<a href="#" class="btn btn-success" role="button">Button</a>

								<a href="#" class="btn btn-default" role="button">Button</a>

							</p>

						</div>

					</div>

				</div>

				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

					<div class="panel panel-default">

						<div class="panel-body">

							<h3>

								Column2

							</h3>

							<p>

								...

							</p>

							<p>

								<a href="#" class="btn btn-success" role="button">Button</a>

								<a href="#" class="btn btn-default" role="button">Button</a>

							</p>

						</div>

					</div>

				</div>

            </div>

			<div class="row">

				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

					<div class="panel panel-default">

						<div class="panel-body">

							<h3>

								Column3

							</h3>

							<p>

								...

							</p>

							<p>

								<a href="#" class="btn btn-success" role="button">Button</a>

								<a href="#" class="btn btn-default" role="button">Button</a>

							</p>

						</div>

					</div>

				</div>

			</div>

        <div class="panel panel-default">

            <div class="panel-body" style="text-align: center">

                Copyright information

            </div>

        </div>

    </div>

	</body>

</html>

【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面的更多相关文章

  1. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  2. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  3. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  4. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  5. 原生JavaScript 导出excel表格（兼容ie和其他主流浏览器）

    因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在 ...

  6. css 完美垂直居中解决方案兼容ie8以上等其他浏览器

    css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...

  7. 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面

    尽管说IE6除了苛刻要求的一部分,我们一直没能考虑,但WIN7内置的浏览器IE8还需要支持. 在本文中,基本这种方法的优点,我个人认为,这是准备少.我们不需要在网上找了很多照片,使材料,你只要准备好了 ...

  8. bootstrap table 兼容ie8 -- refreshOptions

    今天项目使用 bootstrap table 在ie8下发现 方法 refreshOptions 报错. 经过调试监控发现错误如下: 153 行 代码 Object.getOwnPropertyNam ...

  9. 浅谈如何让 Bootstrap 3兼容IE8浏览器

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...

随机推荐

  1. .net SignalR 聊天室

    代码地址:https://gitee.com/srnsrn/netSignalr.git 运行项目打开多个页面 私密聊天

  2. HDU-3315 My Brute

    先对于每种可能的PK情况进行判断胜负,然后求最小改动最大匹配. #include <cstdlib> #include <cstdio> #include <cstrin ...

  3. [POJ3974]Palindrome（后缀数组 || manacher）

    传送门 求一个串的最长回文子串的长度 1.后缀数组 把这个串反转后接到原串的后面,中间连一个没有出现过的字符. 然后求这个新字符串的某两个后缀的公共前缀的最大值即可. ——代码 #include &l ...

  4. BZOJ1195 [HNOI2006]最短母串 【状压dp】

    题目 给定n个字符串(S1,S2,„,Sn),要求找到一个最短的字符串T,使得这n个字符串(S1,S2,„,Sn)都是T的子串. 输入格式 第一行是一个正整数n(n<=12),表示给定的字符串的 ...

  5. BZOJ2333 [SCOI2011]棘手的操作 【离线 + 线段树】

    题目 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来有如下一些操作: U x y: 加一条边,连接第x个节点和第y个节点 A1 x v: 将第x个节点的权 ...

  6. CentOS7 Failed to start iptables.解决方法

    Shit, CentOS怎么这么多bug.... 公司机房周日突然掉电,之前的Openstack环境就不能用了. 重新Run了一遍安装脚本,发现这个错误: iptables 咋又起不来了呢..... ...

  7. js中的clientHeight和offsetHeight的区别如

    如图所示:

  8. 【NOIP2016练习】T1 string （计数）

    题意: 思路: ; ..]of int64; n,k,i:longint; ans,x,y:int64; s,t:ansistring; function c(x,y:longint):int64; ...

  9. Sum BZOJ 3944

    Sum [问题描述] 给定一个正整数 N ( N <= 231 - 1 ) 求: [输入格式] 一共T+1行 第1行为数据组数T(T<=10) 第2~T+1行每行一个非负整数N,代表一组询 ...

  10. 苹果safari支持flex布局

    今天突然发现flex布局不支持safari  解决办法 .page-wrap { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...