Bootstrap 排版样式

flowser

墨衍会员 · AI 创作全网分发码龄11年

关注

原创最新推荐文章于 2026-06-14 10:19:07 发布 4.7k 阅读 AI 写同款· GEO 优化 ›

超漂亮的bootstrap网站首页模板一款非常好看的基于bootstrap的首页模板立即下载

页面排版

1.页面主体

Bootstrap将全局：

font-size 设置为14px;
line-height 设置为1.428（20px）;
p标签设置为1/2行高（10px）;

创建包含段落突出的文本：
添加 class=”lead”，得到更大更粗、行高更高的文本。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body>
        <p>Bootstrap</p>
        <!--添加class = "lead"-->
        <p class="lead">Bootstrap</p>
        <p>Bootstrap</p>
        <p>Bootstrap</p>
    </body>
</html>

运行结果：
这里写图片描述

2.标题

Bootstrap 定义了所有的 HTML 标题（h1 到 h6）的样式,i可以嵌入一个small元素作为副标题。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
        <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
        <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
        <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
        <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
        <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
    </body>
</html>

运行结果：
这里写图片描述

3.内联文本元素

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--添加标记-->
        <p><mark>标记1</mark></p>
        <p class="mark">标记2</p>
        <!--加线条的文本-->
        <del> Boostrap del; </del>
        <s> Bootstrap s; </s>
        <ins> Bootstrap ins; </ins>
        <!--强调-->
        <br />
        <small>small 标准字号的85%; </small>
        <strong> 加粗 700; </strong>
        <em> em 设置为斜体 ;</em>
    </body>
</html>

运行结果：
这里写图片描述

4.对齐

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>
    </body>
</html>

运行结果：
这里写图片描述

5.大小写及缩写

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--设置英文大小写-->
        <p class="text-lowercase">Bootstrap 小写;</p>
        <p class="text-uppercase">Bootstrap 大写;</p>
        <!--设置单词首字母大写-->
        <p class="text-capitalize">bootstrap 大写;</p>
        <!--设置缩写-->
        <abbr title="World Wide Web">WWW</abbr><br>
        <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
    </body>
</html>

运行结果：

这里写图片描述

6.地址address

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--去掉了倾斜，设置了行高，底部20px-->
        <address>
            <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br>
            <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>
    </body>
</html>

运行结果：
这里写图片描述

7.引用文本

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--默认：增加了边线，设定了字体大小和内外边距-->
        <blockquote>默认Bootstrap 引用</blockquote>
        <!--反向引用-->
        <blockquote class="blockquote-reverse">反向引用</blockquote>
    </body>
</html>

运行结果：
这里写图片描述

8.列表排版

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 列表</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
        <!--有序列表和无序列表-->
        <ol>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ol>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <!--移出默认样式-->
        <ul class="list-unstyled">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <!--设置成内联-->
        <ul class="list-inline">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
        <!--定义列表-->
        <dl>
            <dt>描述1</dt>
            <dd>列表1</dd>
            <dt>描述2</dt>
            <dd>列表2</dd>
        </dl>
        <!--水平排列定义列表-->
        <dl class="dl-horizontal">
            <dt>Description 1</dt>
            <dd>Item 1</dd>
            <dt>Description 2</dt>
            <dd>Item 2</dd>
        </dl>
    </body>
</html>

运行结果：
这里写图片描述

9.代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Bootstrap 排版</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <!--内联代码--> 
        <code>&lt;section&gt;</code>
        <!--用户输入-->
        press <kbd>ctrl +</kbd>
        <!--代码块-->
        <pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>
    </body>
</html>