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


Posted in Javascript onJuly 01, 2016

上一次写的《Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面》(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没关系,我们完全可以改变布局拉成门户式的风格,他们马上就接受了: 

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

首先,门户式的布局的大概你要清楚,这一才利于我们快速布局开头是一个较小的巨幕,后是一个导航栏,这里还是用到了按钮组接着是各个专栏,这里是关于bootstrap栅格系统与面板的运用,最后是版权信息,这里还是一个面板。
反正个人觉得这种门户式的布局风格烂大街,但不知道为何似乎很受众的样子。

我们需要准备东西同样只是photoshop里面的一幅高度为1的渐变条, 首先打开photoshop,新建一个1024x1的图像,宽度随意,尽量宽就可以了,图像是1就可以了,前景色为深绿色R:0 G:140 B:0,背景色为浅绿色R:100 G:200 B:100,用渐变工具拉出如下的图像,怎么拉都可以向左往右拉可以,向中间往两边也可以,看个人喜好: 

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

这是我们需要准备的唯一一个图像,可以把photoshop关闭,抛在一边,把这个图像保存在网站工程文件夹,这个图像才6k左右,根本不影响加载。
之后,具体的网页代码如下,原理与《Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面》(点击打开链接)中的各个部分完全一模一样,只是代码的位置不同而已,这里就不再叙述。

<!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>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>
 </head>
 <body>
  <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>
      <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>
 </body>
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
layui的select联动实现代码
Sep 28 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 #Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 #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
You might like
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python中partial()基础用法说明
2018/12/30 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
岗位廉洁从政承诺书
2014/03/27 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
应用心理学专业求职信
2014/08/04 职场文书
小学班级特色活动方案
2014/08/31 职场文书
升学宴演讲稿
2014/09/01 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
浅谈Java父子类加载顺序
2021/08/04 Java/Android