آموزش بوت استرپ4
آموزش بوت استرپ4
با سلام و خداقوت به شما همران عزیز و صمیمی، با آموزش بوت استرپ 4 (قسمت اول) در خدمتتون هستیم.
همون طوری که در مقاله ی قبل گفته شد (بوت استرپ چیست؟)، بوت استرپ فریم ورکی رایگان بر مبنای css , html است. از تکنولوژی بوت استرپ برای طراحی سریع تر و راحتر صفحات وب استفاده می شود.مهم ترین مزیتی که بوت استرپ را متمایز می کند ، توانایی آن در ایجاد صفحات ریسپانسیو است. شما به کمک بوت استرپ می توانید صفحاتی را طراحی کنید که در نمایشگرهایی با ابعاد مختلف به درستی نمایش داده می شوند. در این سری مقالات بوت استرپ 4 را با هم بررسی می کنیم.
برای استفاده از بوت استرپ شما نیاز به یک ادیتور ساده مانند ویژوال استدیو کد دارید. دانلود ویژوال استدیو کد
پس از نصب برنامه از دو طریق می توانید از بوت استرپ 4(جدیدترین ورژن بوت استرپ ) استفاده کنید:
- تگ بوت استرپ را از CDN ، در قسمت head سورس کدتان ،وارد کنید(include کردن)
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
- دانلود بوت استرپ 4 از سایت getbootstrap.com
نکته: یکی از مزایای استفاده از تگ بوت استرپ cdn این موضوع است که بسیاری از کاربران هنگام مشاهده سایت های دیگر در اینترنت، بوت استرپ4 را از cdn دانلود کرده و در کش سیستم شان ذخیره دارند. هنگام مشاهده سایت شما به علت عدم نیاز به دانلود مجدد این فایل ، سایتتان سریع تر لود می شود.
ایجاد یک صفحه وب با بوت استرپ4
1 – اضافه کردن HTML5 doctype
بوت استرپ 4 از المان های html5 و ویژگی های css استفاده می کند. همیشه در ابتدا باید داک تایپ html5 را در سورس کد برنامه اضافه کنید.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
2- اضافه کردن متا تگ بوت استرپ4 در هد برنامه
از آن جایی که مهم ترین مزیت بوت استرپ ریسپانسیویلیتی بودن آن است.برای انجام این وظیفه خطیر ، شما باید متا تگ viewport را در هد برنامه وارد کنیم.
<meta name="viewport" content="width=device-width, initial-scale=1">
3- container
بوت استرپ4 برای نگه داری اجزای صفحه از کلاس های کانتینر استفاده می کند.
دو نوع کلاس کانتینر وجود دارد:
- .container
<div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div>
2.container-fluid(عرض این کلاس به اندازه عرض صفحه نمایش است.)
<div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div>
سیستم شبکه ای بوت استرپ4
بوت استرپ4 بر اساس سیستم شبکه ایی طراحی شده است که به طراحان این امکان را می دهد که 12 ستون در صفحه(در یک ردیف درست نمایند) .
اگر شما نخواهید که از این12 ستون درطراحی صفحه تان استفاده کنید، می توانید آن ها را به صورت گروهی در هم ادغام نمایید.
کلاس های شبکه ایی بوت استرپ
بوت استرپ، شامل 5 کلاس برای گریدها می باشد:
- .col- وسایلی با نمایشگر هایی خیلی کوچک (کوچکتر از 576 پیکسل)
- .col-sm وسایل کوچک( صفحاتی با اندازه 576 پیکسل و یا بیشتر)
- .col-mdوسایل متوسط(صفحاتی با اندازه 768 پیکسل و یا بیشتر)
- .col-lg mdوسایل بزرگ(صفحاتی با اندازه 992 پیکسل و یا بیشتر)
- .col-xl mdوسایل خیلی بزرگ(صفحاتی با اندازه 1200 پیکسل و یا بیشتر)
به عنوان مثال
برای طراحی صفحه ایی با 3ستون به اندازه مساوی در همه ی نمایشگرها ،از کد زیر استفاده می کنیم.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
ستون های ریسپانسیو
ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود
[member]
برای ایجاد ستون هایی که در نمایشگرهای کوچک(گوشی های همراه)به صورت درست و تکی نمایش داده شوند از دستور زیر استفاده می کنیم:
<div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div>
2 ستون ریسپانسیو با اندازه های نابرابر
برای نمایش دو ستون در یک ردیف با اندازه های نامساوی از کدهای زیر استفاده می کنیم:
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
امیدواریم که این مقاله براتون مفید واقع بشه، در صورت هر گونه سوال و یا ابهامی برامون کامنت بزارید.
[/member]
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.