قوانین پینگ پنگ
در قسمت قبلی از آموزش بوتسترپ ۴ , نحوه دانلود و نصب بوت استرپ و ساختار فایل ها و پوشه های یک قالب واکنشگرا رو یاد گرفتیم و ایجاد کردیم. در این قسمت از آموزش بوتسترپ ۴ به مباحث بعدی یعنی نشانه گذاری و شبکه بندی و … میپردازیم. با ما همراه باشید.
در قسمت قبلی از آموزش بوتسترپ ۴ , نحوه دانلود و نصب بوت استرپ و ساختار فایل ها و پوشه های یک قالب واکنشگرا رو یاد گرفتیم و ایجاد کردیم. در این قسمت از آموزش بوتسترپ ۴ به مباحث بعدی یعنی نشانه گذاری و شبکه بندی و … میپردازیم. با ما همراه باشید.
نشانه گذاری مقدماتی
سند 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-->
4راز که هکر های شبکه وایرلس نمی خواهند شما بدانید. 
