بوت استرپ یا bootstrap چیست ؟

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

مطالب پیشنهادی که به شما پیشنهاد داده میشود :

HTML چیست

CSS چیست

جاوا اسکریپت چیست

jquery چیست

بوت استرپ چیست ؟

bootstrap یک فریک ورک محبوب css میباشد که بین طراحان سایت بسیار پرطرفدار و کار کردن با آن بسیار ساده است.

بوت‌استرپ محبوب‌ترین پروژه در GitHub است که توسط NASA و MSNBC و دیگر سایتهای مطرح استفاده شده است.
با استفاده از اطلاعات رابط برنامه‌نویسی (API) در بوت استرپ می‌توان اجزاء واسط پیشرفته مانند scrollspy و
تکمیل کننده خودکار کلمات (typeahead) را بدون نیاز به نوشتن حتی یک خط کد جاوا اسکریپت ایجاد نمود.
بهترین نکته بوت استرپ این است که متن باز بوده و به صورت رایگان قابل دانلود و استفاده می‌باشد.

bootstrap چگونه ساخته شد؟

Bootstrap در ابتدا توسط مارک اتو و جاکوب تورنتون و در جهت ایجاد یک چارچوب ظاهری مشخص و یکسان
در ابزارهای توییتر طراحی و نوشته شد.

بوت استرپ از دل یکی از پروژه‌های تویتر، که برای توسعه آنالیز داخلی و ابزارهای مدیریت بود، بیرون آمد. در مقطعی از انجام پروژه از کتابخانه‌های مختلفی برای توسعه رابط کاربری استفاده شد، که منجر به عدم ثبات و زحمات زیاد برای نگهداری و توسعه شد. اولین گسترش پروژه تحت شرایط واقعی در زمان اولین Hackweek توییتر اتفاق افتاد. در آگوست سال ۲۰۱۱ توییتر اولین نسخه بوت‌استرپ را به صورت متن‌باز منتشر کرد.

شما به تنها چیزی که برای استفاده از این فریم ورک نیاز دارید، دانش ابتدایی درخصوص HTML و CSS می باشد.
دانستن جاوااسکریپت نیاز است ولی می تواند به شما در بعضی از فرمان ها و قسمت ها کمک کند، وگرنه
تمامی موارد مورد نیاز شما در کتابخانه بوت استرپ موجود می باشد.

مطلب مرتبط

CSS چیست ؟

دانلود و اتصال بوت استرپ

برای دانلود قایل های بوت استرپ میتونید به سایت منبع سر بزنید و فایل های مورد نیاز را از سایت مربطه بدون هیچ واسطی دانلود نمایید.

https://getbootstrap.com/2.3.2/getting-started.html

فایل های بوت استرپ شامل :

Bootstrap.css( یک فریم ورک css)
Bootstrap.js ( یک فریم ورک جاوااسکریپت و جیکوئری)
Glyphicons ( فونت ها)

ساختار صحیح HTML قالب bootstrap

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://code.jquery.com/jquery.js"></script>
  </body>
</html>

اتصال به بوت استرپ

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

منوی اصلی

دسترسی ها