首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 01, 2016

虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了，但是WIN7自带的浏览器IE8还是需要支持的。
本文这个方法主要的优点，个人觉得就是准备少，不需要上网寻找大量的图片做素材，你只要准备好一个bootstrap、jquery与photoshop就可以了，bootstrap与jquery怎么配置，可以参考《Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗》（点击打开链接）
被要求编写一个网站，常常会被如何布局困扰，其实也不难，如果能够熟练使用Bootstrap，并且有一套特定的方法，那么应对普通的需求还是能够快速轻松地交功课的。 
虽然网上的页面模板一搜一大段，但是能够庖丁解牛地了解这些页面模板的创造过程才是关键。
一旦下载这些模板与浏览器不兼容，又不会修改，那就麻烦大了。 

一、基本目标

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

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

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

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

而内页则如下所示：

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

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

接下来是还是版权信息。

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

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

这是我们需要准备的唯一一个图像，可以把photoshop关闭，抛在一边，把这个图像保存在网站工程文件夹，这个图像才6k左右，根本不影响加载。 

2、主页
具体代码如下，然后一段一段代码说明： 

<!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>无标题文档</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 style="position: absoulted; top: 0; left: 0; width: 100%;">
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-success">
 Left
 </button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">
 Middle
 </button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">
 Right
 </button>
 </div>

 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
 data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li>
 <a href="#">Dropdown link</a>
 </li>
 <li>
 <a href="#">Dropdown link</a>
 </li>
 </ul>
 </div>

 </div>
 </div>

 <div class="jumbotron masthead"
 style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center">
 <br />
 <br />
 <br />
 <br />
 <br />
 <h1>
 <font color="#ffffff">Banner : the Main headline</font>
 </h1>
 <h2>
 <font color="#ffffff">Sub-heading</font>
 </h2>
 <br />
 <br />
 <br />
 <br />
 <br />
 </div>


 <div class="container">
 <div class="row">
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 ">
 <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-4 col-sm-4 col-md-4 col-lg-4">
 <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 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <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="panel panel-default">
 <div class="panel-body" style="text-align: center">
 Copyright information
 </div>
 </div>

 </div>
 </body>
</html>

 （1）<head>部分 

<head>
 <!--网站编码，标题，自适应屏幕等-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--需要使用的js与css样式-->
 <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>
 <!--这是唯一需要我们自己定义的css样式，用来解决win7系统下，微软雅黑字体无法正常显示，而显示宋体的bug-->
 <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>

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

<!--首先导航栏必必须挂在网页头-->
 <div style="position: absoulted; top: 0; left: 0; width: 100%;">
 <!--定义一个按钮组-->
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <!--导航栏中单个按钮，也就是没有下拉菜单的按钮的超级链接写作方式需要注意，是使用a标签，然后加上class样式的，而不是官网提供的button标签-->
 <a href="#" class="btn btn-success">
  Left
  </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Middle
 </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Right
 </a>
 </div>
 
 <!--下拉菜单的写法如下：-->
 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
 data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li>
 <a href="#">Dropdown link</a>
 </li>
 <li>
 <a href="#">Dropdown link</a>
 </li>
 </ul>
 </div>

 </div>
 </div>

改变class属性中btn-success变成btn-primary，btn-danger等能够改变这个按钮的颜色哦！
 （3）巨幕部分 
巨幕的写法如下，关键是引入我们刚才用photoshop画出来的背景 

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

<div class="jumbotron masthead"
 style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center">
 <br />
 <br />
 <br />
 <br />
 <br />
 <h1>
 <font color="#ffffff">Banner : the Main headline</font>
 </h1>
 <h2>
 <font color="#ffffff">Sub-heading</font>
 </h2>
 <br />
 <br />
 <br />
 <br />
 <br />
 </div>

（4）专栏部分 
这里运用到bootstrap的栅格组织，进行对三个专栏的排版 
具体可以参考Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统一文，把整个网页的12格分成3份，每份4格就刚刚好了 ，而每个专栏就是一个没有面板头的面板，里面一个h3的大标题，然后p的一个段落文本，再两个按钮。
值得注意的是，这些东西必须放到一个容器以内，不然这三个东西会占满整个页面：

<div class="container">
 <div class="row">
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 ">
 <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-4 col-sm-4 col-md-4 col-lg-4">
 <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 class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <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>

（5）版权信息部分
 没什么好说的，就是一个面板 

<div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
 Copyright information
 </div>
 </div>

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

<!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>无标题文档</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 style="position: absoulted; top: 0; left: 0; width: 100%;">
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <a href="#" class="btn btn-success">
  Left
  </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Middle
 </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Right
 </a>
 </div>

 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
 data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li>
 <a href="#">Dropdown link</a>
 </li>
 <li>
 <a href="#">Dropdown link</a>
 </li>
 </ul>
 </div>

 </div>
 </div>
 
 <div class="jumbotron masthead"
 style="background-image: url(images/bg.jpg); background-repeat: repeat;">
 <h1>
 <font color="#ffffff">Title</font>
 </h1>
 </div>
 
 <div class="container-fluid">
 <div class="panel panel-default">
 <div class="panel-body">
 Content
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
  Copyright information
 </div>
 </div>
 </div>
 

 
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
如何用js 实现依赖注入的思想，后端框架思想搬到前端来
Aug 03 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
详解javascript数组去重问题
Nov 06 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 #Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 #Javascript
全面了解JavaScript的数据类型转换
Jul 01 #Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 #Javascript
浅谈JavaScript中的分支结构
Jul 01 #Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 #Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 #Javascript
FTP服务器(1) 界面设计(1) 对撞机(1) .NET Framework(2) IIS7(1) GZIP(2) DNS服务器(2) 磁盘分区(1) 粒子对撞机(1) DBLink(1)
You might like
递归列出所有文件和目录
2006/10/09 PHP
php设计模式小结
2013/02/15 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
php提取微信账单的有效信息
2018/10/01 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
小程序云开发实战小结
2018/10/25 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python网络编程学习笔记(四)：域名系统
2014/06/09 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
torchxrayvision包安装过程（附pytorch1.6cpu版安装）
2020/08/26 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
日本乐天官方海外转运服务：Rakuten Global Express
2018/11/30 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店：Orby
2020/02/20 全球购物
android面试问题与答案
2016/12/27 面试题
装修五一活动策划案
2014/01/23 职场文书
大学军训感言200字
2014/02/26 职场文书
职业女性的职业规划
2014/03/04 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
演讲稿之开卷有益
2019/08/07 职场文书