Real Time Web Analytics کانال تلگرام لرن روت

Bootstrap

آموزش Bootstrap - درس اول

نویسنده : محمد مظفری
تاریخ انتشار:
18:37:19 1394-07-13
bootstrap, responsive

فریم ورک Bootstrap چیست ، چه قابلیت هایی دارد، راههای دانلود آن کدامند و چگونگی پیاده سازی آن. لرن روت در این مقاله به بررسی کامل مبانی Bootstrap پرداخته است. لطفا همراه ما باشید.

Bootstrap چیست؟

  • Bootstrap محبوبترین فریم ورک HTML, CSS, JavaScript برای سایت های Responsive می باشد و بیشتر برای سایتهایی که می خواهند روی موبایل ها استفاده شوند کاربرد دارد.
  • Bootstrap دارای کدهای آماده CSS و JavaScript می باشد که به کمک آنها می توان به راحتی انواع قالب ها را طراحی کرد.
  • Bootstrap خود شامل انواع منوها، دکمه ها، اسلایدر برای عکس، آیکون ها، فرم ها و ... می باشد.

تاریخچه Bootstrap؟

Bootstrap توسط مارک اوتو (Mark Otto) و جیکوب تورنتن (Jacob Thornton) برای شرکت توئیتر (Twitter) ساخته شد و در آگوست سال 2011 به عنوان یک محصول متن باز (Open Source) در GitHub منتشر شد.

در سال 2014 ، Bootstrap برترین پروژه در سایت GitHub بوده است.

چرا از Bootstrap استفاده کنیم؟

  • آسانی کار: هرکسی با هر اندازه دانشی از HTML و CSS می تواند این فریم ورک را یاد بگیرد و از آن استفاده کند.
  • ویژگی Responsive داشتن: مناسب برای انواع صفحه های نمایش (کامپیوتر، تبلت، موبایل و ...)
  • رویکردی موبایل گونه (قایلبت استفاده برای موبایل): در Bootstrap3 رویکردی موبایل گونه به عنوان یکی از مباحث اصلی مطرح می شود.
  • مناسب برای انواع مرورگرها: Bootstrap می تواند بر روی همه مرورگرها به خوبی اجرا شود.

دانلود Bootstrap

شما می توانید برای دانلود Bootstrap از دو راه استفاده کنید؟

1- دانلود از سایت getbootstrap.com

http://getbootstrap.com


2- استفاده از CDN

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

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

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

ایجاد اولین سایت خود به وسیله Bootstrap

ابتدا در محیط سایت خود کد HTML5 را قرار می دهید؛ سپس شبه کد زیر را به آن اضافه می کنیم؛

((HTML 5))

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1">

سپس باید کتابخانه ها و کلاسهای Bootstrap را به هدر سایت اضافه کنیم؛

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
Learn Route
</body>
</html>

 

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

برچسب ها:
مقالات مشابه