new328.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style rel="stylesheet">
[class*="col-"]{
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
</div>
</body>
</html>new329.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style rel="stylesheet">
[class*="col-"]{
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-9">col-xs-9</div>
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-1 col-md-offset-11">col-md-1 col-md-offset-11</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-push-4">col-md-2 col-md-push-4</div>
<div class="col-md-2">col-md-2</div>
</div>
</div>
</body>
</html>new330.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style rel="stylesheet">
[class*="col-"]{
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>我是h1标题<small>小标题</small></h1>
<h2>我是h2标题<small>小标题</small></h2>
<h3>我是h3标题<small>小标题</small></h3>
<h4>我是h4标题<small>小标题</small></h4>
<h5>我是h5标题<small>小标题</small></h5>
<h6>我是h6标题<small>小标题</small></h6>
<p>请介绍一下自己</p>
<p class="lead">请介绍一下自己</p>
<p>请使用标记mark，着重<mark>标记一下</mark></p>
<p>请帮助我删除以下这个句子<del>被删除的</del></p>
<p>在语句中插入<ins>比如这个语句</ins></p>
<div style="width:50%;border: 1px red solid;">
<p class="text-left">文本向左</p>
<p class="text-right">文本向右</p>
<p class="text-center">文本居中</p>
<p class="text-justify">两边对齐............................................................................................................................................</p>
<p class="text-nowrap">文本不换行，内容需要长一些.............................................................................................................................</p>
</div>
<div style="width: 50%;border: 1px red solid;">
<p class="text-lowercase">大小写对中文无用</p>
<p class="text-uppercase">大小写对中文无用</p>
<p class="text-capitalize">大小写对中文无用</p>
<p class="text-lowercase">I LOVE CHINA.</p>
<p class="text-uppercase">i love china.</p>
<p class="text-capitalize">i love CHINA</p>
</div>
<p>缩略语的使用<abbr title="这是我隐藏的话">鼠标放在上面</abbr></p>
<p><abbr title="超文本标记语言" class="initialism">HTML</abbr> is a code.</p>
<div style="width: 50%;border: 1px red solid;">
<address>
北京市东城区芝麻胡同999号<br>
<abbr title="联系电话">tel:</abbr> +86-12345678<br>
</address>
</div>
<blockquote>
<p>引用文本时，可以使用blockquote，前方会出现颜色的短线。</p>
</blockquote>
<blockquote class="blockquote-reverse">
<p>使用blockquote-reverse，可以出现右对齐的效果。</p>
</blockquote>
</div>
</body>
</html>
