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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
laypage.js分页插件使用方法详解
Jul 27 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JavaScript类的写法
2016/09/17 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
施工资料员的岗位职责
2013/12/22 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
情况说明书格式范文
2014/05/06 职场文书
煤矿安全协议书
2014/08/20 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers