常用标签
1.文字
- p标签(段落)
- small标签(让文字呈现灰色)
- em标签(文字斜体)
- blokcquote标签(文字内容为引用时用该标签)
- class=”pull-right"右浮动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">CSS<small>常用的CSS</small></h1>
<p>From fairest creatures we desire increase,<strong>重要文字</strong>That thereby beauty's rose might never die,<em>斜体文字</em>
But as the riper should by time decease, His tender heir might bear his memory:But thou contracted to thine own bright eyes,
Within thine own bud buriest thy content,And tender churl mak'st waste in niggarding:Pity the world, or else this glutton be,
To eat the world's due, by the grave and thee</p>
<blockquote><p>Within thine own bud buriest thy content,And tender churl mak'st waste in niggarding:Pity the world, or else this glutton be</p>
<small class="pull-right"><cite>莎士比亚</cite></small></blockquote>
</body>
</html>
显示效果：
2.列表
- ul 无序列表
- ol 有序列表
- dl 自定义列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
dl dd{text-indent:2%;}
</style>
</head>
<body>
<h1 class="page-header">列表<small>无序列表，有序列表，描述列表</small></h1>
<h2>无序列表</h2>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
<li>fifth</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
<li>fifth</li>
</ol>
<h2>描述列表</h2>
<dl class="dl-horizontal">
<dt>first</dt>
<dd>1</dd>
<dt>second</dt>
<dd>2</dd>
<dt>third</dt>
<dd>3</dd>
<dt>forth</dt>
<dd>4</dd>
<dt>fifth</dt>
<dd>5</dd>
</dl>
</body>
</html>
显示效果:
3.表格标签
- 普通表格
- 条纹表格
- 带边框表格
- 压缩式表格
这几种表格是可以叠加在一起的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
dl dd {
text-indent: 2%;
}
</style>
</head>
<body>
<h1 class="page-header">表格<small><table></small></h1> <div class="container">
<h2>普通表格</h2>
<table class="table table-hover">
<thead >
<th>星期一 </th>
<th>星期二 </th>
<th>星期三 </th>
<th>星期四 </th>
<th>星期五 </th>
<th>星期六 </th>
</thead>
<tr >
<td>y</td>
<td>s</td>
<td>y</td>
<td>y</td>
<td>w</td>
<td>j</td>
</tr>
<tr >
<td>s</td>
<td>s</td>
<td>d</td>
<td>l</td>
<td>h</td>
<td>j</td>
</tr>
<tr >
<td>h</td>
<td>y</td>
<td>t</td>
<td>j</td>
<td>y</td>
<td>j</td>
</tr>
<tr >
<td>z</td>
<td>y</td>
<td>t</td>
<td>l</td>
<td>d</td>
<td>j</td>
</tr>
</table>
<h2>条纹表格</h2>
<table class="table table-hover">
<thead >
<th>星期一 </th>
<th>星期二 </th>
<th>星期三 </th>
<th>星期四 </th>
<th>星期五 </th>
<th>星期六 </th>
</thead>
<tr >
<td>y</td>
<td>s</td>
<td>y</td>
<td>y</td>
<td>w</td>
<td>j</td>
</tr>
<tr >
<td>s</td>
<td>s</td>
<td>d</td>
<td>l</td>
<td>h</td>
<td>j</td>
</tr>
<tr >
<td>h</td>
<td>y</td>
<td>t</td>
<td>j</td>
<td>y</td>
<td>j</td>
</tr>
<tr >
<td>z</td>
<td>y</td>
<td>t</td>
<td>l</td>
<td>d</td>
<td>j</td>
</tr>
</table>
<h2>带边框表格</h2>
<table class="table table-bordered">
<thead >
<th>星期一 </th>
<th>星期二 </th>
<th>星期三 </th>
<th>星期四 </th>
<th>星期五 </th>
<th>星期六 </th>
</thead>
<tr >
<td>y</td>
<td>s</td>
<td>y</td>
<td>y</td>
<td>w</td>
<td>j</td>
</tr>
<tr >
<td>s</td>
<td>s</td>
<td>d</td>
<td>l</td>
<td>h</td>
<td>j</td>
</tr>
<tr >
<td>h</td>
<td>y</td>
<td>t</td>
<td>j</td>
<td>y</td>
<td>j</td>
</tr>
</table>
<h2>压缩式表格</h2>
<table class="table table-bordered table-condensed">
<thead >
<th>星期一 </th>
<th>星期二 </th>
<th>星期三 </th>
<th>星期四 </th>
<th>星期五 </th>
<th>星期六 </th>
</thead>
<tr >
<td>y</td>
<td>s</td>
<td>y</td>
<td>y</td>
<td>w</td>
<td>j</td>
</tr>
<tr >
<td>s</td>
<td>s</td>
<td>d</td>
<td>l</td>
<td>h</td>
<td>j</td>
</tr>
<tr >
<td>h</td>
<td>y</td>
<td>t</td>
<td>j</td>
<td>y</td>
<td>j</td>
</tr>
</table>
</div>
</body>
</html>
4.表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">表单<small><form></small></h1> <div class="container">
<form action="#" method="post">
<label for="username">用户名</label>
<input id="username" type="text" placeholder="输入用户名" />
<span class="help-block">登陆时请输入用户名</span>
</form>
</div>
</body>
</html>
显示效果：
5.文本框前缀与后缀
5.1 前缀
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">文本框前缀和后缀<small><form></small></h1>
<div class="container">
<form action="#" method="post" class="form-inline">
<div class="form-group">
<label class="sr-only" for="username">用户名</label>
<div class="input-group">
<div class="input-group-addon">用户名</i></div>
<input type="text" class="form-control" id="username" placeholder="请输入用户名" >
</div>
</div>
<button type="submit" class="btn btn-primary" >提交</button>
</form>
</div>
</body>
</html>
5.2 后缀
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">文本框前缀和后缀<small><form></small></h1>
<div class="container">
<form action="#" method="post" class="form-inline">
<div class="form-group">
<label class="sr-only" for="username">用户名</label>
<div class="input-group">
<input type="text" class="form-control" id="username" placeholder="请输入用户名" >
<div class="input-group-addon">搜索</div>
</div>
</div>
</form>
</div>
</body>
</html>
效果：
6.单选框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">单选框<small><form></small></h1> <form action="#" method="post" class="form-inline">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="sex" value="male" >男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="female">女
</label>
</div>
</form> </body>
</html>
效果：
7.复选框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">复选框<small><form></small></h1> <form action="#" method="post" class="form-inline">
<div class="form-group">
<label>活动内容</label>
<label class="checkbox-inline">
<input type="checkbox" name="program" value="music" >音乐
</label>
<label class="checkbox-inline">
<input type="checkbox" name="program" value="dance">舞蹈
</label>
<label class="checkbox-inline">
<input type="checkbox" name="program" value="swimming">游泳
</label>
</div>
</form> </body>
</html>
效果:
8、表单排版
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">表单<small><form></small></h1>
<div class="container">
<form action="#" method="post" class="form-horizontal">
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-md-3">
<input type="text" id="username" class="form-control" placeholder="请输入用户名">
<p class="help-block">请输入用户名</p>
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">密码</label>
<div class="col-md-3">
<input type="password" id="password" class="form-control" >
<p class="help-block">请输入密码</p>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
效果:
