آموزش بوت استرپ

بوت استرپ (bootstrap) چیست :

توییتر بوت استرپ محبوب ترین فریم ورک جهت طراحی وبسایت های واکنش گرا (Responsive) می باشد که توسطMark Otto و Jacob Thornton برای Twitter ساخته شد  و در سال ۲۰۱۱ در github به صورت OpenSource منتشر شد.
بوت استرپ فریم ورک طراحی سمت کاربر یا Front-end است که بر پایه HTML , CSS , JavaScript طراحی شده است. پس برای یادگیری بوت استرپ حتما باید آشنایی لازم با این موارد را داشته باشید.
بوت استرپ فریم ورکی ست که برای ساخت وبسایتهای واکنش گرا یا Responsive طراحی شده است. وبسایتهای واکنش گرا وبسایت هایی هستند که در دستگاه های مختلف مانند موبایل، کامپیوتر ، تبلت و … به درستی نمایش داده می شوند. واکنش گرا بودن وبسایت یکی از امتیازات مهم در بهینه سازی سایت به حساب می آید که موتورهای جستجویی چون گوگل نیز به آن توجه زیادی می کنند.
بوت استرپ در معنی لغوی به معنای زبانه پوتینی ست که به پا می کنیم. هنگامی که زبانه کفش یا پوتین را به سمت بالا می کشیم می توانیم راحت تر کفش را بپوشیم. استفاده از بوت استرپ کار طراحی سایت را ۸۰ درصد راحت تر و بهینه تر می کند.
یکی دیگر از مزیت های بوت استرپ پلاگین های متفاوت و استایل های از پیش تعریف شده آن است که با کمی تغییر در آن ها می توانیم جلوه های زیبایی را به وبسایت خود بدهیم و حجم کدنویسی را به طور چشمگیری کاهش دهیم.
همچنین سازگاری کامل بوت استرپ با مرورگرهای متفاوت یکی دیگر از عوامل محبوبیت آن در بین توسعه دهندگان و طراحان می باشد. این سازگاری حتی با مرورگر اینترنت اکسپلور در نسخه های پایین هم وجود دارد.

ابزارهای لازم برای استفاده از بوت استرپ :

برای استفاده از فریم ورک بوت استرپ و کدنویسی در آن به یک محیط ویرایشگر متن برای کدنویسی و یک مرورگر برای اجرای و نمایش نیاز دارید.
۱-  محیطی که برای کدنویسی و توسعه به شما پیشنهاد می کنم Brackets است که یک ویرایشگر حرفه ای و رایگان می باشد.

۲-  مرورگر یا Browser جهت نمایش کدهای نوشته شده که معروفترین آن ها موزیلا و کروم می باشند.

دانلود بوت استرپ :

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

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

هنگامی که وارد لینک بالا شدید سه گزینه برای شما نمایش داده می شود که شما بایستی از اولین گزینه که شامل فایل فشرده CSS و javascript بوت استرپ است اقدام به دریافت آن کنید.

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

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

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ ├── bootstrap-theme.min.css

│ └── bootstrap-theme.min.css.map

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

در پوشه CSS فایل های مربوط به استایل های CSS، در پوشه JS فایل های جاوااسکریپت  و در پوشه Fonts هم فونت های ساخته شده و رایگان بوت استرپ قرار دارد.
توجه کنید که بوت استرپ برای اجرا نیاز به کتابخانه جی کوئری یا Jquery دارد. آخرین نسخه Jquery را به پوشه JS اضافه کنید.

همجنین شما می توانید تمام فایل ها مورد نیاز را از طریق CDN به سند خود اضافه کنید. استفاده از CDN در ایران بنا به دلایلی توصیه نمی شود.

بسیار خب تا به اینجای کار تمام اقدامات لازم را انجام دادیم. حالا یک فایل HTML در ریشه ساخته و با نام index.html ذخیره می کنیم و موارد لازم را به آن اضافه میکنیم. توجه داشته باشید که بوت استرپ بر اساس آخرین نسخه HTML یعنی HTML5 ساخته شده است.

حالا سند  HTML را اجرا کرده تا hello world برای شما نمایش داده شود.