شروع کار با بوت استرپ 4 (Bootstrap 4)

hooman_the1 · 30 می 2018

هدف مقاله
در این مقاله به آموزش شروع کار با بوت استرپ 4 ، که محبوب ترین فریم ورک (Framework) دنیا برای ساخت وب سایت های ریسپانسیو و بهینه شده برای دستگاههای موبایل است ، با استفاده از CDN بوت استرپ می پردازیم ، همچنین نمایی از قالب ابتدایی وب سایت مسلح به بوت استرپ را نشان خواهیم داد.

شروع سریع (Quick start)
بدنبال این هستید که مراحل ابتدایی رو به سرعت پشت سر گذاشته و به سراغ ساختن سایت با استفاده از بوت استرپ بروید ؟ دوای درد شما استفاده از CDN بوت استرپ است که در این مقاله به آن پرداخته ایم .( سی دی ان ، CDN یا Content Delivery Network عبارت است از شبکه ای که با تحویل محتوی – که در اینجا فایل های بوت استرپ است – شما را از داشتن فایل ها بی نیاز می کند و فقط کافی است لینک آن را به مرورگر بدهید )

نکته : اگر می خواهید از یک نرم افزار package manager استفاده کنید و یا مستقیما فایل ها را دانلود کنید ، به سراغ صفحه دانلود بوت استرپ بروید .

CSS
برای استفاده از CDN مربوط به CSS بوت استرپ تگ <link> زیر را در قسمت <head> فایل html خود و قبل از لینک تمامی فایل های CSS دیگری که به صفحه متصل کرده اید کپی کنید .

JS
تعدادی از کامپوننت (component) های بوت استرپ برای نمایش صحیح نیاز به استفاده از توابع Javascript دارند . مخصوصا نیاز است که jQuery و Popper.js و همچنین پلاگین های جاوااسکریپت های خود بوت استرپ نیز موجود باشند . به این منظور باید تگهای <script> زیر دقیقا در انتهای تگ <body> صفحه html وب سایتتان درج شود . ابتدا باید تگ اسکریپت jQuery سپس Popper.js و در آخر هم پلاگین های جاوااسکریپت بوت استرپ لینک شوند .

اگر کنجکاوید که کدام کامپوننت های بوت استرپ از jQuery ، Popper.js و جاوا اسکریپت بوت استرپ استفاده می کنند ، لیست آن را برایتان مینویسم :

اخطارهای خطا
دکمه های تغییر حالت (toggling button) و Checkbox و radio
تمامی توابع مربوط به المانهای چرخ و فلکی (carousel) مانند slide ها و ...
تابع تغییر وضعیت نمایش محتوا
Dropdown های مربوط به وضعیت نمایش و مکان نمایش
Modals for displaying , positioning and scroll behavior
نوار ابزار مربوط به رفتار ریسپانسیو
تولتیپ ها (tooltip) و پاپ اور ها (popovers) مربوط به وضعیت نشان دادن و مکان محتوی
Scrollspy و navigation updates

ادامه دارد ...

منبع : appzweb.ir

hooman_the1 · 3 ژوئن 2018

نمونه قالب برای شروع
برای اینکه بتوانید از قابلیت های بوت استرپ در وب سایت خود بهره ببرید باید صفحه خود را با عبارت HTML5 doctype به مرورگر معرفی کنید و Viewport meta tag را برای اطمینان از اجرای قابلیت های ریسپانسیو بوت استرپ در قسمت <head> بگنجانید . در صورت تعبیه همه موارد بالا کد صفحه شما در ابتدا باید به صورت زیر باشد :

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
</body>
<h1>Hello, world!</h1>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-pNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

این کد ها تمامی آن چیزی است که برای استفاده از بوت استرپ در صفحه تان نیاز دارید .

گلوبال (global) مهم در بوت استرپ
بوت استرپ برای اطمینان از اینکه صفحه وب در تمام مرورگرها و در هر دستگاهی اعم از موبایل و لپ تاپ و ... یکسان دیده شود، از گلوبال های ثابت و مهمی در تمامی صفحات خود استفاده می کند ( البته تعداد این گلوبال ها انگشت شمار است ) که بهتر است قبل از استفاده از بوت استرپ آنها را بشناسید .

HTML5 doctype
حتما نیاز است صفحه ای که از بوت استرپ در آن استفاده می کنید با HTML5 doctype تعریف شود . هر doctype دیگری ممکن است باعث شود استایل ها به درستی کار نکنند ، اما استفاده از این داک تایپ ، کارکرد صحیح بوت استرپ را تضمین می کند .

<!doctype html>
<html lang="en">
...
</html>

ادامه دارد ...

منبع : appzweb.ir

hooman_the1 · 6 ژوئن 2018

Responsive meta tag
بوت استرپ بر اساس استراتژی mobile first ساخته شده ، بدین معنی که کدهای آن برای استفاده از نمایشگر دستگاههای موبایل بهینه شده و سپس هرجا لازم بوده css media query های مورد نیاز برای دستگاههای دیگر به آن افزوده شده . برای اطمینان از صحت عملکرد زوم لمسی (touch zooming) و رندر صحیح وب سایت ، باید متا تگ responsive viewport ، را به قسمت <head> کد وب پیج خود اضافه کنید (مانند شکل زیر )

Box-sizing
برای ساده تر شدن تغییر سایزها در css ، سازندگان بوت استرپ مقدار پیش فرض box-sizing را از content-box به border-box تغییر داده اند . این کار تضمین می کند که مقدار padding بر روی عرض نهایی المان تاثیری نداشته باشد ، اما ممکن است بر نمایش صحیح نرم افزارهایی مانند Google Maps و یا Google Custom Search Engine تاثیر منفی بگذارد .

}selector-for-some-widget.
; box-sizing: content-box
{

Reboot
برای افزایش صحت رندرینگ در تمامی مرورگرها ، یک فایل حاوی تعدادی تگ در بوت استرپ بکار رفته که تغییراتی در بعضی المان های html بوجود می آورد . بوت استرپ فایل این مجموعه کد ها را Reboot نامگذاری کرده .

پایان

منبع : appzweb.ir

برگزیده های پرشین تولز

شروع کار با بوت استرپ 4 (Bootstrap 4)

hooman_the1

Registered User

hooman_the1

Registered User

hooman_the1

Registered User

تبلیغات متنی