آموزش Bootstrap 4 : در قسمت قبلی از آموزش بوتسترپ ۴ , نحوه دانلود و نصب بوت استرپ و ساختار فایل ها و پوشه های یک قالب واکنشگرا رو یاد گرفتیم و ایجاد کردیم. در این قسمت از آموزش بوتسترپ ۴ به مباحث بعدی یعنی نشانه گذاری و شبکه بندی و … میپردازیم. با ما همراه باشید.

آموزش Bootstrap 4 : نشانه گذاری مقدماتی

سند HTML ما با <DOCTYPE!> برای مشخص کردن زبان و نسخه ای که سندمون استفاده می کنه شروع میشه (نسخه اچ تی ام ال مورد استفاده ی ما HTML 5 هست) .سپس در قسمت <head> میتوانید تمام لینکهای فایلهای CSS, جاوااسکریپت, فونت و عکس رو قرار بدید. در صورت لزوم و برای استفاده های خاص میتوانید فایل های جاوااسکریپت را در انتهای سند فراخوانی کنید (قبل از تگ <body/>)

HTML
<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Boostrap 4 - Tutorial</title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="author" content="Sam Norton">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

توجه دارید که در کد بالا ما فایل های bootstrap.min.css رو که در قسمت قبلی آموزش وارد فولدر css قالبمون کرده بودیم رو فراخوانی کردیم. همچنین فایل های فونت (مثل font awsome) رو هم فراخوانی کردیم.

به علاوه, میتونیم با اضافه کردن کد زیر, اینترنت اکسپلورر رو مجبور به رندر کردن صفحه در حالت واکنشگرا بکنیم (درواقع اون رو مجبور کنیم که صفحه ی ما رو به صورت واکنشگرا نمایش بده).

HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

برای شروع, ما از قالب زیر به عنوان سند Html آغازین قالب واکنشگرامون استفاده می کنیم. توجه داشته باشید که من لینک تعدادی از کتابخانه های میزبانی شده در سرور های دیگه مثل Font Awsome و Google Fonts رو به کد زیر اضافه کردم. همچنین همونطور که میبینید فایل های کتابخانه ی جی کوئری مثل (jquery.min.js) و جاوااسکریپتمون (مثل bootstrap.min.js) رو هم اضافه کردم.

HTML
<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Boostrap 4 - Tutorial</title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="author" content="Sam Norton">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<!---CONTENT HERE-->
<!-- JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tether.min.js"></script>
</body>
</html>

کار با شبکه ها

سیستم شبکه ی بوت استرپ ۴ می تواند ۱۲ ستون داشته باشد و شما میتونید برای صفحات با رزولوشن متفاوت, ستون هایی با مقیاس دلخواهتون رو انتخاب کنید.در زیر میتونید نگاهی کلی به سیستم شبکه بندی بوتسترپ در سایز medium داشته باشید. شبکه بندی پایین فقط در صفحاتی با رزولوشن بالاتر از ۴۸em قابل نمایشه.

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

اجازه بدید تا اول همه چیز رو درون یک کلاس با نام wrapper قرار بدیم و سپس هر قسمت از سندمون رو از طریق تگ section تقسیم کنیم و برای هر کدوم به طور خاص کلاس هایی قرار بدیم.(توجه داشته باشید کد هایی که در ادامه میان, بین دو تگ <body> و <body/> سند html مون قرار میگیرن)

HTML
<!--wrapper start-->
<div class="wrapper" id="wrapper">
<!--header section-->
<header>
</header>
<!--about us section-->
<section class="aboutus" id="aboutus">
</section>
<!--features section-->
<section class="features" id="features">
</section>
<!--contact us section-->
<section class="contact" id="contact">
</section>
<!--footer section-->
<section class="footer" id="footer">
</div>
</section>
</div>
<!--wrapper end-->

در مرحله ی بعد, کلاس container بوت استرپ رو اضافه می کنیم. با اینکار عناصر ما بسته بندی میشن و میتونیم درون این کلاس از شبکه بندی بوت استرپ استفاده کنیم. ما از یک container از نوع fixed استفاده خواهیم کرد. به این معنا که به هنگام تغییر رزولوشن صفحه نمایش, تا زمانی که عنصر ما به یک نقطه شکست مشخص برخورد نکرد, عرض عنصر ثابت باقی میمونه. یا واضح تر بگم, در صورتی که رزولوشن صفحه نمایش بزرگتر از عرض انتخابی ما برای عنصر باشه, اون عنصر با همون عرض انتخابی ما نمایش داده میشه و اما اگه سایز صفحه نمایش کوچکتر از عرض عنصر ما بشه, عنصر هم خودش رو کوچیک میکنه تا از صفحه بیرون نزنه.

توجه داشته باشید که ما دایو container رو در بخش header قرار نمیدیم چرا که میخوایم تمام قسمت های قالب واکنشگرا بشن. بیاین با هم انجامش بدیم.

HTML
<!--wrapper start-->
<div class="wrapper" id="wrapper">
<!--header section-->
<header>
</header>
<!--about us section-->
<section class="aboutus" id="aboutus">
<div class="container">
</div>
</section>
<!--features section-->
<section class="features" id="features">
<div class="container">
</div>
</section>
<!--contact us section-->
<section class="contact" id="contact">
<div class="container">
</div>
</section>
<!--footer section-->
<section class="footer" id="footer">
<div class="container">
</div>
</div>
</section>
</div>
<!--wrapper end-->

در ادامه, ما نیاز داریم تا سطر ها (row) و ستون ها (col) رو درون دایو container قرار بدیم. هدف اصلی استفاده از کلاس های row اینه که این کلاس ها, ستون رو در مواقعی که شامل محتوا هست بسته بندی کنند. بیاید اضافه کردن سطر ها و ستون ها رو با تعدادی کلاس اضافی شروع کنیم. از این کلاس ها نترسید! بعدا درموردشون بیشتر صحبت خواهیم کرد.

HTML
<!--wrapper start-->
<div class="wrapper" id="wrapper">
<!--header section-->
<header>
</header>
<!--about us section-->
<section class="aboutus" id="aboutus">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
</section>
<!--features section-->
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
</section>
<!--contact us section-->
<section class="contact" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</section>
<!--footer section-->
<section class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</div>
</section>
</div>
<!--wrapper end-->

استفاده از Jumbotron

Jumbotron, پیام های تجاری ایجاد و بازدیدکنندگان رو به انجام کاری تشویق میکنه. Jumbotron بوت استرپ (با نام سابق: hero unit) یک بنر بزرگ به شکل بخشی با متن بزرگ, پس زمینه ی خاکستری روشن است که با کادری که حاشیه های گرد داره احاطه شده.

برای ساخت یک Jumbotron, باید کلاس Jumbotron رو به عنصر div و سپس تگ های header رو بهش اضافه کنید. برای قالبمون از کلاس Jumbotron استفاده خواهیم کرد اما ما میخوایم بیشتر شخصی سازیش کنیم. برای مدرن تر ساختن این قالب از Jumbotron برای ساخت یک اثر parallax استفاده خواهیم کرد. کد زیر رو درون بخش header اضافه کنید.

توجه: ما همچنین یک کلاس jumbotron-fluid برای دادن حالت واکنشگرا به قالبمون, اضافه کردیم.

HTML
<!--header section-->
<header>
<div class="jumbotron jumbotron-fluid" id="banner">        
<div class="parallax text-center" style="background-image: url(img/cover.jpg);">
<div class="parallax-pattern-overlay">
<div class="container text-center" style="height:580px;padding-top:170px;">
<a href="#"><img id="site-title" src="img/logo.png" alt="logo"/></a>
<h2 class="display-2">Boostrap 4 Alpha is here!</h2>
<h3 class="learn">Wanna know how to use it?</h3>
</div>
</div>
</div>
</header>

کلاس های مقدماتی تایپوگرافی

بوت استرپ کلاس های مخصوصی برای نمایش دادن عناوین داره که برای ایستا بودن بیشتر از عناوین معمولی طراحی شده. در واقع, چهار سایز/ کلاس نمایش دادن عناوین وجود دارد:

  • display-1
  • display-2
  • display-3
  • display-4

عدد بزرگتر به معنای اندازه ی بزرگتر متن است. در مثال بالا (بخش هدر) ما از display-2 درون تگ h2 استفاده کرده ایم که متن را به اندازه ی دومش نمایش می دهد.

و حالا بیاین کد زیر رو به بخش درباره ی ما اضافه کنیم:

HTML
<div class="heading text-center">
<img class="dividerline" src="img/sep.png" alt="">
<h2>About Boostrap 4 Alpha</h2>
<img class="dividerline" src="img/sep.png" alt="">
<h3><mark>Bootstrap</mark> is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. On <mark>August 19</mark>, Bootstrap 4 alpha was released with the removal of support for IE8. Of course, there are still going to be a couple of alphas before they move to the beta phase, but this gives us a glimpse on what to expect on the next versions.</h3>
</div>

هیچ چیز خاصی در این کد وجود نداره: من فقط یک کلاس div رو با کلاس هایی به همراه عکس ها و تگ های هدر, درونش اضافه کردم اما به تگ <mark> توجه کنید. این یک عنصر HTML5 است که متن ها را به صورت هایلایت یا تاکید شده برای اهمیت دادن به یک کلمه یا یک جمله نشان می دهد. اساساً بوت استرپ شیوه نمایش مخصوص به خودش رو برای این عنصر داره. به تصویر زیر نگاه کنید.

کلاس های تایپوگرافی را در مقاله ای دیگر مورد بحث قرار می دهیم.

ایجاد card ها

card ها اجزای جدید بوت استرپ ۴ آلفا هستند. اون ها به عنوان یک کانتینر با استایل هایی سبک و ساده و به جای well ها, پنل ها و thumnail ها وارد کار شدند. این اجزا از تنظیمات مختلف استایل مانند چیدمان, رنگ, عناوین و … پشتیبانی می کنند.

برای ساخت یک card, کافیه کلاس های card و card-block رو به div اضافه کنید. برای عنوانش کلاس card-title را و برای متنش کلاس card-text را اضافه کنید.

کد زیر را درون بخش درباره ی ما اضافه کنید.

HTML
<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img-top" src="img/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #1</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-primary text-center">
<img class="card-img-top" src="img/card2.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #2</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-success text-center">
<img class="card-img-top" src="img/card3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #3</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-info text-center">
<img class="card-img-top" src="img/card4.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #4</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>

افزودن Tooltip ها

بوتسترپ ۴ آلفا نیازمند یک کتابخانه سوم به نام tether برای فعالسازی تولتیپ ها هست. برای استفاده از تولتیپ ها آدرس کتابخانه ی tether.min.js رو قبل از محل فراخوانی bootstrap.js به قالبتون اضافه کنید.

برای استفاده از تولتیپ ها از طریق tether, به سادگی یک لینک بسازید و عبارت data-toggle=”tooltip” رو به ویژگی هاش اضافه کنید. سپس متن تولتیپ خودتون رو به عنوان مقدار صفت title لینک قرار بدید. به نمونه کد زیر توجه کنید:

Html
<a href="#" data-toggle="tooltip" title="This is a tooltip">Bootstrap 4 alpha</a>

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

شما میتونید از اونها در button ها و div ها هم استفاده کنید. برای مقداردهی اولیه همه ی تولتیپ ها در یک صفحه, نیاز هست تا یک کد جاوااسکریپت رو به زیر لینک فراخوانی tether.min.js اضافه کنید تا تولتیپ ها رو براساس صفت data-toggle شون انتخاب کنه.

میتونید از کد زیر استفاده کنید:

Html, JavaScript
<script type="text/javascript">
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})    
</script>

بیاید عملکردش رو در بخش features مون ببینیم. کد زیر رو کپی و در کلاس col-lg-12 پیست کنید.

Html
<div class="heading text-center">
<img class="dividerline" src="img/sep.png" alt="">
<h2>Enhanced Features</h2>
<img class="dividerline" src="img/sep.png" alt="">
<h3><a href="#" data-toggle="tooltip" title="This is a tooltip">Bootstrap 4 alpha</a> has a new prefix <a href="#" data-toggle="tooltip" title="Make all backgrounds black!">–inverse</a> class that gives a background to the table itself. Another cool thing about this is the improve tooltips and popovers which help a lot of developers when it comes to ease of use. Thanks to <a href="#" data-toggle="tooltip" title="Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.">Tether</a> , a third party library it has improved. </h3>
</div>

در اینجا قسمت دوم آموزش Bootstrap 4 به پایان رسید. در ادامه همراه شما خواهیم بود با قسمت آخر آموزش بوتسترپ ۴