آموزش جامع Bootstrap – ساخت یک صفحه فرود (Landing Page) با Bootstrap 4 | تجربه ها و مشاهده های من در توسعه وب

امروزه Bootstrap یکی از متداولترین قالب های کاری front-end مبتنی بر HTML و CSS است. ویژگی هایی که کنار یکدیگر قرار گرفته اند به شما کمک می کنند تا وب سایت های واکنشگرا (responsive) را بسیار آسانتر و سریعتر ایجاد نمایید.

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

در اولین بخش از مقاله، مزایا و نقاط قوت اصلی Bootstrap را به شما نشان خواهم داد.

در بخش دوم، به شما آموزش می دهم که چگونه یک صفحه ورود را از صفر و با bootstrap بسازید.

سعی می کنم که همه چیز را گام به گام شرح دهم تا برای تمام افراد تازه کار قابل فهم و یادگیری باشد.

در پایان کار، شما صفحه ای خواهید داشت که بخش های گوناگونی از جمله سرویس ها، نقل قول ها، نمونه کارها و بیش از آن را شامل می شود.

فهرست مطالب

Bootstrap چیست؟
مزایای اصلی و نقاط قوت Bootstrap
یاد بگیرید چطور از Bootstrap استفاده کنید – اولین وب سایت bootstrap خود را بسازید
1. یک سند HTML پایه بر مبنای Bootstrap و سلام دنیا
2. Navigation – اضافه کردن نوار راهنما
3. افزودن بخش Hero به بالای صفحه
4. افزودن بخش سرویس ها
5. افزودن بخش نمونه کارها
6. افزودن بخش نقل قول ها
7. اضافه کردن پاورقی (Footer)
جمع بندی

Bootstrap چیست؟

Bootstrap یک قالب کاری front-end مدرن است که می تواند در توسعه وب سایت به شما کمک کند و سرعت شما را افزایش دهد. (قالب کاری Front-end به این معناست که می تواند در زمینه طراحی و قالب بندی وب سایت به شما کمک کند اما در زمینه back-end همچون ارسال یک ایمیل، مدیریت سبد خرید کاربران و یا ارتباط با پایگاه داده چیزی به شما نمی دهد.)

به طور اساسی این قالب کاری از دو فایل Bootstrap.js و Bootstrap.css تشکیل شده است. اگر این دو فایل را در صفحات HTML خود جایگذاری کنید، آنگاه می توانید از اجزای HTML و ویژگی های آن استفاده نمایید.

مزایای اصلی و نقاط قوت Bootstrap

تقسیم بندی واکنشگرا – با استفاده از ساختار تقسیم بندی Bootstrap به سرعن می توانید صفحه وب خود را قالب بندی کنید. به ۴ آیتم در هر ردیف در نمایشگر دسکتاپ احتیاج دارید، ۳ تا در نمایشگر تبلت و فقط یکی در نمایشگر موبایل؟ با Bootstrap هیچ مشکلی در این زمینه ندارید!
محدوده ی وسیعی از اجزای HTML پیش ساخته – Bootstrap با تنوع گسترده ای از اجزائی که فراهم کرده است، سرعت توسعه شما را انفجاری زیاد می کند.بخشی از این اجزا که در هر پروژه ای کاربرد دارند، عبارتند از:
- buttons (با رنگ های متنوع و تنوع طرح حاشیه و چیزهای دیگر)
- navbar – شاید ساختن یک منوی راهنما به صورت واکنشگرا آن هم از صفر، برای شما خیلی شگفت آور باشد. اینکه چطور در دستگاه هایی با نمایشگر های بزرگ به صورت افقی نمایش داده شود اما در یک نمایشگر موبایل تنها یک آیکن نشان داده شود که با کلیک بر روی آن، منوی راهنما به صورت اسلایدی رو به پایین ظاهر شود؟ ساختن عنصرهای هدایت و راهنما به شکل دلخواه و انعطاف پذیر با Bootstrap خیلی آسان خواهد بود.
- cards
- dropdowns
- form inputs و buttons
- pagination
- tooltips و alerts
- و خیلی چیزهای دیگر
سازگاری با مرورگرهای مختلف – bootstrap تمام مرورگرهای مدرن موبایل و دسکتاپ و همچنین نمونه های قدیمی تر همچون IE11 را پشتیبانی می کند.
کاربری آسان – برای شروع تنها کافیست دانش کار با HTML و CSS را داشته باشید.
توسعه مداوم – Bootstrap تحت توسعه فعال است به این معنا که ویژگی های جدید، رفع اشکالات و بهبودها به صورت مداوم منتشر می شوند.
انعطاف پذیری
انجمن و جامعه بزرگ – یک اکوسیستم کامل با محوریت Bootstrap ایجاد شده است. شما گزینه های بسیار خوبی از Theme ها و قالب ها و پلاگین های جاوا اسکریپت دارید که به طور خاص برای کاربران bootstrap ساخته شده اند.

یاد بگیرید چطور از Bootstrap استفاده کنید – اولین وب سایت bootstrap خود را بسازید

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

بیایید کار را شروع کنیم!

تصویر پویای صفحه ای که می خواهیم طراحی کنیم

۱- یک سند HTML پایه بر مبنای Bootstrap و سلام دنیا

اگرچه مثالهای بسیار خوبی از وب سایت های Bootstrap وجود دارد، اما من ترجیح می دهم واقعا از صفر شروع کنم تا حتی مباحث پایه ای تر مثل وارد کردن bootstrap نیز نمایش داده شود.

یک صفحه خالی Bootstrap چیزی مثل این خواهد بود:

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Bootstrap 101: Learn Bootstrap in 60 minutes by Bootstrapious.com</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="robots" content="all,follow">
		<!-- Bootstrap CSS-->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
		<!-- Custom stylesheet - for your changes-->
		<link rel="stylesheet" href="css/custom.css">
		<!-- Tweaks for older IEs-->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<h1>Hello world. I'm in Bootstrap!</h1>
		<!-- JavaScript files-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
	</body>
</html>

چند جمله در مورد قطعه کد قبل:

پایه ای ترین و همچنین تگ های ضروری HTML نظیر doctype, html, head و body نوشته شده اند.
لینک به فایل استایل Bootstrap یعنیbootstrap.min.css و فایل استایل شخصی خودمان (css/custom.css) در بالای سند در تگ head قرار می گیرد.
همچنین یک تگ مهم که مربوط به رفتار واکنشگرای صفحه است در تگ head قرار گرفته است – meta name="viewport"
همچنین لازم است که فایل جاوا اسکریپت Bootstrap را در صفحه وارد کنیم. پیش ازاین، لازم بود که به طور جداگانه وابستگی PopperJS را به صفحه اضافه کنیم. اما حالا راه بهتری وجود دارد که با استفاده از فایل بسته بندی شده ی bootstrap.bundle.min.js همه آنچه نیاز داریم را یکباره وارد صفحه خود کنیم. این فایل یک نسخه کوچک شده از PopperJS و Bootstrap را در خود جای داده است تا ما به چیز دیگری نیاز نداشته باشیم.

۲- Navigation – اضافه کردن نوار راهنما

یک کامپوننت راهبری بسیار سودمند در Bootstrap وجود دارد که Navbar نامیده می شود.

مهمترین ویژگی ها و مزایای آن عبارتند از:

در فضاهای نمایشی کوچک تر به صورت خودکار جمع می شود (به طور نمونه در موبایل ها و تبلت ها). شما می توانید این رفتار را تنها با اضافه کردن و یا حذف کردن یک کلاس HTML کنترل نمایید. همچنین یک دکمه پیش ساخته به صورت خودکار در وضعیتی که navbar جمع شده است ظاهر می گردد که برای باز کردن آن کاربرد دارد.
می تواند عنصرهای گوناگونی را نظیر لینک های هدایت کننده، فرم جستجو، نشانه و یا متن را در خود جای دهد. همه چیز به درستی تراز خواهد شد و نیازی نیست در مورد آن نگران باشید.
Bootstrap دو طراحی پیش ساخته برای navbar ارائه کرده است. اولی دارای پس زمینه روشن و لینک های تیره است و دومی لینک های روشن را روی پس زمینه تیره قرار می دهد. (شما اجباری به استفاده از این طراحی ها ندارید و می توانید به طور کامل هر طور که تمایل دارید استایل آنها را تغییر دهید).

ما تنها با استفاده از ساختار موجود Bootstrap و بدون استفاده از هیچ کلاس و یا استایل شخصی به نتیجه ای مانند شکل فوق می رسیم.

این فوق العاده نیست؟

در ادامه کد مربوط به navbar آورده شده است:

<!-- navbar-->
<nav class="navbar navbar-light navbar-expand-lg fixed-top shadow-sm bg-white">
	<a href="index.html" class="navbar-brand">Bootstrap 101</a>
	<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
		aria-controls="navbarSupportedContent" aria-expanded="false" 
		aria-label="Toggle navigation" class="navbar-toggler">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div id="navbarSupportedContent" class="collapse navbar-collapse">
		<ul class="navbar-nav ml-auto">
			<li class="nav-item"><a href="#" class="nav-link">About Us</a></li>
			<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
			<li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li>
		</ul>
		<div class="navbar-text ml-lg-3">
			<a href="#" class="btn btn-primary text-white shadow">Sign Up</a>
		</div>
	</div> 
</nav>

ممکن است کمی پیچیده به نظر برسد. اما وحشت نکنید، اینطور نیست.

اجازه دهید آن را به تکه های کوچکتر قسمت کنیم.

عنصر اصلی navbar

در ابتدا navbar را با عنصر nav ایجاد می کنیم که کلاس class= "navbar" به آن اضافه شده است. این کلاس اصلی navbar است. همچنین تعدادی کلاس اصلاح کننده دیگر به آن اضافه کرده ایم:

navbar-light – با استفاده از این کلاس، طراحی پیش ساخته روشن را برای navbar فرا می خوانیم. به طور کلی، رنگ لینک ها و وضعیت آن ها شامل active, hover و focus مشخص می شود.
navbar-expand-lg – این کلاس بسیار مهم است و کنترل می کند که در چه صفحه نمایشی منو باید در حالت جمع شده و در چه صفحه نمایشی به صورت باز شده ظاهر شود. در این مثال، کلاس navbar-expand-lg به این معناست که navbar در صفحه های نمایشی +lg به صورت باز شده (expanded) نمایش داده می شود.
fixed-top – این کلاس باعث چسبیدن navbar به بالای صفحه نمایش می شود. چنانچه این کلاس را درج نکنید، navbar با صفحه scroll خواهد شد.
و سرانجام، چند کلاس سودمند که عملکرد را کنترل نمی کنند و تنها برای مقاصد طراحی مورد استفاده هستند. shadow-sm (یک سایه در حاشیه اضافه می کند) و bg-white (رنگ سفید را به عنوان پس زمینه قرار می دهد).

Navbar brand

معمولا نشانه (Logo) یا برند خود را داخل navbar قرار می دهید. برای اطمینان از قالب بندی و فاصله گذاری صحیح class="navbar-brand" را به آن اضافه می کنیم.

Navbar toggler

دکمه ای هست که در حالت بسته شده ی منو، وضعیت آن را کنترل می کند. این دکمه زمانی که منو در حالت باز شده به نمایش در می آید به صورت خودکار بر اساس کلاس navbar-expand-* مخفی می شود.

۳- افزودن بخش Hero به بالای صفحه

حالا که منوی راهبری ما آماده شده است، وقت آن می رسد که محتوای بیشتری به صفحه مان اضافه کنیم.

پایین تر از header، من تصمیم دارم که یک بخش hero با یک پیغام اصلی ایجاد کنم.

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

ما برای نخستین بار با ساختار توری Bootstrap یا همان Bootstrap grid در این بخش مواجه خواهیم شد.

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

توضیحی در خصوص Bootstrap grid

سیستم توری Bootstrap از ترکیب containers, rows و columns برای قالب بندی و تراز کردن محتوا استفاده می کند. این سیستم با flexbox ساخته شده و کاملا واکنشگرا است.

ساختار توری Bootstrap با ۱۲ ستون کار می کند. این به این معناست که زمانی که شما یک row به قالب بندی صفحه خود اضافه می کنید (class="row")، شما می توانید آن را به حداکثر ۱۲ ستون تقسیم نمایید.

همچنین هر ستون می تواند فضای بیشتر از یک ستون را به خود اختصاص دهد؛ بنابراین col-6 به این معناست که این ستون به تنهایی فضای ۶ ستون را اشغال می کند، به عبارت دیگر ۱/۲ فضای ردیف را اشغال می کند که ۶/۱۲ عرض ردیف می شود.

یک ویژگی قدرتمند این است که شما می توانید با اضافه کردن پیشوند دستگاه، بر اساس عرض دستگاه خود رفتار متفاوتی را ایجاد کنید.

پیشوندها و نام های کلاس ها را می توانید در جدول ذیل مشاهده نمایید.

کلاس پیشوند ستون برای صفحه نمایشی که مشخص کرده اید و صفحات بزرگتر از آن معتبر است (به عنوان مثال col-md-6 برای دستگاه های متوسط (medium)، بزرگ (large) و خیلی بزرگ (extra large) معتبر است).

شما می توانید کلاس ها را با هم ترکیب کنید تا به درستی یک طرح بندی واکنشگرا داشته باشید.

اجازه دهید با یک مثال موضوع را توضیح دهم:

اگر شما از class="col-12 col-md-6 col-xl-4" استفاده کنید، به این معنا خواهد بود که:

در دستگاه های کوچک و خیلی کوچک، بلاک ۱۲ ستون را به خود اختصاص می دهد. (از آنجایی که ما از col-sm-* استفاده نکرده ایم بنابریان col-* برای صفحه های نمایشی کوچک نیز معتبر است)
در دستگاه های متوسط و بزرگ، بلاک ۶ ستون را به خود اختصاص می دهد. (دوباره از آنجایی که رفتاری با کلاس col-lg-* تعریف نکرده ایم، بنابراین تعریف متوسط برای دستگاه های بزرگ نیز معتبر است)
و سرانجام در دستگاه های خیلی بزرگ هر بلاک ۴ ستون را به خود اختصاص می دهد.

Extra large ≥۱۲۰۰px	Large ≥۹۹۲px	Medium ≥۷۶۸px	Small ≥۵۷۶px	Extra small <576px
`col-xl-`	`col-md-`	`col-md-`	`col-sm-`	`col-`	Class prefix

بخش Hero

خُب، زمان آن است که به بخش Hero خودمان برگردیم.

حالا که شما متوجه شده اید ساختار توری Bootstrap جطور کار می کند، درک و هضم این بخش خیلی ساده است.

شما می توانید نتیجه ی کد این بخش را در تصویر زیر مشاهده نمایید.

ما این کد را پایین تر از navbar می نویسیم:

<!-- Hero Section-->
<section class="bg-light">
	<div class="container">
		<div class="row">
			<div class="col-lg-6 order-2 order-lg-1">
				<h1>Bootstrap 101 template</h1>
				<p class="lead">
					Proident eu nisi commodo enim deserunt enim duis sunt nostrud anim. Sunt do sit enim veniam nostrud culpa adipisicing do ullamco occaecat et.
				</p>
				<p>
					<a href="#" class="btn btn-primary shadow mr-2">Discover More</a>
					<a href="#" class="btn btn-outline-primary">Some another action</a>
				</p>
			</div>
			<div class="col-lg-6 order-1 order-lg-2">
				<img src="img/macbook.png" alt="..." class="img-fluid">
			</div>
		</div>
	</div>
</section>

بیایید دوباره آن را به چند بخش تقسیم کنیم.

من از عنصر section استفاده کردم، تنها برای اینکه تمام عنصرها را بسته بندی کنم و بعدتر در فایل custom.css مان، یک فاصله یا padding عمودی برای آنها تعیین کنم. همچنین یک کلاس کاربردی دیگر به آن اضافه کردم، bg-light پس زمینه عنصر را به رنگی خاکستری خیلی روشن در می آورد.
سپس محتوا را درون یک container قرار داده ام. Container ها محتوای سایت شما را در مرکز و به صورت افقی تنظیم می کنند. به این معنا که در دستگاه های بزرگ و خیلی بزرگ، container محتوای سایت شما را به عرض حداکثر ۱۱۴۰px محدود می کند (روی دستگاه خیلی بزرگ).
سرانجام با قرار دادن محتوا درون <div class="col-lg-6"> من آن را به دو ستون تقسیم کرده ام (هر کدام به اندازه ۶ ستون پایه فضا را می گیرند) البته در دستگاه های +lg (که عرض صفحه نمایش آنها برابر با ۹۹۲ پیکسل یا بیشتر است).
در مورد صفحه های نمایشی کوچکتر، من هیچ چیزی برای دستگاه های متوسط، کوچک و خیلی کوچک تعیین نکرده ام، بنابراین عرض پیش فرض که همان ۱۲ ستون پایه است استفاده می شود (به عبارت دیگر تمام عرض صفحه). این درست مثل اینست که <div class="col-12 col-lg-6"> را استفاده کرده بودیم.

اگر نگاهی به محتوای ستون ها داشته باشیم، چند کلاس بسیار مهم Bootstrap را مشاهده می کنیم:

دکمه ها (Buttons)

کلاس های btn btn-primary یک دکمه اولیه خوب ایجاد می کند. اگر کلاس btn-primary را با btn-outline-primary جا به جا کنیم، خواهیم دید که خط حاشیه دکمه متفائت می شود. این همان چیزی است که من را به Bootstrap علاقه مند می کند. کافی است تنها دو کلاس را به یک عنصر معمولی اضافه نمایید و در نتیجه یک مولفه که بسیار خوب به نظر می رسد را در اختیار خواهید داشت.

پاراگراف مقدمه

lead در اغلب موارد برای پاراگراف های مقدماتی مورد استفاده است. به این ترتیب با اندازه قلم کمی بزرگتر و وزن قلم ملایم تر آنها را برجسته می کند. من اغلب از آن در ابتدای مقاله ها و یا بالاترین بخش صفحات فرود، مانند همین مثال، استفاده می کنم.

تصاویر واکنشگرا

یکی دیگر از کلاس های بسیار مهم img-fluid است. این کلاس تصاویر را واکنشگرا می کند.

اگر شما تصویری در صفحه خود دارید که پهنای آن ۱۲۰۰px باشد، در دستگاه های کوچک که به عنوان مثال صفحه نمایشی با پهنای ۳۰۰px دارند، از container بیرون می زند.

اما اگر از کلاس img-fluid استفاده نمایید، حداکثر عرض تصویر به اندازه عرض صفحه نمایش خواهد شد. بنابراین هیچگاه تصاویر موجب ایجاد اسکرول افقی نخواهند شد. من اساسا برای تمام تصاویر موجود در محتوا از آن استفاده می کنم.

۴- افزودن بخش سرویس ها

در گام بعد، بخشی را برای نمایش سرویس ها و خدمات اضافه می کنیم.

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

نتیجه کار به شکل زیر خواهد بود:

و کد این بخش هم در ادامه آمده است:

<!-- Services-->
<section>
	<div class="container">
		<h2>Services</h2>
		<p class="text-muted mb-5">
			There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
		</p>
		<div class="row">
			<div class="col-sm-6 col-lg-4 mb-3">
				<svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-magic-wand"></use> </svg>
				<h6>Ex cupidatat eu</h6>
				<p class="text-muted">
					Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.
				</p>
			</div>
			<div class="col-sm-6 col-lg-4 mb-3">
				<svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-heart"></use> </svg>
				<h6>Tempor aute occaecat</h6>
				<p class="text-muted">
					Tempor aute occaecat pariatur esse aute amet.
				</p>
			</div>
			<div class="col-sm-6 col-lg-4 mb-3">
				<svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-rocket"></use> </svg>
				<h6>Voluptate ex irure</h6>
				<p class="text-muted">
					Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.
				</p>
			</div>
			<div class="col-sm-6 col-lg-4 mb-3">
				<svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-paperclip"></use> </svg>
				<h6>Tempor commodo</h6>
				<p class="text-muted">
					Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.
				</p>
			</div>
			<div class="col-sm-6 col-lg-4 mb-3">
				<svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-screen"></use> </svg>
				<h6>Et fugiat sint occaecat</h6>
				<p class="text-muted">
					Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.
				</p>
			</div>
			<div class="col-sm-6 col-lg-4 mb-3">
				<svg class="lnr text-primary services-icon"> <use xlink:href="#lnr-inbox"></use> </svg>
				<h6>Et labore tempor et</h6>
				<p class="text-muted">
					Et labore tempor et adipisicing dolor.
				</p>
			</div>
		</div>
	</div>
</section>

کلاس های Bootstrap

همانطور که می بینید، خیلی چیزها شبیه کدهایی است که قبل تر نوشتیم. دوباره از container و row و column استفاده کردیم.

این بار از کلاس های col-sm-6 col-lg-4 برای هر یک از آیتم های بخش سرویس ها استفاده کرده ام. ترکیب این کلاس ها به این معناست که:

در دستگاه های خیلی کوچک (xs) در هر ردیف ۱ آیتم قرار می گیرد (عدم استفاده از *-col به این معناست که به صورت پیش فرض از col-12 استفاده شود که همان عرض کامل است)
در دستگاه های کوچک (sm) و متوسط (md) تعداد ۲ سرویس در هر ردیف نمایش داده می شود (col-sm-6)
و برای دستگاه های بزرگ (lg) و خیلی بزرگ (xl) تعداد ۳ سرویس در هر ردیف نشان داده خواهد شد (col-lg-4).

من همچنین از mb-3 برای ایجاد margin ار پایین استفاده کرده ام.

آخرین کلاس Bootstrap که در این بخش استفاده شده text-muted است. به طور کلی متن داخل عنصر را به رنگ خاکستری در می آورد.

آیکن ها

در نسخه ۴ از Bootstrap هیچ آیکنی وجود ندارد، ما از یک مجموعه آیکن رایگان به نام Linear icons استفاده می کنیم.

برای استفاده از آن، ابتدا لازم است تا یک اسکریپت را از CDN آنها به پایین سند HTML خودمان، بعد از اسکریپت مربوط به Bootstrap، اضافه کنیم.

		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
		<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script> 
	</body>
</html>

تغییر ظاهر آیکن ها

برای آنکه به درستی و به دلخواه ظاهر آیکن ها را تغییر دهیم، لازم است خطوط زیر را به فایل custom.css خودمان اضافه کنیم.

.lnr {
	display: inline-block;
	fill: currentColor;
	width: 1em;
	height: 1em;
	vertical-align: -0.05em;
	stroke-width: 1;
}

.services-icon {
	margin-bottom: 20px;
	font-size: 30px;
}

۵- افزودن بخش نمونه کارها

حالا که بیشتر و بیشتر با ساختار توری Bootstrap آشنا شده ایم، اجازه دهید که پیش برویم و با ویژگی های بیشتری از Bootstrap آشنا شویم.

در این قسمت از مقاله می خواهیم یک بخش نمونه کار را با استفاده از یکی دیگر از کامپوننت های فوق العاده Bootstrap یعنی Cards ایجاد کنیم.

کارت ها یک روش مدرن و جالب برای ارائه لیستی از آیتم های شبیه به هم هستند. پُست های یک وبلاگ، محصولات و نمونه کارها و خیلی خیلی چیزهای دیگر.

کارتها در Bootstrap تنوع زیادی دارند و همچنین تعدادی جزء زیرمجموعه که می توانند درون آنها استفاده شوند. از این جمله می توانیم به footer، body، header و تصاویر در موقعیت های مختلف اشاره کنیم.

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

کد مربوط به این بخش را در زیر مشاهده کنید. در ادامه کلاس های جدید Bootstrap را توضیح خواهم داد.

<!-- Portfolio-->
<section class="bg-light">
	<div class="container">
		<h2>Portfolio</h2>
		<p class="lead text-muted mb-5">In enim non sit irure ut adipisicing laboris et laborum.</p>
		<div class="row">
			<div class="col-md-4 mb-4">
				<div class="card shadow border-0 h-100">
					<a href="#"><img src="img/mockup0.jpg" alt="" class="card-img-top"></a>
					<div class="card-body">
						<h5><a href="#" class="text-dark">Ex cupidatat eu</a></h5>
						<p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
						<p class="card-text"><a href="#">Read more</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-4">
				<div class="card shadow border-0 h-100">
					<a href="#"><img src="img/mockup1.jpg" alt="" class="card-img-top"></a>
					<div class="card-body">
						<h5><a href="#" class="text-dark">Tempor aute occaecat</a></h5>
						<p class="text-muted card-text">Tempor aute occaecat pariatur esse aute amet.</p>
						<p class="card-text"><a href="#">Read more</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-4">
				<div class="card shadow border-0 h-100">
					<a href="#"><img src="img/mockup2.jpg" alt="" class="card-img-top"></a>
					<div class="card-body">
						<h5><a href="#" class="text-dark">Voluptate ex irure</a></h5>
						<p class="text-muted card-text">Voluptate ex irure ipsum ipsum ullamco ipsum reprehenderit non ut mollit commodo.</p>
						<p class="card-text"><a href="#">Read more</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-4">
				<div class="card shadow border-0 h-100">
					<a href="#"><img src="img/mockup3.jpg" alt="" class="card-img-top"></a>
					<div class="card-body">
						<h5><a href="#" class="text-dark">Tempor commodo</a></h5>
						<p class="text-muted card-text">Tempor commodo nostrud ex Lorem occaecat duis occaecat minim.</p>
						<p class="card-text"><a href="#">Read more</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-4">
				<div class="card shadow border-0 h-100">
					<a href="#"><img src="img/mockup4.jpg" alt="" class="card-img-top"></a>
					<div class="card-body">
						<h5><a href="#" class="text-dark">Et fugiat sint occaecat</a></h5>
						<p class="text-muted card-text">Et fugiat sint occaecat voluptate incididunt anim nostrud ea cillum cillum consequat.</p>
						<p class="card-text"><a href="#">Read more</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-4">
				<div class="card shadow border-0 h-100">
					<a href="#"><img src="img/mockup5.jpg" alt="" class="card-img-top"></a>
					<div class="card-body">
						<h5><a href="#" class="text-dark">Et labore tempor et</a></h5>
						<p class="text-muted card-text">Et labore tempor et adipisicing dolor.</p>
						<p class="card-text"><a href="#">Read more</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

کارت های Bootstrap

برای ایجاد کارت در Bootstrap، تمام چیزی که باید انجام دهیم این است که یک <div class="card"></div> ایجاد کرده و محتوای خود داخلش بنویسیم. به صورت خودکار یک حاشیه دور آیتم کشیده شده و چهار گوشه آن کمی گرد می شود.

برای نمونه کارهایمان، من تعدادی کلاس دستکاری کننده به کارت ها اضافه کرده ام که با برخی از انها پیش از این آشنا شده ایم.

shadow – سایه ای به هر آیتم اضافه می کند.
border-0 – زمانی که یک سایه به حاشیه آیتم اضافه کرده ایم و کارت ها را در پس زمینه ای با رنگ متضاد قرار داده ایم، با استفاده از این کلاس می توانیم حاشیه به رنگ خاکستری روشن را حذف کنیم.
h-100 – ارتفاع هر کارت را به اندازه %۱۰۰ از عنصر والد خود قرار می دهد. از آنجایی که تمام ستون های یک ردیف در bootstrap دارای ارتفاع یکسان هستند، استفاده از h-100 در یک کارت در یک ستون، ارتفاع همه آنها را یکسان بالا می برد.

چند کامپوننت زیرمجموعه و کلاس باقیمانده در این مثال عبارتند از:

Card image – برای اینکه تصویر درون کارت به درستی قالب بندی شود برای آن از کلاس card-img-top استفاده می کنیم. به این ترتیب حاشیه گرد گوشه های کارت نیز حفظ می شود.
Card body – کلاس card-body یک padding به محتوای درون کارت می دهد.
Card text – کلاس card-text همیشه مورد نیاز نیست، اما وقتی شما دقیقا تعداد پاراگراف های درون کارت را نمی دانید می تواند مفید باشد. اگر کلاس را به همه آنها اضافه نمایید، آخرین پاراگراف به صورت خودکار از پایین margin برابر با ۰ خواهد داشت.

و نتیجه کار به شکل زیر خواهد بود:

من که فکر می کنم خیلی مناسب و معقول به نظر می رسد. پس اجازه دهید که سراغ قسمت بعدی برویم.

۶- افزودن بخش نقل قول ها

Bootstrap برای عنصر blockquote یک مولفه در نظر گرفته است.

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

استفاده از آن بسیار آسان است. فقط باید class="blockquote" را به عنصر blockquote اضافه کنید.

برای اینکه کمی جذاب تر به نظر برسد، یک آیکن به بالای هر نقل قول اضافه می کنیم.

<!-- Quote-->
<section>
	<div class="container">
		<blockquote class="blockquote text-center mb-0">
			<svg class="lnr text-muted quote-icon pull-left">
				<use xlink:href="#lnr-heart"> </use>
			</svg>
			<p class="mb-0">There is no place like 127.0.0.1</p>
			<footer class="blockquote-footer">Someone famous in
				<cite title="Source Title">Source Title</cite>
			</footer>
		</blockquote>
	</div>
</section>

۷- اضافه کردن پاورقی (Footer)

همانطور که می بینید، کار کردن با Bootstrap واقعا ساده است. ما می توانیم بخش های بیشتر و بیشتری را به صفحه اضافه کنیم.

اکنون می خواهیم آخرین بخش یعنی footer را اضافه کنیم.

کد این بخش مثل قبل کاملا سر راست است. از ستون های ساختار توری Bootstrap استفاده کرده و با استفاده از کلاس های کاربردی، رنگ پس زمینه و فاصله ها را تنظیم می کنیم.

در ادامه توضیح بیشتری در مورد قطعه کد زیر خواهم داد.

<!-- Footer-->
<div class="py-5 bg-light">
	<div class="container">
		<div class="row">
			<div class="col-lg-4 mb-4 mb-lg-0">
				<h5>Bootstrap 101</h5>
				<ul class="contact-info list-unstyled">
					<li><a href="mailto:sales@landy.com" class="text-dark">hello@bootstrap101.com</a></li>
					<li><a href="tel:123456789" class="text-dark">+00 123 456 789</a></li>
				</ul>
				<p class="text-muted">Laborum aute enim consectetur eu laboris commodo.</p>
			</div>
			<div class="col-lg-4 col-md-6">
				<h5>Pages</h5>
				<ul class="links list-unstyled">
					<li> <a href="#" class="text-muted">Nisi in commodo</a></li>
					<li> <a href="#" class="text-muted">reprehenderit</a></li>
					<li> <a href="#" class="text-muted">Nostrud</a></li>
					<li> <a href="#" class="text-muted">Et eu eu</a></li>
				</ul>
			</div>
			<div class="col-lg-4 col-md-6">
				<h5>Favourites</h5>
				<ul class="links list-unstyled">
					<li> <a href="#" class="text-muted">Minim labore nulla</a></li>
					<li> <a href="#" class="text-muted">Nulla qui nisi</a></li>
					<li> <a href="#" class="text-muted">Iris Vor Arnim</a></li>
					<li> <a href="#" class="text-muted">Consectetur cupidatat</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<div class="py-3 bg-dark text-white">
	<div class="container">
		<div class="row">
			<div class="col-md-7 text-center text-md-left">
				<p class="mb-md-0">© ۲۰۱۸ Your company. All rights reserved. </p>
			</div>
			<div class="col-md-5 text-center text-md-right">
				<p class="mb-0">Template By <a href="https://bootstrapious.com/" class="external text-white">Bootstrapious</a> </p>
			</div>
		</div>
	</div>
</div>

کلاس های کاربردی جدید

py-3 , py-5 – این دو کلاس padding عمودی اضافه می کنند. py-3 برابر با ۱rem و py-5 برابر با ۳rem فاصله خالی عمودی ایجاد می کند.
mb-4 , mb-lg-0 – کلاس ها کاربردی را می توان با پیشوند واکنشگرا استفاده کرد. mb-4 همانطور که از نامش پیداست، به یک عنصر از پایین حاشیه خالی (۴ = ۱٫۵rem) اضافه می کند. و برای اینکه رفتار واکنشگرا داشته باشیم آن را با mb-lg-0 ترکیب می کنیم. به این ترتیب در صفحه های نمایشی +lg میزان margin برابر صفر خواهد شد.
text-center text-md-left – به طور مشابه، ترکیب این کلاس ها در صفحه های نمایشی کوچک، متن را در مرکز تراز می کند و در صفحه های نمایشی متوسط به بالا، متن در سمت چپ تراز می شود.

جمع بندی

اگر توانستید تا اینجای مقاله برسید، تبریک می گویم!

این آخرین بخش از آموزش است.

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

بنابراین نوبت شماست.

مردم اغلب از من سؤال می کنند که باید چه چیزی بسازند. چه پروژه ای باعث افزایش مهارت های آنها در استفاده از Bootstrap می شود.

من معمولا این پاسخ را می دهم:

از دوستان یا اعضای خانواده خود بپرسید که آیا هر یک از آنها به وب سایت احتیاج دارد؟ شرط می بندم شما بیش از یک نفر را پیدا خواهید کرد که از داشتن یک وب سایت قشنگ که توسط شما ایجاد شده است، هیجان زده شود!

در این سفر طراحی وب برایتان آرزوی موفقیت دارم!

منبع: Big Bootstrap Tutorial – Building a Bootstrap 4 landing page
ترجمه: سیدمحمدحسین طباطبایی بالا

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

آموزش جامع Bootstrap – ساخت یک صفحه فرود (Landing Page) با Bootstrap 4