bootstrap面板怎么用

本章将讲解 Bootstrap 面板（Panels）。

面板组件用于把 DOM 组件插入到一个盒子中。（推荐学习：Bootstrap视频教程）

创建一个基本的面板，只需要向

元素添加 class .panel 和 class .panel-default 即可。

如下面的实例所示：

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

面板标题

我们可以通过以下两种方式来添加面板标题：

使用 .panel-heading class 可以很简单地向面板添加标题容器。

使用带有 .panel-title class 的

-

来添加预定义样式的标题。

下面的实例演示了这两种方式：

<div class="panel panel-default">
    <div class="panel-heading">
        不带 title 的面板标题
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>
 
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

Atas ialah kandungan terperinci bootstrap面板怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

bootstrap

sumber：php.cn

Artikel sebelumnya：bootstrap下拉列表怎么设置 Artikel seterusnya：bootstrap的三大核心是什么

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• win10 1809稳定吗
  2020-01-15 11:18:13
• win10安装.Net Framework 3.5 sp1
  2020-01-15 10:58:09
• win10怎么连接外国网络
  2020-01-15 10:34:39
• win10更新1909要多久
  2020-01-15 10:16:56
• win10更新要多久
  2020-09-14 10:58:08
• win10游戏闪退修复办法
  2020-01-15 09:58:52
• win10蓝牙耳机麦克风不能用
  2020-01-15 09:36:25
• win10要装杀毒软件么
  2020-01-15 09:28:34
• win10许可证过期怎么激活
  2020-01-15 09:22:01
• win10重置卡在键盘布局解决办法
  2020-01-15 09:09:20

Isu terkini

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...

daripada 2024-04-06 20:22:15

0

1

454

Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...

daripada 2024-04-06 12:53:11

0

1

376

Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

daripada 2024-04-05 08:45:39

0

1

3443

Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...

daripada 2024-04-04 22:16:18

0

1

1450

Topik-topik yang berkaitan

Lagi>

• Bagaimana untuk mencari lokasi telefon Huawei yang hilang
• Cara membuat klon WeChat pada telefon bimbit Huawei
• Apakah parameter marquee?
• Apa itu Weidian
• Bagaimana untuk menangani aksara Cina yang kacau dalam Linux
• Perbezaan antara wlan dan wifi
• js untuk memintas rentetan
• Apakah perisian ujian dalam talian prestasi komputer?