Bootstrap3 CSS
index.html
<!DOCTYPE html>
<html>
<head>
<!--确保移动端适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta标签-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
<!--在移动设备浏览器上，通过viewport meta标签添加maximum-scale=1.0 user-scalable=no可以禁用缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css"/>
<h1>Hello World!</h1>
<!--引入Bootstarp的Javascript插件,需要引入jQuery-->
<script src="./jquery-3.3.1.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
.img-style img {
max-height: 420px;
max-width: 22%;
}
</style>
</head>
<body>
<!--Bootstrap CSS button
.btn-lg 比较大
.btn-sm 比较小
.btn-xs 特别小
.btn-block 块级按钮
disabled 禁用按钮
-->
<button>开始</button>
<button class="btn btn-default">默认</button>
<button class="btn btn-primary">原始</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-link">链接</button>
<br/>
<button class="btn-lg">开始</button>
<button class="btn btn-default btn-lg">默认</button>
<button class="btn btn-primary btn-lg">原始</button>
<button class="btn btn-success btn-lg">成功</button>
<button class="btn btn-info btn-lg">信息</button>
<button class="btn btn-warning btn-lg">警告</button>
<button class="btn btn-danger btn-lg">危险</button>
<button class="btn btn-link btn-lg">链接</button>
<br/>
<button class="btn-sm">开始</button>
<button class="btn btn-default btn-sm">默认</button>
<button class="btn btn-primary btn-sm">原始</button>
<button class="btn btn-success btn-sm">成功</button>
<button class="btn btn-info btn-sm">信息</button>
<button class="btn btn-warning btn-sm">警告</button>
<button class="btn btn-danger btn-sm">危险</button>
<button class="btn btn-link btn-sm">链接</button>
<br/>
<button class="btn-xs" disabled>开始</button>
<button class="btn btn-default btn-xs">默认</button>
<button class="btn btn-primary btn-xs">原始</button>
<button class="btn btn-success btn-xs">成功</button>
<button class="btn btn-info btn-xs">信息</button>
<button class="btn btn-warning btn-xs">警告</button>
<button class="btn btn-danger btn-xs">危险</button>
<button class="btn btn-link btn-xs">链接</button>
<!--Bootstrap CSS form
.form-horizontal 水平表单
.form-group
.control-label 标签
.form-control
-->
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">网站</label>
<div class="col-sm-11">
<p class="form-control-static">www.superstr.work</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">账号</label>
<div class="col-sm-11">
<input type="text" placeholder="请输入账号" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1">密码</label>
<div class="col-sm-11">
<input type="text" placeholder="请输入密码" class="form-control"/>
</div>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox"/>选项1
</label>
<label class="checkbox-inline">
<input type="checkbox"/>选项2
</label>
<label class="radio-inline">
<input type="radio" name="sex"/>选项1
</label>
<label class="radio-inline">
<input type="radio" name="sex"/>选项2
</label>
</div>
<div>
<label>单选列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label>多选列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label class="control-label col-sm-1">说明</label>
<div class="col-sm-11">
<textarea class="form-control"></textarea>
</div>
</div>
</form>
<!--Bootstrap CSS table table-responsive响应式表格-->
<div class="table-responsive">
<table class="table">
<caption>表格</caption>
<tr><th>username</th><th>password</th></tr>
<tr><td>1</td><td>1</td></tr>
<tr class="active"><td>2</td><td>2</td></tr>
<tr class="success"><td>3</td><td>3</td></tr>
<tr class="warning"><td>4</td><td>4</td></tr>
<tr class="danger"><td>4</td><td>4</td></tr>
</table>
</div>
<!--Bootstrap CSS text
.text-left
.text-center
.text-right
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
-->
<p class="text-center text-primary">primary</p>
<p class="text-center text-success">success</p>
<p class="text-center text-info">info</p>
<p class="text-center text-warning">warning</p>
<p class="text-center text-danger">danger</p>
<!--Bootstrap CSS img
.img-rounded 圆角
.img-circle 圆型
.img-thumbnail 添加一点内边距和灰色的边框
.img-responsive 响应式
-->
<div class="img-style">
<img src="./jogging.jpg"/>
<img src="./jogging.jpg" class="img-rounded"/>
<img src="./jogging.jpg" class="img-circle"/>
<img src="./jogging.jpg" class="img-thumbnail"/>
</div>
<!--Bootstrap CSS visible hidden
可见
.visible-xs-* 超小屏幕可见(变体 visible-xs-block、visible-xs-inline、visible-xs-block)
.visible-sm-* 小屏幕可见
.visible-md-* 中等屏幕可见
.visible-lg-* 大屏幕可见
隐藏
.hidden-xs 超小屏幕隐藏
.hidden-sm 小屏幕隐藏
.hidden-md 中等屏幕隐藏
.hidden-lg 大屏幕隐藏
-->
<div class="visible-on">
<div class="img-style hidden-sm hidden-xs">
<img src="./jogging.jpg"/>
<img src="./jogging.jpg" class="img-rounded"/>
<img src="./jogging.jpg" class="img-circle"/>
<img src="./jogging.jpg" class="img-thumbnail"/>
</div>
</div>
</body>
</html>