Skip to content

Instantly share code, notes, and snippets.

@arganzheng

arganzheng/index.html

Last active October 15, 2018 03:05
Show Gist options
  • Save arganzheng/6374874 to your computer and use it in GitHub Desktop.
Save arganzheng/6374874 to your computer and use it in GitHub Desktop.
Download ZIP
使用bootstrap进行复杂页面布局
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>Hello world!</h1>
<!-- navigation area -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large"></i>Projects<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Api</a></li>
<li><a href="#">Fuwu</a></li>
<li><a href="#">WKD</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- End navigation area -->
<!-- marking area-->
<div class="hero-unit">
<h1>Forrest Gump</h1>
<p>Life is like a box of chocolates, you never know what you're gonna get.</p>
<a href="mailto:[email protected]" class="btn btn-large btn-success">Contact Me</a>
</div><!-- End marking area-->
<!-- main area-->
<div class="row">
<!-- left sidebar ared-->
<div class="span3">
<ul class="nav nav-list">
<li class="nav-head">WHO I AM</li>
<li class="active"><a href="http://blog.arganzheng.me">My Blog</a></li>
<li><a href="http://weibo.com/argan1985">My Weibo</a></li>
<li><a href="mailto:[email protected]">My Email</a></li>
<li class="nav-head">PROGRAMMING WITH</li>
<li><a href="#">Java</a></li>
<li><a href="#">Scala</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Shell</a></li>
</ul>
</div><!-- End left sidebar ared-->
<!-- right content ared-->
<div class="span9">
<h3>Who I am?</h3>
<p>My Name is Forrst, Forrest Gump!</p>
<h3>My favorite programming languages?</h3>
<p>Java, Scala, Ruby, Python and Shell is my favorite and skill programming languages!</p>
</div><!-- End right content ared-->
</div><!-- End main area-->
<!-- footer area-->
<hr>
<div class="row">
<div class="span4">
<h4 class="muted text-center">My Working Experience</h4>
<ul>
<li><a href="#">Erison:2008<a></li>
<li><a href="#">Alibaba 2009-2012<a></li>
<li><a href="#">Tencent:2012-Now<a></li>
</ul>
<a href="#" class="btn"><i class="icon-user"></i>See My Resume</a>
</div>
<div class="span4">
<h4 class="muted text-center">My Motto</h4>
<p>Put the pass behind you before you can move on!Put the pass behind you before you can move on!</p>
<a href="#" class="btn btn-success"><i class="icon-star icon-white"></i>Move On</a>
</div>
<div class="span4">
<h4 class="muted text-center">My Hobby</h4>
<p>In my spare time, I like reading. And In weekend, I whould like to go for a ride, or climb, or play basketball. Also, music and movie are my favorite.</p>
<a href="#" class="btn btn-info">Join Me</a>
</div>
</div><!-- End footer area-->
<!-- copyright area -->
<hr>
<div class="footer">
<p>&copy; 2013 by [email protected]</p>
</div>
</div>
<!-- Load JS -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
Raw
index_openapi_doc_fluid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="arganzheng">
<title>My Blog</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!-- navigation area -->
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">腾讯电商开放平台</a>
<form method="get" action="http://www.google.com/search" class="navbar-search pull-right">
<input type="text" name="q" class="span4 search-query" placeholder="请输入你想要搜索的内容" maxlength="255" value="">
</form>
<ul class="nav">
<li><a href="#" class="active">文档</a></li>
<li><a href="#">API</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large"></i>SDK下载<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- End navigation area -->
<div class="container-fluid">
<!-- main area-->
<div class="row-fluid">
<!-- left sidebar ared-->
<div class="span3" >
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="tree">
<a href="#" class="tree-toggler"><span>▸</span>平台介绍</a>
<ul class="nav nav-list">
<li><a href="#">平台简介</a></li>
<li><a href="#">开放业务</a></li>
<li><a href="#">盈利模式</a></li>
</ul>
</li>
<li class="tree">
<a href="#" class="tree-toggler"><span>▸</span>开发文档</a>
<ul class="nav nav-list">
<li class="tree"><a href="#" class="tree-toggler"><span>▸</span>开发核心技术</a>
<ul class="nav nav-list">
<li><a href="#">应用环境介绍</a></li>
<li><a href="#">用户授权介绍</a></li>
<li><a href="#">API调用方式介绍</a></li>
<li><a href="#">SDK相应说明文档</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- End left sidebar ared-->
<!-- right content ared-->
<div class="span9">
<h1>
<a href="/posts/run-shell-on-remote-server.html">如何在远程Linux机器上执行Shell命令</a>
</h1>
<div class="authoring">
January 24, 2013
</div>
<p>通常我们需要写个shell脚本然后放上服务器上执行。一般的步骤是先登陆上服务器，然后将shell脚本上传到服务器的某个目录下，最后是执行这个脚本。然而shell本身是支持远程执行的。</p>
<p>可以使用如下命令：</p>
<pre><code>ssh user@server bash &lt; /path/to/local/script.sh
</code></pre>
<p>在远程机器上运行一段脚本。这条命令最大的好处就是不用把脚本拷到远程机器上。</p>
<p>如果你只是想执行on line command，那么可以使用管道：</p>
<pre><code>echo "date" | ssh user@server bash
</code></pre>
<p>当然，远程执行的前提其实是要先ssh到服务器的，需要身份验证。可以使用<code>except</code>或者<code>ssh public key</code>来实现免密码登陆。这样就更完美了。具体可以参见笔者的另一篇文章：<a href="http://blog.arganzheng.me/posts/ssh-login-without-password.html">shell如何实现ssh免密码登陆</a></p>
<p>这篇文章 <a href="http://blog.csdn.net/gjyalpha/article/details/7264107">在多台Linux机器上执行命令</a> 使用了<code>socat</code>来实现这个功能。其实不用，不过socat还是挺强大的。</p>
<p>如果服务器有python运行环境，那么可以使用python的<code>paramkio</code>库，这样可以直接享受python带来的好处。</p>
<p>例如：下面的代码在远程服务器上执行<code>ifconfig</code>命令：</p>
<blockquote><p>Example 5-9. Connecting to an SSH server and remotely executing a command</p>
<pre><code>#!/usr/bin/env python
import paramiko
hostname = '192.168.1.15'
port = 22
username = 'jmjones'
password = 'xxxYYYxxx'
if __name__ == "__main__":
paramiko.util.log_to_file('paramiko.log')
s = paramiko.SSHClient()
s.load_system_host_keys()
s.connect(hostname, port, username, password)
stdin, stdout, stderr = s.exec_command('ifconfig')
print stdout.read()
s.close()
</code></pre></blockquote>
<h3>常见应用场景</h3>
<ol>
<li>启动服务</li>
<li>查看所有log文件</li>
<li>上传下载文件</li>
</ol>
</div><!-- End right content ared-->
</div><!-- End main area-->
<!-- copyright area -->
<hr>
<div class="footer">
<p>&copy; 2013 by [email protected]</p>
</div>
</div>
<!-- Load JS -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a.tree-toggler').click(function () {
$(this).parent().children("ul").toggle(300);
});
});
</script>
</body>
</html>
Raw
index_openapi_doc_v1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="arganzheng">
<title>My Blog</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!-- navigation area -->
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">腾讯电商开放平台</a>
<form method="get" action="http://www.google.com/search" class="navbar-search pull-left">
<input type="text" name="q" class="span4 search-query" placeholder="请输入你想要搜索的内容" maxlength="255" value="">
</form>
<ul class="nav pull-right">
<li><a href="#">文档</a></li>
<li><a href="#">API</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large"></i>SDK下载<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- End navigation area -->
<div class="container">
<!-- main area-->
<div class="row">
<!-- left sidebar ared-->
<div class="span3" >
<ul class="nav nav-list">
<li class="tree">
<a href="#" class="tree-toggler"><span>▸</span>平台介绍</a>
<ul class="nav nav-list">
<li><a href="#">平台简介</a></li>
<li><a href="#">开放业务</a></li>
<li><a href="#">盈利模式</a></li>
</ul>
</li>
<li class="tree">
<a href="#" class="tree-toggler"><span>▸</span>开发文档</a>
<ul class="nav nav-list">
<li class="tree"><a href="#" class="tree-toggler"><span>▸</span>开发核心技术</a>
<ul class="nav nav-list">
<li><a href="#">应用环境介绍</a></li>
<li><a href="#">用户授权介绍</a></li>
<li><a href="#">API调用方式介绍</a></li>
<li><a href="#">SDK相应说明文档</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- End left sidebar ared-->
<!-- right content ared-->
<div class="span9">
<h1>
<a href="/posts/run-shell-on-remote-server.html">如何在远程Linux机器上执行Shell命令</a>
</h1>
<div class="authoring">
January 24, 2013
</div>
<p>通常我们需要写个shell脚本然后放上服务器上执行。一般的步骤是先登陆上服务器，然后将shell脚本上传到服务器的某个目录下，最后是执行这个脚本。然而shell本身是支持远程执行的。</p>
<p>可以使用如下命令：</p>
<pre><code>ssh user@server bash &lt; /path/to/local/script.sh
</code></pre>
<p>在远程机器上运行一段脚本。这条命令最大的好处就是不用把脚本拷到远程机器上。</p>
<p>如果你只是想执行on line command，那么可以使用管道：</p>
<pre><code>echo "date" | ssh user@server bash
</code></pre>
<p>当然，远程执行的前提其实是要先ssh到服务器的，需要身份验证。可以使用<code>except</code>或者<code>ssh public key</code>来实现免密码登陆。这样就更完美了。具体可以参见笔者的另一篇文章：<a href="http://blog.arganzheng.me/posts/ssh-login-without-password.html">shell如何实现ssh免密码登陆</a></p>
<p>这篇文章 <a href="http://blog.csdn.net/gjyalpha/article/details/7264107">在多台Linux机器上执行命令</a> 使用了<code>socat</code>来实现这个功能。其实不用，不过socat还是挺强大的。</p>
<p>如果服务器有python运行环境，那么可以使用python的<code>paramkio</code>库，这样可以直接享受python带来的好处。</p>
<p>例如：下面的代码在远程服务器上执行<code>ifconfig</code>命令：</p>
<blockquote><p>Example 5-9. Connecting to an SSH server and remotely executing a command</p>
<pre><code>#!/usr/bin/env python
import paramiko
hostname = '192.168.1.15'
port = 22
username = 'jmjones'
password = 'xxxYYYxxx'
if __name__ == "__main__":
paramiko.util.log_to_file('paramiko.log')
s = paramiko.SSHClient()
s.load_system_host_keys()
s.connect(hostname, port, username, password)
stdin, stdout, stderr = s.exec_command('ifconfig')
print stdout.read()
s.close()
</code></pre></blockquote>
<h3>常见应用场景</h3>
<ol>
<li>启动服务</li>
<li>查看所有log文件</li>
<li>上传下载文件</li>
</ol>
</div><!-- End right content ared-->
</div><!-- End main area-->
<!-- copyright area -->
<hr>
<div class="footer">
<p>&copy; 2013 by [email protected]</p>
</div>
</div>
<!-- Load JS -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a.tree-toggler').click(function () {
$(this).parent().children("ul").toggle(300);
});
});
</script>
</body>
</html>
@arganzheng
Copy link
Author

参考这篇精彩的文章 Twitter Bootstrap Tutorial – Handling Complex Designs

@arganzheng
Copy link
Author

最后一个fluid是参考这个：http://getbootstrap.com/2.3.2/examples/fluid.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment