%51 تخفیف، با کد Noruz98 روی تمام آموزش ها، بمناسبت سال نو ...!
زمان باقی مانده (آخرین فرصت ها)
سبد (0)

تبلیغات

کاربرد کلاس های bootstrap در جوملا

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

css نوشته شده اند . که در اینجا ما مثال هایی می آوریم . 

heading(سرفصل) جوملای 2.5 در قسمت مقالات ویژه از عنصر h1 استفاده می کند و این h1 در فایل های جوملا در یک div

قرار دارد که کلاس blog-featured در آن استفاده شده است . 

Title

<div class="blog-featured">
<h1>heading frontpage</h1>   
</div>

اما در جوملای 3 یک div با کلاس بوتسترپِ page-header اضافه شده است . 

Title

<div class="blog-featured">
<div class="page-header">    
<h1>heading frontpage</h1>        
</div>   
</div>

 css های bootstrap برای h1 و page-header بصورت زیر هستند : 

Title

/* bootstrap.css */
.page-header {
padding-bottom: 9px;
margin: 20px 0 30px;
border-bottom: 1px solid #eeeeee;
}

h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 1;
color: inherit;
text-rendering: optimizelegibility;
}

h1 {
font-size: 36px;
line-height: 40px;
}

/* bootstrap-extended.css */
.page-header {
margin: 2px 0px 10px 0px;
padding-bottom: 5px;
}

 

 margin ها و padding ها در فایل bootstrap.css  توسط فایل bootstrap-extnded.css همان طور که در زیر مشاهده می کنید

بازنویسی شده اند . bootstrap-extnded.css  یک فایل رسمی در جوملا است .

همان طور که گفتیم در جوملا سورس های اصلی bootstrap دچار تغییراتی شده اند  . کد های زیر آنچه گفتیم را نشان می دهند.

Title

/* bootstrap.css */
.page-header {
border-bottom: 1px solid #eeeeee;
}

h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-family: inherit;
font-weight: bold;
line-height: 1;
color: inherit;
text-rendering: optimizelegibility;
}

h1 {
font-size: 36px;
line-height: 40px;
}

/* bootstrap-extended.css */
.page-header {
margin: 2px 0px 10px 0px;
padding-bottom: 5px;
}

 

 اگر شما می خواهید کلاس page-header را تغییر دهید ، شما باید کدهای  css استفاده شده در دو فایل bootstrap.css و 

bootstrap-extended.css را در درون فایل template.css بازنویسی کرده  و تغییرات را در این فایل اعمال کنید . 

برای مثال اگر شما می خواهید از یک فونت کوچکتر(بعنوان مثال 24 پیکسل) برای h1  استفاده کنید  و همچنین border-bottom را

حذف کنید ، شما باید دستورات css زیر را در فایل template.css وارد کنید . 

Title

.page-header {
border-bottom: none;
}

h1 {
font-size: 24px;
line-height: 26px;
}

 

 ساختار کلاس های bootstrap در قالب های مرسوم که در مورد div ها با کلاس container نوشته شده اند : 

                                                                                                     div class="container"

 کلاس container ، عرضِ(width) قسمت محتوای قالب را مدیریت می کند . در فایل های سی اس اس ِ bootstrap شما دستورات 

زیر را برای کلاس container خواهید دید : 

Title

.container {
width: 940px;
}

.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}

.container:before,
.container:after {
display: table;
content: "";
line-height: 0;
}

.container:after {
clear: both;
}

/* bootstrap-respnsive.css */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

@media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px;
}
}

@media (max-width: 767px) {
.container {
width: auto;
}
}

کلاس container عرض وبسایت را برای اندازه های مختلف صفحه تعیین می کند . 

و این کار توسط مدیا کوئری ها (media query) انجام می شود . 

صفحه های مرورگر وقتی که ماکزیمم نباشند قابلیت تغییر اندازه دارند یعنی شما می توانید هر اندازه ای را برای آن تعیین کنید.

می بینید که صفحه ی مرورگر خودش مقداری فضا را اشغال می کند مثل اسکرول بار و قسمت وارد کردن آدرس اما ما به هر چیزی که

توسط مرورگر نشان داده می شود میدان دید(viewport) می گوییم  .  یعنی آنچه که مرورگر ازسایت مورد نظر نشان می دهد .

بنابراین منظور ازاندازه صفحه همان میدان دید (viewport)است . این بدین معنی است که کلاس container عرض میدان دید را تعیین 

می کند . 

 یک تلفن همراه را در نظر بگیرید که اندازه ی صفحه اش 320 پیکسل است . اگر مرورگر این تلفن را باز کنیم ، 

width دایو با کلاس container برابر با auto خواهد بود . بنابراین با این کار width(عرض) دایو ما برابر با عرض میدان دید (viewport)

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

در یک رایانه شخصی با اندازه صفحه ی 1600پیکسل، width(عرض) دایو با کلاس container برابر با 1170 پیکسل خواهد بود. 

یعنی همان میدان دید ما برابر با 1170 پیکسل خواهد بود . 

همچنین در این مورد دایو با کلاس container در وسط صفحه نمایش داده می شود چون که margin-left و margin-right

برابر با auto  هستند. 

در فایل های سی اس اس ِ bootstrap کلاس های span زیر تعریف شده اند : 

البته باید بدانید که دستور[class*="span"] یعنی همه ی کلاس هایی را که ابتدای نام آنها کلمه ی span است در نظر بگیر .

 

Title

/* bootstrap.css */
[class*="span"] {
float: left;
margin-left: 20px;
}

.span12 {
width: 940px;
}

.span11 {
width: 860px;
}

.span10 {
width: 780px;
}

.span9 {
width: 700px;
}

.span8 {
width: 620px;
}

.span7 {
width: 540px;
}

.span6 {
width: 460px;
}

.span5 {
width: 380px;
}

.span4 {
width: 300px;
}

.span3 {
width: 220px;
}

.span2 {
width: 140px;
}

.span1 {
width: 60px;
}

/* bootstrap-respnsive.css */
@media (min-width: 1200px) {
[class*="span"] {
float: left;
margin-left: 30px;
}

.span12 {
width: 1170px;
}

.span11 {
width: 1070px;
}

.span10 {
width: 970px;
}

.span9 {
width: 870px;
}

.span8 {
width: 770px;
}

.span7 {
width: 670px;
}

.span6 {
width: 570px;
}

.span5 {
width: 470px;
}

.span4 {
width: 370px;
}

.span3 {
width: 270px;
}

.span2 {
width: 170px;
}

.span1 {
width: 70px;
}
}

@media (min-width: 768px) and (max-width: 979px) {
[class*="span"] {
float: left;
margin-left: 20px;
}

.span12 {
width: 724px;
}

.span11 {
width: 662px;
}

.span10 {
width: 600px;
}

.span9 {
width: 538px;
}

.span8 {
width: 476px;
}

.span7 {
width: 414px;
}

.span6 {
width: 352px;
}

.span5 {
width: 290px;
}

.span4 {
width: 228px;
}

.span3 {
width: 166px;
}

.span2 {
width: 104px;
}

.span1 {
width: 42px;
}
}

@media (max-width: 767px) {
[class*="span"] {
float: none;
display: block;
width: auto;
margin-left: 0;
}

.span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

 همان طور که می بینید در دستورات بالا تعداد زیادی عنصر span تعریف شده است . در مدیا کوئری های مختلف مقدار width(عرض) ِ 

span ها تغییر می کند . 

بعنوان مثال width(عرض) ِ span12 به طور پیش فرض 940 پیکسل است . و در میدان های دید(viewport) مختلف مقادیر متفاوتی دارد :

  • در میدان دید از 1200 پیکسل به بالا : width:1170px
  • در میدان دید از 768 پیکسل تا 979 پیکسل : width:724px
  • در میدان دید کوچکتر مساوی 767 پیکسل  : width:100%

 

 در کدهای بالا دستور [class="span"] همانند این است که بگوییم class=span[n]  .

که [n] یک عدد باشد ، یعنی به برنامه می گوییم کلاس هایی که اول نام آنها کلمه ی span است و سپس یک عدد جلوی آن آمده را در نظر بگیر .

کاربرد span[n] در یک قالب برای کنترل کردن عرض ستون های کنار قالب بسیار مهم است . (ستون هاس سمت چپ یا راست برای ماژول ها) .

همچنین در کنترل کردن متن وسط ستون ها هم نقش دارد . 

دستور  [class="span"]  ، به تمام کلاس هایی که کلمه ی span دارند اشاره می کند . (از span1 تا span12 ) .

برای ساخت یک قالب در جوملای 3 کلاس های bootstrap زیر می توانند استفاده شوند : 

(کاربرد آنها در ادامه ی این آموزش ها خواهد آمد )  . 

  • div class="row"
  • div class="row-fluid"
  • div class="navigation"
  • div class="navbar"
  • div class="span3"
  • div class="span4"

 این بسیار مهم است که کاربرد کلاس ها و ساختار های bootstrap را یاد بگیرید . ما توصیه می کنیم که ابتدا یک مدل html از سایت مورد

نظر خود ایجاد کنید و با آن کار کنید . 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی