Bootstrap Panels, Two Layers, Three Layers, Colorful Layers Panels

What Will I Learn?

• PANELS
• DEFAULT PANEL
• TWO LAYERS PANEL
• THREE LAYERS PANEL
• COLERFUL PANEL
• ADD GROUP BOX IN PANEL BOX
• ADD TABLE ON PANEL BOX

Requirements

Notepad++

Difficulty

• Intermediate

PANELS

Under this header we going to touch on panel box which be came with Bootstrap.

DEFAULT PANEL

This part we going to see how to use default panel wihch be came with Bootstrap.
Varsayılan panel adından anlaşılacağı üzere en temel ve basit amaç için yapılmış paneldir.
Default panel is most primary panel to use basic logic.
For example to use necessary code on below:

<div class="panel panel-default">
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit sit facilis hic nostrum illum eius iste obcaecati alias at aliquid voluptates cupiditate, consequuntur, laborum magnam, et, id vel blanditiis natus.
    </div>
</div>

As we can see highlighted part we make a panel box with use "div" tag. Than for main part we create an other "div" tag to make body part, than we put on example text under the post tag.
Panel will be like on bellow:

Ass we can see panel has been created succesful

TWO LAYERS PANEL

Under this header we going to see how to create panel with two layers.
With two layers panel we can create top and middle side different than each other. We can imagine this is like "header" and "body" logic.
For example to use this necessary code on bellow:

<div class="panel panel-default">
    <div class="panel-heading">Hello</div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorem, ullam minus possimus maiores molestias deleniti dignissimos repudiandae beatae quas est tempora eligendi nam tempore alias consequatur commodi necessitatibus illum.
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">World</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.
    </div>
</div>

A highlighted place as we can see to create top line we wrote panel and heading.
The code should be give ressult like on bellow:

As we can see on picture now Boxes are created by two layers. With this technical we can give the box header by easly

THREE LAYERS PANEL

Previous header we learn, how to use panel by two layers. And now we going to learn how to do this by three layers.

Actualy Three layers panels are using by to make useful boxes.With this style we can made a panel with Header,content and footer part much better.
For example to use necassary code on bellow:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Hello World!</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.
    </div>
    <div class="panel-footer">
        All rights reserved.
    </div>
</div>

As you can see three highlighted part. Respectively first we create heading than body than footer.
Three layers panel look like should be on bellow:

As we can see on picture panel has been created by three layers. Also footer and heading is look much evident.

COLERFUL PANEL

Under this header we going to learn. How to colorize panel by before lesson what we learn with coler code.
When we use this technic we have to change default code in "div" tag
Example to use this necassary code on bellow:

<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">Hello World!</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus magni nihil quasi repellendus, quibusdam autem voluptas delectus facere. Repudiandae placeat numquam ipsum aliquid ipsa accusantium quidem reprehenderit! Quaerat, laborum. Aperiam.
    </div>
</div>

As we can see the part of highlighted in place of default we wrote danger in this way we got show on screen by red. And also we can use danger code which part is most important.
With this code we will see result as bellow:

Now default grey panel changed by red color. Also we can use all panel code, what we learn in other lesson.

ADD GROUP BOX IN PANEL BOX

Under this header we going to do put box inside box. It is means we going to do separate inside the panel with group box.
With this technic we can put inside panel box , different group box. Let me explain with example.
Example to use this necassary code on bellow:

<div class="panel panel-default">
    <div class="panel-heading">Hello World</div>
    <div class="panel-body">
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione temporibus accusamus eveniet quo non nulla corporis ex assumenda odit iusto atque vel totam, modi dignissimos laudantium inventore. Omnis, corporis voluptatibus.</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Go to school.</li>
        <li class="list-group-item">Go home.</li>
        <li class="list-group-item">Cook.</li>
        <li class="list-group-item">Enter the Internet.</li>
    </ul>
</div>

As we can see on highlighted part before than finish "div" tag we put "ul" and add our data by "li" tag li means list.
The code sems to be on bellow:

As we can see on picture now we use two different structure in same time. Like this multiple use we can create a lot interactive structure.

ADD TABLE ON PANEL BOX

Under this header we going to see how to add table on panel box.
Previous lessons we learn on table part all detail of table formats. If we know table features we'll not diffuculty.
Example to use this necassary code on bellow:

<div class="panel panel-default">
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ipsa quo iste iure corrupti reiciendis voluptatibus dolores rerum maxime, qui esse odio at quasi quam, non excepturi dolorem, voluptate perferendis!</p>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>//</th>
                <th>Education status</th>
                <th>City</th>
                <th>Mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>University</td>
                <td>New York</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Master</td>
                <td>Boston</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>High school</td>
                <td>New York</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
</div>

As you can see highlighted part, we apply usage style of other part. To do this we add table tag before than close "div" tag.
with this code we will see result as bellow

As it seems we use panel element and table element together. It means we use multiple use. I just use standart table on this part if you wish you can use all table features which you wish.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---