本章將講解 Bootstrap 面板(Panels)。面板組件用于把 DOM 組件插入到一個盒子中。創(chuàng)建一個基本的面板,只需要向
嘗試一下 »
結果如下所示:
面板標題我們可以通過以下兩種方式來添加面板標題:
使用.panel-headingclass 可以很簡單地向面板添加標題容器。to easily add a heading container to your panel.
使用帶有.panel-titleclass 的
下面的實例演示了這兩種方式:
嘗試一下 »
結果如下所示:
面板腳注我們可以在面板中添加腳注,只需要把按鈕或者副文本放在帶有 class.panel-footer的
嘗試一下 »
結果如下所示:
面版腳注不會從帶語境色彩的面板中繼承顏色和邊框,因為它不是前景中的內容。 帶語境色彩的面板使用語境狀態(tài)類panel-primary、panel-success、panel-info、panel-warning、panel-danger,來設置帶語境色彩的面板,實例如下:
嘗試一下 »
結果如下所示:
帶表格的面板為了在面板中創(chuàng)建一個無邊框的表格,我們可以在面板中使用 class.table。假設有個
下面的實例演示了這點:
嘗試一下 »
結果如下所示:
帶列表組的面板我們可以在任何面板中包含列表組,通過在
這是一個基本的面板內容。這是一個基本的面板內容。 這是一個基本的面板內容。這是一個基本的面板內容。 這是一個基本的面板內容。這是一個基本的面板內容。 這是一個基本的面板內容。這是一個基本的面板內容。
嘗試一下 »
結果如下所示:
原文地址:http://www.phplearn.cn/bootstrap/bootstrap-panels.html