02_Bootstrap基础组件02

2023-09-20 16:30:55

4 排版

使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。

4.1 标题

h1-h6 重新定义样式，HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。

增加了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

  • .h1 字体大小 36px
  • .h2 字体大小 30px
  • .h3 字体大小 24px
  • .h4 字体大小 18px
  • .h5 字体大小 14px
  • .h6 字体大小 12px
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>

<span class="h1">我是h1标题</span>
<span class="h2">我是h2标题</span>
<span class="h3">我是h3标题</span>
<span class="h4">我是h4标题</span>
<span class="h5">我是h5标题</span>
<span class="h6">我是h6标题</span>

4.2 内联子标题

在标题中可以使用 small 标签包裹副标题的内容，或者使用 .small 类，可以得到一个字号更小的颜色更浅的文本。

<h1>我是h1标题<small>我是小标题</small></h1>
<h2>我是h2标题<small>我是小标题</small></h2>
<h3>我是h3标题<small>我是小标题</small></h3>
<h4>我是h4标题<small>我是小标题</small></h4>
<h5>我是h5标题<small>我是小标题</small></h5>
<h6>我是h6标题<small>我是小标题</small></h6>

<h1>我是h1标题<span class="small">我是小标题</span></h1>
<h2>我是h2标题<span class="small">我是小标题</span></h2>
<h3>我是h3标题<span class="small">我是小标题</span></h3>
<h4>我是h4标题<span class="small">我是小标题</span></h4>
<h5>我是h5标题<span class="small">我是小标题</span></h5>
<h6>我是h6标题<span class="small">我是小标题</span></h6>

4.3 引导主体副本

为了给段落添加强调文本，则可以添加 .lead，将得到更大更粗，行高更高的文本，它的作用相当于是文章摘要。

<p class="lead">我是文章摘要</p>
<p>我是文章内容</p>
<p>我是文章内容</p>

4.4 文本元素

用于文本样式的元素

<p>我是<mark>标记文本</mark></p>
<p>我是<del>删除文本</del>（被视为已删除的文本）</p>
<p>我是<s>无用文本</s>（被视为不再准确）</p>
<p>我是<ins>插入文本</ins>（被视为文档的附加内容）</p>
<p>我是<u>下划线文本</u></p>
<p>我是<small>小号文本</small></p>
<p>我是<strong>着重文本</strong></p>
<p>我是<em>斜体文本</em></p>

4.5 对齐类

简单方便将文字对齐的类，它们一般应用在 p 标签上（用在 div 上不符合规范，用在 span 标签则不能生效）。

<!-- 对齐类，加在 p 标签 -->
<p class="text-left">我是居左</p>
<p class="text-center">我是居中</p>
<p class="text-right">我是居右</p>
<p class="text-justify">我是两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐</p>
<p class="text-nowrap">我是不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</p>

4.6 大小写

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

<p class="text-lowercase">Lowercase 单词全小写</p>
<p class="text-uppercase">uppercase 单词全大写</p>
<p class="text-capitalize">capitalize 单词首字母大写</p>

4.7 提示语

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

<p>我是<abbr title="提示文字">提示语</abbr></p>
<p><abbr title="提示文字" class="initialism">提示语</abbr>字体大小变小</p>

4.8 引用类

表示在你的文档中引用其他来源的内容。用 <blockquote> 标签实现，包裹内容建议用 p 标签。

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

.blockquote-reverse 类可以让引用呈现内容右对齐的效果。

<blockquote>
    <p>我是引用内容</p>
    <footer>来源于<cite title="来源标题">来源标题</cite></footer>
</blockquote>

<!-- 右对齐 -->
<blockquote class="blockquote-reverse">
    <p>我是引用内容</p>
    <footer>来源于<cite title="来源标题">来源标题</cite></footer>
</blockquote>

4.9 列表

无样式列表

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

<ul class="list-unstyled">
    <li>无样式列表</li>
    <li>无样式列表</li>
    <li>无样式列表</li>
    <li>
        <ul>
            <li>不生效</li>
            <li>不生效</li>
            <li>不生效</li>
        </ul>
    </li>
    <li>
        <ul class="list-unstyled">
            <li>单独设置生效</li>
            <li>单独设置生效</li>
            <li>单独设置生效</li>
        </ul>
    </li>
</ul>

内联列表

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

<ul class="list-inline">
    <li>我是内联列表</li>
    <li>我是内联列表</li>
    <li>我是内联列表</li>
    <li>我是内联列表</li>
</ul>

水平排列的描述

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

<dl class="dl-horizontal">
    <dt>我是标题我是标题我是标题我是标题我是标题</dt>
    <dd>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</dd>
    <dt>我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</dt>
    <dd>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</dd>
    <dt>我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题</dt>
    <dd>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</dd>
</dl>

注意：水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

4.10 强调类

这些强调类，通过颜色来表示强调。一般是给 p 元素加这些类名，会显示不同的颜色。

<!-- 文本色强调类 -->
<p class="text-muted">我是默认</p>
<p class="text-warning">我是警告</p>
<p class="text-info">我是提示</p>
<p class="text-danger">我是失败</p>
<p class="text-success">我是成功</p>

<!-- 背景色强调类 -->
<p class="bg-primary">我是首选</p>
<p class="bg-success">我是成功</p>
<p class="bg-info">我是提示</p>
<p class="bg-warning">我是警告</p>
<p class="bg-danger">我是错误</p>

4.11 关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

4.12 三角符号

通过 CSS 实现三角符号

<span class="caret"></span>

4.13 左右浮动

添加一个类 .pull-left 或 .pull-right，可以将任意元素向左或向右浮动

<div class="pull-left">我是左浮动</div>
<div class="pull-right">我是右浮动</div>

4.14 内容居中

为元素设置类 .center-block ，等于设置了以下样式

display: block;
margin-left: auto;
margin-right: auto;

4.15 清除浮动

为父元素添加 .clearfix 类可以很容易地清除浮动

<div class="clearfix">
    <div class="pull-left">我是左浮动</div>
    <div class="pull-right">我是右浮动</div>
</div>

4.16 显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏，注意，这些类只对块级元素起作用

<div class="show">我是显示内容</div>
<div class="hidden">我是隐藏内容</div>

使用 .text-hide 类可以用来将元素的文本内容替换为一张背景图

<h1 class="text-hide">我是隐藏文本</h1>

5 字体图标

  • 所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。
  • 为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
  • 不要和其他组件混合使用（应该创建一个嵌套的 span 标签，并将图标类应用到这个span标签上）
  • 只对内容为空的元素起作用（图标类只能应用在不包含任何文本内容或子元素的元素上）
<button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-align-left"></span>
</button>

6 表格

6.1 默认样式

添加 .table 类名，使用表格样式

<table class="table">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>30</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>女</td>
        <td>28</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td>29</td>
    </tr>
</table>

6.2 可选样式

.table-striped  为表格提供了斑马线的样式
.table-bordered  为表格增加边框(border)
.table-hover 为表格中的每一行赋予鼠标悬停样式。鼠标划过后会添加一个背景色。
.table-condensed 每个单元格的内补(padding)减半，可使表格更紧凑。

6.3 状态类

通过这些状态类可以为行或单元格设置颜色。

  • active 鼠标悬停在行或单元格上时所设置的颜色
  • success 标识成功或积极的动作
  • info 标识普通的提示信息或动作
  • warning 标识警告或需要用户注意
  • danger 标识危险或潜在的带来负面影响的动作
<table class="table table-bordered table-hover">
    <tr class="active">
        <td>active</td>
        <td>active</td>
        <td>active</td>
        <td>active</td>
        <td>active</td>
    </tr>
    <tr class="success">
        <td>success</td>
        <td>success</td>
        <td>success</td>
        <td>success</td>
        <td>success</td>
    </tr>
    <tr class="warning">
        <td>warning</td>
        <td>warning</td>
        <td>warning</td>
        <td>warning</td>
        <td>warning</td>
    </tr>
    <tr class="danger">
        <td>danger</td>
        <td>danger</td>
        <td>danger</td>
        <td>danger</td>
        <td>danger</td>
    </tr>
    <tr class="info">
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <td class="active">active</td>
        <td class="success">success</td>
        <td class="warning">warning</td>
        <td class="danger">danger</td>
        <td class="info">info</td>
    </tr>
</table>

6.4 响应式表格

将 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
    <table class="table table-bordered table-hover">
        <tr class="active">
            <td>active</td>
            <td>active</td>
            <td>active</td>
            <td>active</td>
            <td>active</td>
        </tr>
        <tr class="success">
            <td>success</td>
            <td>success</td>
            <td>success</td>
            <td>success</td>
            <td>success</td>
        </tr>
        <tr class="warning">
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
        </tr>
        <tr class="danger">
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
        </tr>
        <tr class="info">
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td class="active">active</td>
            <td class="success">success</td>
            <td class="warning">warning</td>
            <td class="danger">danger</td>
            <td class="info">info</td>
        </tr>
    </table>
</div>
更多推荐

RHCSA_Linux 从命令行管理文件

目录一、文件命令规范：二、创建链接文件1、创建软链接文件2、创建硬链接文件三、目录操作命令1、创建目录--mkdir2、统计目录及文件的空间占用情况--du3、删除目录文件四、创建、删除普通文件1、创建普通文件2、删除普通文件五、数据流和重定向1、数据流2、重定向操作符3、输出重定向案例标准输出重定向：1>或>、1>>

2023华为OD统一考试（B卷）题库清单（持续收录中）以及考点说明

目录专栏导读2023B卷“新加题”（100分值）2023Q2100分2023Q2200分2023Q1100分2023Q1200分2022Q4100分2022Q4200分牛客练习题专栏导读本专栏收录于《华为OD机试（JAVA）真题（A卷+B卷）》。刷的越多，抽中的概率越大，每一题都有详细的答题思路、详细的代码注释、样例测

初识Spring（一）IOC

Spring框架是一个开源的Java平台，它最初是由RodJohnson编写的，并且于2003年6月首次在Apache2.0许可下发布。Spring框架的核心特性是可以用于开发任何Java应用程序，但是在JavaEE平台上构建web应用程序是需要扩展的。Spring框架的目标是使J2EE开发变得更容易使用，通过启用基于

【简单教程】利用Net2FTP构建免费个人网盘，实现便捷的文件管理

文章目录1.前言2.Net2FTP网站搭建2.1.Net2FTP下载和安装2.2.Net2FTP网页测试3.cpolar内网穿透3.1.Cpolar云端设置3.2.Cpolar本地设置4.公网访问测试5.结语1.前言文件传输可以说是互联网最主要的应用之一，特别是智能设备的大面积使用，无论是个人存储文件资料，还是商业文件

SQL语句学习系列（1）

目录查询语句1.查询所有列的所有行：2.查询指定列的所有行：3.查询满足条件的行：4.查询满足多个条件的行：6.查询满足条件的行数：7.查询满足条件的唯一值：8.查询满足条件的分组统计：9.查询满足条件的平均值：10.查询满足条件的最大值：11.查询满足条件的最小值：12.查询满足条件的总和：13.查询多个表中的数据：

科技评估分类

声明本文是学习GB-T42776-2023科技评估分类.而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们1范围本文件确立了科技评估的分类原则，描述了分类方法，规定了编码方法、分类与代码。本文件适用于科技评估的规划、设计、委托、组织、实施、管理、研究、培训和信息化等相关活动。2规范性引用文件下列文件中

ISP代理是什么？双ISP是什么意思？

代理是路由互联网流量的中间服务器，通常分为两类：数据中心、住宅ISP。根据定义，ISP代理隶属于互联网服务提供商，但实际上，大家会将它们视为数据中心和住宅代理的组合。让我们仔细研究一下ISP代理，看看它们有何优点？什么是ISP代理？ISP指互联网服务提供商，ISP代理指IP地址由ISP服务提供商分配给用户，可以说它是托

OpenAI开发系列（二）：大语言模型发展史及Transformer架构详解

全文共1.8w余字，预计阅读时间约60分钟|满满干货，建议收藏！一、介绍在2020年秋季，GPT-3因其在社交媒体上病毒式的传播而引发了广泛关注。这款拥有超过1.75亿参数和每秒运行成本达到100万美元的大型语言模型（LargeLanguageModels，LLMs）开启了自然语言处理（NLP）领域的新纪元。在这个阶段

GPIO基础知识的概括

GPIO是通用输入/输出端口的简称，本文以STM32为例进行说明，其他的单片机功能上都是大同小异，学会STM32的GPIO，我们可以触类旁通。GPIO的引脚与外部硬件设备连接，可实现与外部通讯、控制外部硬件或者采集外部硬件数据的功能。STM32的八种GPIO口模式1）GPIO_Mode_AIN模拟输入；2）GPIO_M

数据结构---AVL树

AVL树AVL树的概念AVL树节点的定义AVL树的插入源代码AVL树的概念二叉搜索树虽然可以缩短查找的效率，但是，如果数据有序或接近有序二叉搜索树将退化为单支树，查找元素相当于在顺序表中搜索元素，效率就会变低。因此，两位俄罗斯的数学家G.M.Adelson-Velskii和E.M.Landis在1962年发明了一种解决

揭秘：Wasserstein GAN与梯度惩罚（WGAN-GP）

一、说明什么是梯度惩罚？为什么它比渐变裁剪更好？如何实施梯度惩罚？在提起GAN对抗网络中，就不能避免Wasserstein距离的概念，本篇为系列读物，目的是揭示围绕Wasserstein-GAN建模的一些重要概念进行探讨。图1（左）使用配重裁剪时的梯度范数要么爆炸，要么消失，不使用GP。（右）与GP不同，权重裁剪将权重

热文推荐
  1. 远程连接PostgreSQL：配置指南与安全建议

    🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🐅🐾猫头虎建议程序员必备技术栈一览表📖：🛠️全栈技术FullStack:📚MERN/MEAN/MEVNStack|🌐Jamstack|🌍GraphQL|🔁RESTfulAPI|⚡WebSockets|🔄CI/CD|🌐Git&Versio

  2. Linux安全加固：保护你的服务器

    🌷🍁博主猫头虎（🐅🐾）带您GotoNewWorld✨🍁🦄博客首页——🐅🐾猫头虎的博客🎐🐳《面试题大全专栏》🦕文章图文并茂🦖生动形象🐅简单易学！欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》🐾学会IDEA常用操作，工作效率翻倍~💐🌊《100天精通Golang(基础入门篇）》🐅学会Gol

  3. Cobra眼睛蛇-强大的Golang CLI框架，快速上手的脚手架搭建项目工具，详细安装和使用

    Cobra眼睛蛇-强大的GolangCLI框架，快速上手的脚手架搭建项目工具，详细安装和使用。阅读过k8s源码的同学，应该都知道k8sScheduler、kubeadm、kubelet等核心组件的命令行交互全都是通过spf13写的Cobra库来实现。本文就来介绍下Cobra的相关概念及具体用法。关于Cobra是一个用于

  4. MySQL常用配置详解

    目录一、MySQL查看配置信息二、MySQL查看服务器当前运行状态的信息三、MySQL常用配置详解1、mysql（使用mysql命令登录数据库时的默认的设置）2、client（客户端默认设置内容）3、mysqld（服务端端配置）四、配置修改演示1、修改my.cnf配置文件（window系统修改my.ini配置文件）2、

  5. 二叉树经典OJ题——【数据结构】

    W...Y的主页😊代码仓库分享💕今天我们来进行二叉树的OJ练习，就是利用二叉树的前序、中序、后续以及晨序遍历的特性进行OJ训练。话不多说，来看我们的第一道题。【leetcode965.单值二叉树】OJ链接如果二叉树每个节点都具有相同的值，那么该二叉树就是单值二叉树。只有给定的树是单值二叉树时，才返回true；否则返

  6. Wireshark把DDoS照原形

    1前言MTU、传输速度、拥塞控制，还是各种重传，TCP传输相关的核心概念：学习了RFC规范和具体的Linux实现通过案例，把这些知识灵活运用了起来这种种还是在协议规范这大框架内的讨论，默认前提就是通信两端是遵照TCP规定工作，都是君子协定。若不遵TCP规范，甚至找漏洞攻击，这种小人行为也很常见，如DDoS攻击。2NTP

  7. 正则表达式元字符

    正则表达式元字符-详细说明字符说明\将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如，“n"匹配字符"n”。“\n"匹配换行符。序列”\\“匹配”\“，”\(“匹配”("。^匹配输入字符串开始的位置。如果设置了RegExp对象的Multiline属性，^还会与"\n"或"\r"之后的位置匹配。$匹配输入字符

  8. 如何用Stable Diffusion模型生成个人专属创意名片？

    目录1什么是二维码？2什么是扩散模型？3StableDiffusion环境搭建4开始制作创意名片结语1什么是二维码？二维码是一种用于存储和传输信息的方便而广泛使用的图像编码技术。它是由黑色方块和白色空白区域组成的二维图形，可以通过扫描设备(如智能手机)进行解码。二维码基于特定的编码标准和解码算法——其中包括错误检测和纠

  9. 如何通过简历展示自己的执行力和动力？

    导语:简历是求职过程中的重要工具，通过合适的展示方式能够有效地展示自己的执行力和动力。本文将分享一些技巧，帮助您在简历中突出这两个关键能力。突出成就和项目经历:在简历中详细描述您曾经完成的项目或工作，并着重强调其中的具体成果。指出您所负责的任务，并描述您是如何通过积极的执行力完成这些任务的。例如，提及您成功地完成了某个