ایران ریسپانسیو

اولین ارائه دهنده خدمات ریسپانسیو در ایران




اگر دوست دارید سایت خود را در همه دستگاهها به صورت عالی ببینید بهتر است از خدمات ایران ریسپانسیو استفاده نمایید

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


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

Bootstrap چیست؟

به بیان ساده بوتسترپ مجموعه ای از یک سری ابزار های رایگان که شامل کد های آماده برای طراحی صفحات وب می باشد و این کد ها شامل : html , css , js می باشند که برای تولید و نمایش منوها ، فرم ها ، دکمه ها ، تب ها ، ستون ها و اسلایدر ها و سایر المان های مورد نیاز طراحی وب به کار میرود و روند و سرعت طراحی وب را با توجه به کد های آماده و از پیش نوشته شده ای که دارد ۲٫۳ برابر بیشتر میکند و مناسب برای برنامه نویسان و طراحانی است که وقت کافی برای کدنویسی و استایل نویسی ندارند .

427530_d0e0_2.jpg.2fe5d224488706ce04143d745819b046

بوتسترپ

 

خب چرا باید از بوتسترپ استفاده کنیم ؟

استفاده آسان : هرکسی میتواند با داشتن دانش پایه در زبان های 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 دارند .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

 

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

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

 

خب رسیدیم به یک مثال ساده از یک صفحه بوتسترپ ساده :

<!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>

 

خب این پست صرفا جهت آشنایی با بوتسترپ و نحوه اضاف کردن این فریم به یک صفحه وب بود .


اشتراک در شبکه های اجتماعی