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