فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

شروع کار با bootstrap

Bootstrap چیست؟


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

طراحی رسپانسیو چیست؟

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

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

تفاوت Bootstra 3 و Bootstrap 4


Bootstrap 4 جدیدترین نسخه Bootstrap است. با اجزای جدید ، شیوه نامه سریعتر و واکنش پذیری بیشتر.

Bootstrap 4 از آخرین نسخه های پایدار کلیه مرورگرها و سیستم عامل های اصلی پشتیبانی می کند. با این حال ، Internet Explorer 9 و پایین پشتیبانی نمی شود.

اگر به پشتیبانی IE8-9 احتیاج دارید ، از Bootstrap 3. استفاده کنید. این پایدارترین نسخه Bootstrap است ، و هنوز هم توسط این تیم برای رفع اشکالات مهم و تغییرات مستندات پشتیبانی می شود. با این حال ، هیچ ویژگی جدیدی به آن اضافه نمی شود.

پشتیبانی از نماد Droppped: Bootstrap 4 از Glyphicons BS3 پشتیبانی نمی کند. به جای آن از کتابخانه های نماد Font-Awesome یا سایر نمادها استفاده کنید.

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

استفاده آسان: هر کسی که فقط دانش پایه HTML و CSS داشته باشد می تواند شروع به استفاده از Bootstrap کند
ویژگی های پاسخگو: CSS پاسخگو Bootstrap به تلفن ، تبلت و دسک تاپ تنظیم می شود
رویکرد موبایل اول: در بوت استرپ ، سبک های همراه اول بخشی از چارچوب اصلی هستند
سازگاری مرورگر: Bootstrap 4 با تمام مرورگرهای مدرن سازگار است (Chrome ، Firefox ، Internet Explorer 10+ ، Edge ، Safari و Opera)
از کجا می توان Bootstrap 4 را دریافت کرد؟
دو روش برای شروع استفاده از Bootstrap 4 در وب سایت خود وجود دارد.

تو می توانی:

Bootstrap 4 را از CDN درج کنید
Bootstrap 4 را از سایت getbootstrap.com بارگیری کنید

Bootstrap 4 CDN


اگر نمی خواهید خود Bootstrap 4 را بارگیری و میزبانی کنید ، می توانید آن را از طریق CDN (شبکه تحویل محتوا) درج کنید.

MaxCDN پشتیبانی CDN را برای CSS و JavaScript Bootstrap فراهم می کند. همچنین باید jQuery را نیز شامل شوید:

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

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

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

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

یک مزیت استفاده از CDN Bootstrap 4:
بسیاری از کاربران قبلاً هنگام بازدید از سایت دیگری ، Bootstrap 4 را از MaxCDN بارگیری کرده اند. در نتیجه ، هنگام بازدید از سایت شما از حافظه پنهان بارگیری می شود که منجر به بارگذاری سریع تر می شود. همچنین ، اکثر CDN اطمینان حاصل می کنند که پس از درخواست یک پرونده از کاربر ، از سرور نزدیک به آنها سرویس داده می شود ، که منجر به بارگذاری سریع تر نیز می شود.

جی کوئری و پوپر؟
Bootstrap 4 از jQuery و Popper.js برای اجزای JavaScript استفاده می کند (مانند ماژول ها ، نکات راهنمایی ، پاپ و غیره). اما اگر فقط از قسمت CSS Bootstrap استفاده می کنید ، به آنها احتیاج ندارید.

بارگیری Bootstrap 4
اگر می خواهید Bootstrap 4 خود را بارگیری و میزبانی کنید ، به https://getbootstrap.com/ بروید و دستورالعمل های آنجا را دنبال کنید.

اولین صفحه وب را با Bootstrap 4 ایجاد کنید

  1. متن HTML5 را اضافه کنید

Bootstrap 4 از عناصر HTML و خصوصیات CSS استفاده می کند که به مستندات HTML5 نیاز دارند.

همیشه doctype HTML5 را در ابتدای صفحه همراه با ویژگی lang و مجموعه کاراکتر صحیح درج کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>
  1. Bootstrap 4 ابتدا موبایل است

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

برای اطمینان از رندر مناسب و بزرگنمایی لمس ، برچسب زیر را در قسمت اضافه کنید:

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

عرض = قسمت عرض دستگاه عرض صفحه را برای دنبال کردن عرض صفحه دستگاه (که بسته به نوع دستگاه متفاوت خواهد بود) تنظیم می کند.

مقیاس اولیه = ۱ سطح بزرگنمایی اولیه را هنگام بارگذاری صفحه برای اولین بار توسط مرورگر تنظیم می کند.

  1. ظروف

Bootstrap 4 همچنین به یک عنصر حاوی برای بسته بندی مطالب سایت نیاز دارد.

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

کلاس .container یک ظرف پهنای ثابت پاسخگو را فراهم می کند
کلاس .container-liquid یک کانتینر با عرض کامل فراهم می کند ، و کل عرض آن را پوشان می کند

<!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.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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>

مثال زیر کد مربوط به صفحه اصلی Bootstrap 4 (با یک ظرف با عرض کامل) را نشان می دهد:

<!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.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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>
دیدگاه‌های نوشته