样式排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">
</head>
<body style="margin:80px;">
<!-- 标题样式 -->
<!-- <h1>hello <small>world</small></h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5> -->
<!-- 标记 -->
<!-- <p class="h1">nihao</p>
<p><del>ni</del> <mark>hao</mark> </p> -->
<!-- 对齐 -->
<!-- <p class="text-left">hello world</p>
<p class="text-right">hello world</p>
<p class="text-center">hello world</p>
<p class="text-nowrap" style="width: 30px;border: 1px solid red;">hello world</p>
<p>hello world</p> -->
<!-- 引用文本 -->
<!-- <blockquote>
引用文本
</blockquote>
<blockquote class="pull-right">引用文本</blockquote> -->
<!-- 列表 -->
<!-- <ul class="list-unstyled list-inline" style="margin: 50px;">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul> -->
<!-- 水平 -->
<!-- <dl class="dl-horizontal">
<dt>介绍</dt>
<dd>fhwohefoanfonawoefnonsaohfaho</dd>
</dl> -->
<!-- 代码 -->
<!-- <code>echo "hellw world"</code>
press <kbd>ctrl+,</kbd>
<pre>
< ?php
echo 'helle world';
?>
</pre> -->
</body>
</html>
表格与按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格与按钮</title>
<link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">
</head>
<body style="margin:80px;">
<!-- <table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>小明</td>
<td>男</td>
<td>15</td>
</tr>
<tr class="warning">
<td>2</td>
<td>小花</td>
<td>女</td>
<td>32</td>
</tr>
<tr class="danger">
<td>3</td>
<td>小李</td>
<td>男</td>
<td>24</td>
</tr>
</tbody>
</table>
-->
<!-- 按钮 -->
<!-- <a href="http://www.baidu.com" class="btn btn-default " >a</a>
<input type="submit" class="btn btn-default disabled" value="input">
<button class="btn btn-default btn-block">button</button> -->
<script src="http://localhost/Public/Js/jquery.js"></script>
<script src="http://localhost/Public/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
表单与图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单与图片</title>
<link rel="stylesheet" href="http://localhost/Public/bootstrap/dist/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin:80px;">
<form action="#" >
<div class="form-group has-success has-feedback" >
<label for="usernmae " class="control-label">用户名:</label>
<input type="text" id="usernmae" name="usernmae" placeholder='请输入您的用户名' class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group ">
<label for="password">密 码:</label>
<input type="password" id="password" name="password" placeholder='请输入您的密码' class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="money">
<div class="input-group-addon">.00</div>
</div>
</form>
<!-- 标签与输入框通行 -->
<!-- <form action="#" class="form-horizontal" >
<div class="form-group">
<label for="usernmae" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-10">
<input type="text" id="usernmae" name="usernmae" placeholder='请输入您的用户名' class="form-control">
</div>
</div>
<div class="form-group ">
<label for="password" class="col-sm-2 control-label">密 码:</label>
<div class="col-sm-10">
<input type="password" id="password" name="password" placeholder='请输入您的密码' class="form-control">
</div>
</div>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="money">
<div class="input-group-addon">.00</div>
</div>
</form> -->
<!-- 复选框 -->
<!-- <form action="">
<div class="checkbox">
<label for="ty">
<input type="checkbox" name="hby" id="ty">体育
</label>
</div>
<div class="checkbox disabled">
<label class="disabled">
<input type="checkbox" name="hby" id="ls" class="disabled">历史
</label>
</div>
<label for="ty" class="checkbox-inline">
<input type="checkbox" name="hby" id="ty">体育
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" name="hby" id="ls" class="disabled">历史
</label>
</form> -->
<!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-thumbnail"> -->
<!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-circle"> -->
<!-- <img src="http://localhost/Public/Image/biaozhi.jpg" alt="图片" class="img-rounded"> -->
<script src="http://localhost/Public/Js/jquery.js"></script>
<script src="http://localhost/Public/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-985.html
