脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap门户式风格页面

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

 更新时间：2016年07月01日 10:26:38   作者：yongh701  
这篇文章主要介绍了Bootstrap编写一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面，感兴趣的小伙伴们可以参考一下

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


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

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


这是我们需要准备的唯一一个图像，可以把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个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现导航栏中英文切换效果

    js实现导航栏中英文切换效果

    本篇文章主要分享了javascript实现导航栏中英文切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • ES6入门教程之Iterator与for...of循环详解

    ES6入门教程之Iterator与for...of循环详解

    最近在学习ES6，刚刚看到Iterator和for...of循环这一章，所以想要跟大家略微分享一下，下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料，不足之处还望大家多多指正，需要的朋友们可以参考学习。
    2017-05-05
  • IE浏览器中图片onload事件无效的解决方法

    IE浏览器中图片onload事件无效的解决方法

    在做一个项目的时候才发现的这个bug，其实这是一个很常见的问题，只是之前对图片的处理太少，没有碰到过。
    2014-04-04
  • Javascript事件热键兼容ie|firefox

    Javascript事件热键兼容ie|firefox

    Javascript热键兼容ie，firefox，需要的朋友可以参考下。
    2010-12-12
  • 微信小程序使用onreachBottom实现页面触底加载及分页效果

    微信小程序使用onreachBottom实现页面触底加载及分页效果

    小程序还没有使用pc端的那种分页格式,下面这篇文章主要给大家介绍了关于微信小程序使用onreachBottom实现页面触底加载及分页效果的相关资料,需要的朋友可以参考下
    2022-10-10
  • 利用JavaScript实现栈的数据结构示例代码

    利用JavaScript实现栈的数据结构示例代码

    栈（stack）又名堆栈，它是一种运算受限的线性表，下面这篇文章主要给大家介绍了关于利用JavaScript实现栈的数据结构的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • JS中的二叉树遍历详解

    JS中的二叉树遍历详解

    这篇文章主要为大家详细介绍了JS中的二叉树遍历，何为二叉树，什么是二叉树的遍历，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript删除有序数组中的重复项

    JavaScript删除有序数组中的重复项

    这篇文章主要介绍了JavaScript删除有序数组中的重复项，主要解决有序数组 nums ，要求原地删除重复出现的元素，使每个元素只出现一次，返回删除后数组的新长的问题，下面实现操作，需要的小伙伴可以参考一下
    2022-03-03
  • Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    avalon是一个简单易用迷你的MVVM框架。通过本文给大家介绍Avalon中文长字符截取、关键字符隐藏、自定义过滤器的相关资料，需要的朋友一起学习吧
    2016-05-05
  • JavaScript实现无限轮播效果

    JavaScript实现无限轮播效果

    这篇文章主要介为大家详细绍了JavaScript实现无限轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论