ستون های محتوا در bootstrap

در ادامه ی مقاله ی قرار دادن عکس به جای 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>

<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>

<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>

<div >

<h2>Sidebar right</h2>

<p>Sidebar content / modules</p>

</div>

</div>

ادامه دارد

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

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