Bootstrap5 文字排版

在 Bootstrap 5 中，文字大小 font-size 默認(rèn)值為 1rem（16px），行高 line-height 為 1.5，除此之外，所有的 <p> 標(biāo)簽都設(shè)置了 margin-top: 0 和 margin-bottom: 1rem。

首先看一下標(biāo)題標(biāo)簽，默認(rèn)使用 h1 ~ h6，具體呈現(xiàn)效果如下所示。

<div class="container">
  <h1>夢想橡皮擦</h1>
  <h2>夢想橡皮擦</h2>
  <h3>夢想橡皮擦</h3>
  <h4>夢想橡皮擦</h4>
  <h5>夢想橡皮擦</h5>
  <h6>夢想橡皮擦</h6>
</div>

如果不想直接使用標(biāo)題標(biāo)簽，可以使用 .h1 ~ .h6 設(shè)置元素樣式。

<div class="container">
  <p class="h1">夢想橡皮擦</p>
  <p class="h2">夢想橡皮擦</p>
  <p class="h3">夢想橡皮擦</p>
  <p class="h4">夢想橡皮擦</p>
  <p class="h5">夢想橡皮擦</p>
  <p class="h6">夢想橡皮擦</p>
</div>

其它樣式還包含 display 標(biāo)題，small 標(biāo)簽，mark 標(biāo)簽，abbr 標(biāo)簽，blockquote 標(biāo)簽，code 標(biāo)簽，kbd 標(biāo)簽，都是對(duì)網(wǎng)頁文字樣式的設(shè)置，可以自行進(jìn)行實(shí)踐，設(shè)置之后查看效果即可。

其它文字排版類 在 Bootstrap 中，可以對(duì)文字進(jìn)行更多設(shè)置，例如下述列表。

• .lead：突出段落；
• .text-left：左對(duì)齊文本；
• .text-center：居中對(duì)齊文本；
• .text-right：右對(duì)齊；
• .text-justify：兩端對(duì)齊；
• .text-break：允許文本換行，要求一個(gè)沒有斷行破發(fā)點(diǎn)的詞必須保持為一個(gè)整體單位；
• .text-decoration-none：刪除鏈接中的下劃線；
• .text-nowrap：文本不換行；
• .text-lowercase：全部轉(zhuǎn)換為小寫；
• .text-uppercase：全部轉(zhuǎn)換為大寫；
• .text-capitalize：單詞首字母大寫；
• .list-unstyled：刪除列表樣式。

表格

在 Bootstrap 中，內(nèi)置了非常多的表格樣式，實(shí)踐中首先準(zhǔn)備一個(gè)測試用表格，代碼如下。

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>博客昵稱</th>
        <th>博客地址</th>
        <th>博客稱號(hào)</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>胖達(dá)人</td>
        <td>XXXXXX</td>
        <td>測試一下</td>
      </tr>
    </tbody>
  </table>
</div>

這將創(chuàng)建一個(gè)帶有標(biāo)題行和三行數(shù)據(jù)的基本表格。你可以使用其他類來自定義表格的外觀，例如 table-striped 可以使表格帶有條紋，table-bordered 可以使表格帶有邊框。

使用 table-hover 類可以設(shè)置表格鼠標(biāo)懸停狀態(tài)。table-* 可以設(shè)置單行背景色，例如 table-primary 設(shè)置某行為主色，代碼如下。

<tr class="table-primary">
  <td>夢想橡皮擦</td>
  <td>https://blog.csdn.net/hihell</td>
  <td>博客專家</td>
</tr>

Bootstrap 圖像+Python flask 靜態(tài)資源配置

在 Bootstrap 中提前準(zhǔn)備一張圖像，然后將其加載到網(wǎng)頁中。

正式開始前，先配置一下 Python Flask 的靜態(tài)資源，在 app/__init__.py 文件中，找到下述代碼。

app = Flask(__name__)

按住 Ctrl，點(diǎn)擊 Flask 類名，可以跳轉(zhuǎn)到類的構(gòu)造方法中，可以看到下述內(nèi)容。

    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,
    ):

其中發(fā)現(xiàn) static_folder 參數(shù)，即靜態(tài)資源目錄綁定了一個(gè) static 目錄，所以在不修改配置代碼的前提下，可以通過建立該目錄，實(shí)現(xiàn)對(duì)靜態(tài)資源的訪問。

在 app 目錄中建立 static 文件夾，同時(shí)在創(chuàng)建 js，css，images 三個(gè)資源文件夾?？截愃夭奈募?images 目錄中，最終得到如下目錄結(jié)構(gòu)。

在 HTML 代碼中可以通過下述兩種形式調(diào)用到該圖片。

<div class="container">
  <img src="/static/images/sucai.png" alt="" />
</div>

也可以使用 url_for 函數(shù)進(jìn)行調(diào)用。

<div class="container">
  <img src="{{url_for('static',filename='images/sucai.png')}}" alt="" />
</div>

使用 url_for() 函數(shù)，該函數(shù)是 Flask 中的一個(gè)內(nèi)置函數(shù)，用于生成 URL 地址，也可以用于生成靜態(tài)文件的 URL 地址，本文就是第二個(gè)用法， 第一個(gè)參數(shù)是靜態(tài)資源文件夾的路徑，第二個(gè)參數(shù)是資源的文件名，由于設(shè)置了路徑，所以無需擔(dān)心重名和優(yōu)先級(jí)問題。

圖像樣式 使用 .rounded 類可以給圖片添加圓角，使用 .rounded-circle 可以設(shè)置橢圓形圖片，使用 .img-thumbnail 可以設(shè)置縮略圖。

以上就是爬蟲訓(xùn)練前端基礎(chǔ)Bootstrap5排版表格圖像的詳細(xì)內(nèi)容，更多關(guān)于爬蟲Bootstrap5排版表格圖像的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論