آموزش Bootstrap 4 - بخش اول

آموزش Bootstrap 4 – بخش اول

Bootstrap 4 چیست ؟

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

Bootstrap شامل دستورات HTML ، CSS ، توابع و افزونه های Javascript است که می توانید المان های کاربردی از جمله : فرم ها ، دکمه ها ، جداول ، اسلایدر و چارچوب یک صفحه وب را تولید کنید .

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

استفاده آسان : تنها با داشتن دانش اولیه HTML و CSS می توانید از این فریم ورک استفاده کنید
واکنش گرایی : بوت استرپ صفحات وب را برای موبایل ، تبلت و کامپیوتر های رومیزی واگنش گرا می کند
سازگاری با مرورگر ها : بوت استرپ با تمام مرورگر های مدرن از جمله Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera سازگاری دارد

آموزش Bootstrap 4 - قسمت اول

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

استفاده از CDN

فراخوانی فایل CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

فراخوانی فایل های JS

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Bootstrap-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

دانلود مستقیم از وب سایت بوت استرپ

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

نسخه راست چین این فریم ورک در این وب سایت موجود است

ساخت اولین صفحه وب با استفاده از Bootstrap 4

۱٫ افزودن تگ HTML5 doctype

تگ DOCTYPE html برای استاندارد سازی صفحه وب مورد استفاده قرار میگیرد و درج آن در صفحه الزامی است

این تگ را در بالای صفحه قرار دهید

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

۲٫ درج متاتگ viewport

درج این تگ برای اعمال واکنش گرایی در موبایل الزامی است

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

۳٫ Containers (ظرف)

در بوت استرپ تمام المان های هر بخش از یک صفحه وب را داخل یک ظرف بسته بندی میکنیم ؛

دو روش بسته بندی وجود دارد :

کلاس container یک عرض مشخص
کلاس container-fluid عرض تمام صفحه

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 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/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>اولین عنوان صفحه وب</h1>
  <p>این یک متن ازمایشی است</p> 
</div>

</body>
</html>

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

منتظر آموزش های بعدی بوت استرپ ۴ باشید .

دسته :آموزش تاریخ :۲۸ مرداد ۱۳۹۷نظرات : 0 نظر

Codein

Codein