ایجاد صفحه وب با Bootstrap

تاریخ انتشار: 30 آذر 1394

تعداد بازدید: 11 نفر

در مطلب قبل با ساختار اولیه فایل های بوت استرپ آشنا شدید، اکنون زمان آن رسیده است که آن ها را به کار ببریم. در این بخش یک قالب ابتدایی بوت استرپ خواهیم ساخت که شامل تمام اجزایی که در ساختار فایل به آن اشاره کردیم میباشد. سه مرحله را برای ایجاد صفحه طی میکنیم و در پایان یک فایل html ایجاد میشود که پیام "hello world" را در مرورگر نمایش میدهد.

مرحله اول : ایجاد یک فایل html

ویرایشگر کد را باز کرده و یک فایل html جدید ایجاد کنید. در پنجره خالی کد زیر را تایپ نموده و آن را با عنوان basic.html ذخیره نمایید.

نکته : تگ را داخل

اضافه کنید تا بزرگنمایی لمسی و نمایش مناسب در دستگاه های موبایل را تضمین کند.

مرحله دوم : تبدیل فایل html به قالب بوت استرپ

برای انجام این کار فایل های css و جاوا اسکریپت مناسب را وارد کنید. جهت بهبود عملکرد صفحات وب بهتر است فایل های جاوا اسکریپت را در انتهای صفحه قبل از پایان تگ

اضافه کنید.

و در نهایت بعد از اضافه کردن فایل های css و جاوا اسکریپت بوت استرپ و کتابخانه مورد نیاز jquery قادر خواهید بود تا در طراحی سایت ها و برنامه ها از بوت استرپ استفاده نمایید.

مرحله سوم : ذخیره کردن فایل

اکنون فایل را با نام bootstrap-template.html روی کامپیوترتان ذخیره کنید.
جهت باز کردن فایل در مرورگر روی فایل مورد نظر دبل کلیک کنید. فایل در مرورگر پیش فرض شما باز خواهد شد.

مطلب بعدی -> سیستم grid در bootstarp

مطالب مرتبط

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

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

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.