How to use bootstrap panel

This chapter will explain Bootstrap panels (Panels).

#Panel component is used to insert DOM components into a box. (Recommended learning: Bootstrap video tutorial)

To create a basic panel, you only need to add class .panel and class .panel-default to the

element That’s it.

As shown in the following example:

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

Panel title

We can add panels in the following two ways Heading:

It's easy to add a heading container to a panel using the .panel-heading class.

Use

-

with .panel-title class to add predefined style titles.

The following examples demonstrate these two methods:

<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>

For more Bootstrap related technical articles, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to use bootstrap panel. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn