آموزش کامل بوت استرپ Bootstrap – گام دوم
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

bootstrap-part-2

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

اگر این آموزش رو مطالعه نکرده اید پیشنهاد می کنم تا قبل از شروع سری به آموزش جلسه اول بزنید

آموزش کامل بوت استرپ -گام اول (مقدمه ای برای بوت استرپ)

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

گام دوم : دانلود بوت استرپ و آموزش استفاده در پروژه ها

در ابتدای کار برای شروع ما نیاز به بسته فایل های بوت استرپ داریم که می توانید به راحتی از سایت مرجع getbootstrap.com و یا از لینک موجود در پایین همین صفحه دانلود نمائید سپس فایل دانلودی را که به صورت zip دریافت کردید از حالات فشرده خارج نمائید

در درون بسته دانلودی سه پوشه با نام css و fonts و js وجود دارد که بایستی پوشه ها را باز و از هر فایل یگی از پسوند های .min و یا معمولی را انتخاب و در تم خودتون آپلود و در هدر قالب خودتون زیر فراخوانی نمائید

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

فایل های بوت استرپ رو به شکل زیر در قالب خودتون و ما بین تگ <head> و </head> فراخوانی کنید

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js" ></script>

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

الان فایل های بوت استرپ در قالب ما به درستی فراخوانی شده و الان همه چیز برای معرفی بخش ها و اجزاء بوت استرپ و نحوه استفاده از آن درقالب آماده است در گام بعدی با معرفی اجزاء بوت استرپ بیشتر از این فریم ورک لذت خواهید برد

ما را از نظرات خودتون بی نصیب نکنید و مطمئن باشید در ادامه , ما را برای رسیدن به هدف خواهد رساند

 
دانلود نسخه ۳٫۳٫۷ سایت مرجع

امیر رضائی وبسایت


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

مطالب مشابه با این موضوع

6 پاسخ برای “آموزش کامل بوت استرپ Bootstrap – گام دوم

بالا رفتن