telegram
responsive

کاربران عزیز در صورت رفع نشدن مشکل خود می توانید با تلگرام dparsaee@ یا اسکایپ iranresponsive با مدیریت در ارتباط باشید (July 24)

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش کامل و کاربردی بوتسترپ
#1
[تصویر:  427530_d0e0_2.jpg.2fe5d224488706ce04143d745819b046.jpg]

سلام.
خب اینبار در انجمن سئو (آیتی سئو) با سری آموزش کامل فریم ورک محبوب بوتسترپ در خدمتتان هستیم . 
قبل از هرچیزی برای شروع کار تعریفی کوتاه از بوتسترپ که در تاپیک دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
 آمده است را بخوانید تا با این فریم ورک بیشتر آشنا شوید ( برای افراد مبتدی) :

Bootstrap چیست؟
به بیان ساده بوتسترپ مجموعه ای از یک سری ابزار های رایگان که شامل کد های آماده برای طراحی صفحات وبمی باشد و این کد ها شامل : html , css , js میباشند که برای تولید و نمایش منوها ، فرم ها ، دکمه ها ، تب ها ، ستون ها و اسلایدر ها و سایر المان های مورد نیاز طراحی وب به کار میرود و روند و سرعت طراحی وب را با توجه به کد های آماده و از پیش نوشته شده ای که دارد ۲٫۳ برابر بیشتر میکند و مناسب برای برنامه نویسان و طراحانی است که وقت کافی برای کدنویسی و استایل نویسی ندارند . 
 
خب چرا باید از بوتسترپ استفاده کنیم ؟ 
استفاده آسان : هرکسی میتواند با داشتن دانش پایه در زبان های html و css به راحتی با این فریم ورک کار کند .
صرفه جویی در وقت : بوتسترپ با داشتن ابزار ها و عناصر آماده مانند منو ها ،تب بندی ها ، فرم ها ، اسلاید ها و ... مقداری زیادی را در وقت صرفه جویی میکند .
ویژِگی واکنش گرا (responsive) : یعنی نمایش منظم عناصر صفحه در دستگاه هایی با سایز مختلف مانند موبایل ، تبلت ، لپ تاب .
سازگاری با مرورگرها : بوتسترپ با تمامی مرورگرهای نسل جدید از جمله chorme , firefox , opera , safari , internet explorer سازگار است .
 
شروع کار
خب برای شروع کار شما باید یک آشنایی متوسط با زبان های html و css داشته باشید .
بوتسترپ را چگونه دریافت کنیم ؟
- دانلود بوتسترپ از سایت رسمی خودش => getbootstrap.com .
- استفاده از یوتسترپ cdn .
توضیح :
 دانلود بوتسترپ از سایت رسمی خودش : در این روش شما بعد از تایپ ادرس getbootstrap.com به سایت اصلی رفته و بوتسترپ را دانلود می کنید . و فایل آن را کپی کرده و لینک فایل های مورد نیاز برای عملکرد این فریم ورک را در صفحه قالب سایتتون اد میکنید .
استفاده از یوتسترپ cdn : در این روش دیگر نیازی به دانلود فایل نیست و فقط می توانید لینک های زیر را برای عملکرد فریم ورک در صفحه قالب سایتتون قرار بدید که باید دقت کنید که این روش موجب کندی سرعت لود صفحه می شود و پیشنهاد ما استفاده از روش اول هست .
<!-- فایل سی اس اس کامبایل شده : جاگزاری در هدر  -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- لینک کتابخانه جی کوئری : جاگزاری در هدر -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- فایل جاوااسکریپت کامبایل شده : جاگزاری در فوتر-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 
ایجاد اولین صفحه وب با بوتسترپ : 
اضافه کردن DOCTYPE HTML5 .
بوتسترپ برای استفاده و شناخت عناصر html5 و css3 نیاز به DOCTYPE HTML5 دارند .

کد php:
<!DOCTYPE html>
<
html lang="en">

 <
head>

 
  <meta charset="utf-8"

 </
head>

</
html


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

کد php:
<meta name="viewport" content="width=device-width, initial-scale=1"


خب رسیدیم به یک مثال ساده از یک صفحه بوتسترپ ساده :
کد php:
<!DOCTYPE html>
<
html lang="en">

<
head>

 <
title>صفحه بوتسترپ</title>

 <
meta charset="utf-8">

 <
meta name="viewport" content="width=device-width, initial-scale=1">

 <
link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

 <h1>اولین صفحه بوتسترپ ما</h1>

 <p>متن های توضیح صفحه</p> 

</div>



</body>

</html> 

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


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  معرفی 2 سایت کاربردی در زمینه کار با فریم ورک بوتسترپ amiralibk 0 68 2016/08/15، 10:04 PM
آخرین ارسال: amiralibk
  آموزش کامل jquery amiralibk 0 60 2016/08/15، 10:01 PM
آخرین ارسال: amiralibk
  آموزش کامل css amiralibk 0 68 2016/08/15، 09:59 PM
آخرین ارسال: amiralibk

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
پیام مدیر :
پیام مدیر اینجا قرار گیرد
کلیه حقوق برای انجمن وردپرس ایرانی محفوظ است
  • info@wpir.ir
  • admin@wpir.ir
قدرت گرفته از مای بی بی
SEO by PANGASH