Bootstrap-全局css-排版

Love The Way You Lie 2021-12-23 00:05 370阅读 0赞

## 一、标题 ##

`<h1>` 到 `<h6>` 均可使用。还提供了 `.h1` 到 `.h6` 类。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
    <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
    <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
    <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
    <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
    <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

## 二、页面主体 ##

Bootstrap 将全局 `font-size` 设置为 **14px**，`line-height` 设置为 **1.428**。这些属性直接赋予 `<body>` 元素和所有段落元素。另外，`<p>` （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

### 三、中心内容 ###

通过添加 `.lead` 类可以让段落突出显示。

<p class="lead">...</p>

## 四、内联文本元素 ##

## 1.Marked text-高亮-<mark> ##

## 2.被删除的文本-<del> ##

## 3.带下划线的文本-<u> ##

## 4.小号文本-<small> ##

## 5.着重-<strong> ##

## 6.对齐 ##

<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>

## 五、列表 ##

无序列表
    
    <ul>
      <li>...</li>
    </ul>
    
    有序列表
    
    <ol>
      <li>...</li>
    </ol>
    
    无样式列表
    
    <ul class="list-unstyled">
      <li>...</li>
    </ul>
    
    内联列表-所有元素放置于同一行
    
    <ul class="list-inline">
      <li>...</li>
    </ul>
    
    描述
    
    <dl>
      <dt>...</dt>
      <dd>...</dd>
    </dl>

发表评论取消回复

表情：

评论列表（有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap 排版

Bootstrap 排版实例 <!DOCTYPE html> <html lang="en"> <head> <meta ch

太过爱你忘了你带给我的痛/ 2022年08月23日 14:00/ 0 赞/ 200 阅读

相关 Bootstrap--排版

1.标题 Bootstrap中定义了所有的标题 2.内联子标题如果需要添加内联子标题，只需要简单的在元素两旁添加 <h1>我是标题1 h1. <smal

朴灿烈づ我的快乐病毒、/ 2022年08月22日 15:27/ 0 赞/ 225 阅读

相关 BootStrap_02 排版

全局样式 Bootstrap中的排版-标题标题（h1-h6 / .h1-.h6）副标题（small） <!DOCTYPE html> <html

布满荆棘的人生/ 2022年04月04日 07:41/ 0 赞/ 286 阅读

相关 Bootstrap系列---排版

Bootstrap 排版注：本系列转载于菜鸟教程，仅用以自己学习总结和使用，只会显示自己学习使用的内容，详细内容可以查看菜鸟教程网址：[https://www.ru

淡淡的烟草味﹌/ 2022年01月26日 14:27/ 0 赞/ 359 阅读

相关 Bootstrap-全局css-表格

表格 1.基本实例为任意 `<table>` 标签添加 `.table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 <

亦凉/ 2021年12月23日 01:19/ 0 赞/ 388 阅读

相关 Bootstrap-全局css-排版

一、标题 `<h1>` 到 `<h6>` 均可使用。还提供了 `.h1` 到 `.h6` 类。 <h1>h1. Bootstrap heading <small

Love The Way You Lie/ 2021年12月23日 00:05/ 0 赞/ 371 阅读

相关 Bootstrap文字排版

bootstrap中的文字排版就像word的标题一标题二。。。一样，这样可以拿来区分很多字节，简要的代码如下（注意bootstrap页面中每个都会引入这是基础样式！！

痛定思痛。/ 2021年12月21日 11:07/ 0 赞/ 375 阅读

相关 BootStrap3--全局CSS之表格

表格基本实例为任意 `<table>` 标签添加 `.table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。 <tabl

曾经终败给现在/ 2021年08月14日 02:19/ 0 赞/ 386 阅读

相关 Bootstrap3--全局CSS之按钮

按钮为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 <a class=

我就是我/ 2021年08月13日 19:09/ 0 赞/ 378 阅读

相关前端Bootstrap——全局CSS样式-排版

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2021年07月25日 11:16/ 0 赞/ 522 阅读