标题类、文本类、列表类、代码类、图文样式、表格布局、
一、标题类
在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。
在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的HTML页面一样，都是使用<h1>到<h6>标签来定义标题。同时Bootstrap还提供了一系列display类来设置标题样式。
1、设置标题
在Bootstrap中对<h1>到<h6>标签默认样式进行了覆盖。需要注意的是，元素的样式会随着浏览器的修改而进行变动的，可以使元素在不同的浏览器下显示一样的效果。
2.1、使用的标签：
Bootstrap中<h1>-<h6>标题描述具体如下表所示。
上表中，Bootstrap标题的具体使用和平时的使用方法是一样的，从一级标题到六级标题，数字越大所代表的级别越小，文本也越小。
3.2使用类名
在Bootstrap中定义了六个类名h1到h6来让非标题元素实现标题效果，与<h1>~<h6>不同的是使用类名h1到h6的文本段不会视作HTML的标题元素，没有标题的含义。
<div class="h1">一级标题</div>
<div class="h2">二级标题</div>
<div class="h3">三级标题</div>
<div class="h4">四级标题</div>
<div class="h5">五级标题</div>
<div class="h6”>六级标题</div>
2.3、使用display类
如果想要将传统的标题元素设计得更加美观、醒目，来迎合网页内容。这时可以使用Bootstrap中提供的一系列display类来设置标题样式。
<h1 class="disp1ay-1">display1</h1>
<h1 class="display-2">display2</h1>
<hl class="display-3">display3</h1>
<hl class="display-4">display4</h1>
二、文本类
段落<p>元素是网页布局中的重要组成部分，在Bootstrap中为文本设置了一个全局的正文文本样式，包括对字体和字号、行高、颜色的基础设置。除此之外，为了显示美观，同时便于用户阅读，特意给p元素设置了margin值。
在实际项目中，对于一些重要的文本，开发者往往希望对这些文本进行特殊的样式设置，以突显其重要性。
1、强化文本
Bootstrap中提供了一些常用的内联元素来对文本进行强化突显重要内容，以实现风格统一、布局美观的效果．见下表所示。
| 标签 | 描述 | 标签 | 描述 |
| <b>和<strong> | 文本加粗 | <mark> | 标记，高亮显示 |
| <de1>和<s> | 删除线 | <address> | 表示地址 |
| <ins>和<u> | 下划线 | <footer> | 出处 |
| <em>和<i> | 斜体 | <cite> | 出处 |
| <blockquote> | 引用块，长引用 | <abbr> | 缩略语，鼠标悬停在该文本上时，显示title的属性值 |
<b>和<strong>默认情况下是加粗字体。前者是给其包裹的文本设置为bold粗体效果。而后者表示加强字符的语气，使用bo1d粗体来起到强调的作用。
<de1>和<s>都可以实现删除效果，但是<del>更具有语义化，能更形象的描述删除意思。<strong>和<em>具有强调作用，有利于SEO。
<ins>和<u>都可以实现下画线效果，但是前者通常与<del>一起使用。用来定义已经被插入文档中的文本，而后者表示为文本添加下划线。
<footer>和<cite>通常表示所包含的文本对某个参考文献的引用，区别在于后者引用的文本将以斜体显示。
<b>b 文本加粗</b>
<strong>strong文本加粗</ strong>
<de1>de1删除</de1>
<s>s 删除</s>
<p>1+1=<de1>4</de1><ins>2</ins>ins 下划线</p>
<u>u下划线</u>
<em>em斜体</em>
<i>i斜体</i>
<blockquote>blockquote 引用块</blockquote>
<mark>mark高亮显示</mark>
<address>address表示地址</address>
<footer>footer出处</footer>
<cite>cite出处</cite>
<abbr title=”我是提示信息">abbr缩略语</abbr>
2、按钮
- 可以使用.text-*将文本设置为指定的颜色。
- text-light和.text-white在白色背景下看不清楚，可以设置一个黑色的背景来辅助查看效果。
- 可以使用.text-white-数值和.text-black-数值来设置颜色的透明度效果，后面的数值表示的是透明度。如.text-white-50和.text-black-50，分别表示透明度为0.5的白色或黑色文本。
<!-- 注意: .text-white和.text-muted不支持在超链接上使用样式-->
<p class="text-primary">text-primary 蓝色</p>
<p class="text-secondary">text-secondary 灰色</p>
<p class="text-success">text-success 绿色</p>
<p class="text-danger">text-danger 红色</p>
<p class="text-warning">text-warning 橙色</p>
<p class="text-info">text-info 深蓝色</p>
<p class="text-light bg-dark">text-light 透明色</p>
<p class="text-dark">text-dark 黑色</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
3、文本格式
在网页布局中经常会用到文本对齐方式，在CSS中常常使用text-align属性来设置文本对齐方式。在Bootstrap中，为了简化操作，方便开发者使用，Bootstrap中提供了一系列的文本对齐样式和大小写相关的样式，具体见下表.
| 类名 | 描述 |
| .text-Ieft | 左对齐，默认由浏览器决定 |
| .text-right | 右对齐 |
| .text-center | 居中对齐 |
| .text-justify | 实现两端对齐文本效果 |
| .text-nowrap | 段落中超出屏幕部分不换行 |
| .text-uppercase | 设置英文大写 |
| .text-lowercase | 设置英文小写 |
| .text-capitalize | 设置每个单词首字母大写 |
<p class="text-left">左对齐效果</p>
<p class="text-right">右对齐效果</p>
<p class="text-center">居中对齐效果</p>
<p class="text-justify">两端对齐效果Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside
of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
<p class="text-nowrap">不换行效果Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside
ofme. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
<p class="text-uppercase">Some 英文大写</p>
<p class="text-lowercase">text-lowercase英文小写</p>
<p c1ass="text-capitalize">text-capitalize 每个单词首字母大写</p>
三、表格布局
在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于<table>元素的表格样式如下表所示。
| 类名 | 描述 |
| .table | 基类，也就是表格的基本样式 |
| pble-dark | 设置颜色反转对比效果 |
| .table-striped | 条纹表格，设置斑马线效果，实现隔行换色 |
| .table-bordered | 带边框表格 |
| .table-borderless | 无边框表格 |
| .table-hover | 鼠标悬停效果,鼠标移动到行或单元格上，表格行变色 |
| .table-sm | 紧凑型表格 |
| .table-responsive | 响应式表格 |
上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。
作用于<thead>表头元素的样式如表下所示。
| 类名 | 描述 |
| .thead-light | 设置表头浅灰色背景 |
| .thead-dark | 设置表头浅黑色背景 |
四、新媒体布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css"><style>.container {width: 1000px;}</style>
</head><body><div class="container"><div class="card float-left" style="width: 18rem;"><img src="img/01.png" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">Bootstrap响应式网页布局</p></div><div class="row"><a href="#" class="text-left col-md-4 text-secondary">难度:中级</a><a href="#" class="text-right col-md-8 text-danger">观看次数: 99999</a></div></div><div class="card float-left " style="width: 18rem;"><img src="img/01.png" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">Bootstrap响应式网页布局</p></div><div class="row"><a href="#" class="text-left col-md-4 text-secondary">难度:中级</a><a href="#" class="text-right col-md-8 text-danger">观看次数: 99999</a></div></div><div class="card float-left" style="width: 18rem;"><img src="img/01.png" class="card-img-top" alt="..."><div class="card-body"><p class="card-text">Bootstrap响应式网页布局</p></div><div class="row"><a href="#" class="text-left col-md-4 text-secondary">难度:中级</a><a href="#" class="text-right col-md-8 text-danger">观看次数: 99999</a></div></div></div></body></html>
标题类、文本类、列表类、代码类、图文样式、表格布局、相关推荐
- 派生类参数初始化列表和基类构造函数顺序
今天被问到了一个问题,随便回了一句,父类还没有构建,怎么能初始化父类的成员. 派生类构造函数的参数初始化列表,为什么不能初始化基类的成员? 例如下面的是不可以的 class Rectangle : p ...
- 一、bootstrap4基础（布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类）
1.1 Bootstrap简单介绍 1.2 Bootstrap结构 1.3 Bootstrap安装和测试 1.4 布局系统 1.5 栅格系统 4.6 栅格等级 1.7 显示与隐藏 1.7 对齐与排列 ...
- MarkDown语法详解：标题、字体、列表、引用、图片、表格、代码、超链接、公式
文章目录 什么是Markdown? 学习准备 常用语法 标题(二级标题): 三级标题 四级标题 字体 显示效果: 文字设置 分割线 列表 有序列表 无序列表 列表嵌套 引用 单句引用 区块引用嵌套 区 ...
- Android之使用AlertDialog.Builder类创建带列表的对话框和带自己所布局视图的对话框
1.首先,新建一个安卓项目,项目名称为DialogTest1,首先,进行界面布局,打开布局文件res下的layout文件夹下的activity_main.xml文件,附上activity_main的代 ...
- 【重学UML】UML类图关系及其对应代码
文章目录 一.UML类图关系总览 二.依赖关系 1.关系描述 2.举例 三.关联关系 1.关系描述 2.举例 3.思考 三.聚合.组合关系--关联关系的两种形式 1.关系描述 2.两者关系对比 3.关 ...
- wps垂直排列标题与文本_如何让商品标题类文本根据内容长度垂直居中
前言: 如下图,商品标题内容字数不限,最多显示两行,多余省略. 展示上,标题显示一行和两行,图片右侧的文本部分的总高度是不一样的,而且在整个父层盒子中垂直居中(注:不是text-align:cente ...
- Custom Control进行多行列表控制CMultilineList类
https://blog.csdn.net/greless/article/details/73335503 翻译来源:https://www.codeproject.com/Articles/154 ...
- bert使用做文本分类_使用BERT进行深度学习的多类文本分类
bert使用做文本分类 Most of the researchers submit their research papers to academic conference because its ...
- C++ 类构造函数初始化列表介绍
构造函数初始化列表以一个冒号开始,接着是以逗号分隔的数据成员列表,每个数据成员后面跟一个放在括号中的初始化式. 构造函数初始化列表以一个冒号开始,接着是以逗号分隔的数据成员列表,每个数据成员后面跟一个 ...
最新文章
- 【OpenCV 4开发详解】图像仿射变换
- 初识Memcached
- 利用matlab处理点云
- Mac 安装Pygame小记
- 国庆期间，我造了台计算机
- 例题4-5 引发的static知识点
- 工业轨式 1-16路 4-20MA 模拟量光端机产品介绍
- 用c++写的一个词典工具
- 纸机器人的折法_好神奇！他们竟用一张纸折成了一个机器人
- 未能成功加载扩展程序_【JAVA虚拟机（JVM）精髓】09-几种不同的类加载器
- .net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload
- Java Applet 授权命令
- python 数据框按行拼接_使用python进行数据分析
- dapper框架_.net core 基于Dapper 的分库分表开源框架（core-data）
- nearly,about,almost的区别
- c++14 0 名字空间和条件编译
- C# 异步函数同时执行后再执行其它函数async
- 人工智能、机器学习、神经网络及深度学习关系
- 文件太大打不开,可以使用LogViewer
- 倾斜摄影发展历程简介