در ادامه ی مقاله ی قرار دادن عکس به جای hero unit این مقاله را داریم .
در مدل HTML ما (که آن را دانلود کردید) 3 ستون وجود دارد که محتوای سایت را در بر دارند .
در جوملای 3 هم اگر جعبه ها و ستون های کناره ها را برداریم چیزی شبیه به همین داریم .
عرض ستون ها به وسیله ی span[n] مشخص می شود .
چون سیسیتم شبکه بندی بوتسترپ 12 تایی هست ، پس جمع تعداد spanها همواره 12 است .
در مدل HTMLکه دانلود شد سه ستون برای محتوا وجود دارد که عرض آنها برابر است ،
بنابراین هر ستون باید کلاس span[4] را داشته باشد (12/3=4) برای اینکه این مطالب را
متوجه شوید باید سیستم شبکه بندی بوتسترپ را مطالعه کنید .
در ضمن می توان ترتیب قرار گرفتن ستون ها را عوض کنید مثلا span3 یا span6 .
عرضی که می خواهید برای ستون های خود قرار دهید به طراحی قالب شما بستگی دارد .ب
رای میدان های دید مختلف عرض span[n] متفاوت است . مینیمم و ماکزیمم span[n] در جدول زیر آمده است :
|
Span[n] |
Minimum width |
Maximum width |
|
Span1 |
42px |
70px |
|
Span2 |
104px |
170px |
|
Span3 |
166px |
270px |
|
Span4 |
228px |
370px |
|
Span5 |
290px |
470px |
|
Span6 |
352px |
570px |
|
Span7 |
414px |
670px |
|
Span8 |
476px |
770px |
|
Span9 |
538px |
870px |
|
Span10 |
600px |
970px |
|
Span11 |
662px |
1070px |
|
Span12 |
724px |
1170px |
تا کنون آنچه گفتیم مربوط به مربوط به مدل html بوتسترپ بود اما جالب است که بدانید عرض ستون های
محتوای جوملا 3 نیز به وسیله ی span ها مشخص می شود چون که جوملای 3 بوتسترپ را در خود جای داده است .
این کلاس های span در یک دایو با کلاس “row-fluid” قرار دارند . همچنین در جوملای 3 هم جون که از بوتسترپ
استفاده می کند تعداد sapnها برابر با 12 است .
کاری که ما می خواهیم اکنون انجام دهیم این است که در مدل html دو ستون در سمت چپ و راست اضافه کنیم .
و کلاس آنها را هم برابر با span3 قرار دهیم .بنا بر این ستون های محتوا باید کلاس sapn6 را داشته باشند .
این ساختار در جوملای 3 هم وجود دارد ، در کدهای خود تمام کد هایی که بین div با کلاس row هستند
را حذف کرده و با کدهای زیر جایگزین کنید .
Title
1. <div >
2. <div >
<h2>Sidebar left</h2>
<p>Sidebar content / modules</p>
</div><!-- span3 -->
<div >
<div >
<div >
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
<p><a href="#">View details »</a></p>
</div><!-- span6 -->
<div >
<h2>Heading</h2>
<p>
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget
quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus.
</p>
<p><a href="#">View details »</a></p>
</div><!-- span6 -->
</div><!-- span6 -->
</div><!-- span6 -->
<div >
<h2>Sidebar right</h2>
<p>Sidebar content / modules</p>
</div><!-- span3 -->
</div><!-- row -->
ادامه دارد
