基礎(chǔ)面板非常簡單，就是一個div容器運用了“panel”樣式，產(chǎn)生一個具有邊框的文本顯示塊。由于“panel”不控制主題顏色，所以在“panel”的基礎(chǔ)上增加一個控制顏色的主題“panel-default”，另外在里面添加了一個“div.panel-body”來放置面板主體內(nèi)容：

<div class="panel panel-default">
    <div class="panel-body">我是一個基礎(chǔ)面板，帶有默認(rèn)主題樣式風(fēng)格</div>
</div>

運行效果如下：

原理分析：

“panel“主要對邊框，間距和圓角做了一定的設(shè)置：

/*bootstrap.css文件第4995行～第5005行*/
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}