کاربرد کلاس های 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 از سایت مورد
نظر خود ایجاد کنید و با آن کار کنید .
- نوشته شده توسط احسان عباسی
- بازدید: 10708