سبد (0)

ستون های محتوا در 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><!-- 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 -->

 

ادامه دارد

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