آموزش مقدماتی راه اندازی Twitter Bootstrap

آموزش مقدماتی راه اندازی Twitter Bootstrap

افراد زیادی در دنیای طراحی و توسعه، درباره Twitter Bootstrap مقاله می نویسند. بعضی از آنها می گویند افرادی که توسعه می دهند، ولی دانش طراحی آنها در حد صفر است ‘توییتر بوت استرپ’  یک لطف می باشد، درحالی که دیگران آن را یک نعمت برای توسعه دهندگان می دانند. به هر حــــال، هر چه که هست، ساده تر و سریعتر است.

bootstrap-site

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

‘توییتر بوت استرپ’ یک فریم ورک سی اس اس می باشد که در طراحی برنامه های کاربردی وب کمک می کند. یکی از راحترین فریم ورک های موجود در این صنعت می باشد. این فرض که شما هیچ دانشی در طراحی ندارید و تمام چیزی که می خواهید نوشتن مقداری HTML برای راه اندازی Bootstrap. به طور خلاصه، ‘Twitter Bootstrap’ برای شما یک شیوه نامه CSS آماده دارد که از قبل نوشته شده است، دارای پشتیبانی داخلی از jQuery و همچنین دارای ابزارهای محبوب جاواسکریپت می باشد. خیلی عالـــیه، اینطور نیست؟ شما دسته ای از ابزارهای محبوب در اختیار دارید. تنها کاری که شما باید انجام بدهید، قرار دادن آنها در مکان مناسب می باشد.

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

Bootstrap یکی از محبوبترین فریم ورک ها برای HTML, CSS , JS که در حال توسعه می باشد، اولین پروژه ی موبایل در وب. طراحی شده برای همه، در همه جا. بوت ستراپ روند کار توسعه دهندگان را سریع و آسانتر کرده است. برای افرادی با تمام سطوح مهارت، برای تمام اشکال دستگاه ها و در تمام ابعاد پروژه ها ساخته شده است.

 

 دانلود Bootstrap


 

نسخه فعلی (۳.۲.۰) بوت ستراپ چند راه آسان برای شروع سریع دارد، هر یک در سطح مهارت های مختلف مورد استفاده قرار می گیرد.

برای دانلود، ابتدا وارد بخش دانلود Bootstrap شوید، در سایت بوت ستراپ در قسمت بخش دانلود، سه ستون از سورس کد بوت ستراپ وجود دارد که با توجه به اهداف خود اقدام به دانلود یکی از آتها می کنیم:

  1. Bootstrap – این بسته حاوی ‘سی اس اس’ ، ‘جاوا اسکریپت’ و ‘فونت’ هــای  از قبل بهینه و کامپایل شده است و لازم نیست که شما اقدام به کامپایل کنید.
  2. Source code – این بسته حاوی فایل های ‘Less’، ‘جاوا اسکریپت’و ‘فونت’ ها همراه با مستندات بوت استراپ می باشد. توجه داشته باشید این بسته به یک کامپایلر Less و برخی تنظیمات نیازمند است.
  3.  Sass –  این بسته فایلهای Less را به Sass تبدیل می کند تا بتوان در ‘Rails’ و ‘Compass’ قرار داد.

 

Bootstrap CDN

افرادی در MaxCDN هستند که از فایل های مربوط به بوت استراپ، مثل ‘CSS’ و ‘JavaScript’ را در CDN قرار می دهند و از آنها پشتیبانی می کنند. فقط از این سه لینک Bootstrap CDN استفاده کنید.

 

نصب کردن Bootstrap با ابزار Bower

راه اندازی و مدیریت فایل های Less، CSS، JavaScript و فونت ها با استفاده از Bower

توجه داشته اگر قصد دارید Bootstrap را با این ابزار نصب کنید و آشنایی با ابزار Bower ندارید، توصیه می کنم آغاز به کار با Bower را مطالعه کنید، یا مستندات Bower را مشاهده کنید.

ابتدا باید ابزار Node.js را دانلود و نصب کنید.

Bower برای اجرا نیاز به Node.js و Git دارد.

بعد از نصب، حال نوبت دانلود بوت ستراپ از طریق Bower می باشد، در این مثال، فرض شده است که می خواهیم در دسکتاپ خود نصب کنیم با استفاده از خط فرمان ویندوز (cmd) یا ابزار محبوب Git وارد آدرس دسکتاپ خود شوید، من در این مثال از Git استفاده کرده ام، و بعد دستور بالا را وارد می کنیم.

git-bower-bootstrap

همانطور که ملاحضه می کنید، بوت استراپ به راحتی نصب شد، اگر به دسکتاپ خود را مشاهده کنید، می بینید که پوشه ای به نام ‘bower_components’ ایجاد شده است.

 

ساختار فایل ها در Bootstrap


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

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

 بوت استراپ از پیش کامپایل شده

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

 

این فرم از bootstrap به صورت کامپایل شده و یکی از اساسی ترین نوع ها برای شروع در پروژه می باشد. این نوع فایل های ‘CSS’، ‘JS’ کامپایل شده تحویل می دهد بعنی ابتدا فایل به صورت ‘bootstrap.css’ می باشد، وقتی کامپایل شد تبدیل به ‘bootstrap.min.css’ می شود. فونت های Glyphicons نیز گنجانده شده است.

 

سورس کد Bootstrap

وقتی از بخش دانلود که قبلا توضیح دادم، ‘Bootstrap source code’ را دانلود می کنید، این نوع از بوت استراپ حاوی فایل های کامپایل شده از جمله ‘CSS’، ‘JavaScript’ و فونت ها، همراه بـــــا سورس های ‘Less’، ‘JavaScript’ و مستندات می باشد. که ساختار به صورت زیر می باشد:

پوشه های less/ و js/ و fonts/ سورس کدها برای CSS و JS و فونت های ما هستند. پوشه ی dist/ حاوی همه ی چیزهایی است که در ساختار قبلی که توضیح دادم می باشد. docs/ حاوی مستندات بوت استراپ می باشد که البته از خود سایت بوت استراپ هم قابل مشاهده است. بقیه فایلها مربوط به تنظیمات می باشد.

 

کامپایل کردن CSS و JavaScript


بوت استراپ برای ساخت سیستم خودش از Grunt استفاده می کند، با متد مناسب برای کار با فریم ورک. اینکه چگونه کد خود را کامپایل، یا تست کنیم.

اگر آشنایی با ابزار Grunt را ندارید، توصیه می کنم آغاز به کار با Grunt را مطالعه کنید، یا مستندات Grunt را مشاهده کنید.

نصب Grunt

برای نصب grunt، ابتدا باید Node.js را دانلود و نصب کنید (برای شامل npm هم می باشد). npm مخفف Node Packaged Modules می باشد که راحترین روش برای مدیریت نیازمندی های برنامه می باشد. نصب grunt را شروع می کنیم!

خط فرمان (cmd) خود را اجرا کنید:

grunt-cli را به صورت کلی (globally) با دستور npm install -g grunt-cli نصب کنید.

grunt-install

به ریشه ی دایرکتوری بوت ستراپ رفته /bootstrap/ آنگاه دستور npm install را اجرا کنید، npm به دنبال فایل package.json می گردد تا به صورت خودکار نیازمندی های برنامه را که در فایل package.json لیست شده اند را نصب کند.

npm-install

وقتی تمام مراحل قبلی را انجام دادید، حال می توانید دیگر دستورات Grunt را در خط فرمان وارد کنید.

 

دستورات قابل استفاده Grunt

grunt dist (فقط سی اس اس و جاواسکریپت ها را کامپایل می کند)

فایل های کامپایل شده و بهینه شده درون دایرکتوری /dist/ قرار می گیرد. به عنوان یک کاربر بوت استراپ، این دستوری است که معمولا به آن نیاز دارید.

grunt watch (دیده بان)

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

grunt test (اجرای تست ها)

JSHint را اجرا می کند و QUnit را با PhantomJS اجرا می کند.

grunt (در واقع همه چیز را بنا و اجرا می کند)

CSS و JavaScript هــا را کامپایل و بهینه می کند،

 

این آموزش از مستندات سایت Bootstrap برگرفته شده است.