社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
 前面的话
标题
段落
内联文本
对齐
大小写
缩略语
地址
引用
列表
代码
首页 web前端 html教程 使用Bootstrap排版

使用Bootstrap排版

PHP中文网
PHP中文网
Jun 22, 2017 am 11:12 AM
bootstrap 排版

 前面的话

<p>　　本文将详细介绍Bootstrap中排版相关的内容

<p> 

标题

<p>【h】

<p>　　HTML 中的所有标题标签，<h1> 到 <h6> 均可使用

<p>　　默认情况下，从h1到h6的font-size如下所示

2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
登录后复制
<p>　　初始情况，1em = 16px，则换算如下 

32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
登录后复制
<p>　　Boostrap将h1-h6的字体大小font-size重新进行了设置，如下所示

36px -> 30px -> 24px -> 18px -> 14px -> 12px;
登录后复制
<p>　　另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式，除了display属性不同外，其他属性与<h1> 到 <h6>样式相同

h1,.h1{
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
登录后复制
<p> 【small】

<p>　　在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。<small>标签和.small类的元素的样式相同

h1 small,.h1 small, h1 .small, .h1 .small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
}
登录后复制
<h1>标题一 <small>副标题一</small></h1><h2>标题二 <small>副标题二</small></h2><h3>标题三 <small>副标题三</small></h3><h4>标题四 <small>副标题四</small></h4><h5>标题五 <small>副标题五</small></h5><h6>标题六 <small>副标题六</small></h6>
登录后复制
<p><br>

<p> 

段落

<p>【body】

<p>　　默认情况下，页面font-size为16px，行高line-height(chrome下)为1.334

<p>　　Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 20px。这些属性直接赋予 <body> 元素和所有段落元素

<span style="color: #000000;">body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;<br>　　 margin:0;
}</span>
登录后复制
<p>【p】

<p>　　另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）

p{
    margin: 0 0 10px;
}
登录后复制
<p>【.lead】

<p>　　通过添加 .lead 类可以让段落突出显示

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}
登录后复制
<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>
登录后复制
<p><br>

<p> 

内联文本

<p>【标记文本】

<p>　　文本需要标记，使用标签

mark, .mark {
    padding: .2em;
    background-color: #fcf8e3;
}
登录后复制
<p>【删除文本】

<p>　　对于被删除的文本使用标签

<p>【无用文本】

<p>　　对于没用的文本使用 标签

<p>【插入文本】

<p>　　额外插入的文本使用 标签

<p>【带下划线的文本】

<p>　　为文本添加下划线，使用 标签

<p>【小号文本】

<p>　　对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。

<p>　　还可以为行内元素赋予 .small 类以代替任何 <small> 元素

small, .small {
    font-size: 85%;
}
登录后复制
<p>【着重】

<p>　　通过增加 font-weight 值强调一段文本

<p>【斜体】

<p>　　用斜体强调一段文本

<p>　　[注意]在 HTML5 中可以放心使用 和 标签。 用于高亮单词或短语，不带有任何着重的意味；而 标签主要用于发言、技术词汇等

<div>You can use the mark tag to <mark>highlight</mark> text.</div><div><del>This line of text is meant to be treated as deleted text.</del></div><div><s>This line of text is meant to be treated as no longer accurate.</s></div><div><ins>This line of text is meant to be treated as an addition to the document.</ins></div><div><u>This line of text will render as underlined</u></div><div><small>This line of text is meant to be treated as fine print.</small></div><div><strong>rendered as bold text</strong></div><div><em>rendered as italicized text</em></div>
登录后复制
<p><br>

<p> 

对齐

<p>　　通过文本对齐类，可以简单方便的将文字重新对齐

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-nowrap {
    white-space: nowrap;
}
登录后复制
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
登录后复制
<p><br>

<p> 

大小写

<p>　　通过这几个类可以改变文本的大小写

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}
登录后复制
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
登录后复制
<p><br>

<p> 

缩略语

<p>　　当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性

<p>【基本缩略语】

abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}
登录后复制
<p>【首字母缩略语】

<p>　　为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些

.initialism {
    font-size: 90%;
    text-transform: uppercase;
}
登录后复制
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
登录后复制
<p><br>

<p> 

地址

<p>　　让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}
登录后复制
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
登录后复制
<p><br>

<p> 

引用

<p>【默认样式的引用】 

<p>　　将任何 HTML 元素包裹在
中即可表现为引用样式。对于直接引用，建议用 <p> 标签

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}
登录后复制
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
登录后复制
<p><br>

<p>【多种引用样式】

<p>　　对于标准样式的
，可以通过几个简单的变体就能改变风格和内容

<p>　　1、命名来源

<p>　　添加
用于标明引用来源。来源的名称可以包裹进 标签中

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
登录后复制
<p>　　2、另一种展示风格

<p>　　通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
登录后复制
.blockquote-reverse, blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    text-align: right;
    border-right: 5px solid #eee;
    border-left: 0;
}
登录后复制
<p><br>

<p> 

列表

<p>【无序列表】

<p>　　排列顺序无关紧要的一列元素 

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
登录后复制
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit<ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
登录后复制
<p><br>

<p>【有序列表】

<p>　　顺序至关重要的一组元素。 

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>
登录后复制
<p><br>

<p>【无样式列表】

<p>　　移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式 

.list-unstyled {
    padding-left: 0;
    list-style: none;
}
登录后复制
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit<ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
登录后复制
<p><br>

<p>【内联列表】

<p>　　通过设置 display: inline-block; 并添加少量的内边距（padding），将所有元素放置于同一行 

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}
登录后复制
<ul class="list-inline">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>
登录后复制
<p><br>

<p>【描述】 

<p>　　带有描述的短语列表。

dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt {
    font-weight: bold;
}
dt, dd {
    line-height: 1.42857143;
}
dd {
    margin-left: 0;
}
登录后复制
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
登录后复制
<p><br>

<p>【水平排列的描述】

<p>　　.dl-horizontal 可以让
内的短语及其描述排在一行。开始是像
的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行

.dl-horizontal dt {float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-horizontal dd {
    margin-left: 180px;
}
登录后复制
<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Felis euismod semper eget lacinia</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
登录后复制
<p><br>

<p> 

代码

<p>【内联代码】

<p> 　　通过 标签包裹内联样式的代码片段。

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}
登录后复制
<p>【用户输入】

<p>　　通过 标签标记用户通过键盘输入的内容。

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
登录后复制
<p>【代码块】

<p>　　多行代码可以使用 
 标签。为了正确的展示代码，注意将尖括号做转义处理。</p>
<div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}
登录后复制
<p>　　还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}
登录后复制
<p>【变量】

<p>　　通过 标签标记变量

<p>【程序输出】

<p>　　通过 标签来标记程序输出的内容

<div>For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<div>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</div>
<div>
    <pre class="brush:php;toolbar:false">&lt;p&gt;Sample text here...&lt;/p&gt;
    
&lt;p&gt;Sample text here...&lt;/p&gt;
    y = mx + b
    This text is meant to be treated as sample output from a computer program.
登录后复制
<p><br>

<p> 

以上是使用Bootstrap排版的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
节省R.E.P.O.解释（并保存文件）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7564
15
CakePHP 教程
1386
52
steam的账户名称是什么格式
87
11
win11激活密钥永久
61
19
NYT连接提示和答案
28
100
显示更多
Related knowledge
bootstrap搜索栏怎么获取 bootstrap搜索栏怎么获取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。

vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap垂直居中怎么弄 bootstrap垂直居中怎么弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

Bootstrap Table使用AJAX获取数据出现乱码怎么办 Bootstrap Table使用AJAX获取数据出现乱码怎么办 Apr 07, 2025 am 11:54 AM

使用AJAX从服务器获取数据时Bootstrap Table出现乱码的解决方法：1. 设置服务器端代码的正确字符编码（如UTF-8）。2. 在AJAX请求中设置请求头，指定接受的字符编码（Accept-Charset）。3. 使用Bootstrap Table的"unescape"转换器将已转义的HTML实体解码为原始字符。

See all articles