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英文日期(有时间)选择器
May 02 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jquery实现submit提交表单
Feb 03 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
Jqprint实现页面打印
Jan 06 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
JS 基本概念详细介绍
Oct 16 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
基于pear auth实现登录验证
2010/02/26 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php取出数组单个值的方法
2018/03/12 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
浅析JS运动
2015/12/28 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
关于Python的一些学习总结
2018/05/25 Python
Django视图扩展类知识点详解
2019/10/25 Python
python自动化发送邮件实例讲解
2021/01/04 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
一些.net面试题
2014/10/06 面试题
求职信的最佳写作思路
2014/02/01 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
中学教师师德承诺书
2014/05/23 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
教师党员自我评价2015
2015/03/04 职场文书
三八节祝酒词
2015/08/11 职场文书
员工安全责任协议书
2016/03/22 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
MySQL笔记 —SQL运算符
2022/01/18 MySQL