در این بخش با برد کرامب در بوت استرپ آشنا می‌شوید. برد کرامب یک روش کاربردی برای مسیریابی در سایت یا اپلیکیشن به شمار می‌رود. این نوار به کاربر کمک می‌کند موقعیت فعلی خود را نسبت به ساختار کلی صفحات به‌وضوح تشخیص دهد. در وب‌سایت‌هایی با ساختار پیچیده یا چندلایه، استفاده از برد کرامب باعث بهبود تجربه کاربری می‌شود و در بسیاری از پروژه ها از جمله آموزش پروژه محور بوت استرپ نیز به عنوان یک ابزار کلیدی مورد استفاده قرار می‌گیرد.
برد کرامب ساده (Basic breadcrumbs)
برای ساخت یک برد کرامب ساده، کافی است کلاس .breadcrumb را به یک لیست مرتب یا نامرتب اضافه کنید. با این کار میتوانید چیدمان ایستای برد کرامب را ایجاد کنید. همچنین میتوانید با استفاده از کلاس‌های کمکی (utility classes)، ظاهر برد کرامب را بر اساس نیاز خود طراحی و شخصی سازی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <title>Bootstrap - Breadcrumb</title> </head> <body> <div class="m-4"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Home</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Services</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Services</a></li> <li class="breadcrumb-item active" aria-current="page">Contact</li> </ol> </nav> </div> </body> </html> |
جداکننده ها در برد کرامب بوت استرپ
اگر بخواهید جداکننده پیش‌فرض برد کرامب در بوت استرپ که به‌صورت / نمایش داده می‌شود را با نماد > جایگزین کنید، میتوانید با استفاده از چند خط کد CSS این تغییر را اعمال کنید. نمونه زیر نحوه انجام این کار را نشان می‌دهد.
بوت استرپ جداکننده ها را به‌صورت خودکار با استفاده از شبه عنصر
::beforeو ویژگیcontentدر CSS به هر آیتم اضافه می‌کند. بنابراین برای تغییر شکل جداکننده ها، کافی است مقدارcontentرا در CSS تغییر دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <title>Bootstrap - Breadcrumb</title> </head> <body> <div class="m-4"> <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Services</li> </ol> </nav> </div> </body> </html> |
هنگام تغییر جداکننده برد کرامب با استفاده از Sass، باید رشته ها را با تابع quote داخل کوتیشن قرار دهید. برای مثال، اگر بخواهید نماد > را به عنوان جداکننده قرار دهید، میتوانید از کدی مانند زیر استفاده کنید:
|
1 |
$breadcrumb-divider: quote(">"); |
همچنین میتوانید از آیکون های SVG به‌عنوان جداکننده استفاده کنید. برای این کار، میتوانید از ویژگی‌های سفارشی CSS یا متغیرهای Sass کمک بگیرید. نمونه‌های زیر نحوه استفاده از این روش‌ها را به خوبی نشان می‌دهند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Breadcrumb</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">About us</li> </ol> </nav> </body> </html> |
اگر نمی‌خواهید بین آیتم های لینک دار برد کرامب، جداکننده ای نمایش داده شود، میتوانید مقدار متغیر --bs-breadcrumb-divider را برابر با یک رشته خالی (' ') قرار دهید. همچنین اگر از Sass استفاده می‌کنید، میتوانید متغیر $breadcrumb-divider را روی مقدار none تنظیم کنید:
|
1 |
$breadcrumb-divider: none; |
با این روش، هیچ نمادی بین آیتم های برد کرامب ظاهر نمی‌شود و ساختار ناوبری شما ظاهر ساده تری خواهد داشت.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Breadcrumb</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">About us</li> </ol> </nav> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۴ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
