【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众巨幕式风格页面_html/css

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

WBOY

Release： 2016-06-24 11:51:54

Original

1679 people have browsed it

虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了，但是WIN7自带的浏览器IE8还是需要支持的。

本文这个方法主要的优点，个人觉得就是准备少，不需要上网寻找大量的图片做素材，你只要准备好一个bootstrap、jquery与photoshop就可以了，bootstrap与jquery怎么配置，可以参考《【Bootstrap】一个在当前网页弹出的对话框，可以关闭，不用跳转，非弹窗》（点击打开链接）

被要求编写一个网站，常常会被如何布局困扰，

其实也不难，如果能够熟练使用Bootstrap，并且有一套特定的方法，

那么应对普通的需求还是能够快速轻松地交功课的。

虽然网上的页面模板一搜一大段，但是能够庖丁解牛地了解这些页面模板的创造过程才是关键。

一旦下载这些模板与浏览器不兼容，又不会修改，那就麻烦大了。

一、基本目标

使用BootstrapV3来创造如下的页面：

主页如上所示，首先挂在页头是这个网站的导航，分别为left,middle,right三个按钮与下拉菜单dropdown。这里的实质是一个按钮组，不能使用Bootstrap提供的导航栏组件，因为这个导航栏组件不兼容IE8，具体见：《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》一文（点击打开链接）

之后，在巨幕之下，还有三个专栏，与相应的两个按钮，

这里可以放置网站上最重要的几个部分，

最后按照惯例是版权信息。

而内页则如下所示：

同样是置顶的导航条，

然后是这个内页的标题与内容。内页的标题实质上还是一个巨幕，只是比主页的尺寸少而已。

接下来是还是版权信息。

二、制作过程

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

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

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

2、主页

具体代码如下，然后一段一段代码说明：

			无标题文档																
													
													
																					Dropdown link						
													Dropdown link						
					
			
		
					




				Banner : the Main headline			
							Sub-heading			
			




																																			Column1							
															...							
															Button								Button							
						
					
				
																														Column2							
															...							
															Button								Button							
						
					
				
																														Column2							
															...							
															Button								Button							
						
					
				
			
												Copyright information

Copy after login

（1）

部分

	    			无标题文档

Copy after login

（2）导航栏

由于bootstrap提供的导航栏不适用，我们只好用bootstrap提供的按钮组来自己写导航栏

		        								                					                        Left                    				
															Middle									
															Right									
				                																					Dropdown link						
													Dropdown link

Copy after login

改变class属性中btn-success变成btn-primary，btn-danger等能够改变这个按钮的颜色哦！

（3）巨幕部分

巨幕的写法如下，关键是引入我们刚才用photoshop画出来的背景

这里之所以要加这么多
回车是因为要拉大这个巨幕的尺寸

					




				Banner : the Main headline			
							Sub-heading

Copy after login

（4）专栏部分

这里运用到bootstrap的栅格组织，进行对三个专栏的排版

具体可以参考我《【Bootstrap】自动适应PC、平板、手机的Bootstrap栅格系统》（点击打开链接）一文，

把整个网页的12格分成3份，每份4格就刚刚好了

而每个专栏就是一个没有面板头的面板，里面一个h3的大标题，然后p的一个段落文本，再两个按钮

值得注意的是，这些东西必须放到一个容器以内，不然这三个东西会占满整个页面：

Column1

...

Button Button

Column2

...

Button Button

Column2

...

Button Button

（5）版权信息部分

没什么好说的，就是一个面板

									Copyright information

Copy after login

3、内页

会做主页，那么内页的思想也就完全相同了，不再赘述，同理，代码如下：

			无标题文档												                        Left                    				
															Middle									
															Right									
																					Dropdown link						
													Dropdown link						
					
			
		
        									Title			
		
        														Content				
			
                                                Copyright information