Bootstrap 4 با تغییرات زیاد و خصوصیات جدید به بازار آمده است. در این آموزش متوجه می‌شوید که ساخت قالب تک صفحه‌ای HTML با استفاده از Bootstrap 4 آلفا چقدر کار راحتی است. در این آموزش یاد می‌گیرید که چطور Bootstrap 4 را تنظیم کنید و چطور از برخی ویژگی‌های جدید آن استفاده کنید. همچنین می‌توانید ویدئوی این آموزش را روی یوتیوب مشاهده کنید:
در این مقاله موارد زیر را بررسی می‌کنیم:
- دانلود فایل‌های بوت استرپ
- تنظیم فایل‌های ضروری
- نشانه‌گذاری پایه
- کار با grids
- Jumbotron
- بعضی از کلاس‌های تایپوگرافی
- کارت‌ها
- tooltips بهبودیافته‌ی Bootstrap 4
- جدول کلاس معکوس
- فرم‌های پایه
قبل از شروع، مطمئن شوید که یک ویراستار کد مثل Sublime text و Notepad++ و کمی دانش کار با HTML و CSS را دارید.
منابع موردنیاز برای تکمیل آموزش ساخت قالب تک صفحه‌ای با bootstrap:
- min.css
- css (لازم است تا صفحه خالی را داخل پوشه css درست کنیم)
- min.js
- jQuery به‌وسیله Google’s Hosted library
- فونت‌های Lato، Open Sans و Raleway Google
- CDN) Font Awesome)
- تعدادی عکس (می‌توانید همه تصاویر این آموزش را از اینجا دانلود کنید)
ساختار پوشه
در این آموزش، ساختار پوشه شامل ۳ پوشه و یک فایل HTML خواهد بود:
Html– به‌عنوان فایل اصلی برای کل نشانه‌گذاری‌ها (markup) عمل می‌کند
پوشه img– برای عکس‌ها
پوشه css- برای استایل صفحات (CSS)
پوشه js- برای جاوا اسکریپت
دانلود Bootstrap ۴
دو نسخه برای دانلود وجود دارد: نسخه کمپایل شده Bootstrap و نسخه فایل‌های سورس Bootstrap. می‌توانید فایل‌های سورس Bootstrap را از اینجا دانلود کنید.
تنظیم فایل‌های ضروری
برای آموزش این قسمت، روی انتخاب فایل‌های ضروری تمرکز می‌کنیم که برای تمپلیت رسپانسیو تک صفحه‌ای نیاز داریم.
مقاله مرتبط: Bootstrap چیست؟
پس از دانلود، فایل‌های سورس Bootstrap را از حالت زیپ خارج کنید و فایل‌های زیر را داخل پوشه dist کپی کنید. می‌توانید این فایل‌ها را داخل پوشه css و js در پوشه بازشده dist قرار دهید.
- min.css
- min.js
به‌علاوه لازم است فایل tether.min.js را دانلود کنید یا از نسخه CDN نصب شده بر روی وب‌سایت Tether استفاده کنید تا بتوانید راهنماهای Bootstrap 4 Alpha را به کار ببرید. این فایل‌ها را داخل پوشه js پروژه قرار دهید.
نشانه‌گذاری پایه
فایل HTML ما با <HTML5 <!DOCTYPE شروع می‌شود تا مشخص کند که فایل از چه زبان و نسخه‌ای استفاده می‌کند. سپس در قسمت <head> می‌توانیم تمام CSS، جاوا اسکریپت، لینک‌های فونت و عکس‌ها را قرار دهیم. برای اجرای این هدف، ممکن است بخواهید فایل‌های جاوا اسکریپت را در پایین فایل قرار دهید (درست قبل از بستن تگ </body> ).
<!-- 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>
ممکن است کدهای زیر را نیز اضافه کنیم تا Internet Explorer را مجبور کنیم حالت رندر خود و مشخصه‌ی متا نمایشگر را برای مشاهده‌ی رسپانسیو ارائه دهد.
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge">
برای شروع، از تمپلیت زیر برای شروع HTML قالب رسپانسیو تک صفحه‌ای استفاده خواهیم کرد. توجه کنید که برخی از لینک‌های hosted library مثل فونت Font Awesome و فونت‌های Google در کد زیر اضافه شده است.
<!-- 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>
نحوه کار با grids
سیستم grid بوت استرپ ۴ می‌تواند ۱۲ ستون داشته باشد و می‌توانید اندازه ستونی که می‌خواهید در اندازه‌های مختلف نمایشگر نشان دهید را انتخاب کنید. medium grid بوت استرپ۴ را با کلاس‌های زیر چک کنید.
در این آموزش خیلی درباره‌ی grid system صحبت نمی‌کنیم، هرچند مستقیماً سراغ مقیاس ستون خواهیم رفت که برای ساخت قالب تک صفحه‌ای استفاده می‌شود. ابتدا همه‌چیز را داخل یک div کلاس wrapper بپوشانیم، سپس هر بخش از فایل را از طریق تگ برش تقسیم می‌کنیم و قرار دادن classes specifically برای هر یک می‌دهیم.
<!--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-->
سپس کلاس کانتینر bootstrap را برای پوشاندن عناصر و محتویات سیستم شبکه‌ای آن اضافه می‌کنیم. ما از یک کانتینر تثبیت‌شده استفاده خواهیم کرد. یعنی زمانی که نمایشگر تغییر می‌کند، عرض آن دست‌نخورده باقی می‌ماند تا زمانی که به یک نقطه انفصال مشخص برخورد کند.
مقاله مرتبط: نصب Bootstrap و سیستم Bootstrap Grid
توجه کنید که یک div برای container در بخش Heading قرار ندادیم چون می‌خواهیم آن را به تمام اندازه‌های مرورگر بسط دهیم.
<!--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-->
در ادامه، لازم است ردیف‌ها و ستون‌ها را به divهای container اضافه کنیم. هدف اصلی ردیف‌ها این است که ستون دارای محتوا را بپوشانند. بیایید ردیف‌ها و ستون‌ها را به همراه بعضی کلاس‌های اضافی بیفزاییم.
<!--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 اضافه کنید سپس تگ‌های Headings را به آن بیفزایید. ما در تمپلیت قصد داریم کلاس Jumbotron را استفاده کنیم؛ اما ما چگونگی شکل و ظاهر آن را سفارشی می‌کنیم. برای اینکه تمپلیت جدیدتری درست کنیم قصد داریم از jumbotron برای ایجاد یک افکت جانشین‌سازی پار الکس استفاده کنیم.
کد زیر را داخل قسمت سر صفحه اضافه کنید.
توجه: همچنین یک کلاس jumbotron-fluid برای رسپانسیو بودن آن اضافه کردیم.
<!--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>
کلاس‌های تایپوگرافی پایه
بوت استرپ کلاس‌های خاصی برای نمایش Headings دارد که برای برجسته‌تر کردن Headingهای معمولی طراحی شده‌اند. اساساً ۴ اندازه یا کلاس نمایش Headings وجود دارد:
- display-1
- display-2
- display-3
- display-4
هرچه شماره بزرگ‌تر باشد یعنی اندازه متن بزرگ‌تر است. در مثال بالا (بخش heading)، از display-2 داخل تگ h2 استفاده کرده‌ایم که متن را در سطح اندازه‌ی دوم ارائه می‌کند. حالا بیایید کد زیر را برای قسمت «درباره ما» اضافه کنیم.
<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 با کلاس‌هایی همراه تصاویر و تگ Headings داخلی اضافه کردیم؛ اما به تگ <mark> توجه کنید. این یک عنصر HTML5 است که متن را نشان‌دار شده یا برجسته نمایش می‌دهد تا روی یک کلمه یا جمله تأکید کند. اساساً Bootstrap رندرهای خودش را روی این عناصر دارد. تصویر زیر را نگاه کنید.
درباره‌ی کلاس‌های تایپوگرافی در مقالات جداگانه بیشتر بحث خواهیم کرد.
درست کردن کارت‌ها
کارت‌ها کامپوننت‌های جدیدی در بوت استرپ ۴ آلفا هستند. آنها به‌عنوان یک کانتینر (container) با استایل‌های سبک به‌جای wells، پنل‌ها و thumbnails کار می‌کنند. آنها از انواع گزینه‌های استایل مثل تنظیم، رنگ‌ها، Heading و چیزهای دیگر پشتیبانی می‌کنند.
برای درست کردن یک کارت به‌راحتی کارت و کلاس‌های card-block را به یک div اضافه کنید. برای عنوان آن کلاس card-title و برای متن معمولی card-text را اضافه کنید.
کپی-پیست کنید و کد زیر را به نشانه‌گذاری‌تان در بخش «درباره ما» درج کنید.
<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>
افزودن Tooltips
Bootstrap 4 Alpha به یک library ۳۰ قسمتی به نام tether نیاز دارد تا بتواند راهنماها را نشان دهد. برای استفاده از راهنماها به‌سادگی tether.min.js را درست قبل از فایل bootstrap.js قرار دهید.
برای استفاده از راهنماها از طریق tether، به‌راحتی یک لینک خصیصه‌ی data-toggle=”tooltip” ایجاد کنید و متن راهنما را داخل خصیصه‌ی عنوان قرار دهید. کد نمونه‌ی زیر را چک کنید.
<a href="#" data-toggle="tooltip" title="This is a tooltip">Bootstrap 4 alpha</a>
در مثال بالا از تگ‌های anchor استفاده کرده‌ایم اما راهنماها فقط محدود به این نیستند. می‌توانید آن را در دکمه‌ها و div ها استفاده کنید. برای مقداردهی اولیه به تمام راهنماها در یک صفحه لازم است کد جاوا اسکریپت را زیر لینک سورس tether.min.js اضافه کنید تا راهنماها به کمک ویژگی انتقال اطلاعات (data-toggle) خود انتخاب شوند.
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
می‌توانید به‌راحتی از کد زیر استفاده کنید. بیایید آن را عملاً در بخش خصوصیاتمان ببینیم. کد زیر را داخل کلاس col-lg-12 کپی-پیست کنید.
<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>
جدول کلاس پیشوند “Inverse”
Bootstrap 4 Alpha یک کلاس prefix –inverse جدید اضافه کرده است که خودش رنگ جدول را معکوس می‌کند. کلاس table-inverse را اضافه کنید تا خصیصه‌های آن را فعال کنید. بیایید این را در عمل ببینیم. کد را پایین در قسمت خصیصه‌ها، درست بعد از کد بالا کپی کنید.
<div class="row"> <div class="col-md-6"> <table class="table table-inverse"> <thead> <tr> <th colspan="3" class="text-center">Bootstrap 3</th> </tr> <tr> <th>Size</th> <th>Device</th> <th>Class</th> </tr> </thead> <tbody> <tr> <td>Extra Small</td> <td>Less than 768px</td> <td>col-xs</td> </tr> <tr> <td>Small</td> <td>768px and up</td> <td>col-sm</td> </tr> <tr> <td>Medium</td> <td>992px and up</td> <td>col-md</td> </tr> <tr> <td>Large</td> <td>1200px and up</td> <td>col-lg</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <table class="table table-inverse"> <thead> <tr> <th colspan="3" class="text-center">Bootstrap 4</th> </tr> <tr> <th>Size</th> <th>Device</th> <th>Class</th> </tr> </thead> <tbody> <tr> <td>Extra Small</td> <td>Less than 34em</td> <td>col-xs</td> </tr> <tr> <td>Small</td> <td>34em and up</td> <td>col-sm</td> </tr> <tr> <td>Medium</td> <td>48em and up</td> <td>col-md</td> </tr> <tr> <td>Large</td> <td>62em and up</td> <td>col-lg</td> </tr> <tr> <td>Extra Large</td> <td>75em and up</td> <td>col-xl</td> </tr> </tbody> </table> </div> </div>
همان‌طور که می‌بینید در اینجا چیز خاصی وجود ندارد فقط یک جدول معمولی است اما Bootstrap 4 استایل ها را به کار خواهد برد. تصویر زیر را ببینید.
فرم‌های Bootstrap 4
فرم‌های Bootstrap 4 رسپانسیو هستند که روی نمایشگرها با استفاده از استایل‌های پیش‌فرض display: block و width: ۱۰۰% به‌صورت عمودی انباشته شده‌اند. این به کاربر روی تمام نمایشگرها دید بهتری می‌دهد اما هنوز هم می‌تواند سفارشی شود.
برای استفاده از فرم Bootstrap به‌راحتی کلاس form-control را روی تمام تنظیمات فیلدها مثل ورودی‌ها، text-area و غیره اضافه کنید همچنین لازم است تگ <fieldset> را همراه کلاس form-group داخل آن اضافه کنید.
بیایید این عمل را ببینیم. کدی را که در قسمت تماس با ما، تنظیم کرده‌اید با کد زیر جایگزین کنید.
<!--Contact Us--> <section class="contact" id="contact"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="heading"> <img class="dividerline" src="img/sep.png" alt=""> <h2>Contact Us</h2> <img class="dividerline" src="img/sep.png" alt=""> <h3>Feel free to reach out for any questions! </h3> </div> </div> </div> </div> <div class="container mx-width"> <div class="row"> <div class="done"> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> Your message has been sent. Thank you! </div> </div> <div class="col-md-12"> <form> <fieldset class="form-group"> <input type="text" class="form-control" id="Name" placeholder="Name"> </fieldset> <fieldset class="form-group"> <input type="email" class="form-control" id="Email" placeholder="Email"> </fieldset> <fieldset class="form-group"> <textarea class="form-control" rows="3" placeholder="Message"></textarea> </fieldset> <button type="submit" class="contact submit">Submit</button> </form> </div> </div> </div> </section>
توجه کنید که در اینجا برخی کلاس‌های پشتیبانی alert-success را اضافه کردیم تا به کاربر اطلاع دهد که فرم با موفقیت ارسال‌شده است.
فوتر و آیکون‌ها
بوت استرپ ۳، ۱۲ عدد کامپوننت قابل‌استفاده مجدد glyphicons را ارائه می‌کند که برای اهداف مختلف می‌تواند به کار رود. در Bootstrap 4 Alpha این خصیصه در نظر گرفته نشده است.
برای بخش پانویسمان قصد داریم کلاس‌های آیکون فونت Awesome ((https://fortawesome.github.io/Font-Awesome/ را برای آیکون‌های شبکه‌های اجتماعی قرار دهیم.
<ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul> © 2015 - Designmodo.com
با تمام کدهایی که تابه‌حال نوشته‌ایم. دقیقاً همان خروجی که در شکل زیر می‌بینید را خواهید داشت.
سفارشی سازی وب‌سایت تک صفحه‌ای
تا الان هر چیزی را روی HTML مان تنظیم کرده‌ایم، نیاز داریم استایل‌ها را سفارشی کنیم تا تمپلیت یک صفحه‌ای ما عالی به نظر برسد. custom.css را باز کنید و استایل‌های عمومی زیر را برای کلاس‌ها و عناصر پایه‌ای‌مان اضافه کنید.
body {
font-family:'Lato', sans-serif;
font-size:1em;
color:#777;
font-weight:300;
line-height:1.7;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
color:#333;
line-height:1.4;
font-weight:700;
}
.mx-width {
max-width:960px;
margin:0 auto;
}
a,a:hover {
color:#563d7c;
text-decoration:none;
}
img{
width:100%;
max-width: 100%;
height:auto;
}
.card-img-top{
width:100%;
height:auto;
}
header {
padding-bottom:50px;
}
.display-2 {
font-family:'Lato';
font-size:60px;
line-height:1;
font-weight:300;
color:#fff
}
.learn {
font-family:'Lato';
font-size:27px;
line-height:1.4;
font-weight:300;
color:#fff;
}
.jumbotron-fluid {
padding:0;
}
سپس، برخی استایل‌های خود را برای افکت پارالکس از طریق parallax و کلاس parallax-pattern-overlay تنظیم می‌کنیم.
.parallax {
text-align:center;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed!important;
overflow:hidden;
}
.parallax-pattern-overlay {
background-image:url(../img/pattern.png);
background-repeat:repeat;
}
برای کلاس heading به تنظیم خاصی با حداکثر عرض ۹۶۰ پیکسل نیاز داریم و سپس به هر تگ Headings کمی font-size و استایل‌های بیشتر برای تأکید بر هرکدام می‌دهیم.
.heading {
padding-bottom:15px;
text-align:center;
max-width:960px;
margin:0 auto;
padding-top:80px;
}
.heading h2 {
font-weight:600;
font-family:'Raleway';
font-size:40px;
color:#333;
margin:0;
padding:5px;
}
.heading h3 {
font-size:1em;
line-height:1.7;
}
#site-title {
max-width:150px;
}
سپس بیایید کمی استایل به فرم‌هایمان اضافه کنیم. فرم‌های پیش‌فرض Bootstrap مقدار نرمالی برای لایه گذاری (padding) و یک شعاع مرزی خوب دارند اما برای تمپلیت رسپانسیو یک-صفحه ای‌مان قصد داریم یک طراحی فلت به کار ببریم. استایل زیر را کپی-پیست کنید.
input.form-control {
background:#fff;
border:solid 1px #ddd;
color:#000;
padding:15px 30px;
margin-right:3%;
margin-bottom:30px;
outline:none;
border-radius: 0;
}
textarea.form-control {
background:#fff;
color:#000;
border:solid 1px #ddd;
padding:15px 30px;
margin-bottom:40px;
outline:none;
height:200px;
border-radius: 0;
}
button.contact.submit {
background:#333;
font-family:'Lato',sans-serif;
color:#fff;
font-size:1em;
font-weight:400;
text-align:center;
margin:0;
border:none!important;
border-radius:3px;
padding:15px 45px;
}
button.contact.submit:hover {
background:#563d7c;
}
.form-control:focus{
border-color: #563d7c;
outline: 0;
}
.done {
display:none;
}
سپس بیایید استایل‌ها را به پانویس اضافه کنیم. یک رنگ پس‌زمینه‌ای بنفش روشن خوب را تنظیم کردیم و برای نوشته‌های پانویس و آیکون‌ها بعضی استایل‌ها را دادیم. اینجا چیز خاصی نیست.
.footer {
background:#563d7c;
margin-top:120px;
position:relative
}
.footer .container {
padding:60px 0 20px;
}
.footer ul {
margin:0 auto;
margin-bottom:30px;
margin-top:10px;
text-align:center;
list-style-type:none;
padding-left:0;
}
.footer ul li {
text-align:center;
display:inline-block;
background:rgba(0,0,0,0.2);
color:#fff;
line-height:45px;
margin:0 4px;
width:45px!important;
height:45px!important;
-webkit-border-radius:3px;
border-radius:3px;
}
.footer ul li:hover {
background:#2a2a2a;
}
.footer ul li:hover a {
color:#fff;
}
.footer ul li a {
color:#fff;
width:42px!important;
height:42px!important;
}
.footer ul li a i {
line-height:45px;
color:#fff;
}
.footer p {
color:#fff;
font-size:.9em;
line-height:24px;
font-weight:300;
text-align:center;
text-transform:uppercase;
}
.footer a,.footer a:hover {
color:#fff;
}
در آخر، برخی عناصر را روی نمایشگر ۷۶۸ پیکسلی از طریق کوئری‌های رسانه‌ای به‌ویژه با بعضی از اندازه‌های ستون‌ها سفارشی می‌کنیم تا برای این سایز از صفحه‌نمایش‌ها آن را خوش‌ظاهر کنیم.
@media screen and (max-width:768px) {
input.contact.col-md-6{
width:40.5%;
margin: 15px 15px 0 58px;
}
textarea.contact.col-md-12 {
margin: 15px 15px 0 58px;
}
button#submit.contact.submit{
margin: 15px 15px 0 42px;
}
}
نتیجه‌گیری
برای سفارشی کردن طراحی یا کدهایی که در بالا آموزش داده شد، می‌توانید تغییرات مد نظر خود را اعمال کنید. اگر می‌خواهید درباره Bootstrap 4 بیشتر بدانید همیشه می‌توانید به وب سایت Bootstrap مراجعه کنید.
