معرفی، دانلود و اجرای بوت استرپ Bootstrap

علیرضا حاتمی نیا 1395/4/29 2702

معرفی، دانلود و اجرای بوت استرپ Bootstrap

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

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

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

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

http://brackets.io


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

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

http://getbootstrap.com/getting-started/#download


هنگامی که وارد لینک بالا شدید سه گزینه برای شما نمایش داده می شود که شما بایستی از اولین گزینه که شامل فایل فشرده 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 در ایران بنا به دلایلی توصیه نمی شود ولی اگر مایل به استفاده به روش CDN هستید می توانید از طریق زیر اقدام کنید:

<!— Latest compiled and minified CSS —>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!— Optional theme —>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!— Latest compiled and minified JavaScript —>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 

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

 

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

دانلود PDF قسمت اول آموزش بوت استرپ Bootstrap

دانلود ویدیو قسمت اول آموزش بوت استرپ

قسمت بعدی