欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>&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>

 

效果图:
Bootstrap 第2章 排版样式
 

 

 

相关标签: Bootstrap