Bootstrap主要功能

Bootsrap学习笔记之二

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<title>Bootstrap例子</title>
  	<meta name="viewport" content="width=device-width,initial-scale=1">
  	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  	<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
  	<script src="js/jquery-1.7.2.min.js"></script>
  	<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<h1 class="text-center"><em>Hello World!</em></h1>
	<p class="lead text-center text-primary">测试段落<strong>this is test</strong> 完毕.</p>
	<div class="row">
		<div class="col-md-4">占位4列</div>
		<div class="col-md-4">占位4列</div>
		<div class="col-md-4">占位4列</div>
	</div>
	<p class="text-center text-danger">测试段落<strong>this is test</strong> 完毕.</p>
	<p class="text-center"><small>测试段落</small><strong>this is test</strong> 完毕.</p>
	<<!--省略-->
	<abbr title="你好提高课堂够了够了如果了两个">attr</abbr>
	<!--地址写法-->
	<address class="text-center">
		<strong>Twitter,Inc.</strong><br>
		795 Folsom Ave,Suite 600<br>
		<abbr title="Phone">P:</abbr>(123) 456-7890
	</address>
	<address class="text-center">
		<strong>Full Name</strong><br>
		<a href="mailto:#">[email protected]</a>
	</address>
	<!--引用 -->
	<blockquote>
		<p>Please don't worry.This is test!</p>
		<small>Someone famouse in<cite title="Source Title">Source Title</cite></small>
	</blockquote>
	<blockquote class="pull-right">
		<p>Please don't worry.This is test!</p>
		<small>Someone famouse in<cite title="Source Title">Source Title</cite></small>
	</blockquote>
	<!--内联列表-->
    <ul class="list-inline">
    	<li>test1</li>
    	<li>test2</li>
    	<li>test3</li>
    </ul>
    <dl>
    	<dt>hello gay</dt>
    	<dd>hello boy</dd>
    </dl>
    <dl class="dl-horizontal">
    	<dt>hello gay</dt>
    	<dd>hello boy</dd>
    </dl>
    <!--表格-->
    <div>
    	<table class="table table-hover">
    		<thead>
    			<tr class="active">
    				<th>#</th>
    				<th>FirstName</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr class="danger">
    				<td>1</td>
    				<td>Jay</td>
    			</tr>
    			<tr class="success">
    				<td>2</td>
    				<td>Tom</td>
    			</tr>
    		</tbody>
    	</table>
    </div>
    <!--表单 -->
    <form class="form-horizontal" role="from">
    	<div class="form-group">
    		<label for="inputEmail" class="col-sm-2 control-label">Email</label>
    		<div class="col-sm-6">
    			<input type="email" class="form-control" id="inputEmail" placeholder="Email">
    		</div>
    	</div>
    	<div class="form-group">
    		<label for="inputPassword" class="col-sm-2 control-label">Password</label>
    		<div class="col-sm-6">
    			<input type="password" class="form-control" id="inputPassword" placeholder="Password">
    		</div>
    	</div>
    	<div class="form-group">
    		<label class="col-sm-2 control-label">你是好人吗?</label>
    		<div class="col-sm-offset-2 radio">
    			<label>
    				<input type="radio" name="people" id="optionRadios1" value="option1" checked="checked">
    				是的,我是好人。
    			</label>
    			<label>
    				<input type="radio" name="people" id="optionRadios2" value="option2">
    				不是,我是坏人。
    			</label>
    		</div>
    	</div>
    	<div class="form-group">
    		<label class="col-sm-2 control-label">入学年份?</label>
    		<div class="col-sm-6">
    			<select  class="form-control">
    				<option>2014</option>
    				<option>2013</option>
    				<option>2012</option>
    			</select>
    		</div>
    	</div>
    	<div class="form-group">
    		<div class="col-sm-offset-2 col-sm-6">
    			<div class="checkbox">
    				<label>
    					<input type="checkbox"> Remember me
    				</label>
    			</div>
    		</div>
    	</div>
    	<div class="form-group">
    		<div class="col-sm-offset-2 col-sm-10">
    			<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span>Sign in</button>
    		</div>
    	</div>
    </form>
</body>
</html>


你可能感兴趣的:(bootstrap)