Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）
Bootstrap 過(guò)渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
Ce document utilise Manuel du site Web PHP chinois Libérer
personnages
Bootstrap 面板（Panels）
本章將講解 Bootstrap 面板（Panels）。面板組件用于把 DOM 組件插入到一個(gè)盒子中。創(chuàng)建一個(gè)基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的實(shí)例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 默認(rèn)的面板</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
這是一個(gè)基本的面板
</div>
</div>
</body>
</html>
結(jié)果如下所示：
面板標(biāo)題
我們可以通過(guò)以下兩種方式來(lái)添加面板標(biāo)題：
- 使用 .panel-heading class 可以很簡(jiǎn)單地向面板添加標(biāo)題容器。to easily add a heading container to your panel.
- 使用帶有 .panel-title class 的 <h1>-<h6> 來(lái)添加預(yù)定義樣式的標(biāo)題。
下面的實(shí)例演示了這兩種方式：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 面板標(biāo)題</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
不帶 title 的面板標(biāo)題
</div>
<div class="panel-body">
面板內(nèi)容
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
帶有 title 的面板標(biāo)題
</h3>
</div>
<div class="panel-body">
面板內(nèi)容
</div>
</div>
</body>
</html>
結(jié)果如下所示：
面板腳注
我們可以在面板中添加腳注，只需要把按鈕或者副文本放在帶有 class .panel-footer 的 <div> 中即可。下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 面板腳注</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
這是一個(gè)基本的面板
</div>
<div class="panel-footer">面板腳注</div>
</div>
</body>
</html>
結(jié)果如下所示：
面版腳注不會(huì)從帶語(yǔ)境色彩的面板中繼承顏色和邊框，因?yàn)樗皇乔熬爸械膬?nèi)容。
帶語(yǔ)境色彩的面板
使用語(yǔ)境狀態(tài)類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，來(lái)設(shè)置帶語(yǔ)境色彩的面板，實(shí)例如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 帶語(yǔ)境色彩的面板</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">面板標(biāo)題</h3>
</div>
<div class="panel-body">
這是一個(gè)基本的面板
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">面板標(biāo)題</h3>
</div>
<div class="panel-body">
這是一個(gè)基本的面板
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">面板標(biāo)題</h3>
</div>
<div class="panel-body">
這是一個(gè)基本的面板
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">面板標(biāo)題</h3>
</div>
<div class="panel-body">
這是一個(gè)基本的面板
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">面板標(biāo)題</h3>
</div>
<div class="panel-body">
這是一個(gè)基本的面板
</div>
</div>
</body>
</html>
結(jié)果如下所示：
帶表格的面板
為了在面板中創(chuàng)建一個(gè)無(wú)邊框的表格，我們可以在面板中使用 class .table。假設(shè)有個(gè) <div> 包含 .panel-body，我們可以向表格的頂部添加額外的邊框用來(lái)分隔。如果沒(méi)有包含 .panel-body 的 <div>，則組件會(huì)無(wú)中斷地從面板頭部移動(dòng)到表格。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 帶表格的面板</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板標(biāo)題</h3>
</div>
<div class="panel-body">
這是一個(gè)基本的面板
</div>
<table class="table">
<th>產(chǎn)品</th><th>價(jià)格 </th>
<tr><td>產(chǎn)品 A</td><td>200</td></tr>
<tr><td>產(chǎn)品 B</td><td>400</td></tr>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">面板標(biāo)題</div>
<table class="table">
<th>產(chǎn)品</th><th>價(jià)格 </th>
<tr><td>產(chǎn)品 A</td><td>200</td></tr>
<tr><td>產(chǎn)品 B</td><td>400</td></tr>
</table>
</div>
</body>
</html>
結(jié)果如下所示：
帶列表組的面板
我們可以在任何面板中包含列表組，通過(guò)在 <div> 元素中添加 .panel 和 .panel-default 類來(lái)創(chuàng)建面板，并在面板中添加列表組。您可以從 列表組 一章中學(xué)習(xí)如何創(chuàng)建列表組。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 帶列表組的面板</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">面板標(biāo)題</div>
<div class="panel-body">
<p>這是一個(gè)基本的面板內(nèi)容。這是一個(gè)基本的面板內(nèi)容。
這是一個(gè)基本的面板內(nèi)容。這是一個(gè)基本的面板內(nèi)容。
這是一個(gè)基本的面板內(nèi)容。這是一個(gè)基本的面板內(nèi)容。
這是一個(gè)基本的面板內(nèi)容。這是一個(gè)基本的面板內(nèi)容。
</p>
</div>
<ul class="list-group">
<li class="list-group-item">免費(fèi)域名注冊(cè)</li>
<li class="list-group-item">免費(fèi) Window 空間托管</li>
<li class="list-group-item">圖像的數(shù)量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
</div>
</body>
</html>
結(jié)果如下所示：
