سبد (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 از سایت مورد

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

نوشته شده توسط احسان عباسی
بازدید: 10733

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

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