وب مستران عزیز حالتون چطوره ؟ امیدوارم که خوب باشید.در این آموزش فرا می گیرید که با استفاده از تویتر بوت استرپ 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 کوچک شده، ارائه می دهد. درداخل فولدر فونت ها، چهار فایل فونت وجود دارند. این فایل فونت ها دارای ۲۰۰ آیکن از مجموعه ی Glyphicon Halfling می باشد.
نکته:
این اساسی ترین شکل از تویتر بوت استرپ برای استفاده ی سریع در هر پروژه ی وبی می باشد. لطفا توجه داشته باشید که همه ی پلاگین های جاوااسکریپت باید دارای jQuery باشند.
ایجاد اولین صفحه ی وب با تویتر بوت استرپ
تاکنون ساختار و اهداف فایل های بوت استرپ را درک کرده اید. اکنون زمان آن رسیده تا از بوت استرپ استفاده ی حقیقی داشته باشیم. در این بخش ما یک الگوی بوت استرپ پایه ایجاد خواهیم کرد که شامل مواردی می شود که در ساختار فایل ذکر کردیم. اجازه بدهید مراحل زیر را طی کنیم. در انتهای آموزش شما یک فایل HTML خواهید ساخت که پیام “Hello world” را روی مرورگر شما نمایش خواهد داد.
مرحله اول: ایجاد یک فایل HTML پایه
ویرایشگر مورد علاقه ی خود را باز کرده و یک فایل HTML جدید ایجاد کنید. با یک پنجره ی خالی آغاز کرده و کد زیر را تایپ کنید:
مثال:
مثال:
?
۱
<h1>Hello, World!</h1>
مرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTMLHTML
برای ساختن الگوی bootstrapped برای این فایل HTML، فقط فایل های مناسب Bootstrap CSS و JS را وارد کنید. شما باید فایل های جاوااسکریپت را در پایین صفحه، قبل از بستن برچسب ، برای بهبود اجرای صفحات وب وارد کنید.
مثال:
?
۱
<h1>Hello, World!</h1>
مرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTML
مرحله ی سوم: ذخیره ی فایل
اکنون فایل را روی دسک تاپ خود با عنوان “bootstrap-template.html” ذخیره کنید. نکته: اینکه ضمیمه ی “Html”مشخص شده است، مهم می باشد – برخی از ویرایشگرها مانند notepad آن را با عنوان “.txt”ذخیره می کنند. برای بازکردن فایل در مرورگر، فایل خود را مسیریابی کرده و سپس روی آن دابل کلیک کنید، که روی مرورگر پیش فرض شما باز خواهد شد. ( اگر باز نشد، مرورگر را باز کرده و فایل را به داخل آن درگ کنید(.
