溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

bootstrap面板的使用方法

發(fā)布時間：2020-09-21 11:47:22 來源：億速云 閱讀：134 作者：小新 欄目：web開發(fā)

小編給大家分享一下bootstrap面板的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

面板組件用于把 DOM 組件插入到一個盒子中。

創(chuàng)建一個基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。

如下面的實例所示：

<div class="panel panel-default">
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>

面板標(biāo)題

我們可以通過以下兩種方式來添加面板標(biāo)題：

使用 .panel-heading class 可以很簡單地向面板添加標(biāo)題容器。

使用帶有 .panel-title class 的 <h2>-<h7> 來添加預(yù)定義樣式的標(biāo)題。

下面的實例演示了這兩種方式：

<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">
        <h4 class="panel-title">
            帶有 title 的面板標(biāo)題
        </h4>
    </div>
    <div class="panel-body">
        面板內(nèi)容
    </div>
</div>

看完了這篇文章，相信你對bootstrap面板的使用方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手