版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/phone13144830339/article/details/89032881
<!DOCTYPE html>
<html>
<head>
<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"/>
<script src="./jquery-3.3.1.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>www.superstr.work</h1>
<button class="btn btn-primary btn-lg">superstr2019-2021</button>
<button class="btn btn-primary btn-lg">jogging2021-2025</button>
</div>
<div class="well">well</div>
<div class="well well-lg">well lg</div>
<div class="well well-sm">well sm</div>
<!--按钮组-->
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
默认<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
原始<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<div class="btn-group">
<button class="btn btn-primary">1</button>
<button class="btn btn-primary">2</button>
<button class="btn btn-primary">3</button>
</div>
<!--标签-->
<div>
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
</div>
<!--导航栏
.nav-stacked 垂直
.nav-justified 水平
.nav-tabs 选项卡
-->
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="divider"></li>
<li><a href="#">Java</a></li>
<li class="divider"></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>
<!--分页-->
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<!--徽章-->
<div>
<span class="badge">222</span>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页 <span class="badge pull-right">42</span></a></li>
<li><a href="#">简介<span class="badge pull-right">3</span></a></li>
<li class="active"><a href="#">消息 <span class="badge pull-left">3</span></a></li>
</ul>
</div>
<!--提示
-->
<div class="alert alert-success">
<button class="close" data-dismiss="alert" aria-hidden="true">×</button>
<a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>
<div class="alert alert-info"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>信息！请注意这个信息。</div>
<div class="alert alert-warning"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>警告！请不要提交。</div>
<div class="alert alert-danger"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>错误！请进行一些更改。</div>
<ul class="list-group">
<li class="list-group-item active">列表</li>
<li class="list-group-item">
<div class="list-group-item-heading">
项1
</div>
<div class="list-group-item-text">
描述1
</div>
</li>
<li class="list-group-item">
<div class="list-group-item-heading">
项2
</div>
<div class="list-group-item-text">
描述2
</div>
</li>
<li class="list-group-item">
<div class="list-group-item-heading">
项3
</div>
<div class="list-group-item-text">
描述3
</div>
</li>
</ul>
<!--输入框组-->
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
<span class="input-group-addon">.com</span>
</div>
<!--特殊符号 图标-->
<div>
<i class="glyphicon glyphicon-cloud" style="color:red;font-size:20px;"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-glass"></i>
<i class="glyphicon glyphicon-music"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-off"></i>
<i class="glyphicon glyphicon-cloud-upload"></i>
<i class="glyphicon glyphicon-tree-deciduous"></i>
<i class="glyphicon glyphicon-send"></i>
<i class="glyphicon glyphicon-import" style="color:red;font-size:30px;"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-save"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-open"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-record"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-header"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-hd-video"></i>
<i class="glyphicon glyphicon-sound-stereo"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-time"></i>
<i class="glyphicon glyphicon-time"></i>
</div>
</body>
</html>