در این فریم ورک ها گرید ها به خوبی طراحی شده اند و شبکه های یک پارچه ای را پدید آورده اند.این فریم ورک در کل دارای ۱۲ عدد span می باشد که برای سایز بندی مشخص شده است که آخرین و بزرگترین ان ها span12 می باشد و به صورت float:left همگی می باشند که البته در راست به چپ ان همه float:right شده است.

توضیحات : ساختار امروزه قالب ها براساس DIV می باشد و به هیچ وجه دیگر تیبل ها در ساختار اصلی قالب ها جایی ندارند. البته در HTML5 به جای DIV نیز پیشنهاد شده است بهتر است از تگ های تخصصی استفاده شود(هیچ فرقی از نظر کارایی با DIV ندارند) . این تگ ها ممکن است بعدا در سئو سایت توسط جستوجو گرها به کار گرفته شوند تا بتوانند مطلب اصلی سایت را به خوبی از مطالب فرعی تشخیص دهند.(هنوز این کار صورت نمی گیرد ).بهترین کار این است گه از قواعد کلی HTML5 پیروی نمایید. البته تمام آموزش های ما توسط DIV می باشد.)

پس به راحتی کافیست div ها را کنار هم گذاشته و نوع چیدمان خود را بر اساس سایز span ها بچینید.بهتر است هر ردیف از div ها را (مثلا در یک ردیف می خواهید ۳ div کنار یکدیگر قرار دهید) در div با کلاس row قرار دهید. مانند:

1
2
3
4
<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

دقت نمایید تا زمانی که جمع SPAN های عدد ۱۲ نشده همگی در یک سط قرار می گیرند و کنار هم چیده می شوند . اما اگر بیشتر از ۱۲ بود اضافی آن به ردیف بعدی می رود.

برای فاصله اندازی بین ستون ها شما می توانید از offset استفاده نمایید که عدد آن از ۱ تا ۴ متغییر است و به میزان دلخواه تغییر دهید.

همچنین می توانید به راحتی و بدون هیچ گونه مشکل از SPAN های تو در تو استفاده نمایید.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<div class="row-fluid">
  <div class="span12">
    متحرک ۱۲
    <div class="row-fluid">
      <div class="span6">
        متحرک ۶
        <div class="row-fluid">
          <div class="span6">متحرک ۶</div>
          <div class="span6">متحرک ۶</div>
        </div>
      </div>
      <div class="span6">متحرک ۶</div>
    </div>
  </div>
</div>

حال بیاید با اضافه کردن تنها دو تگ به تگ HEAD که از تگ های اصلی HTML می باشد قالب خود را RESPONSIVE نماییم:

1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">

برای حالت RESPONSIVE برای سایزهای مختلف صفحه نمایشگر ها اندازه های متفاوتی در نظر گرفته شده که همگی در فایل bootstrap-responsive.css به صورت زیر به نمایش در آمده است :

01
02
03
04
05
06
07
08
09
10
11
/* دسکتاپ‌های بزرگ */
@media (min-width: 1200px) { ... }
 
/* تبلت‌های پورتره تا تا منظره‌ای و دسکتاپ‌ها */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* تلفن‌های منظره‌ای تا تبلت‌های پورتره */
@media (max-width: 767px) { ... }
 
/* تلفن‌های منظره‌ای و پایین‌تر از آن */
@media (max-width: 480px) { ... }
 
·  نظر دهی 
· اشتراک گذاری :


برچسب ها   :
بوت ,










برای ارسال نظر ‎‏ ، همین امروز در وب سایت رایان طبیب ثبت نام کنید.

ورود


مقالات طراحی سایت

مقالات سئو و بهینه سازی سایت

مقالات علمی

کلیه حقوق متعلق به رایان طبیب می باشد.
طراحی سایت،بهینه سازی سایت،طراحی وب سایت،بهینه سازی وب سایت،سئو,صابر فضلی احمدی,Saber Fazli Ahmadi
طراحی سایت حرفه ای،طراحی وب،طراحی وب سايت،فروشگاه،بهینه سازی،طراحی وب سایت،سئو,صابر فضلی احمدی,Saber Fazli Ahmadi
طراحی و توسعه سایت رایان طبیب | 2018 ©