Bootstrap 第2章 排版样式

<!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>&lt;section&gt;</code>
<p></p>

<pre class="prettyprint linenums">&lt;ul class=&quot;list-unstyled list-inline&quot;&gt;<br>	&lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>    &lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>    &lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>&lt;/ul&gt;</pre>




<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="prettify/prettify.js"></script>
</body>
</html>

效果图:

 

猜你喜欢

转载自onestopweb.iteye.com/blog/2266378