ستون بندی صفحه نمایش مطلب در برنامه ساز اندروید

برای ستون بندی بخش نمایش مطلب در اندروید وبلاگ لازم است کمی آشنایی نسبت به کد های html و بوتسترپ داشته باشید و اگر این آشنایی را ندارید لازم است کمی خلاقیت داشته باشید تا بتوانید به نحو احسن از تمامی امکانات برنامه استفاده کنید.

برای 3 ستونه کردن نمایش محتوا می بایست بدین صورت عمل کنید.

از بخش ادیتور متن دکمه منبع (سمت راست - بالا ) را بزنید.

ادیتور برنامه ساز اندروید

هر بخش که میخواهید به صورت سه ستونه نمایش دهد این کد را قرار دهید.

کد

<div class="row">
	<div class="col-xs-4">متن یا عکس ستون اول.</div>

	<div class="col-xs-4">متن یا عکس ستون دوم.</div>

	<div class="col-xs-4">متن یا عکس ستون سوم.</div>
</div>


متن یا عکس ستون اول.
متن یا عکس ستون دوم.
متن یا عکس ستون سوم.

پیش نمایش

متن یا عکس ستون اول.
متن یا عکس ستون دوم.
متن یا عکس ستون سوم.

 


برای قرار دادن گالری تصاویر سه ستونه نیز به این صورت عمل کنید.

کد

<div class="row">
<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/a.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/b.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/c.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/d.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/e.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/f.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/g.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/h.jpg" /></div>
</div>

<div class="col-xs-4">
<div class="thumbnail"><img alt="  عنوان تصویر" src="http://androidweblog.ir/uploads/files/demo/i.jpg" /></div>
</div>
</div>



پیش نمایش

برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید
برنامه ساز اندروید

در مورد col-xs-n که n میتواند از 1 تا 12 متغیر باشد.

در صورتی که بخواهید این گالری به صورت 4 ستونه باشد بایست به جای تمامی col-xs-4 مقدار col-xs-3 را قرار دهید.

ارسال نظر