Bootstrap（2）排版（简练版）

- 日理万妓 2022-09-26 03:58 269阅读 0赞

**（九）排版**

①原文链接：

[http://v2.bootcss.com/base-css.html][http_v2.bootcss.com_base-css.html]

个人感觉有些标签是html自带，只不过bootstrap给其加了一些样式。

另外，原教程的内容其实更全一些，这里是简单总结版本。

这篇是上周就写好的，但是一直没发，是因为觉得可以拓展的内容还是少了点。

以下只总结特殊的

#### ②文字对齐：（类名） ####

左对齐：text-left

居中：text-center

右对齐：text-right

#### ③强调（颜色）：（类名） ####

变淡：muted

黄色：text-warning

红色：text-error

蓝色：text-info

绿色：text-success

#### ④缩略语：（标签） ####

abbr

缩略内容放在title属性中

<**abbr** title="test">to test</**abbr**>

类名：.initialism 加到abbr标签，让title的字体更小一些

#### ⑤地址：（标签） ####

address

有一些基本的样式，但并没有什么特殊的。

#### ⑥引用：（标签） ####

默认引用：blockquote

命名来源：small

来源名称：cite

右对齐（类名）：pull-right

#### ⑦列表：（标签） ####

无序：ul

有序：ol

列表项：li

无样式列表（类名）：unstyled（只对直接子节点有效）

行内列表（类名）：inline（效果是让列表同行显示，并有间隔）；

#### ⑧描述：（标签） ####

父：dl

着重/标题：dt

普通：dd

水平描述（类名，加到父）：dl-horizontal（效果是着重右对齐，普通左对齐，着重和描述对应的开始行在同一行）

#### ⑨代码（标签）： ####

行内代码：code（类似<>尖括号需要用转义字符，左是&lt，右是&gt）；

基本代码块：pre（同样转义）；

把该区域设置成最大高度为350px并带有一个Y轴滚动条（类名）：pre-scrollable

#### ⑩表格（类名） ####

横线分割行：.table

以上基础上，下同：（加在table标签）

【1】标题加黑：thead，然后是tr，具体每一格用th（而不是td）

<table class="table">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>wang</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>total</td>
            <td>names</td>
        </tr>
        </tfoot>
    </table>

【2】tbody内部，斑马样式，奇数行加重颜色：table-striped

【3】表格边框：table-bordered

【4】鼠标悬停样式：table-hover

【5】表格内部更紧凑（行高更少）：table-condensed

行属性（类名，背景颜色，加在tr标签上）：

变绿：success

红：error

黄：warning

蓝：info

[http_v2.bootcss.com_base-css.html]: http://v2.bootcss.com/base-css.html

发表评论取消回复

表情：

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

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

相关阅读

相关【Bootstrap】003-全局样式：排版

目录一、标题说明：代码示例：运行结果：二、页面主体说明：图例：三、中心内容说明：代码演示：运行结果：使用 Less 工具构建

淩亂°似流年/ 2023年10月05日 11:04/ 0 赞/ 57 阅读

相关 Bootstrap（2）排版（简练版）

（九）排版 ①原文链接： [http://v2.bootcss.com/base-css.html][http_v2.bootcss.com_base-css.html]

- 日理万妓/ 2022年09月26日 03:58/ 0 赞/ 270 阅读

相关 2.2Bootstrap排版

1、标题 Html中的所有标题标签，从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。 <b

桃扇骨/ 2022年08月27日 03:38/ 0 赞/ 234 阅读

相关 Bootstrap 排版

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

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

相关 Bootstrap--排版

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

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

相关 BootStrap_02 排版

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

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

相关 Bootstrap 文本排版与表格

具体参考官方文档：[https://v3.bootcss.com/css/][https_v3.bootcss.com_css] 一、标题 HTM

快来打我*/ 2022年03月22日 12:46/ 0 赞/ 305 阅读

相关 Bootstrap系列---排版

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

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

相关 Bootstrap-全局css-排版

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

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

相关 Bootstrap文字排版

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

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