bootstrap 基本页面元素，代码，列表

最新推荐文章于 2025-03-25 16:53:03 发布

weixin_34095889

最新推荐文章于 2025-03-25 16:53:03 发布

阅读量154

点赞数

文章标签： javascript ViewUI

本文详细介绍了Bootstrap中基本页面元素、代码表示及列表元素的使用方法，包括h1、small、p、lead等文本元素，以及ul、ol、dl等列表元素的应用，并展示了如何通过代码实现这些元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap 基本页面元素，代码，列表

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>
<body>
<p class="btn-primary">
    页面元素：h1, small, p, .lead, .text-right, .text-center, .text-justify,
    .text-uppercase, .text-right, abbr, address, blockquote
</p>
<h1>This is h1<small>This is small in h1, small font-size is 80%</small></h1>
<p class="lead">This is lead paragraph</p>
<p>This is normal paragraph 1</p>
<p>This is normal paragraph 2</p>
<p class="text-right">
<strong>This is Strong tag</strong>    
</p>
<p class="text-center">
<small>This is small tag</small>    
</p>
<p class="text-justify">
    <em>This is em tag</em>
</p>
<p class="text-uppercase">
    <cite>This is cite tag</cite>
</p>
<abbr title='this is abbr title'>this is abbr message</abbr>
<address class="text-right">
    <strong>This is strong</strong><br>
    <strong>This is strong2</strong>
</address>
<blockquote>
    <p>This is a P in Blockquote</p>
</blockquote>
<blockquote>
    <p>This is a P 2 in Blockquote</p>
    <small>This is a small in blockquote</small>
    <cite>This is a cite in blockquote</cite>
</blockquote>
<p class="btn-primary">
    列表元素：ul>li, ol>li, .list-unstyled, .list-inline, dl>dt+dd, .dl-horizontal
</p>
<ul class="list-unstyled">
    <li>this is first</li>
    <li>this is second</li>
    <li>this is third</li>
</ul>
<ol class="list-unstyled">
    <li>this is first</li>
    <li>this is second</li>
    <li>this is third</li>
</ol>
<ul class="list-inline">
    <li>this is first</li>
    <li>
        <ul class="list-unstyled">
            <li>this is a</li>
            <li>this is b</li>
            <li>this is c</li>
        </ul>
    </li>
</ul>
<dl>
    <dt>this is dl's dt</dt>
    <dd>this is dl's dd</dd>
    <dt>this is dl's dt</dt>
    <dd>this is dl's dd</dd>
</dl>
<dl class="dl-horizontal">
    <dt>this is dl's dt</dt>
    <dd>this is dl's dd</dd>
    <dt>this is dl's dt 's long long long long content</dt>
    <dd>this is dl's dd</dd>
</dl>
<p class="btn-primary">
代码表示：code, kbd, pre
</p>
<code>this is code</code>
<kbd>this is kbd</kbd>
<pre>this is pre.
and this is pre too</pre>
<pre class="pre-scrollable">
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
    this is pre scrollable.
</pre>

<script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body>
</html>