Bootstrap 第2章 排版样式
程序员文章站
2022-04-29 22:39:45
...
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>排版样式</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="prettify/prettify.css">
</head>
<body style="margin:50px;" onload="prettyPrint()">
<!--
<p>阅谁问君诵，水落清香浮</p>
<p class="lead">阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<h1>阅谁问君诵<small>水落清香浮</small></h1>
<h2>阅谁问君诵<small>水落清香浮</small></h2>
<h3>阅谁问君诵<small>水落清香浮</small></h3>
<h4>阅谁问君诵<small>水落清香浮</small></h4>
<h5>阅谁问君诵<small>水落清香浮</small></h5>
<h6>阅谁问君诵<small>水落清香浮</small></h6>
<h1 class="h3">阅谁问君诵<small>水落清香浮</small></h1>
<span class="h3">阅谁问君诵<small>水落清香浮</small></span>
<p>阅谁问君诵<mark>水落清香浮</mark></p>
<del>阅谁问君诵，水落清香浮</del>
-->
<p class="text-left">onestopweb 一站式网络</p>
<p class="text-center">onestopweb 一站式网络</p>
<p class="text-right">onestopweb 一站式网络</p>
<p class="text-nowrap" style="border:1px solid red; width:50px;">onestopweb 一站式网络</p>
<address>地址</address>
<blockquote>引用文本</blockquote>
<blockquote class="blockquote-reverse">引用文本</blockquote>
<ul class="list-unstyled list-inline">
<li>onestopweb 一站式网络</li>
<li>onestopweb 一站式网络</li>
<li>onestopweb 一站式网络</li>
</ul>
<dl class="dl-horizontal">
<dt>一站式网络</dt>
<dd>一个分享网站，一个分享网站，一个分享网站，一个分享网站，一个分享网站，一个分享网站</dd>
</dl>
<code><section></code>
<p></p>
<pre class="prettyprint linenums"><ul class="list-unstyled list-inline"><br> <li>onestopweb 一站式网络</li><br> <li>onestopweb 一站式网络</li><br> <li>onestopweb 一站式网络</li><br></ul></pre>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="prettify/prettify.js"></script>
</body>
</html>
效果图：