ریسپانسیو با بوت استرپ 4 چیست؟
بوت استرپ 4 شروع می شود
بوت استرپ یک چارچوب فوری رایگان برای توسعه وب سریع تر و ساده تر است
بوت استرپ شامل قالب های HTML و CSS مبتنی بر تایپوگرافی، فرم ها، دکمه ها، جداول، ناوبری، Modals، چرخش تصویر و بسیاری دیگر، و همچنین افزونه های جاوااسکریپت جاوااسکریپت است.
بوت استرپ همچنین به شما امکان می دهد تا به راحتی طرح های ریسپانسیو ایجاد کنید
بوت استرپ 3 در مقابل بوت استرپ 4
بوت استرپ 4 جدیدترین نسخه بوت استرپ است. با اجزای جدید، سبک سریعتر وریسپانسیو بیشتر.
بوت استرپ 4 از آخرین نسخه های پایدار تمام مرورگرها و سیستم عامل های اصلی پشتیبانی می کند. با این حال، اینترنت اکسپلورر 9 و پایین پشتیبانی نمی شود.
چرا استفاده از بوت استرپ؟
مزایای بوت استرپ:
آسان برای استفاده: هر کسی که فقط دانش پایه ای از HTML و CSS می تواند شروع به استفاده از بوت استرپ
ویژگی های ریسپانسیو : CSS پاسخگو بوت استرپ به گوشی، قرص و دسکتاپ تنظیم می شود
اولین رویکرد تلفن همراه: در بوت استرپ، سبک های اولیه تلفن همراه بخشی از چارچوب هسته ای هستند
سازگاری مرورگر: بوت استرپ 4 سازگار با تمام مرورگرهای مدرن (Chrome، Firefox، Internet Explorer 10+، Edge، Safari، Opera)
از کجا بوت استرپ 4 دریافت کنید؟
دو راه برای شروع استفاده از Bootstrap 4 در وب سایت شما وجود دارد.
تو می توانی:
شامل Bootstrap 4 از CDN
دانلود بوت استرپ 4 از getbootstrap.com
بوت استرپ 4 CDN
اگر شما نمی خواهید خودتان بوت استرپ 4 را دانلود و میزبانی کنید، می توانید آن را از یک CDN (Content Delivery Network) اضافه کنید.
MaxCDN پشتیبانی CDN برای CSS و جاوا اسکریپت Bootstrap را فراهم می کند. شما همچنین باید jQuery را وارد کنید:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
ایجاد اولین وب سایت با بوت استرپ 4
1. افزودن نوع doctype HTML5
بوت استرپ 4 از عناصر HTML و خواص CSS استفاده می کند که نیاز به نوع doctype HTML5 دارند.
همیشه در ابتدای صفحه متن HTML5 doctype را همراه با ویژگی lang و مجموعه کاراکترهای درست وارد کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. بوت استرپ 4 اولین تلفن همراه است
بوت استرپ 4 برای پاسخگوئی به دستگاه های تلفن همراه طراحی شده است. سبک های اولیه موبایل یکی از چارچوب اصلی هستند.
برای اطمینان از رندر مناسب و لمس زوم، برچسب <meta> زیر را در داخل عنصر <head> اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1">
بخش width = device-width عرض صفحه را تعیین می کند تا به عرض صفحه نمایش دستگاه (که بسته به دستگاه متفاوت باشد) را دنبال کند.
مقیاس مقیاس اولیه = 1 مقدار اولیه زوم را تنظیم می کند زمانی که اولین صفحه توسط مرورگر بارگیری می شود.
3. ظروف
بوت استرپ 4 همچنین نیاز به یک عنصر حاوی محتویات سایت را دارد.
دو کلاس کانتینر برای انتخاب وجود دارد:
کلاس .container یک کانال عرض ثابت پاسخگو را فراهم می کند
کلاس Container-fluid یک ظرفیت عرض کامل را فراهم می کند که تمام عرض عرض نمایش را پوشش می دهد
دو بوت استرپ 4 بایت پایه
مثال زیر نشان می دهد کد برای یک صفحه پایه بوت استرپ 4 (با ظرف ظرف پاسخ پذیری ثابت):
<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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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>
<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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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>
