yasharhi
پنج شنبه 22 بهمن 1394, 12:51 عصر
من میخواهم تصویر زیر رو کدنویسی کنم
http://uupload.ir/files/vqnt_e09.png
روش اول :
5 تا ردیف تعریف کنم بروش ریز :
<div class="row">
<div class="col-lg-2">
آیکن 1
</div>
<div class="col-lg-2">
آیکن 2
</div>
<div class="col-lg-2">
آیکن 3
</div>
<div class="col-lg-2">
آیکن 4
</div>
<div class="col-lg-2">
آیکن 5
</div>
</div>
روش دوم :
با استفاده از inline-block به روش زیر عمل کنم
CSS :
.floating-box {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
}
HTML :
<div class="floating-box"> ICON1 </div>
<div class="floating-box"> ICON2 </div>
<div class="floating-box"> ICON3 </div>
<div class="floating-box"> ICON4 </div>
<div class="floating-box"> ICON5 </div>
کدوم روش بهتره ؟ فریمورکم هم بوت استرپ هست
http://uupload.ir/files/vqnt_e09.png
روش اول :
5 تا ردیف تعریف کنم بروش ریز :
<div class="row">
<div class="col-lg-2">
آیکن 1
</div>
<div class="col-lg-2">
آیکن 2
</div>
<div class="col-lg-2">
آیکن 3
</div>
<div class="col-lg-2">
آیکن 4
</div>
<div class="col-lg-2">
آیکن 5
</div>
</div>
روش دوم :
با استفاده از inline-block به روش زیر عمل کنم
CSS :
.floating-box {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
}
HTML :
<div class="floating-box"> ICON1 </div>
<div class="floating-box"> ICON2 </div>
<div class="floating-box"> ICON3 </div>
<div class="floating-box"> ICON4 </div>
<div class="floating-box"> ICON5 </div>
کدوم روش بهتره ؟ فریمورکم هم بوت استرپ هست