خواندن ۴ دقیقه·۳ سال پیش

آموزش ساخت منو فروشگاهی ریپانسیو با bootstrap!

بوت استرپ چیست؟

بوت استرپ یک فریمورک است که به کمک زبان های javascript و css نوشته شده است و به طراحی سریع تر کمک میکند و باعث واکنشگرا شدن سایت شما میشود.

بوت استرپ4 (bootstrap4) جدید ترین ورژن بوت استرپ است که با عناصر جدید تر ، استایل دهی سریع تر و آسان تر و بسیار ریسپانسیو تر است.

راه اندازی bootstrap4 به ساده ترین روش:

یکی از روش های راه اندازی bootstrap اضافه کردن آن به کمک cdn است که در این صورت اگر به اینترنت متصل باشیم میتوانیم از این فریمورک استفاده کنیم.

روش ساده تر لینک کردن bootstrap در فایل پروژه است که ساده تر و با دوام تر است.

برای این کار قطعه کد زیر را در قسمت <head> فایل html خود قرار دهید.

<!-- Latest compiled and minified CSS -->                                                                                       
<link rel=&quotstylesheet&quot
href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot>  <!--
jQuery library -->                                                                                                                               
<script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot>                     
<!-- Popper JS -->
<script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot>
<!-- Latest compiled JavaScript -->
<script src=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot>

تا اینجا bootstrap 4 را به پروژه اضافه کردیم و هر کدی از این کتابخانه را که وارد کنیم برای ما کار میکند.

حالا میتوانیم کد های html و bootstrap را بنویسیم:

<nav class=&quotnavbar navbar-expand-lg navbar-dark menu&quot>
<a class=&quotnavbar-brand&quot href=&quot#&quot> اسپرت کالا</a>
<button class=&quotnavbar-toggler&quot type=&quotbutton&quot data-toggle=&quotcollapse&quot data
target=&quot#collapsibleNavbar&quot>
<span class=&quotnavbar-toggler-icon&quot></span>
</button>
<div class=&quotcollapse navbar-collapse&quot id=&quotcollapsibleNavbar&quot>
<ul class=&quotnavbar-nav&quot>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link &quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
لوازم بدنسازی
</a>
<div class=&quotdropdown-menu&quot >
<a class=&quotdropdown-item&quot href=&quot#&quot> وزنه دمبلی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>وزنه دست و پا</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>میز پرس و میز بدنسازی </a>
<a class=&quotdropdown-item&quot href=&quot#&quot>لوازم جانبی باشگاهی </a>
<a class=&quotdropdown-item&quot href=&quot#&quot> لوازم ورزشی خانگی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot> هالتر </a>
<a class=&quotdropdown-item&quot href=&quot#&quot>  رک و جا دمبلی </a>
</div>
</li>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link&quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
ایروبیک و لاغری
</a>
<div class=&quotdropdown-menu&quot>
<a class=&quotdropdown-item&quot href=&quot#&quot> لوازم ایروبیک</a>
<a class=&quotdropdown-item&quot href=&quot#&quot> توپ ایروبیک  </a>
<a class=&quotdropdown-item&quot href=&quot#&quot> حلقه لاغری </a>
<a class=&quotdropdown-item&quot href=&quot#&quot>  زیر انداز ورزشی  </a>
<a class=&quotdropdown-item&quot href=&quot#&quot> کش ورزشی </a>
</div>
</li>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link &quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
ورزش های توپی و راکتی
</a>
<div class=&quotdropdown-menu&quot>
<a class=&quotdropdown-item&quot href=&quot#&quot> تنیس روی میز </a>
<a class=&quotdropdown-item&quot href=&quot#&quot>  میز پینگ پنگ</a>
<a class=&quotdropdown-item&quot href=&quot#&quot> راکت پینگ پنگ</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>توپ پینگ پونگ</a>
<a class=&quotdropdown-item&quot href=&quot#&quot> لوازم جانبی توپی</a>
</div>
</li>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link&quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
لوازم جانبی ورزشی
</a>
<div class=&quotdropdown-menu&quot>
<a class=&quotdropdown-item&quot href=&quot#&quot>کمربند ورزشی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>شکم بند ورزشی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>بارفیکس</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>دارت</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>طناب </a>
<a class=&quotdropdown-item&quot href=&quot#&quot> ترامپلین</a>
</div>
</li>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link&quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
لباس ورزشی زنانه
</a>
<div class=&quotdropdown-menu&quot><a class=&quotdropdown-item&quot href=&quot#&quot>شلوار زنانه</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>تیشرت زنانه</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>شلوارک زنانه</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>تاپ و نیم تنه </a>
<a class=&quotdropdown-item&quot href=&quot#&quot> تاپ و اکسسوری</a>
</div>
</li>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link&quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
لباس ورزشی مردانه
</a>
<div class=&quotdropdown-menu&quot>
<a class=&quotdropdown-item&quot href=&quot#&quot>شلوار مردانه</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>تیشرت مردانه </a>
<a class=&quotdropdown-item&quot href=&quot#&quot>شلوارک مردانه</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>حلقه ای و رکابی ورزشی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>گرم کن ورزشی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>سویشرت وهودی ورزشی</a>
</div>
</li>
<li class=&quotnav-item dropdown&quot>
<a class=&quotnav-link &quot href=&quot#&quot id=&quotnavbardrop&quot data-toggle=&quotdropdown&quot>
تخیف ها
</a>
<div class=&quotdropdown-menu&quot>
<a class=&quotdropdown-item&quot href=&quot#&quot>خانم ها</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>آقایان</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>لوازم جانبی</a>
<a class=&quotdropdown-item&quot href=&quot#&quot>توپ ها</a>
</div>
</li>
</ul>
</div>
</nav>

کد های گفته شده تلفیقی از html و bootstrap بودند و استایل پیش فرض آن سیاه سفید است.اگر بخواهید این استایل هارا تغییر دهید باید این کار را به کمک کلاس یا id داده شده انجام دهید.

نکته:

روش حرفه ای تر استایل دادن به پروژه این است که استایل ها در یک فایل جدا تعریف شوند و بعد آن را به فایل html لینک کنید.

برای اینکار یک فایل با نام style و پسوند css. بسازید و در قسمت <head> فایل html خود بنویسید:

 <link rel=&quotstylesheet&quot href=&quotstyle.css&quot type=&quottext/css&quot>

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

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

.menu {
background-color: rgb(163, 17, 156) !important;
width: 100% !important;
direction: rtl !important; 
}
.items {
color: #fff !important;
}

وقتی میخواهید به کدهای bootstrap استایل دهید important! را فراموش نکنید!

کدهای bootstrap به صورت پیش فرض دارای استایل هستند و اگر background یا color آن را تغییر دهید هیچ اتفاقی نمی افتد و تغییری اعمال نمیشود.

اگر میخواهید استایل دلخواه خود را به پروژه اضافه کنید باید از عبارت important! استفاده کنید.

با important! میتوانیم خاصیت آبشاری css را به هم بزنیم و یا به عبارت دیگر css را وادار به خواندن آن خصوصیت کنیم.

menu منو ریسپانسیو bootstrap html و css طراحی وب سایت

شیما حیدری

Nerd??‍??

شاید از این پست‌ها خوشتان بیاید