آشنایی با بوت استرپ

آشنایی با بوت استرپ

آموزش فریم ورک Bootstrap

 

این فریم ورک مجموعه ای از ابزارها و کدهای آماده برای ایجاد صفحات وب و نرم افزارهای تحت وب است که در آن سعی شده با استفاده از CSS , HTML و JavaScript کدهایی تولید شود تا شما بتوانید از آنها به صورت آماده استفاده کنید. این فریم ورک را میتوان جهت تولید و نمایش دکمه ها،تب ها، فرم ها،  ستون ها و سایر المان های مورد نیاز طراحی وب استفاده کنید.

Bootstrap در ابتدا توسط توییتر طراحی و نوشته شد. قبل از شروع این پروژه نمونه های زیادی با همین رویکرد ایجاد شده بود که همگی به دلیل استقبال نکردن طراحان وب از آنها با شکست روبرو شده بود. فریم ورک بوت استرپ در طراحی وب برای دو منظور استفاده میگردد: 1- ریسپانسیو کردن سایت(واکنش گرا کردن سایت) 2-زیبایی سایت.

در این آموزش به نحوه استفاده از این فریم ورک قدرتمند و محبوب خواهیم پرداخت و در انتهای دوره یک پروژه ایجاد خواهیم کرد .

برای استفاده از این فریم ورک قدرتمند کافیست سری به سایت این فریم ورک بزنید. برای دسترسی به این سایت میتوانید روی لینک زیر کلیک کنید.

Bootstrap.css

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

این کتابخانه برای همه قسمت های یک سایت کلاس هایی را تعریف کرده است شما می توانید با استفاده از این کلاس سرعت طراحی خود را افزایش دهید و در سریع ترین زمان ممکن وبسایت مورد نظر خود را طراحی کنید

نحوه استفاده از این فریم ورک بسیار آسان است دو روش برای استفاده از این فریم ورک وجود دارد 

روش اول کافیست تا فایل Css و Js آن را از سایت این فریم ورک دانلود کرده و در پروژه قرار دهید

مانند زیر فایل های css و js را به پروژه اضافه میکنیم

<html>
<head>
<link href="Content/css/Bootstrap.css">
</head>
<body>
<script src="Content/Js/Bootstrap.js"></script>
</body>
</html>

 

این روش را زمانی باید انجام داد که فایل را دانلود کرده باشیم

روش دوم  استفاده کردن بوت استرپ در صفحه میتوان از CDN است

برای استفاده از این روش کافیست CDN بوت استرپ را از اینترنت پیدا کنید و به جای href تگ link و src تگ script قرار دهید

نکته: برای استفاده از این روش باید حتما به اینترنت وصل باشید چون فایل ها از اینترنت دانلود میشود

بوت استرپ دو نسخه دارد یک نسخه معمولی یک نسخه فشرده شده که نسخه فشرده شده تمام خطوط و جاهای خالی اضافی را پاک کرده تا حجم آن کم شود

در طراحی معمولاً از نسخه فشرده شده استفاده می کنند

 

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

نحوه استفاده از بوت استرپ در طراحی سایت بسیار آسان است برای اینکار کافیست به تگ هایی که میخواهیم از بوت استرپ در آن ها استفاده کنیم ویژگی کلاس داده و نام کلاس مورد نظر را از فریم ورک بوت استرپ را مینویسم.

مانند زیر:

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="Container">
<div class="row">
<div class="Col-md-4">
<h2>hello world</h2>
</div>
<div class="Col-md-4">
<img src="Content/images/b1.jpg" class="img-responsive img-thumbnai"/>
</div>
<div class="Col-md-4">
<a href="#" class="btn btn-success"></a>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

 

نکته: اگر شما به بوت استرپ راستچین شده نیاز دارید میتوانید آنرا از لینکی که در قسمت دانلود موجود است دانلود فرمایید.

 

 

امیدواریم که این مقاله برای شما مفید بوده باشد.

سؤالات، انتقادات و پیشنهادات خود را در قسمت نظرات با ما در میان بگذارید.


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