آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه اول

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

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

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

بوت استرپ، اچ تی ام ال، سی اس اس و جاوا اسکریپت برای توسعه وب سایت های ریسپانسیو و واکنش گرا استفاه می شوند که بوت استرپ یکی از معروف ترین آنها می باشد. همین حالا شروع به یادگیری بوت استرپ کنید !

مثال ها : خودتان امتحان کنید، این مجموعه اموزشی حاوی صد ها مثال بوت استرپ میباشد .با استفاده از ویرایشگر انلاین سایت میتوانید کد را ویرایش کرده و با کلیل بر روی دکمه نتیجه ویرایش خود را مشاهده کنید .

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

آزمون و تست بوت اسرتپ :

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

Start Bootstrap Quiz!

منابع بوت استرپ :

در این مجموعه ، منابع بوس استرپ کاملی شامل تمام کلاس های CSS، کامپوننت ها و پلاگین های جاوا اسکریپ همه همراه با مثال در اختیار شماست :

• Bootstrap CSS Basic Text
• Bootstrap CSS Buttons
• Bootstrap CSS Forms
• Bootstrap CSS Helpers
• Bootstrap CSS Images
• Bootstrap CSS Tables
• Bootstrap Components Glyphs
• Bootstrap Components Dropdowns
• Bootstrap Components Navs
• Bootstrap JS Collapse

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

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

طراحی وب ریسپانسیو(واکنشی) چیست :

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

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

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

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

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

ویژگی های واکنشی-ریسپانسیو : سی اس اس ریسپانسیو بوت استرپ خود را با موبایل ها تبلت ها و کامپیوتر های خانگی سازگار میکند. یعنی وبسایت دچار به هم ریختگی قالب نمیشود و نسبت به اندازه صفحه و دستگاه شما تغییر میکند .

Mobile first approach : در بوت استرپ 3 استایل های Mobile-first بخشی از هسته ی فریم ورک هستند.

Browser compatibility : بوت استرپ با تمام مرورگر های جدید سازگار است (کروم،فایرفاکس…)

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

برای شروع به استفاده از بوت استرپ بر روی وبسایتتان دو راه دارید : 1 – بوت استرپ را از وب سایت Getbootstrap.com دانلود نمایید : اگر میخواهید خودتان بوت استرپ را دانلود کرده و داخل هاست خود ذخیره کنید به این سایت رفته و از دستور العمل ها پیروی کنید

2 – از CDN ها استفاده کنید : اگر نمیخواهید بوت استرپ را دانلود کنید و انها را در داخل هاست خود اپلود و استفاده کنید میتوانید آن را از CDN (شبکه تحویل محتوا ) به دست بیاورید.

MaxCDN ارائه دهنده ی پشتیبانی برای بوت استرپ، CSS  و جاوا اسکریپت بوده و جی کوئری را نیز ارائه می دهد.

MaxCDN :

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

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

بسیاری از کاربران هنگام بازدید از یک سایت دیگر، بوت استرپ را از MaxCDN دانلود کرده اند. نتیجه میگیریم که هنگام بازدید از سایت شما بوت استرپ را از فایل کَش اپلود کرده اند که باعث لود شدن سریعتر سایت میشود. همچنین اکثر CDN ها این امکان را دارند که هنگامی که یک کاربر فایلی را درخواست میکند ان را از نزدیک ترین سرور موجود در اختیار انها قرار دهند که این نیز باعث افزایش سرعت خواهد شد.

ایجاد اولین صفحه ی وب با بوتسترپ :

1 – داک تایپ HTML5 رو اضافه کنید. بوت استرپ از ویژگی ها و عناصری از Html و Css استفاده می کند که وجود داک تایپ HTML5 را ضروری می کند. سعی کنید همیشه داک تایپ HTML5 را در ابتدای صفحه اضافه کنید. همچنین خصوصیت Lang  و مجموعه کارکتر های صحیح را وارد نمایید.

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

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

*برای اطمینان از رندر مناسب و زوم کردن لمسی ، تگ متا زیر را درون المنت <head> وارد کنید.

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

قسمت Width=device-width عرض صفحه را نسبت به عرض صفحه دستگاه شما تنظیم میکند (که این میزان بسته به دستگاه شما تغییر میکند) و قسمت initial-scale=1 هنگامی که صفحه برای برا اول باز میکنیم میزان زووم اولیه ارا تعیین میکند.

 ظرف ها (Containers) :

بوت استرپ نیازمند یک عنصر در بر دارنده(ظرف)، برای بسته بندی کردن محتوای سایت است. دو کلاس ظرف برای انتخاب وجود دارد :

1 – کلاس container : مشخص کننده ی یک ظرف ریسپانسیو با عرض ثابت است .

2 – کلاس 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="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>

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

</body>
</html>

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

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

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

</body>
</html>

The post آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه اول appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.