استارت‌آپ و کارآفرینی

آشنایی با Bootstrap

اگر بخواهیم بوت استرپ را در یک جمله کوتاه معرفی کنیم ،فریمورکی است که برای توسعه ظاهر (Front-end) وب سایت ها از آن استفاده می‌شود. Bootstrap یکی از پروژه‌های توییتر بود، ماجرا از این قرار بود که توسعه دهندگان Front-end توییتر در مقعطی از زمان در یک پروژه به پیچیدگی بزرگی رسیدند که نمیشد ان را کنترل کرد. آنها به این نتیجه رسیدند استفاده از فریمورک واحد می‌تواند کارها را سریعتر و پروسه توسعه را تسهیل کند. در سال ۲۰۱۱ اولین نسخه از این فریمورک به دنیا معرفی شد و به صورت متن‌باز در گیت‌هاب قرار گرفت.

تا حالا وب سایت‌های خیلی بزرگی این فریمورک استفاده کرده‌اند و در حال حاضر برپا هستند و کار می‌کنند. می‌تونید از این لینک نمونه‌های خارق العاده‌ای رو مشاهده کنید. حال برسیم به خود بوت استرپ و کاربردهایی که دارد. تا اینجای کار شمای کلی از این فریمورک را دریافت کرده‌اید و می‌دانید که به چه دردی می‌خورد. یکی از کاربرد‌های اصلی آن کمک کردن برای طراحی یک وب سایت واکنشگرا (responsiv) هست، اگر در هنگام کار با این فریمورک قواعد و قوانین ساده‌ای را رعایت کنید، می‌توانید یک وب سایت کامل وسپانسیو داشته باشید.

اگر سری به وب سایت رسمی Bootstrap بزنید کلیاتی در مورد فریمورک در اختیار شما قرار می‌دهد. در قدم اول برای اینکه بتوانید از این فریمورک استفاده کنید، کافی است که Source Code آنرا به رایگان دریافت کنید. در این روش تمامی فایل‌های مورد نیاز در اختیار شما قرار می‌گیرد که مانند زیر دسته‌بندی شده‌اند.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── 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

همانگونه که می‌بینید هنگامیکه Source Code بوت استرپ را دریافت کنید با سه پوشه مواجه می‌شوید که شامل فایل‌های استایل، فایل‌های جاوااسکریپت و فونت‌های بوت استرپ است. شما می‌توانید نسبت به نیازهای پروژه فایل‌ها را شخصی سازی کنید  و به شکل زیر آنها را در پروژه خود فراخوانی کنید. کد زیر، نمونه یک صفحه ساده وب است که فایل‌های بوت استرپ در آن فراخوانی شده‌اند.

<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

اگر می‌خواهید فایل های بوت استرپ را از طریق CDN فراخوانی کنید می‌توانید به صورت عمل کنید:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

در پایان مطلب هم خدمت دوستان عرض کنم که به دلیل Source Code بودن پروژه، نسخه RTL اون هم موجود هست و خیلی راحت می‌تونید از گیت‌هاب دریافت کنید و یا اگر علاقه‌مند به استفاده از CDN هستید، می‌تونید به نسخه RTL بوت استرپ دسترسی داشته باشید.

6 نظرات
  1. مهدی می گوید

    استفاده از CDN شده بلای جون برنامه نویسهای ایرانی!
    الان اینی که معرفی کردید برای من باز نمیشه 🙁

    1. پیام صادری می گوید

      متاسفانه درسته، استفاده از CDN برای ما ایرانی‌ها گاهی اوقات موجب دردسر میشه.
      خوشبختانه امین لینک‌های گیت‌هاب رو توی متن گذاشته و خوشبختانه فعلا با گیت‌هاب مشکلی نداریم

      1. مهدی می گوید

        آدرس نسخه rtl روی cloudflare.com هست که اینجا باز نمیشه!

        1. میلاد نکوفر می گوید

          شما می‌تونید برای فریم ورک هایی که روی گیت هاب قرار دارن از rawgit استفاده کنید.

  2. محمد مهدی ملائیان می گوید

    ممنون.خیلی خوب بود.موفق و پیروز باشید.

  3. علی می گوید

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.