【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面_html/css_WEB-ITnose

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

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

没关系，我们完全可以改变布局

拉成门户式的风格，

他们马上屁颠屁颠地接受了：

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

这一才利于我们快速布局

开头是一个较小的巨幕，

之后是一个导航栏，这里还是用到了按钮组

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

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

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

我们需要准备东西同样只是photoshop里面的一幅高度为1的渐变条，

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

这是我们需要准备的唯一一个图像，可以把photoshop关闭，抛在一边，把这个图像保存在网站工程文件夹，

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

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

			<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>		        <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>                            <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>	  <br>  <br>  <p></p>  <br> </div>