Bootstrap 和PHP做简单页面的例子

博客首页 » Bootstrap 和PHP做简单页面的例子

发布于 22 Jun 2014 15:38
标签 blog
Bootstrap为不善于做Design的开发者带来了福音。有了这个基础,很容易快速地开发出来看着顺眼的网页。

Bootstrap为开发者带来这些主要特性:

  • 基础的css reset
  • 跨browser支持,
  • 简单易用的基本style,
  • jQuery集成
  • 对于移动设备的兼容以及自适应

除此之外,这些一直维护着的css和js已经被CDN收录,可以直接链接使用。这使得我们开发只由一个网页构成的简洁应用成为可能。
下面是一个读取任务列表并且排版显示的简单页面。

<?php
function headers_cache($cache_length=0){
  $cache_expire_date = gmdate("D, d M Y H:i:s", time() + $cache_length);
  header("Expires: $cache_expire_date GMT");
  if ($cache_length > 0) {
    header("Pragma: cache");
    header("Cache-Control: max-age=$cache_length");
  } else {
    header("Pragma: no-cache");
    header("Cache-Control: no-cache, no-store, private, max-age=$cache_length");
  }
  //header("User-Cache-Control: max-age=$cache_length");
}
headers_cache(0);
function info($msg) {
  echo "<li>$msg</li>\n";
}
?>
<!DOCTYPE html>
<html>
<html lang="ja">
  <head>
    <meta charset="shift_jis">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta http-equiv="content-type"        content="text/html;charset=shift_jis"> -->
    <!-- Latest compiled and minified CSS -->
    <!-- link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" -->
    <link href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Optional theme -->
    <!-- link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" -->
    <link href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet">
  </head>
  <body style="background-color:#eee;">
<?
$content = file_get_contents("ss-dir-last.txt");
$lines = preg_split("/\r\n/", $content);
$lines_new = array();
$last_line = "";
for ($i = 0; $i < count($lines) - 4; $i++) {
  $line = $lines[$i];
  //info("last $last_line, line $line,"
  //  . " last found " . (preg_match('/^\\$/i', $last_line) ? "true" : "false")
  //  . ", line found" . (preg_match('/^\\$/i', $line) ? "true" : "false"));
  if ($i != 0 && preg_match('/^\\$/i', $last_line)
      && !preg_match('/^\\$/i', $line)) {
 
    $last_line .= preg_replace('/^\\$/i', "", $line);
  } else {
    if (preg_match('/^\\$\\/.*([0-9]+):$/i', $line)) {
      //info("found month tag " . $line);
      //$lines_new[] = preg_replace('/^\\$\\/.*\\//i', '', $last_line);
      //if ($i != 0) {
      //  $last_line = $line;
      //}
    } else {
      $lines_new[] = preg_replace('/^\\$/i', "", $last_line);
      if ($i != 0) {
        $last_line = $line;
      }
    }
  }
}
if (count($lines) - 4 > 0) {
  $lines_new[] = preg_replace('/^\\$/i', "", $last_line);
}
if (count($lines) - 4 >= 0) {
  $item_summary = $lines[count($lines) - 4];
  $date_time = $lines[count($lines) - 3];
  $date_time .= $lines[count($lines) - 2];
  // empty line
  //$lines_new[] = $lines[count($lines) - 1];
}
$lines = array_reverse($lines_new);
$content = join("\n", preg_grep("/^[^C]/i",$lines));
?>
    <header class="container" style="background-color:black;">
      <div class="row"><div class="col-sm-12" style="color:white; font-size:150%; text-align:center;">
        <h3>Task Information</h1>
      </div></div>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tasklist">Task List</a></li>
          <!--
          <li><a href="#detail">Detail</a></li>
          <li><a href="#summary">Summary</a></li>
          -->
          <li><a href="#about">About</a></li>
        </ul>
    </header>
    <section class="container" style="background-color:white; color:#333; padding:5pt; ">
      <div class="row">
        <div class="col-sm-9">
          <h3>Task List Detail</h3>
          <pre><?=$content?></pre>
        </div>
        <div class="col-sm-3">
          <a href="#summary"><h3>Operations</h3></a>
          <button id="reloadBtn" type="button" class="btn btn-primary" data-loading-text="Loading ...">Reload</button>
          <a href="#summary"><h3>Task List Summary</h3></a>
          <p class="bg-info" style="padding:5pt">
            <br/>
            <?=$item_summary?><br/>
            <?=$date_time?><br/>
            <br/>
          </p>
 
          <a href="#about"><h3>About</h3></a>
          <p class="bg-info" style="padding:5pt">
            <br/>
            Application: Task List Browser<br/>
            Copy Right 2014/04<br/>
            <br/>
          </p>
 
        </div>
      </div>
    </section>
    <footer class="container" style="background-color:black;">
      <div class="row"><div class="col-sm-12" style="color:white; font-size:120%; text-align:center;">All Rights Reserved.</div></div>
    </footer>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script -->
    <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
 
    <!-- Latest compiled and minified JavaScript -->
    <!-- script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script -->
    <script src="http://cdn.bootcss.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 
    <script>
    $(document).ready(function() {
      $("#reloadBtn").click(function() {
        $(this).button('loading');
        document.location.reload();
      });
    });
    </script>
  </body>
</html>

页面里还有一点问题,在手机上,会出现几个像素的横向滚动,应该是margin的问题。


本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Bootstrap 和PHP做简单页面的例子

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License