آموزش ASP.NET MVC 5 : ایجاد طراحی ریسپانسیو با بوت استرپ
آموزش ASP.NET MVC 5 : ایجاد طراحی ریسپانسیو با بوت استرپ
متن:
توی این ویدیو توضیحات مختصری رو درباره ی اینکه چطوری بتونید به سرعت کارهایی رو برای طراحی نهایی تون با استفاده از فریم ورک بوت استرپ انجام بدید می گیم بوت استرپ یک فریم ورک عامه پسند برای طراحی پایانی شماست که در توییتر رشد پیدا کرده و به عنوان بوت استرپ فریم ورک شناخته میشه امروزه اونو با نام بوت استرپ می شناسند در قلب بوت استرپ یک سیستم شبکه ای دوازده ستونی هستش که ما از اونبرای سازماندهی لایه هامون برای کلاینت ها با دستگاه های مختلف استفاده می کنیم
ما برای هر ستون در هر ردیف از نام های کلاس متفاوتی استفاده می کنیم تا مشخص بشه که چند تا از دوازده ستون موجود رو برای محدوده ی هر بخش استفاده کنیمبه طور معمول ما تعداد ستون ها ی موجودمون رو تا ۱۲ ایجاد میکنیم اما برای مثال در اینجا در تصویر ردیف سوم اگه ما محتویاتی رو برای ستون چهارم پایانی نداشتیم می تونیم اونا رو حذف کنیم بدون اینکه رو چیدمان هشت ستون اول تاثیری بذاریم معمولا کاری که ما میکنیم اینکه مشخص کنیم که یک لایه برای سایز مشخص هست برای مثال کامپیوتر های رومیزی اونوقت ستون ها به صورت اتوماتیک به یک لایه عمودی تجزیه می شوند برای دستگاه های کوچیکتر ما میتونیم این کار رو برای سی اس اس کلاس های اضافی لغو کنیم اولین کاری که میخوام بکنم اینکه که به ویوی ایندکس برم و این بخش جام بوترون رو حذف کنم جام بوترون خودش به تنهایی یک کلاس بوت استرپه و بعد به طور معمول از این قسمت چک نویس شروع میکنم یک UI ایجاد میکنیم که یه کمی شبه به اون چیزی که ما از ATM انتظار داشتیم هستش ما فقط چندتا گزینه که با دکمه های بزرگ قابل دسترس هستن اگه ما بخوایم ستون هایی رو برای لایه های شبکه ای مشخص کنیم با یککلاس ROW شروع میکنیم خب پس اینو اینجا میذاریم بعد من میخوام دوتا ستون اضافه کنم که هر کدوم نصف عرض قابل دسترس رو اشغال میکنن مشخص کردن اینکه گسترشون به اندازه ۶ ستون از ۱۲ ستون هستش این کار رو می تونیم با استفاده از COL-md-6 انجام بدیم md برای دستگاه ها با سایز متوسط و بزرگتر هستش خب بذارید یک نگاه سر سری به تعاریف این کلاس ها بندازیم در سایت get.bootstrap.com اگه در navigation اصلی برم و به دنبال اون روی گزینه های گرید برم یک جدول دم دست در مورد توضیحات کلاس ها به من میده همینطور که می دونید ما از col-md-6 استفاده کردیم این به این معنی که گسترش باید به اندازه نصف ۱۲ ستون موجود باشه در دستگاه هایی که عرض پورت نمایش شون مساوی یا بزرگتر ۹۹۲ px هستش پایین تر از این مقدار تجزیه میشه یا به لایه ی عمودی تبدیل میشه همینطور که در اینجا هم گفته حالا دوباره بر میگردیم به مثالمون در داخل این ستون اول div من میخوام چندتا دکمه اضافه کنم و اینها رو به عنوان انکرتگها اضافه میکنم و بعد چند تا استایل دکمه از بوت استرپ رو ایجاد میکنم میتونید اطلاعات بیشتری رو در مورد این استایل ها در قسمت button توی صفحه ای که مشاهده کردیم ببینید ویژگی href رو بعدا تکمیل میکنید وقتی که عملکرد رو برای گزینه ها تایین کردید اول بیس کلاس دکمه رو که btn هست اضافه میکنیم بعد btn-primery به اون رنگ رو اضافه میکنیم و btn-large برای اینکه اون رو یه مقدار بزرگتر کنه و btn-block رو برای این اضافه می کنیم تا عنصر رو به عنوان یک بلوک در نظر بگیره این باعث گسترده شدنش به اندازه کل عرض میشه این دکمه ی اول برای گزینه ی خروج هستش خب بذارید ببینیم که چی داریم ما یک دکمه تنها در این بالا داریم که من نمیخوام توی این قسمت توی نویگیشن بارم قرار بگیره خب پس بذارید درستش کنیم یکی از چیزهایی که بوت استرپ در اون به شما کمک زیادی نمی کنه ایجاد فاصله ی عمودی بین عنصر ها هست خب به استایل میرم کلاس مورد نظر خودم رو ایجاد میکنم حالا margin رو به قسمت بالای هر کدوم از element هام اضافه کنم نمیخوام این کار رو در بوت استرپ سی اس اس انجام بدم چون ممکنه بخوام اونو گاهی اوقات ارتقاء بدم و کاملا عوضش کنم اون وقت تغییراتی رو که اضافه کردم از دست میدم خب ما کلاس margin-top-toeny رو رو ی هر کدوم از ستون ها اجرا میکنیم بنابرین وقتی که اونها بر روی حالت نمایش متحرک تجزیه میشن فاصله ای بین ستون ها ایجاد میشه یکی دیگه از کارهایی که میتونم برای جذاب تر شدنش انجام بدم اینکه که اضافه کردن چیزی به نام گلیپ هستش در سایت بوت استرپ اگه من کمپوننت رو از قسمت بالا انتخاب کنم اولین چیزی که میبینم یک آرایه از آیکن های گلیپ هست همه ی اینها با بوت استرپ ایجاد شده پایین هر کدوم از آیکن هانام کلاس سی اس اس هستش که من می تونم از اون استفاده کنم و در جای دیگه اجرا کنم و باعث بشم که در صفحه نمایش داده بشه این کلاس هابرای اجرا شدن روی هر عنصر نیستن کاری که ما میخوام بکنیم اینکه که یک محدوده ی خالی ایجاد کنیم وبعد به اون کلاس آیکون گلیپ رو می دیم و بعد از اونکلاسی که ما برای هر کدوم ازگلیپ ها مون میخوایم رو میدیم برای دکمه خروج من میخوام glyphicon-circle-arrow-down رو انتخاب کنم refresh میکنیم و نگاهی میندازیم حالا یه مقدار بهتر به نظر میرسه خب حالابیاید یه مقدار آپشن به اون اضافه کنیم من میخوام از روی این دو تا کپی بردارم یه مقداری از لبه ها بهش فاصله میدم و بعد دو تا آپشن دیگه میخوام بهش اضافه کنم که اینها در خودشون گلیپ فلش و علامت سوال رو در خودشون دارن بعد من کل این ستون رو و html های داخل رو کپی میکنم و ۳ تا گزینه در سمت راست اونها اضافه میکنم این دستور پرینت خواهد بود بعد ۳ تا از گلیپ آیکون هایی که ممکنه در اونجا مناسب باشن رو اضافه می کنم در قسمت اول پرینت و در قست بعد انتقال و در آخر هم ذخیره میکنیم و یک نگاهی به اون بندازیم آخرین کاری که میخوایم بکنیم اینکه که یک تصویر هدر اضافه کنم با این کار ها با اضافه کردن یک ردیف در فایل لایه مون انجام میدیم درست بالای قسمت بادی هستش اگه از فایل تمرین استفاده میکنید در بخش دومی تصویر هدر وجود داره در داخل پوشه ی تصویر و از اونجایی که من پوشه ی تصویر ندارم هنوز می تونم همین پوشه رو به داخل پوشه ی محتوا بکشم و وقتی در اینجا قرار گرفت میتونم اینلوگو رو به داخل این div بکشم علاوه بر اینها من میخوام کلاس img-responsive رو اضافه کنم تا به عنوان مقیاسیبرای دستگاه های مختلف قرارش بدیم با margin های خودکار برای اینکه وسط چین بشه وقتی که REfresh میکنم و اندازش رو کوچیک میکنم دکمه ها بالای همدیگه قرار می گیرن این فقط برای اینکه نمایش رو بهتر کنه این به شما یه ابزار تنظیم اولیه ای برای کار با بوت استرپ میده خب بعد از اینکه وقت تون رو یه مقدار صرف تمرین کردین در بخش بعدی در مورد مدل ها و دیتا ها هست به ما ملحق بشین وقتی که همراه با فایل تمرین پیش میرید می تونید کارها رو در پوشه فینال که در فصل دوم قرار داره مشاهده کنید
نوشته آموزش ASP.NET MVC 5 : ایجاد طراحی ریسپانسیو با بوت استرپ اولین بار در تک آموز پدیدار شد.
مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
تک آموز