bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略语等用法)

下面是对于“bootstrap3.0教程之排版详细使用教程”的完整攻略：

Bootstrap3.0教程之排版详细使用教程

标题

在 Bootstrap 中，可以通过 HTML 的 heading 标签来控制标题的大小，分别是 h1 到 h6 标签。但是在使用 Bootstrap 中，可以更方便地通过四个类来控制标题的大小，分别是 .h1 、.h2 、.h3 、.h4 。下面是一个示例：

<h1>这是一个 h1 标题</h1>

<p class="h1">这是一个使用 h1 类的大标题</p>

<p class="h2">这是一个使用 h2 类的标题</p>

<p class="h3">这是一个使用 h3 类的标题</p>

<p class="h4">这是一个使用 h4 类的标题</p>

页面主体

在 Bootstrap 中，可以使用一系列类来控制页面主体的排版，包括一些常用的元素，如段落、表格、列表等。下面是一些常用的类的示例：

段落

<p>普通的段落文字</p>

<p class="lead">这是一个使用 lead 类的段落文字</p>

<p><small>这是一个使用 small 标签包裹的小字段落</small></p>

表格

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>用户名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>zhangsan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>lisi</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>wangwu</td>
        </tr>
    </tbody>
</table>

列表

<ul class="list-unstyled">
    <li>这是一个无序列表项</li>
    <li>这是另一个无序列表项</li>
</ul>

<ol class="list-unstyled">
    <li>这是一个有序列表项</li>
    <li>这是另一个有序列表项</li>
</ol>

<ul class="list-inline">
    <li>这是一个内联无序列表项</li>
    <li>这是另一个内联无序列表项</li>
</ul>

<ol class="list-inline">
    <li>这是一个内联有序列表项</li>
    <li>这是另一个内联有序列表项</li>
</ol>

强调

在 Bootstrap 中，可以使用一系列类来对文字进行一些强调效果的控制，包括下划线、删除线、加粗、斜体等。下面是一些常用的类的示例：

<p class="text-underline">这是一段使用 text-underline 类的下划线文字</p>

<p class="text-through">这是一段使用 text-through 类的删除线文字</p>

<p class="text-bold">这是一段使用 text-bold 类的加粗文字</p>

<p class="text-italic">这是一段使用 text-italic 类的斜体文字</p>

缩略语

在 Bootstrap 中，可以使用 <abbr> 标签来表示缩略语，并且可以通过 .initialism 类来增加缩略语的样式。下面是一个示例：

<p><abbr title="HyperText Markup Language">HTML</abbr> 是一种用于创建网页的标准语言。</p>

<p><abbr class="initialism" title="Cascading Style Sheets">CSS</abbr> 是用于装饰网页的样式表语言。</p>

以上就是本文对于“bootstrap3.0教程之排版详细使用教程”的完整攻略，希望对您有所帮助。