Bootstrap 排版样式

来源：互联网发布：dd linux sync 编辑：程序博客网时间：2024/05/22 05:21

页面排版

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>

运行结果：

这里写图片描述

0 0