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:#">first.last@example.com</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>
5847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
