学习bootStrap02

消白

于 2022-04-19 18:25:53 发布

阅读量197

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_58635769/article/details/124280124

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

效果图如下：

消白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习bootStrap02

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.相关解释：tex
复制链接

扫一扫