怎么使用Bootstrap5排版表格圖像

這篇文章主要講解了“怎么使用Bootstrap5排版表格圖像”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用Bootstrap5排版表格圖像”吧！

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)使用 h2 ~ h7，具體呈現(xiàn)效果如下所示。

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

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

<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 標(biāo)題，small 標(biāo)簽，mark 標(biāo)簽，abbr 標(biāo)簽，blockquote 標(biāo)簽，code 標(biāo)簽，kbd 標(biāo)簽，都是對網(wǎng)頁文字樣式的設(shè)置，可以自行進(jìn)行實(shí)踐，設(shè)置之后查看效果即可。

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

• .lead：突出段落；

• .text-left：左對齊文本；

• .text-center：居中對齊文本；

• .text-right：右對齊；

• .text-justify：兩端對齊；

• .text-break：允許文本換行，要求一個沒有斷行破發(fā)點(diǎn)的詞必須保持為一個整體單位；

• .text-decoration-none：刪除鏈接中的下劃線；

• .text-nowrap：文本不換行；

• .text-lowercase：全部轉(zhuǎn)換為小寫；

• .text-uppercase：全部轉(zhuǎn)換為大寫；

• .text-capitalize：單詞首字母大寫；

• .list-unstyled：刪除列表樣式。

表格

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

<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>胖達(dá)人</td>
        <td>XXXXXX</td>
        <td>測試一下</td>
      </tr>
    </tbody>
  </table>
</div>

這將創(chuàng)建一個帶有標(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)資源目錄綁定了一個 static 目錄，所以在不修改配置代碼的前提下，可以通過建立該目錄，實(shí)現(xiàn)對靜態(tài)資源的訪問。

在 app 目錄中建立 static 文件夾，同時在創(chuàng)建 js，css，images 三個資源文件夾?？截愃夭奈募?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 中的一個內(nèi)置函數(shù)，用于生成 URL 地址，也可以用于生成靜態(tài)文件的 URL 地址，本文就是第二個用法， 第一個參數(shù)是靜態(tài)資源文件夾的路徑，第二個參數(shù)是資源的文件名，由于設(shè)置了路徑，所以無需擔(dān)心重名和優(yōu)先級問題。

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

感謝各位的閱讀，以上就是“怎么使用Bootstrap5排版表格圖像”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么使用Bootstrap5排版表格圖像這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！