نمادها

شما اینجا هستید

آموزش Bootstrap جلسه سوم (container)

در خدمت شما هستیم با آموزش Bootstrap جلسه سوم (container)

آموزش Bootstrap جلسه سوم (container) از سری آموزش های تک قسمتی است

سلام برنامه در این جلسه درباره بدنه اصلی بوت استرپ یعنی container صحبت می کند

برای رسپانسیو کردن سایت با بوت استرپ باید همه تگ ها داخل کلاس container قرار گیرند

container دو کلاس متفاوت دارد که یکی فول اسکرین است(container-fluid) و دیگری با حاشیه است

که خود container است و از دو طرف به اندازه ای مشخص فاصله می گیرد

 

کلاس container

در بوت استرپ شما قالب کلی را به ۲ صورت میتوانید تعریف کنید که container یکی از آنهاست.
شما یک فضای اصلی داید که کل محتوای قالب در آن نوشته میشود و آن container است.
کلاس container برای شما از طرفین یک حاشیه ایجاد میکند.

این کلاس کاملا بای بوت استرپ نوشته شده است و صفحه شما را برای تمام دستگاه ها واکنشگرا میکند.

 

کلاس container-fluid

این کلاس هم مشابه کلاس container است با این تفاوت که اگر از این کلاس استفاده کنید کل صفحه را در بر میگیرد.
در حالت container گفتیم که حاشیه ای از طرفین ایجاد میشود ولی در container-fluid این اتفاق نمی افتد.
اگر بخواهیم به صورت کلی بگوییم در container-fluid طول صفحه ۱۰۰% است.

 

شما در استفاده از این ۲ کلاس هیچ محدودیتی ندارید و میتوانید بیش از یکبار از آن استفاده کنید.
بیشتر از این ۲ کلاس برای تراز بندی صفحه استفاده میشود و کاربرد اصلی آن است.
توجه داشته باشید این دوکلاس تنها زمانی کار میکنند که شما بوت استرپ را کاملا روی سایت خود اجرا کرده باشید.

 

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

آموزش Bootstrap جلسه دوم (نصب)

آموزش Bootstrap جلسه چهارم (col/row)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (هنوز امتیازی داده نشده است)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه سوم (container): نوع فایل:mp4 حجم فایل:19.19 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.