1.第一步引入文件
<script src="../lib/jquery-3.2.1.js"></script>
<link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
2.相关解释:
text-center:文本居中
lead:强调作用
text-info:提示风格
small:副标题
text-muted:减弱的
text-warning:带有警告的
abbr是省略,需要配合title属性来使用
initialism:更小号的缩略。
text-primary:强调风格
blockquote:引用
pull-right:右对齐
<body>
<h1 class="text-center">Spring家族--->
<small>springMvc...</small>
</h1>
<p class="lead text-center text-info">
spring 是一个优秀的框架,他包含springBoot,springMvc...
</p>
<p class="lead text-center text-warning">
建议不要一开始就学习框架技术,你需要从基础的serlvet和jsp学起...
</p>
<p class="text-center text-muted text-info">
System.out.println("hello world");
</p>
<p class="text-center text-info lead">
<abbr title="Spring SpringMvc MyBatis">SSM</abbr>
</p>
<p class="text-center text-info lead">
<abbr title="Spring SpringMvc MyBatis" class="initialism">SSM</abbr>
</p>
<address class="text-center lead text-primary">
地址:<strong>天美工作室</strong><br>
邮箱:<strong>tianmei@123.com</strong>
</address>
<blockquote class="pull-right text-info">
小唐颖
<small class="text-primary">来自于《宠你一世繁华》</small>
</blockquote>
</body>
效果图如下: