[لوکال] دکمه bootstrap Tabs

[MReza 407]

با سلام و عرض خسته نباشید

 

من این دکمه رو برای ادیتور نسخه 4.1 نصب کردم. دکمه به خوبی نصب میشه. و قابل استفاده هم هست ولی به نظر مشکل CSS داره.

 

درصورت امکان راهنمایی کنید.

ممنون

[علی یوسفلاوی 1669]

سلام دوست عزیز

جهت استفاده از این افزونه باید از فریم ورک bootstrap استفاده بشه که در IPS استفاده نشده

میتونید با استفاده از Inspect element کلاس هایی که در این ابزار استفاده شده رو در custom.css قرار دهید ، bootstrap.css هم که از سایت رسمیش باید دریافت کنید.

[MReza 407]

ممنون از پاسخ

من کدهایی رو پیدا کردم و اضافه کردم ولی درنهایت تب‌ها و محتواها درست کار نمی‌کنن. امکانش هست خودتون یک تستی بزنید؟ این رو چگونه عملیاتیش باید کرد روی IPS؟

 

ممنون.

[علی یوسفلاوی 1669]

اگر امکانش هست لینک ابزار رو قرار بدید ، تست میکنم

[MReza 407]

لینک ابزار در اینجا هست. دکمه رو هم در لوکال تست کردم و لینکش اینجا هست.

شما دکمه رو دانلود کنید و این CSS های استخراجی که من استفاده کردم رو به کار ببرید.

.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.cke_editable {
    cursor: text;
}
.nav::before {
    display: table;
    content: " ";
}
.nav {
    list-style: none;
}
.nav-tabs > li {
    float: right;
    margin-bottom: -1px;
}
.nav > li {
    position: relative;
    display: block;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
}
.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}
.nav::after {
    clear: both;
  display: table;
content: " ";
}
.tab-content > .active {
    display: block;
}
.tab-content > .tab-pane {
    display: none;
}

من تا اینجا عمل کردم و الآن اینطوری شده:

 

الآن وقتی روی دکمه کلیک بشه اتفاقی نمی‌افتد.

[علی یوسفلاوی 1669]

احتمالا از js هم‌ استفاده شده ، چک میکنم خبر میدم

[MReza 407]

این دکمه از معدود دکمه‌هایی بود که نصب شد. منتهی قطعیه که نباید بدون مشکل باشه