آموزش بوتسترپ ۴ با یک پروژه عملی: ساخت قالب تک صفحه ای واکنشگرا – قسمت سوم

در دو قسمت قبلی آموزش بوتسترپ ۴ (قسمت اول , قسمت دوم)یکسری از ویژگی های جدید رو بررسی کردیم. در این قسمت هم ادامه ی ویژگی ها رو به شما یاد میدیم. با ما باشید.

استفاده از 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>