آموزش طراحی سایت ریسپانسیو با بوت استرپ

shape
shape
shape
shape
shape
shape
shape
shape

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

shape main-pic

تلفن همراه

0912 144 23 55

تلفن شرکت

021 2222 8880

تلفن همراه

0912 823 826 3

خدمات ما

امتیاز کاربران بوت استرپ یکی از کتابخانه های و فریم ورک های HTML ، CSS و جاوا اسکریپت برای طراحی سایت های موبایلی و ریسپانسیو می باشد که توسط این فریم ورک به راحتی می توانید طراحی سایت ریسپانسیو خود را انجام دهید.

طراحی سایت با بوت استرپ بسیار ساده است و کافی است نحوه کد زنی در آن را یاد بگیرید.

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

در این مقاله به شما نحوه طراحی سایت با بوت استرپ را آموزش خواهم داد که البته برای انجام لازم است دانش کد زنی HTML و CSS را داشته باشید.

در مرحله اول لازم است فایل های مربوط به Bootstrap را از وب سایت اصلی دانلود نمایید که برای انجام این کار لازم است به وب سایت http://getbootstrap.

com مراجعه نموده و بر روی کلید Download Bootstrap کلیک نموده و دوباره بر روی Download Bootstrap کلیک نمایید.

فایل فشرده ای در اختیار شما قرار داده می شود که شامل سه فلدر css ، fonts و js می باشد.

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

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

برای شروع می بایست این سه فایل را در صفحه وب سایت خود اضافه نمایید: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.

bootstrapcdn.

com/bootstrap/3.

3.

5/css/bootstrap.

min.

css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.

bootstrapcdn.

com/bootstrap/3.

3.

5/css/bootstrap-theme.

min.

css"> <script src="https://ajax.

googleapis.

com/ajax/libs/jquery/1.

11.

3/jquery.

min.

js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.

bootstrapcdn.

com/bootstrap/3.

3.

5/js/bootstrap.

min.

js"></script> آدرس های موجود در بخش بالا (href و src) را می بایست با آدرس های فایل های خود تغییر دهید.

البته فراموش ننمایید که اضافه نمودن کتابخانه jquery برای اجرای Bootstrap لازم و ضروری می باشد.

هم اکنون قالب شما آماده اجرای کدهای بوت استرپ می باشد و می توانید طراحی سایت خود را آغاز نمایید.

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

کد زنی html در بوت استرپ را می بایست با آداب خاصی انجام دهید که در بخش زیر دستورالعمل های برنامه نویسی آموزش داده خواهد شد.

در صورتی که قصد راه اندازی وب سایت تمام صفحه را دارید می بایست دایو اصلی با کلاس container-fluid و برای وب سایت با عرض ثابت می بایست از کلاس container استفاده نمایید.

سیستم صفحه بندی بوت استرپ به صورت ریسپانسیو می باشد و که به صورت یک صفحه 12 ستونه در نظر گرفته می شود که کلاس های CSS از قبل تعریف شده ای برای صفحه بندی را در خود دارد.

کلاس های .

col-xs- ، .

col-sm- ، .

col-md- ، .

col-lg- برای تعریف ستون های صفحه در سایزهای مختلف صفحه مورد استفاده قرار می گیرند که col-lg برای سایزهای حدودا 1170 پیکسل، col-md برای سایزهای حدودا 970 ، col-sm برای سایزهای حدودا 750 و col-xs برای سایزهای بسیار کوچک صفحه مانند موبایل می باشد.

جدول مربوط به ستونبندی های از پیش تعریف شده: نحوه استفاده از .

col-md-* به این صورت می باشد که شما به جای ستاره می بایست از تعداد ستون هایی که دایو مورد نظر شما در صورتی که شما صفحه را به 12 ستون تقسیم نمایید قصد دارید ستون مورد نظر پر نمایید را می بایست تکمیل نمایید.

به عنوان مثال به کد زیر دقت نمایید: که در کد بالا col-md-8 به معنی آن است که این دایو در سایز متوسط 970px از 12 ستون 8 ستون و col-md-4 در همین سایز از 12 ستون 4 ستون را اشغال می نماید.

برای آنکه کد بالا را برای موبایل تنظیم نمایید می بایست کد مربوط به موبایل را نیز برای موبایل به آن اضافه نمایید: که در کد بالا col-xs-12 به معنای آن است که در موبایل این دایو کل ردیف 12 تایی را اشغال می نماید و col-xs-6 به آن معناست که این دایو 6 ستون از ردیف 12 را پر می نماید.

 

image
shape
shape
shape
shape
shape
shape
shape

ارتباط با ما

image

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

جهت مشاوره و استعلام قیمت میتوانید از طریق شماره تلفن های زیر به صورت مستقیم با ما در ارتباط باشید

نمونه کارها

shape
shape
shape
shape

انواع خدمات

image
map
image
shape
shape
shape
shape
واتساپ
واتساپ
سوالی دارید؟ در خدمتیم.