آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

شروع کار با bootstrap

الگوی بوت استرپالگوی بوت استرپ

در این آموزش فرا می گیرید که با استفاده از تویتر بوت استرپ v3.0، یک الگوی بوت استرپ پایه ایجاد کنید.

توییتر بوت استرپتوییتر بوت استرپ

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

دانلود فایل های بوت استرپدانلود فایل های بوت استرپ

دو ورژن برای دانلود وجود دارند، فایل های compiled Bootstrap و Bootstrap source. دانلود کامپایل شامل ورژن کامپایل و کوچک شده ی ورژن فایل های CSS و javascript و همچنین آیکن هایی در فرمت فونت برای توسعه ی سریعتر و راحت تر وب می باشد، در حالیکه منبع دانلود دارای فایل های اصلی برای CSS و جاوااسکریپت به همراه یک کپی از داکیومنتها، است.

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

درک ساختار فایلدرک ساختار فایل

زمانی که compiled bootstrap دانلود شد، فولدر زیپ را باز کرده تا ساختار را ببینید. شما ساختار فایل و محتوای زیر را خواهید یافت:

مثال :

bootstrap/
|—— css/
|   |—— bootstrap.css
|   |—— bootstrap.min.css
|   |—— bootstrap-theme.css
|   |—— bootstrap-theme.min.css
|—— js/
|   |—— bootstrap.js
|   |—— bootstrap.min.js
|—— fonts/
|   |—— glyphicons-halflings-regular.eot
|   |—— glyphicons-halflings-regular.svg
|   |—— glyphicons-halflings-regular.ttf
|   |—— glyphicons-halflings-regular.woff 

                

همانطور که می بینید ورژن کامپایل شده از بوت استرپ، فایل های کامپایل شده ی CSS و JS را به همراه CSS و JS کوچک شده، ارائه می دهد. درداخل فولدر فونت ها، چهار فایل فونت وجود دارند. این فایل فونت ها دارای 200 آیکن از مجموعه ی Glyphicon Halfling می باشد.

نکته:

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

ایجاد اولین صفحه ی وب با تویتر بوت استرپایجاد اولین صفحه ی وب با تویتر بوت استرپ

تاکنون ساختار و اهداف فایل های بوت استرپ را درک کرده اید. اکنون زمان آن رسیده تا از بوت استرپ استفاده ی حقیقی داشته باشیم. در این بخش ما یک الگوی بوت استرپ پایه ایجاد خواهیم کرد که شامل مواردی می شود که در ساختار فایل ذکر کردیم. اجازه بدهید مراحل زیر را طی کنیم. در انتهای آموزش شما یک فایل HTML خواهید ساخت که پیام "Hello world" را روی مرورگر شما نمایش خواهد داد.

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

ویرایشگر مورد علاقه ی خود را باز کرده و یک فایل HTML جدید ایجاد کنید. با یک پنجره ی خالی آغاز کرده و کد زیر را تایپ کنید:

مثال:

مثال:

                    

Hello, World!

مرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTMLمرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTML

برای ساختن الگوی bootstrapped برای این فایل HTML، فقط فایل های مناسب Bootstrap CSS و JS را وارد کنید. شما باید فایل های جاوااسکریپت را در پایین صفحه، قبل از بستن برچسب ، برای بهبود اجرای صفحات وب وارد کنید.

مثال:

                    

Hello, World!

مرحله ی سوم: ذخیره ی فایلمرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTML

اکنون فایل را روی دسک تاپ خود با عنوان "bootstrap-template.html" ذخیره کنید. نکته: اینکه ضمیمه ی "Html"مشخص شده است، مهم می باشد – برخی از ویرایشگرها مانند notepad آن را با عنوان ".txt"ذخیره می کنند. برای بازکردن فایل در مرورگر، فایل خود را مسیریابی کرده و سپس روی آن دابل کلیک کنید، که روی مرورگر پیش فرض شما باز خواهد شد. ( اگر باز نشد، مرورگر را باز کرده و فایل را به داخل آن درگ کنید(.

  • 8170
  •    2372
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .