fmpq.com
源代码：
点击运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>bootstrap排版实例</title> <meta name="description" content="Creating a Liquid Layout, Typography with Bootstrap"> <link href="/jscss/bootstrap/v3/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <h1>这是标题 1 / H1</h1> <h2>这是标题 2 / H2</h2> <h3>这是标题 3 / H3</h3> <h4>这是标题 4 / H4</h4> <h5>这是标题 5 / H6</h5> <h6>这是标题 6 / H6</h6> <p>这是一个被段落包裹的文本。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>这是一个实例使用 <strong>Storng</strong>的文本。</p> <p>这是一个实例使用<em>emphasis</em>的文本。</p> <p>Headquarters of the <abbr title="United Nations">UN</abbr> is in NewYork City, USA.</p> <!-- address是怎么使用的 --> <address> <strong>Paoo</strong><br> 21 Ramkrishna Road<br> Burdwan, WB 713101<br> </address> <!-- blockquote是怎么使用的 --> <blockquote> <p>You can't say A is made of B or vice versa. All mass is interaction.</p> <small>Statement titled "Principles" (c. 1950), quoted in Genius : The Life and Science of Richard Feynman (1992) by James Gleick</small> </blockquote> <h3>这是一个无序列</h3> <ul> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>PHP</li> <li>DataBases <ul> <li>MySQL</li> <li>POstgreSQL</li> <li>MS SQL Server</li> </ul> </li> <li>Tools and APIs</li> <li>JOSN</li> <li>C Language</li> </ul> <h3>这是一个样式被移除后的无序列</h3> <ul class="unstyled"> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>PHP</li> <li>DataBases <ul class="unstyled"> <li>MySQL</li> <li>POstgreSQL</li> <li>MS SQL Server</li> </ul> </li> <li>Tools and APIs</li> <li>JOSN</li> <li>C Language</li> </ul> <h3>这是一个有序列</h3> <ol> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>PHP</li> <li>DataBases <ul class="unstyled"> <li>MySQL</li> <li>POstgreSQL</li> <li>MS SQL Server</li> </ul> </li> <li>Tools and APIs</li> <li>JOSN</li> <li>C Language</li> </ol> <h3>描述列</h3> <dl> <dt>Ten years ago</dt> <dd>a crack commando unit was sent to prison</dd> <dt>by a military court </dt> <dd>for a crime they didn't commit.</dd> <dd>These men promptly escaped from.</dd> <dt>a maximum security stockade to the Los Angeles underground.</dt> <dd>Today, still wanted by the government, they survive as soldiers of fortune.</dd> </dl> <h3>水平描述列</h3> <dl class="dl-horizontal"> <dt>Ten years ago</dt> <dd>a crack commando unit was sent to prison</dd> <dt>by a military court </dt> <dd>for a crime they didn't commit.</dd> <dd>These men promptly escaped from.</dd> <dt>a maximum security stockade to the Los Angeles underground.</dt> <dd>Today, still wanted by the government, they survive as soldiers of fortune.</dd> </dl> </div> </body> </html>
运行结果