آموزش bootstrap
قسمت دوم
قبل از معرفی و استفاده از کلاس ها ی (استایل ها) بوت استرپ کد زیر را جهت responsive کردن پروژه به صفحه مان اضافه می کنیم
<meta name="viewport" content="width=device-width, initial-scale=1">
. بخش width=device-width :
این بخش از کد جهت تنظیم عرض صفحه وب با عرض دستگاه های خروجی می باشد
این بخش از کد میزان زوم اولیه را هنگامی که صفحه برای اولین بار load می شود تنظیم میکند
کلاس
container
:
این کلاس برای ساخت باکس کلی سایت استفاده خواهد شد و تمام کد ها درون این کلاس قرار خواهند گرفت ؛ این کلاس باکسی وسط چین و با عرض 1170 پیکسل را ایجاد میکند
کلاس
container-fluid
:
این کلاس یک باکس با عرض فول اسکرین ایجاد میکند
کلاس
row
:
در بوت استرپ برای ایجاد یک سطر از کلاس row استفاده میشود و هر باکس یا row از صفحه مان را به 12 قسمت تقسیم می کند که این تقسیم بندی ها به وسیله کلاس .col-*-* مشخص می شود
که بسته به اینکه عرض دستگاه مان چقدر است و صفحه ما چند ستونه است می توانیم کلاس های col را تغییر دهیم
به مثال های زیر توجه کنید :
مثال اول :
مثال دوم :
برای مشاهده سایر مطالب آموزشی ازwww.afragraphic.ir دیدن کنید.
آموزش bootstrap
قسمت اول
Bootstrap چیست؟
بوت استرپ یکی از فریم ورک های طراحی صفحات وب هست . فریم ورک های طراحی وب شامل یکسری کد و استایل آماده است که طراح از آن برای ساخت قالب صفحه وب استفاده میکند.
استفاده از فریم ورک ها چه مزیت هایی دارد ؟
طریقه اضافه کردن framework بوت استرپ به برنامه Microsoft visual studio 2012
2. بر روی نام وب سایت کلیک راست کرده و گزینه Manage NuGet Package را انتخاب کنید
3. با نصب کرن Bootstrap css تمامی فایل های فریم ورک بوت استرپ به برنامه شما اضافه می شود
4. در تگ head صفحه وب خود چهار گزینه زیر را از پوشه Content و Script اضافه کنید
خوب به این ترتیب صفحه وب شما آماده استفاده از کدها و کلاس های Bootstrap می باشد
در قسمت های بعدی آموزش شروع به نوشتن سایتمان با استفاده از کلاس های موجود در بوت استرپ خواهیم کرد
ودر هر قسمت کلاس های کاربردی بوت استرپ را برای شما عزیزان معرفی میکنیم.
برای مشاهده سایر مطالب آموزشی ازwww.afragraphic.ir دیدن کنید.