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 相关文章推荐
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
详解vue-router基本使用
Apr 18 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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
文章推荐系统(三)
2006/10/09 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
php实现每日签到功能
2018/11/29 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python 实现多维数组转向量
2019/11/30 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
初中生学习生活的自我评价
2013/11/20 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
医院义诊活动总结
2014/07/04 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015年药店工作总结
2015/04/20 职场文书
小学体育教学随笔
2015/08/14 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Python中requests做接口测试的方法
2021/05/30 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
零基础学java之循环语句的使用
2022/04/10 Java/Android