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 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vue模块移动组件的实现示例
May 20 Javascript
JavaScript实现下拉列表
Jan 20 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与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
JQuery小知识
2010/10/15 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jquery使用经验小结
2015/05/20 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python中map()与zip()操作方法
2016/02/27 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python九九乘法表的实例
2017/09/26 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python 如何对文件目录操作
2020/07/10 Python
animation和transition的区别
2020/10/12 HTML / CSS
英语专业毕业生自荐信
2013/10/28 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
党员批评与自我批评
2014/10/15 职场文书
铁路安全反思材料
2014/12/24 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
2015年国庆节寄语
2015/08/17 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle