首页
所有分类
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 相关文章推荐
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
Javascript面试题(44) 自我鉴定(671) Delphi面试题(13) J2EE面试题(19) UNIX面试题(27) Ruby面试题(15) MySQL面试题(19) PYTHON面试题(27) SOA面试题(9) Servlet面试题(20)
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Bootstrap组件系列之福利篇几款好用的组件（推荐二）
2016/07/12 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
vue2.0实现的tab标签切换效果（内容可自定义）示例
2019/02/11 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python中input和raw_input的一点区别
2014/10/21 Python
python实现模拟按键，自动翻页看u17漫画
2015/03/17 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python web框架学习笔记
2016/05/03 Python
利用aardio给python编写图形界面
2017/08/21 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python中内建模块collections如何使用
2020/05/27 Python
Pycharm中如何关掉python console
2020/10/27 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
教师自我鉴定范文
2013/11/10 职场文书
保荐人的岗位职责
2013/11/19 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
跳槽求职信范文
2014/05/26 职场文书
安全环保标语
2014/06/09 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
迟到检讨书2000字（精选篇）
2014/10/07 职场文书