JavaScript
搜索
分类

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

作者：yongh701 时间：2024-05-02 17:32:01　

上一次写的《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个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

标签：Bootstrap,门户式,风格,页面
0
投稿

猜你喜欢

  • python回溯法实现数组全排列输出实例分析

    2023-06-18 20:42:27

  • SQL Server 2008登录错误:无法连接到(local)解决方法

    2024-01-21 00:39:06

  • Golang实现文件夹的创建与删除的方法详解

    2024-02-02 13:57:02

  • 如何利用python实现Simhash算法

    2021-06-13 20:12:49

  • 解析：Perl下应当如何连接Access数据库

    2008-11-28 16:40:00

  • 按钮表状态还是表动作？

    2009-03-23 18:21:00

  • python读取目录下所有的jpg文件,并显示第一张图片的示例

    2023-06-21 16:31:58

  • Python实现统计图像连通域的示例详解

    2022-12-05 09:13:05

  • ASP使用组件在线发E-mail的2个函数

    2008-06-12 07:13:00

  • 详解Mybatis逆向工程中使用Mysql8.0版本驱动遇到的问题

    2024-01-16 16:48:19

  • 正则表达式简介

    2007-08-12 18:01:00

  • 使用MySql和php出现中文乱码的解决方法

    2009-01-14 12:02:00

  • Python面向对象编程之继承与多态详解

    2022-01-24 17:22:01

  • PyCharm使用Docker镜像搭建Python开发环境

    2021-09-24 21:41:16

  • 栅格:灵活应变

    2008-07-22 12:22:00

  • Python装饰器与线程结合提高接口访问效率方法

    2021-07-16 11:28:32

  • python实现的正则表达式功能入门教程【经典】

    2023-11-30 05:38:04

  • python单元测试unittest实例详解

    2023-10-16 08:26:49

  • python接口,继承,重载运算符详解

    2023-03-08 05:51:38

  • SQL Server序列SEQUENCE用法介绍

    2024-01-21 02:43:21
    • asp之家 网络编程 m.aspxhome.com