基礎面板非常簡單,就是一個div容器運用了“panel”樣式,產生一個具有邊框的文本顯示塊。由于“panel”不控制主題顏色,所以在“panel”的基礎上增加一個控制顏色的主題“panel-default”,另外在里面添加了一個“div.panel-body”來放置面板主體內容:
<div class="panel panel-default"> <div class="panel-body">我是一個基礎面板,帶有默認主題樣式風格</div> </div>
運行效果如下:
原理分析:
“panel“主要對邊框,間距和圓角做了一定的設置:
/*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;
}
我來試試:制作一個基礎面板
參考代碼如下:
<div class="panel panel-default">
<div class="panel-body">我是一個基礎面板,帶有默認主題樣式風格</div>
</div>
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報