CDP Cards
This is a title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In sunt, quo totam aliquam praesentium ducimus tempore sapiente quia nulla optio? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero laboriosam laborum exercitationem autem commodi voluptas odio aliquid ut velit doloremque minima, quaerat dolores, corporis consequuntur totam nam id veniam maxime.
CDP Label Badge
This is Label Badge Custom
CDP Border-radius
Border-radius classes
Border Radius 的圓度支援 1px 至 24px
Add classes to an element to easily round its corners.
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
11px
12px
13px
14px
15px
16px
17px
18px
19px
20px
21px
22px
23px
24px
CDP Tooltip
Tooltip Example
Source Code
<!-- HTML to write -->
<a href="javascript:void(0);" class="ml-1" data-toggle="tooltip" data-placement="top" title='<div class="text-left"> title title title </div>' data-html="true" data-original-title='<div class="text-left"> title title title </div>'>
<span class="text-muted cdp-text__muted">
<i class="fas fa-info-circle"></i>
</span>
</a>
<!-- Javascript to write -->
// Tooltip Init 初始化
$('[data-toggle="tooltip"]').tooltip();
CDP Tabbar
Tabbar Example Full
Home
Profile
Contact
About
More
Source Code
<!-- HTML to write -->
<div class="row m-0">
<div class="col-md-12 p-0 mb__20">
<ul class="nav nav-pills cdp-tabbar__wrapper" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item text-center">
<a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Home
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" id="contact-tab" data-toggle="pill" href="#contact" role="tab" aria-controls="contact" aria-selected="true">Contact
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" id="about-tab" data-toggle="pill" href="#about" role="tab" aria-controls="about" aria-selected="true">About
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" id="more-tab" data-toggle="pill" href="#more" role="tab" aria-controls="more" aria-selected="true">More
</a>
</li>
</ul>
</div>
</a>
<div class="col-md-12 p-0 mb__20">
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="card m-0 border-0 cdp-shadow-light-sm p__20 b__radius-5">
<h1>Home</h1>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="card m-0 border-0 cdp-shadow-light-sm p__20 b__radius-5">
</h1>Profile</h1>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="card m-0 border-0 cdp-shadow-light-sm p__20 b__radius-5">
</h1>Contact</h1>
</div>
</div>
<div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
<div class="card m-0 border-0 cdp-shadow-light-sm p__20 b__radius-5">
</h1>About</h1>
</div>
</div>
<div class="tab-pane fade" id="more" role="tabpanel" aria-labelledby="more-tab">
<div class="card m-0 border-0 cdp-shadow-light-sm p__20 b__radius-5">
</h1>More</h1>
</div>
</div>
</div>
</div>
</div>