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

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

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

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.