Bootstrap 和PHP做简单页面的例子
博客首页 » Bootstrap 和PHP做简单页面的例子
发布于 22 Jun 2014 15:38
标签 blog
Bootstrap为不善于做Design的开发者带来了福音。有了这个基础,很容易快速地开发出来看着顺眼的网页。
Bootstrap为开发者带来这些主要特性:
- 基础的css reset
- 跨browser支持,
- 简单易用的基本style,
- jQuery集成
- 对于移动设备的兼容以及自适应
除此之外,这些一直维护着的css和js已经被CDN收录,可以直接链接使用。这使得我们开发只由一个网页构成的简洁应用成为可能。
下面是一个读取任务列表并且排版显示的简单页面。
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做简单页面的例子
这篇文章对你有帮助吗,投个票吧?
page revision: 0, last edited: 22 Jun 2014 15:38
留下你的评论