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

ریسپانسیو کردن سایت ها توسط بوت استرپ اصلا کار سختی نیست به شرطی که با ساختار لایه بندی( گرید بندی) بوت استرپ آشنا بشید. در این فیلم آموزشی به طور کامل و با مفاهیم گرید بندی و همچنین نحوه نمایش سایت در دستگاه های مختلف آشنا می شویم
- 3/2/1398 22/5/1400
ویدئو آموزش ریسپانسیو کردن سایت با بوت استرپ
مفهوم گرید بندی چیست؟
گرید بندی یا لایه بندی وب سایت یکی از مهمترین مراحل طراحی سایت ریسپانسیو می باشد. گرید بندی به نحوه چیده شدن بخش مختلف یک وب سایت در کنار هم گفته می شود. به عنوان مثال یک وب سایت ممکن است در حالت دسکتاپ دو ستونه باشد و در حالت تبلت و موبایل به صورت تک ستون نمایش داده شود. در این دوره آموزش بوت استرپ به طور کامل و به زبانی ساده با مثال های کاربردی با مفهوم گرید بندی بوت استرپ آشنا می شویم.
آشنایی با مفهوم کلاس container در گرید بندی بوت استرپ
اولین کلاسی که در بوت استرپ با آن باید آشنا شوید، کلاس container است. با ایجاد کردن یک div با کلاس container، محتوای اصلی وب سایت خود شامل، هدر، منو، بدنه اصلی سایت و فوتر در داخل آن قرار میگیرد. این کار باعث می شود تا محتوای وب سایت در وسط صفحه نمایش به شکل صحیح نمایش داده شود. در ویدئوی آموزشی به طور کامل و شفاف با این کلاس بیشتر آشنا می شوید.
مفهوم row در بوت استرپ
یکی از مفاهیم مهم در هنگام ریسپانسیو کردن یک قالب وب سایت، مفهوم سطر است. شما باید درک درستی از این مفهوم داشته باشید. هر بخشی از وب سایت شما از یک یا چندین سطر تشکیل شده باشد. در بوت استرپ یک کلاس با نام row تعریف شده است که باید محتوای هر بخش در داخل یک div با کلاس row قرار بگیرد. در ویدئوی آموزشی نکات مهم این بخش را توضیح داده یم.
استفاده از کلاس های col ریسپانسیو بوت استرپ
در بوت استرپ برای ریسپانسیو کردن وب سایت و نحوه نمایش ساختار سایت در دستگاه های مختلف 4 سایز مجزا تعریف شده است که به ترتیب مانیتورهای بزرگ، مانیتور های کوچک، تبلت و موبایل می باشد.
از طریق کلاس هایی که بوت استرپ در اختیار ما قرار می دهد می توانیم مشخص کنیم که نمایش قالب سایت در حالت های بالا به چه شکلی باشد. توضیح دادن این موارد به صورت متنی ممکن قابل درک نباشد و حتما ویدئو ی این بخش را به طور کامل و دقیق نگاه کنید تا بتوانید با مفهوم گرید بندی بوت استرپ آشنا بشید
ارسال نظر درباره این موضوع
https://code.jquery.com/ ورژنی که نیاز دارید از این سایت دانلود کنید