آموزش کامل بوت استرپ Bootstrap – گام دوم
دسته‌ها : آموزش بوت استرپ ۰۹ شهریور ۱۳۹۵ - ۲۰:۴۳ امیر رضائی نظر ۶
خانه آموزش بوت استرپ آموزش کامل بوت استرپ Bootstrap – گام دوم

bootstrap-part-2

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

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

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

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

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

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

حتما بخوانید  آموزش کامل بوت استرپ Bootstrap - گام اول

در درون بسته دانلودی سه پوشه با نام 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 – گام دوم

  • علی در تاریخ شهریور ۱۰, ۱۳۹۵ گفت:

    بی صبرانه منتظر بقیه آموزش هستم

  • استار وب در تاریخ شهریور ۱۰, ۱۳۹۵ گفت:

    ممنون عالی بود فقط ای کاش فاصله زمانی برای بقیه آموزش ها کم باشه

    • امیر رضائی در تاریخ شهریور ۱۰, ۱۳۹۵ گفت:

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

  • سامان راعی در تاریخ شهریور ۱۰, ۱۳۹۵ گفت:

    سایتتون عالیه موفق باشید

  • نسیم در تاریخ شهریور ۱۰, ۱۳۹۵ گفت:

    آیا با بوت استرپ میشه یه قالب خوب ساخت؟ و اینکه آیا در آموزش قالبی هم طراحی میشه؟

    • امیر رضائی در تاریخ شهریور ۱۰, ۱۳۹۵ گفت:

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

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید