bootstrap --- 表格

在這里插入圖片描述
幾個可選類:
.table-bordered: 為表格加上邊框

.table-striped: 為表格加上斑馬效果

.table-hover: 鼠標懸停在表格行上時展現不同得顏色

.table-condensed: 更為緊湊的表格樣式

// 導入樣式,從bootstrap官網導入CDN
// HEAD
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
// HTML<table class="table table-bordered table-hover"><tr class="danger"><th>#</th><th>姓</th><th>名</th><th>昵稱</th></tr><tr class="active"><td>1</td><td>李</td><td>四</td><td>拉里</td></tr><tr><td>2</td><td>王</td><td>五</td><td>博德</td></tr>
</table>

// 使表格成為響應式
// 將表格包裹在一個class="table-responsive"的元素中
<div class="table-responsive"><div class="table"> ... </table>
</div>

選項

在這里插入圖片描述

<!DOCTYPE html>
<html>
<head><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head>
<body style="margin:15px;"><ul class="list-group"><li class="list-group-item"><a href="#">選項一</a></li><li class="list-group-item"><a href="#">選項二</a></li><li class="list-group-item"><a href="#">選項三</a></li><li class="list-group-item"><a href="#">選項四</a></li>
</ul></body>
</html>

將其他的元素展開成列表的樣子

在這里插入圖片描述

<!DOCTYPE html>
<html>
<head><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head>
<body style="margin:20px;"><div class="list-group"><a href="#" class="list-group-item active"><h4 class="list-group-item-heading">紫薯布丁1</h4><p class="list-group-item-text">紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁</p></a><a href="#" class="list-group-item"><h4 class="list-group-item-heading">紫薯布丁2</h4><p class="list-group-item-text">紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁紫薯布丁</p></a>
</div></body>
</html>

為列表組增加標記

在這里插入圖片描述

<ul class="list-group"><li class="list-group-item"><span class="badge">14</span>紫薯布丁的價格</li><li class="list-group-item active"><span class="badge">12</span>布丁紫薯的價格</li>
</ul>

參考《CSS高效開發實戰》 P155~P157 、 P173~P174

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

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