Skip to content

Instantly share code, notes, and snippets.

@akuma

akuma/editPage.html

Created March 21, 2012 13:13
Show Gist options
  • Save akuma/2146805 to your computer and use it in GitHub Desktop.
Save akuma/2146805 to your computer and use it in GitHub Desktop.
Download ZIP
demo-bootstrap
Raw
editPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap test</title>
<link type="text/css" href="../css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link type="text/css" href="../css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a 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>
</a> <a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<p class="navbar-text pull-right">
Logged in as <a href="#">username</a>
</p>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="span10">
<!--
<div class="page-header">
<h3>用户信息维护 -&gt; 添加用户信息</h3>
</div>
-->
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li><a href="#2" data-toggle="tab">Section 2</a></li>
</ul>
<!--
<div class="tab-content">
<div class="tab-pane active" id="1">
</div>
<div class="tab-pane" id="2">
</div>
</div>-->
</div>
<div class="row">
<div class="span3">
<div class="alert alert-error">
<a class="close" data-dismiss="alert">&times;</a> <strong>Oh snap!</strong> Change a few things up and try
submitting again. 出错啦~~~
</div>
</div>
</div>
<div class="row">
<div class="span4">
<div class="alert alert-warning">
<a class="close" data-dismiss="alert">&times;</a> <strong>Warning!</strong> You successfully read this
important alert message. 危险啦~~~
</div>
</div>
</div>
<div class="row">
<div class="span5">
<div class="alert alert-success">
<a class="close" data-dismiss="alert">&times;</a> <strong>Well done!</strong> You successfully read this
important alert message. 成功啦~~~
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div class="alert alert-info">
<a class="close" data-dismiss="alert">&times;</a> <strong>Heads up!</strong> This alert needs your
attention, but it's not super important. 注意啦~~~
</div>
</div>
</div>
<form class="form-horizontal">
<fieldset>
<legend>Form control states</legend>
<div class="control-group">
<label class="control-label" for="focusedInput">Focused input</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
</div>
</div>
<div class="control-group">
<label class="control-label">Uneditable input</label>
<div class="controls">
<span class="input-xlarge uneditable-input">Some value here</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…"
disabled>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
<div class="controls">
<label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
This is a disabled checkbox
</label>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning"> <span class="help-inline">Something may have gone
wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError"> <span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">Select with success</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> <span class="help-inline">Woohoo!</span>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment