这篇文章主要讲解了“怎么使用Bootstrap5排版表格图像”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用Bootstrap5排版表格图像”吧!
Bootstrap5 文字排版
在 Bootstrap 5 中,文字大小
font-size
默认值为 1rem(16px),行高
line-height
为 1.5,除此之外,所有的
<p>
标签都设置了
margin-top: 0
和
margin-bottom: 1rem
。
首先看一下标题标签,默认使用
h2
~
h7
,具体呈现效果如下所示。
<div class="container">
<h2>梦想橡皮擦</h2>
<h3>梦想橡皮擦</h3>
<h4>梦想橡皮擦</h4>
<h5>梦想橡皮擦</h5>
<h6>梦想橡皮擦</h6>
<h7>梦想橡皮擦</h7>
</div>
如果不想直接使用标题标签,可以使用
.h2
~
.h7
设置元素样式。
<div class="container">
<p class="h2">梦想橡皮擦</p>
<p class="h3">梦想橡皮擦</p>
<p class="h4">梦想橡皮擦</p>
<p class="h5">梦想橡皮擦</p>
<p class="h6">梦想橡皮擦</p>
<p class="h7">梦想橡皮擦</p>
</div>
其它样式还包含
display
标题,
small
标签,
mark
标签,
abbr
标签,
blockquote
标签,
code
标签,
kbd
标签,都是对网页文字样式的设置,可以自行进行实践,设置之后查看效果即可。
其它文字排版类 在 Bootstrap 中,可以对文字进行更多设置,例如下述列表。
-
:突出段落;.lead
-
:左对齐文本;.text-left
-
:居中对齐文本;.text-center
-
:右对齐;.text-right
-
:两端对齐;.text-justify
-
:允许文本换行,要求一个没有断行破发点的词必须保持为一个整体单位;.text-break
-
:删除链接中的下划线;.text-decoration-none
-
:文本不换行;.text-nowrap
-
:全部转换为小写;.text-lowercase
-
:全部转换为大写;.text-uppercase
-
:单词首字母大写;.text-capitalize
-
:删除列表样式。.list-unstyled
表格
在 Bootstrap 中,内置了非常多的表格样式,实践中首先准备一个测试用表格,代码如下。
<div class="container">
<table class="table">
<thead>
<tr>
<th>博客昵称</th>
<th>博客地址</th>
<th>博客称号</th>
</tr>
</thead>
<tbody>
<tr>
<td>梦想橡皮擦</td>
<td>https://blog.csdn.net/hihell</td>
<td>博客专家</td>
</tr>
<tr>
<td>某某某</td>
<td>XXXXX</td>
<td>测试一下</td>
</tr>
<tr>
<td>胖达人</td>
<td>XXXXXX</td>
<td>测试一下</td>
</tr>
</tbody>
</table>
</div>
这将创建一个带有标题行和三行数据的基本表格。你可以使用其他类来自定义表格的外观,例如
table-striped
可以使表格带有条纹,
table-bordered
可以使表格带有边框。
使用
table-hover
类可以设置表格鼠标悬停状态。
table-*
可以设置单行背景色,例如
table-primary
设置某行为主色,代码如下。
<tr class="table-primary">
<td>梦想橡皮擦</td>
<td>https://blog.csdn.net/hihell</td>
<td>博客专家</td>
</tr>
Bootstrap 图像+Python flask 静态资源配置
在 Bootstrap 中提前准备一张图像,然后将其加载到网页中。
正式开始前,先配置一下 Python Flask 的静态资源,在
app/__init__.py
文件中,找到下述代码。
app = Flask(__name__)
按住 Ctrl,点击 Flask 类名,可以跳转到类的构造方法中,可以看到下述内容。
def __init__(
self,
import_name: str,
static_url_path: t.Optional[str] = None,
static_folder: t.Optional[t.Union[str, os.PathLike]] = "static",
static_host: t.Optional[str] = None,
host_matching: bool = False,
subdomain_matching: bool = False,
template_folder: t.Optional[str] = "templates",
instance_path: t.Optional[str] = None,
instance_relative_config: bool = False,
root_path: t.Optional[str] = None,
):
其中发现
static_folder
参数,即静态资源目录绑定了一个
static
目录,所以在不修改配置代码的前提下,可以通过建立该目录,实现对静态资源的访问。
在
app
目录中建立
static
文件夹,同时在创建
js
,
css
,
images
三个资源文件夹。拷贝素材文件到
images
目录中,最终得到如下目录结构。
在 HTML 代码中可以通过下述两种形式调用到该图片。
<div class="container">
<img src="/static/images/sucai.png" alt="" />
</div>
也可以使用
url_for
函数进行调用。
<div class="container">
<img src="{{url_for('static',filename='images/sucai.png')}}" alt="" />
</div>
使用
url_for()
函数,该函数是 Flask 中的一个内置函数,用于生成 URL 地址,也可以用于生成静态文件的 URL 地址,本文就是第二个用法, 第一个参数是静态资源文件夹的路径,第二个参数是资源的文件名,由于设置了路径,所以无需担心重名和优先级问题。
图像样式 使用
.rounded
类可以给图片添加圆角,使用
.rounded-circle
可以设置椭圆形图片,使用
.img-thumbnail
可以设置缩略图。