Bootstrap面板（Panels）的簡單實現(xiàn)代碼

第Bootstrap面板（Panels）的簡單實現(xiàn)代碼本文實例為大家分享了Bootstrap面板展示的具體代碼，供大家參考，具體內(nèi)容如下

一、基本的面板

html代碼

!DOCTYPEhtml

html

head

titleBootstraplist-group/title

metacharset="utf-8"

linkrel="stylesheet"href="css/bootstrap.min.css"rel="externalnofollow"

style

body{

margin-top:30px;

font-family:'楷體';

font-size:18px;

/style

/head

body

div

!--基本的面板--

div

ahref="#"rel="externalnofollow"rel="externalnofollow"

h3這是一個基本的面板/h3

p只需要向div元素添加class.panel和class.panel-default/p

/div

!--標題面板--

div

div不帶title的面板標題/div

div面板內(nèi)容/div

/div

div

div

h3帶title的面板標題/h3

/div

div面板內(nèi)容/div

/div

!--面板腳注--

div

ahref="#"rel="externalnofollow"rel="externalnofollow"

h3這是一個基本的面板/h3

div.panelpanel-footer面板腳注/div

/div

!--帶語境色彩的面板--

div

divh3面板標題/h3/div

div這是一個基本的面板/div

/div

div

divh3面板標題/h3/div

div這是一個基本的面板/div

/div

div

divh3面板標題/h3/div

div這是一個基本的面板/div

/div

/div

scriptsrc="js/jquery.min.js"/script

scriptsrc="js/bootstrap.min.js"/script

/body

/html

效果圖

二、帶表格的面板

為了在面板中創(chuàng)建一個無邊框的表格，我們可以在面板中使用class.table。假設有個div包含.panel-body，我們可以向表格的頂部添加額外的邊框用來分隔。如果沒有包含.panel-body的div，則組件會無中斷地從面板頭部移動到表格。

div

div

h3帶title的面板標題/h3

/div

div面板內(nèi)容/div

table

th姓名/th

th年齡/th

/tr

td李白/td

td25/td

/tr

td李白/td

td25/td

/tr

/table

/div

效果圖

三、帶列表組的面板

我們可以在任何面板中包含列表組，通過在div元素中添加.panel和.panel-default類來創(chuàng)建面板，并在面板中添加列表組。

div

div

h3面板標題/h3

/div

div這是一個面板。這是一個面板。這是一個面板。這是一個面板。這是一個面板。

這是一個面板。這是一個面板。這是一個面板。這是一個面板。

這是一個面板。這是一個面板。這是一個面板。這是一個面板。

/div

li唐代詩人李白/li

li唐代詩人李白/li

li