怎么使用Bootstrap5排版表格圖像

這篇文章主要講解了“怎么使用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 可以設置縮略圖。

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