【Bootstrap V4系列】學習入門教程之 表格(Tables)和畫像(Figure)

Bootstrap V4系列 學習入門教程之 表格(Tables)和畫像(Figure)

  • 表格(Tables)
    • 一、Examples
    • 二、Table head options 表格頭選項
    • 三、Striped rows 條紋行
    • 四、Bordered table 帶邊框的表格
    • 五、Borderless table 無邊框表格
    • 六、Hoverable rows 可懸停行
    • 七、Contextual classes 情境類
  • 畫像(Figure)

表格(Tables)

一、Examples

由于表格在日歷和日期選擇器等第三方小部件中的廣泛使用,我們將表格設計為可選擇加入。只需將基類.table添加到任何<table>中,然后使用自定義樣式或我們包含的各種修飾符類進行擴展。

使用最基本的表標記,以下是Bootstrap中基于.table的表的外觀。Bootstrap 4繼承了所有表樣式,這意味著任何嵌套表都將以與父表相同的方式進行樣式設置。

<table class="table"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>
</table>

頁面展示效果:
在這里插入圖片描述
您還可以使用.table-dark反轉顏色——在深色背景上使用淺色文本。

<table class="table table-dark"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>
</table>

頁面展示效果:
在這里插入圖片描述

二、Table head options 表格頭選項

與表格和深色表格類似,使用修飾符類.thead-light.thead-dark使<thead>顯示為淺灰色或深灰色。

<table class="table"><thead class="thead-dark"><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody>...</tbody>
</table>  

頁面展示效果:
在這里插入圖片描述

三、Striped rows 條紋行

使用.table-striped<tbody>中的任何表行添加斑馬條紋。

<table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>
</table>

頁面展示效果:
在這里插入圖片描述

四、Bordered table 帶邊框的表格

為表格和單元格的所有側面添加邊框。

<table class="table table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody>
</table>

頁面展示效果:
在這里插入圖片描述

五、Borderless table 無邊框表格

為無邊框的表格添加.table-borderless

<table class="table table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody>
</table>

頁面展示效果:
在這里插入圖片描述

六、Hoverable rows 可懸停行

添加.table-hover以在<tbody>內的表行上啟用懸停狀態。

<table class="table table-hover"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody>
</table>

頁面展示效果:
在這里插入圖片描述

七、Contextual classes 情境類

<div class="bd-example"><table class="table"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr class="table-active"><th scope="row">Active</th><td>Cell</td><td>Cell</td></tr><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-danger"><th scope="row">Danger</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr><tr class="table-light"><th scope="row">Light</th><td>Cell</td><td>Cell</td></tr><tr class="table-dark"><th scope="row">Dark</th><td>Cell</td><td>Cell</td></tr></tbody></table>
</div>

頁面展示效果:
在這里插入圖片描述

畫像(Figure)

通過 Bootstrap 的畫像(figure)組件來顯示相關聯的圖片和文本。

任何時候需要顯示一段內容(例如帶有可選標題的圖片),請使用 <figure> 標簽。

.figure、.figure-img.figure-caption 類為 HTML5 的 <figure><figcaption> 元素提供了一些基本樣式。<figure> 標簽內所包含的圖片如果沒有明確地設置尺寸的話,請務必為 <img>標簽添加 .img-fluid 類,使其支持響應式布局。

<!--任何時候需要顯示一段內容(例如帶有可選標題的圖片),請使用 <figure> 標簽。 -->
<figure class="figure"><img src="../images/1.jpg" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">A caption for the above image.</figcaption></figure>

頁面展示效果:
在這里插入圖片描述
通過使用我們提供的 文本工具類 可以輕松對齊 <figure> 所包含的標題。

<!--通過使用我們提供的 文本工具類 可以輕松對齊 <figure> 所包含的標題。-->
<figure class="figure"><img src="../images/1.jpg" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

頁面展示效果:
在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/79218.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/79218.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/79218.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

在C# WebApi 中使用 Nacos02: 配置管理、服務管理實戰

一、配置管理 1.添加一個新的命名空間 這里我都填寫為publicdemo 2.C#代碼配置啟動 appsetting.json加上&#xff1a; (nacos默認是8848端口) "NacosConfig": {"ServerAddresses": [ "http://localhost:8848" ], // Nacos 服務器地址"Na…

如何搭建spark yarn 模式的集群集群。

下載 App 如何搭建spark yarn 模式的集群集群。 搭建Spark on YARN集群的詳細步驟 Spark on YARN模式允許Spark作業在Hadoop YARN資源管理器上運行&#xff0c;利用YARN進行資源調度。以下是搭建步驟&#xff1a; 一、前提條件 已安裝并配置好的Hadoop集群&#xff08;包括HDF…

C++--入門基礎

C入門基礎 1. C的第一個程序 C繼承C語言許多大多數的語法&#xff0c;所以以C語言實現的hello world也可以運行&#xff0c;C中需要把文件定義為.cpp&#xff0c;vs編譯器看是.cpp就會調用C編譯器編譯&#xff0c;linux下要用g編譯&#xff0c;不再是gcc。 // test.cpp #inc…

從實列中學習linux shell9 如何確認 服務器反應遲鈍是因為cpu還是 硬盤io 到底是那個程序引起的。cpu負載多高算高

在 Linux 系統中,Load Average(平均負載) 是衡量系統整體壓力的關鍵指標,但它本身沒有絕對的“高/低”閾值,需要結合 CPU 核心數 和 其他性能指標 綜合分析。以下是具體判斷方法: 一、Load Average 的基本含義 定義:Load Average 表示 單位時間內處于可運行狀態(R)和不…

聊一聊接口測試更側重于哪方面的驗證

目錄 一、功能性驗證 輸入與輸出正確性 參數校驗 業務邏輯覆蓋 二、數據一致性驗證 數據格式規范 數據完整性 數據類型與范圍 三、異常場景驗證 容錯能力測試 邊界條件覆蓋 錯誤碼與信息清晰度 四、安全與權限驗證 身份認證 數據安全 防攻擊能力 五、性能與可…

Fiddler抓取APP端,HTTPS報錯全解析及解決方案(一篇解決常見問題)

環境&#xff1a;雷電模擬器Android9系統 ? 你所遇到的fiddler中抓取HTTPS的問題可以分為三類&#xff1a;一類是你自己證書安裝上邏輯錯誤&#xff0c;另一種是APP中使用了“證書固定”的手段。三類fiddler中生成證書時的參數過程。 1.Fiddler證書安裝上的邏輯錯誤 更新Opt…

OpenGL-ES 學習(15) ----紋理

目錄 紋理簡介紋理映射紋理映射流程示例代碼&#xff1a;紋理的環繞和過濾方式紋理的過濾方式 紋理簡介 現實生活中&#xff0c;紋理(Texture) 類似于游戲中皮膚的概念&#xff0c;最通常的作用是裝飾 3D 物體&#xff0c;它像貼紙一樣貼在物體的表面&#xff0c;豐富物體的表…

OpenCV計算機視覺實戰(2)——環境搭建與OpenCV簡介

OpenCV計算機視覺實戰&#xff08;2&#xff09;——環境搭建與OpenCV簡介 0. 前言1. OpenCV 安裝與配置1.1 安裝 Python-OpenCV1.2 配置開發環境 2. OpenCV 基礎2.1 圖像讀取與顯示2.2 圖像保存 3. 攝像頭實時捕獲小結系列鏈接 0. 前言 OpenCV (Open Source Computer Vision …

ubuntu22.04安裝顯卡驅動與cuda+cuDNN

背景&#xff1a; 緊接前文&#xff1a;Proxmox VE 8.4 顯卡直通完整指南&#xff1a;NVIDIA 2080 Ti 實戰。在R740服務器完成了proxmox的安裝&#xff0c;并且安裝了一張2080ti 魔改22g顯存的的顯卡。配置完了proxmox顯卡直通&#xff0c;并將顯卡掛載到了vm 301&#xff08;…

A2A Python 教程 - 綜合指南

目錄 ? 介紹? 設置環境? 創建項目? 代理技能? 代理卡片? A2A服務器? 與A2A服務器交互? 添加代理功能? 使用本地Ollama模型? 后續步驟 介紹 在本教程中&#xff0c;您將使用Python構建一個簡單的echo A2A服務器。這個基礎實現將向您展示A2A提供的所有功能。完成本教…

MySQL基礎關鍵_005_DQL(四)

目 錄 一、分組函數 1.說明 2.max/min 3.sum/avg/count 二、分組查詢 1.說明 2.實例 &#xff08;1&#xff09;查詢崗位和平均薪資 &#xff08;2&#xff09;查詢每個部門編號的不同崗位的最低薪資 3.having &#xff08;1&#xff09;說明 &#xff08;2&#xff…

GAMES202-高質量實時渲染(Assignment 2)

目錄 作業介紹環境光貼圖預計算傳輸項的預計算Diffuse unshadowedDiffuse shadowedDiffuse Inter-reflection(bonus) 實時球諧光照計算 GitHub主頁&#xff1a;https://github.com/sdpyy1 作業實現:https://github.com/sdpyy1/CppLearn/tree/main/games202 作業介紹 物體在不同…

2025年- H21-Lc129-160. 相交鏈表(鏈表)---java版

1.題目描述 2.思路 當pa&#xff01;pb的時候&#xff0c;執行pa不為空&#xff0c;遍歷pa鏈表。執行pb不為空&#xff0c;遍歷pb鏈表。 3.代碼實現 // 單鏈表節點定義 class ListNode {int val;ListNode next;ListNode(int x){valx;nextnull;}}public class H160 {// 主方法…

win10系統安卓開發環境搭建

一 安裝jdk 下載jdk17 ,下載路徑:https://download.oracle.com/java/17/archive/jdk-17.0.12_windows-x64_bin.exe 下載完畢后,按照提示一步步完成,然后接著創建環境變量, 在cmd控制臺輸入java -version 驗證: 有上面的輸出代表jdk安裝并配置成功。 二 安裝Android stu…

【算法基礎】選擇排序算法 - JAVA

一、算法基礎 1.1 什么是選擇排序 選擇排序是一種簡單直觀的排序算法&#xff0c;它的工作原理是&#xff1a;首先在未排序序列中找到最小&#xff08;或最大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后再從剩余未排序元素中繼續尋找最小&#xf…

LabVIEW異步調用VI介紹

在 LabVIEW 編程環境里&#xff0c;借助結合異步 VI 調用&#xff0c;并使用 “Open VI Reference” 函數上的 “Enable simultaneous calls on reentrant VIs” 選項&#xff08;0x40&#xff09;&#xff0c;達成了對多個 VI 調用執行效率的優化。以下將從多方面詳細介紹該 V…

Leetcode刷題 | Day50_圖論02_島嶼問題01_dfs兩種方法+bfs一種方法

一、學習任務 99. 島嶼數量_深搜dfs代碼隨想錄99. 島嶼數量_廣搜bfs100. 島嶼的最大面積101. 孤島的總面積 第一類DFS&#xff08;主函數中處理第一個節點&#xff0c;DFS處理相連節點&#xff09;&#xff1a; 主函數中先將起始節點標記為已訪問DFS函數中不處理起始節點&…

深入理解網絡安全中的加密技術

1 引言 在當今數字化的世界中&#xff0c;網絡安全已經成為個人隱私保護、企業數據安全乃至國家安全的重要組成部分。隨著網絡攻擊的復雜性和頻率不斷增加&#xff0c;保護敏感信息不被未授權訪問變得尤為關鍵。加密技術作為保障信息安全的核心手段&#xff0c;通過將信息轉換為…

舊版本NotionNext圖片失效最小改動解決思路

舊版本NotionNext圖片失效最小改動解決思路 契機 好久沒寫博客了&#xff0c;最近在notion寫博客的時候發現用notionNext同步到個人網站時&#xff0c;圖片無法預覽。猜測是notion加了防盜鏈措施&#xff0c;去notionNext官方github上尋找解決方案&#xff0c;需要升級到4.8.…