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

2024-12-05 11:31:14

上一次写的《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插件使用教程

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

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

虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了,但是WIN7自带的浏览器IE8还是需要支持的. 本文这个方法主要的优点,个人觉得就是准备少,不需要上网寻找大量的图片做素材,你只要准备好一个bootstrap.jquery与photoshop就可以了,bootstrap与jquery怎么配置,可以参考<Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗>(点击打开链接) 被要求编写一个网站,常常会被如何布局困扰,其实也不难,如果能够熟练使用Bootstrap,并且有一套特定
BootStrap下拉框在firefox浏览器界面不友好的解决方案

http://output.jsbin.com/titaki 以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式很不友好上谷歌查了一下 1.小容器可以利用select:padding:0 2.下拉图标可以利用background-image:-moz-appearance:none把下拉框的样式去掉,然后 @-moz-document url-prefix() { select.form-control { -moz-appearance: none; appear
bootstrap IE8 兼容性处理

bootstrap IE8 兼容性处理 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&q
Bootstrap 3浏览器兼容性问题及解决方案

Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript的,它简洁灵活.开发过程中,我们只需通过给DOM元素添加相应的class即可调用,使得 Web 开发更加快捷. 接下来进入主题,谈谈 Bootstrap 3 浏览器兼容性问题及其对应的解决方案: 1.移动设备支持情况
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面

上一次写的<Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面>(点击打开链接)部分老一辈的需求可能对这种后现代的风格并不满意,没关系,我们完全可以改变布局拉成门户式的风格,他们马上就接受了: 首先,门户式的布局的大概你要清楚,这一才利于我们快速布局开头是一个较小的巨幕,后是一个导航栏,这里还是用到了按钮组接着是各个专栏,这里是关于bootstrap栅格系统与面板的运用,最后是版权信息,这里还是一个面板. 反正个人觉得这种门户式的布局风格烂大街,但不知道为何似乎很受众的样子. 我们需
兼容主流浏览器的iframe自适应高度js脚本

兼容主流浏览器的 Iframe 自适应高度,js脚本如下: 复制代码代码如下: //iframe 高度自适应 function iframeAutoFit(iframeObj) { setTimeout(function () { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.bod
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

Bootstrap如同前台框架,它已经布置好不少的CSS,前端开发的使用需要则直接调用即可.其网站的网址就是http://www.bootcss.com.使用Bootstrap能减少前端开发时候在CSS样子的布置时间需要使用Bootstrap先在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3. 将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点
Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗

使用弹窗在网页中显示短信息还行,虽然不那么地友好.然而,弹窗对于如同网站服务条款的长信息就无能为力的了.这是需要使用一个叫模态框modal的东西,并且在模态框里面嵌入一个多行文本框textarea. 这个东西,如果要手工写JavaScript代码就太难做了,但是使用Bootstrap来编写就简单起来. 一.基本目标有一个网页,网页上面有一个超级链接,一个按钮: 点击他们都会打开一个如下所示的模态框,这个模态框,点击右上角的X按钮与下方的确定都会关闭. 二.制作过程 1.因为需要使用Boot
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

今天要给星烛网上的一个Flash加一个超链接,原想直接在object外直接套一个超链接即可,试了之后却发现不是这么回事,求助百度,问题解决,记录如下: 原因:Flash默认是最高层.所以,我经常会遇见Flash把下拉菜单挡住的情况,及其它原素覆盖掉. 解决方案: 第一种:步骤如下 1. 把Flash文件放到一个层中,设为最底层,FLASH设为透明. 复制代码代码如下: <div class="ad_top" style="text-align:center;"
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox.webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持.有了这2个方法和属性基本上可以满足大多数要求了. 复制代码代码如下: var getStyle = function( elem, type ){ return 'getComputed
兼容主流浏览器的JS复制内容到剪贴板

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",
javascript中兼容主流浏览器的动态生成iframe方法

以下代码在IE8下运行通过,在IE9中出错: 复制代码代码如下: document.createElement('<iframe id="yige-org-iframe" src="yige.org.logo.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>'); 错误提示:excep
js模拟点击以提交表单为例兼容主流浏览器

在实际的应用开发中,我们会常常用到JS的模事件,但有时会遇到一些问题,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单.上代码吧. Html: 复制代码代码如下: <h3>请单击"提交",测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#" method="ge

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

相关推荐

随机推荐