iNaturalist日誌可使用class屬性範例

iNaturalist的日誌僅允許部分的HTML標籤，但這些基本標籤可以加入通用的.class 以提高閱讀性。 在iNat中呈現效果可參閱日誌格式測試

資料平均分隔左右

左側內容

右側內容

<div class="row"> <div class="col-md-6" style="background-color: #f2f2f2; padding: 10px;">左側內容</div> <div class="col-md-6" style="background-color: #d9edf7; padding: 10px;">右側內容</div> </div>

---

警告與提示

這是一則提示訊息！

這是一則成功訊息！

這是一則 warning 訊息！

這是一則錯誤或危險警告！

<div class="alert alert-info">這是一則提示訊息！</div> <div class="alert alert-success">這是一則成功訊息！</div> <div class="alert alert-warning">這是一則 warning 訊息！</div> <div class="alert alert-danger">這是一則錯誤或危險警告！</div>

---

面板

<div class="panel panel-default"> <div class="panel-heading">面板標題</div> <div class="panel-body">主要內容</div> <div class="panel-footer">面板底部</div> </div>

---

導航 (Navigation)

<nav class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="https://google.com" target="_blank">Google</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="https://www.inaturalist.org/" target="_blank">iNAT愛自然</a></li> <li><a href="#">我是誰</a></li> </ul> </nav>

---

圖像 (Images)

.img-responsive
用途： 讓圖片根據容器自動調整大小。
應用場景： 網頁中需要自適應各裝置寬度的圖片。

.img-circle
用途： 將圖片裁成圓形。
應用場景： 用於頭像或裝飾性圖示。

.img-thumbnail
用途： 為圖片加上邊框及內邊距，呈現縮略圖效果。

.img-responsive 根據容器自動調整大小 <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/420160316/original.jpeg" class="img-responsive" alt="Responsive image"> .img-circle 將圖片裁成圓形 <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/420160316/original.jpeg" class="img-circle" alt="circle image"> .img-thumbnail 加上邊框及內邊距 <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/420160316/original.jpeg" class="img-thumbnail" alt="thumbnail image">

---

進度條 (Progress Bars)

.progress
用途： 進度條的容器。
.progress-bar
用途： 代表進度條本身，並可搭配 .progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger 呈現不同色系。

60% progress-bar-success

25% progress-bar-info

70% progress-bar-warning

50% progress-bar-danger

<div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%;"> 60% progress-bar-success </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 25%;"> 25% progress-bar-info </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 70%;"> 70% progress-bar-warning </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 50%;"> 50% progress-bar-danger </div> </div>

---

表格 TABLE

TABLE使用 class屬性: table table-striped table-hover table-condensed table

統計日期	觀察紀錄	物種
2023.12.	12	10
2024.06.	63	51
2024.12.	86	63

<table class="table table-striped table-hover table-condensed table"> <TR ><TD>統計日期</TD><TD>觀察紀錄</TD><TD>物種</TD></TR> <TR ><TD>2023.12.</TD><TD>12</TD><TD>10</TD></TR> <TR ><TD>2024.06.</TD><TD>63</TD><TD>51</TD></TR> <TR ><TD>2024.12.</TD><TD>86</TD><TD>63</TD></TR> </table>

---

TABLE使用 class屬性: table table-bordered table

統計日期	觀察紀錄	物種
2023.12.	12	10
2024.06.	63	51
2024.12.	86	63

<table class="table table-bordered table"> <TR ><TD>統計日期</TD><TD>觀察紀錄</TD><TD>物種</TD></TR> <TR ><TD>2023.12.</TD><TD>12</TD><TD>10</TD></TR> <TR ><TD>2024.06.</TD><TD>63</TD><TD>51</TD></TR> <TR ><TD>2024.12.</TD><TD>86</TD><TD>63</TD></TR> </table>

• .table-striped 用途： 為表格行添加斑馬條紋。 應用場景： 提升橫向閱讀的清晰度。
• .table-bordered 用途： 為表格加上邊框。 應用場景： 需要明確區分各儲存格。
• .table-hover 用途： 滑鼠經過時高亮顯示該行。 應用場景： 互動式資料檢視。
• .table-condensed 用途： 壓縮表格間距，使內容更緊湊。 應用場景： 當資料較多且需要節省空間時。

使用 Bootstrap 框架提供的表格樣式，iNaturalist 允許的 HTML 與相關樣式可能會隨平台更新而改變，建議在使用前先行測試效果。