اضافه کردن بوت استرپ به صفحه

بوت استرپ (Bootstrap) یک فریمورک سمت کاربر رایگان است که برای توسعه ی آسان تر و سریعتر صفحات وب استفاده می شود. در این فصل روش های افزودن بوت استرپ را فرا خواهیم گرفت.


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

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

طراحی واکنش گرای وب چیست ؟

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


تاریخچه ی بوت استرپ

بوت استرپ به وسیله Mark Otto و Jacob Thornton در توییتر توسعه پیدا کرد و سپس در آگوست 2011 در گیت هاپ به صورت کد باز منتشر شد.


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

مزایای بوت استرپ :

  •  استفاده ی آسان : هرکسی با یک دانش پایه از HTML و CSS میتواند کار با بوت استرپ را آغاز کند.
  • ویژگی های واکنش گرا : کد های واکنش گرای CSS به کار رفته در بوت استرپ ، وب سایت شما را در دستگاه های موبایل ، تبلت و دسکتاپ قابل استفاده میکند.
  • روش mobile-first : در بوت استرپ نسخه ی 3 ، استایل های موبایل محور ، جزئی از هسته ی این فریمورک شده اند.
  • سازگاری با مرورگر های مختلف : بوت استرپ با همه ی مرورگر های مدرن (کروم ، فایرفاکس ، اینترنت اکسپلورر ، سافاری و اپرا ) سازگار است.

از کجا میتوانیم بوت استرپ را بدست آوریم ؟

دو روش برای شروع استفاده از بوت استرپ در وب سایت شما وجود دارد.
شما میتوانید :

  • بوت استرپ را از getbootstrap.com دانلود کنید.
  • بوت استرپ را به وسیله ی CDN به وب سایت خود اضافه کنید.

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

اگر شما میخواهید بوت استرپ را دانلود کرده و آن را در هاست خود میزبانی کنید به آدرس getbootstrap.com بروید و طبق دستورالعملی که در این آدرس آمده است عمل کنید.


CDN برای بوت استرپ

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

MaxCDN پشتیبانی CDN را برای فایل های CSS و JavaScript بوت استرپ فراهم می آورد :

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

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

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

یک مزیت استفاده از CDN برای بوت استرپ

بعضی از کاربران که قبلا بوت استرپ را از MAX-CDN دانلود کرده اند، وقتی سایت های دیگر که نیاز به دانلود بوت استرپ دارند را ملاقات می کنند ، دیگر نیاز به دانلود این فریمورک ندارند و میتوانند از کش مرورگر برای استفاده از آن بهره ببرند. در نتیجه ی این فرآیند، سرعت بارگذاری صفحات وب بهبود می یابد. 


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

1. اضافه کردن نوع سند HTML5 :

بوت استرپ از عناصر و صفاتی از HTML و CSS استفاده میکند که نیاز به نوع سند HTML5 دارد. همیشه نوع سند HTML را در آغاز صفحه ی وب قرار دهید و همچنین از صفت lang و character set صحیح برای سند HTML خود استفاده کنید :

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

2. بوت استرپ نسخه ی 3 موبایل محور است 

بوت استرپ 3 برای واکنش گرا بودن در دستگاه های موبایل ساخته شده است. استایل های موبایل محور قسمتی از هسته ی بوت استرپ هستند.

برای صحیح رندر شدن صفحه در دستگاه های موبایل کد متای زیر را باید در قسمت head صفحه قرار دهید :

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

قسمت width=device-width عرض صفحه را برابر با عرض صفحه نمایش دستگاه هایی که صفحه در آن بارگذاری میشود ، قرار میدهد.

قسمت initial-scale=1 مقدار بزرگ نمایی اولیه را وقتی صفحه برای بار اول بارگذاری میشود، مشخص میکند.

3- استفاده از container ها یا عناصری که دیگر عناصر در آن ها قرار میگیرند

بوت استرپ همچنین نیاز به عناصری دارد که دیگر محتویات سایت در آن قرار میگیرند.

دو کلاس container برای انتخاب در بوت استرپ وجود دارد :

  1. کلاس container. محتویات صفحه را در یک عرض ثابت واکنش گرا قرار میدهد.
  2. کلاس container-fluid. محتویات صفحه را در یک عرض تمام صفحه واکنش گرا قرار میدهد.

container-bootstrap


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

نمونه مثال زیر استفاده از کلاس container. را نشان میدهد(محتویات صفحه در یک عرض ثابت در وسط صفحه) :

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>
خودتان امتحان کنید

نمونه مثال زیر استفاده از کلاس container-fluid. را نشان میدهد(محتویات صفحه را در یک عرض تمام صفحه) :

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>
خودتان امتحان کنید

 

منتشر شده در ۵ آبان ۱۳۹۶ حمید رضا ملکی ۱۴۱۵ بازدید
دیدگاه ها
ایلین سه شنبه ۲۵ اردیبهشت ۱۳۹۷

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

مدیر سایت سه شنبه ۲۵ اردیبهشت ۱۳۹۷

سلام بله کامل است