bootstrap样式代码案例
运行结果如下所示：
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.container{
border: 1px solid black;
}
.row{
border: 1px solid black;
}
.row div{
border:1px solid black;
}
#sjdis{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">
一等分
</div>
<div class="col-md-1">
一等分
</div>
<div class="col-md-1 col-md-offset-1">
一等分
</div>
<div class="col-md-4 col-md-offset-3">
一等分
</div>
</div>
<div class="row">
<div class="col-md-4">
四等分
</div>
<div class="col-md-8">
八等分
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
6等分
</div>
<div class="col-md-6">
6等分
</div>
<div class="col-md-2">
2等分
</div>
</div>
</div>
<div class="col-md-4">
四等分
</div>
<div class="col-md-4">
四等分
</div>
</div>
</div>
<span class="h1">我是h1</span>
<span class="h2">我是h2</span>
<span class="h3">我是h3</span>
<span class="h4">我是h4</span>
<span class="h5">我是h5</span>
<span class="h6">我是h6</span>
<span class="lead">测试文字</span><br />
<p class="text-left">左对齐</p>
<p class="text-right">右对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-justify">两端对齐</p>
<br />
列表
<ul class="list-inline">
<li>首页</li>
<li>岗位课</li>
<li>商城</li>
<li>关于我们</li>
</ul>
<br />
表单：
<form class="form-horizontal" action="" method="post">
<div class="form-group">
<span class="text-center col-sm-2">姓名：</span>
<div class="col-sm-10">
<input type="text" class="form-control input-lg" />
</div>
</div>
<div class="form-group">
邮箱：<input type="email" class="form-control input-sm" />
</div>
<input type="submit" class="form-control" value="提交"/>
</form>
<br />
按钮：
<input type="button" class="btn btn-default" value="灰色" />
<br />
<input type="button" class="btn btn-primary" value="深蓝色" />
<br />
<input type="button" class="btn btn-success" value="绿色" />
<div id="sjdis">
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</html>
