Bootstrap打造兼容IE8的巨幕式布局教程

156 浏览量更新于2024-08-28 收藏 149KB PDF 举报

本篇文章主要介绍了如何使用Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面，特别针对IE8浏览器的支持，考虑到其在Windows 7系统中的广泛使用。文章强调了准备工作的简洁性，只需要Bootstrap、jQuery和Photoshop这三个基础工具。首先，Bootstrap的优势在于其易于配置和使用，特别是对于布局方面。作者推荐读者参考其他教程（如《Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗》）来熟悉Bootstrap和jQuery的集成。对于新手来说，熟练掌握Bootstrap能帮助快速响应普通设计需求。文章提到，虽然网络上充斥着各种现成的页面模板，但理解模板背后的实现原理更为重要，这有助于避免因模板与浏览器兼容性问题带来的麻烦。作者的目标是使用Bootstrap V3创建一个包含页头导航（分为left, middle, right按钮与下拉菜单）、三个主要栏目和版权信息的主页，以及具有相似结构的内页。制作过程包括以下步骤： 1. 在Photoshop中创建一个高度为1px、宽度自适应的绿色渐变图像，作为页面背景的基础元素。这个简单的图像只需几百字节大小，对加载速度影响微乎其微。 2. 对于主页的编码，使用HTML和Bootstrap CSS/JS来构建页面结构。这涉及到`<html>`、`<head>`、`<body>`标签，以及Bootstrap的`<nav>`、`<div>`、`<button>`等元素，配合Bootstrap的CSS类来实现导航栏和巨幕式的布局。 3. 由于Bootstrap导航栏组件在IE8上存在问题，作者选择手动创建按钮组来替代，确保跨浏览器的兼容性。这可能涉及自定义CSS和JavaScript来实现所需的导航效果。 4. 内页的设计与主页类似，保持一致的导航和主要内容区域，不同之处在于巨幕尺寸的调整和可能的页面标题调整。本文提供了一种利用Bootstrap进行网页设计的方法，特别关注浏览器兼容性和资源准备的精简，强调了理解模板背后逻辑的重要性，适合有一定基础的开发者快速开发出美观且兼容的网页。

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面编写一个兼容主流浏览器的受众巨幕式风格页面

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

本文这个方法主要的优点，个人觉得就是准备少，不需要上网寻找大量的图片做素材，你只要准备好一个bootstrap、jquery与

photoshop就可以了，bootstrap与jquery怎么配置，可以参考《Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗》

（点击打开链接）

被要求编写一个网站，常常会被如何布局困扰，其实也不难，如果能够熟练使用Bootstrap，并且有一套特定的方法，那么应

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

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

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

一、基本目标一、基本目标

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

主页如上所示，首先挂在页头是这个网站的导航，分别为left,middle,right三个按钮与下拉菜单dropdown。这里的实质是一个

按钮组，不能使用Bootstrap提供的导航栏组件，因为这个导航栏组件不兼容IE8，具体见：《解决bootstrap导航栏navbar在

IE8上存在缺陷的方法》一文（点击打开链接）

之后，在巨幕之下，还有三个专栏，与相应的两个按钮，这里可以放置网站上最重要的几个部分，最后按照惯例是版权信息。

而内页则如下所示：

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38538585

粉丝: 3
资源: 956

Bootstrap打造兼容IE8的巨幕式布局教程

Bootstrap编写一个兼容主流浏览器的受众门户式风格页面

漂亮且兼容主流浏览器的JS对话框

使用Bootstrap创建兼容IE8的巨幕式风格页面

bootstrap3 兼容IE8浏览器！

Uno.Wasm.Bootstrap：一个简单的nuget包，用于在与WASM兼容的浏览器中运行C＃代码

Bootstrap 3浏览器兼容性问题及解决方案

基于bootstrap实现bootstrap中文网巨幕效果

Bootstrap V2.3.2：兼容古董浏览器的前端框架

使用Bootstrap创建兼容多浏览器的门户样式页面

使用Bootstrap创建门户式风格的跨浏览器页面

最新资源