آموزش کامل و ساده ساختار گرید بندی بوت استرپ برای ساخت سایت ریسپانسیو

جلسه سوم - ساختار گرید بندی بوت استرپ

ریسپانسیو کردن سایت ها توسط بوت استرپ اصلا کار سختی نیست به شرطی که با ساختار لایه بندی( گرید بندی) بوت استرپ آشنا بشید. در این فیلم آموزشی به طور کامل و با مفاهیم گرید بندی و همچنین نحوه نمایش سایت در دستگاه های مختلف آشنا می شویم

ویدئو آموزش ریسپانسیو کردن سایت با بوت استرپ

مفهوم گرید بندی چیست؟

طراحی سایت ریسپانسیو با بوت استرپ

گرید بندی یا لایه بندی وب سایت یکی از مهمترین مراحل طراحی سایت ریسپانسیو می باشد. گرید بندی به نحوه چیده شدن بخش مختلف یک وب سایت در کنار هم گفته می شود. به عنوان مثال یک وب سایت ممکن است در حالت دسکتاپ دو ستونه باشد و در حالت تبلت و موبایل به صورت تک ستون نمایش داده شود. در این دوره آموزش بوت استرپ به طور کامل و به زبانی ساده با مثال های کاربردی با مفهوم گرید بندی بوت استرپ آشنا می شویم.

آشنایی با مفهوم کلاس container در گرید بندی بوت استرپ

اولین کلاسی که در بوت استرپ با آن باید آشنا شوید، کلاس container است. با ایجاد کردن یک div با کلاس container، محتوای اصلی وب سایت خود شامل، هدر، منو، بدنه اصلی سایت و فوتر در داخل آن قرار میگیرد. این کار باعث می شود تا محتوای وب سایت در وسط صفحه نمایش به شکل صحیح نمایش داده شود. در ویدئوی آموزشی به طور کامل و شفاف با این کلاس بیشتر آشنا می شوید.

مفهوم row در بوت استرپ

یکی از مفاهیم مهم در هنگام ریسپانسیو کردن یک قالب وب سایت، مفهوم سطر است. شما باید درک درستی از این مفهوم داشته باشید. هر بخشی از وب سایت شما از یک یا چندین سطر تشکیل شده باشد. در بوت استرپ یک کلاس با نام row تعریف شده است که باید محتوای هر بخش در داخل یک div با کلاس row قرار بگیرد. در ویدئوی آموزشی نکات مهم این بخش را توضیح داده یم.

استفاده از کلاس های col ریسپانسیو بوت استرپ

سایز های گرید در بوت استرپ

در بوت استرپ برای ریسپانسیو کردن وب سایت و نحوه نمایش ساختار سایت در دستگاه های مختلف 4 سایز مجزا تعریف شده است که به ترتیب مانیتورهای بزرگ، مانیتور های کوچک، تبلت و موبایل می باشد.

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

 


ارسال نظر درباره این موضوع

  • حامد
    بسیار عالی ، در عین سادگی بسیار بسیار مفید بود
  • ali
    خدا خیرت بده خیلی درگیر این مسله بودم
  • محمدجواد
    با سلام فایل jquery.min.jsمیشه لینکشو بزارید
    • https://code.jquery.com/ ورژنی که نیاز دارید از این سایت دانلود کنید

  • علی دلیر
    واقعا ممنون بهترین آموزش بود زنده بشید
  • علیرضا
    واقعا بهترین آموزشیه که تو عمرم دیدم . واقعا دستتون درد نکنه

ارسال نظر درباره این موضوع