در این بخش به لینک آیکون دار در بوت استرپ پرداخته می شود؛ یعنی لینک هایی که همراه با یک آیکون نمایش داده می شوند و ظاهر آن ها را می توان با استفاده از این آیکون ها جذاب تر کرد.
لینک با آیکون در بوت استرپ لینکی است که یک آیکون در کنار متن آن قرار می گیرد. این آیکون می تواند قبل یا بعد از متن بیاید. استفاده از آیکون در لینک، به کاربر کمک می کند تا راحت تر مفهوم لینک را درک کند. اگر به دنبال یادگیری عمیق‌تری در این زمینه هستید، پیشنهاد میکنیم آموزش طراحی سایت با بوت استرپ را دنبال کنید تا بتوانید از این قابلیت‌ها در پروژه‌های خود به‌درستی استفاده کنید.
لینک های آیکون دار ظاهر صفحه را زیباتر می کنند و به آن جلوه ای تعاملی می دهند. این نوع لینک ها در بخش هایی مثل منوهای ناوبری، دکمه ها یا لینک های دعوت به اقدام کاربرد دارند. کلاس های کمکی مخصوص لینک های آیکون دار در بوت استرپ به صورت خودکار آیکون و متن را هم‌راستا می کنند. این ویژگی باعث می شود نمایش آن ها حرفه ای تر به نظر برسد.
در این نوع لینک ها می توان از آیکون های بوت استرپ یا هر نوع تصویر و آیکون دیگر استفاده کرد.
- اگر آیکون فقط جنبه تزئینی دارد، باید با استفاده از ویژگی
aria-hidden="true"از دید ابزارهای کمکی مانند صفحه خوان ها پنهان شود. - اگر آیکون برای انتقال معنا یا اطلاعات استفاده می شود، باید یک توضیح متنی مناسب برای آن مشخص شود. برای این کار، از ویژگی
role="img"همراه باaria-labelمناسب استفاده می شود. این کار باعث می شود کاربرانی که از ابزارهای کمکی استفاده می کنند نیز بتوانند مفهوم آیکون را متوجه شوند.
مثال لینک آیکون دار در بوت استرپ
- به یک عنصر معمولی
<a>، کلاس.icon-linkرا اضافه کنید. - سپس یک آیکون را قبل یا بعد از متن لینک قرار دهید.
- کلاس
.icon-linkبه صورت خودکار اندازه، موقعیت و رنگ آیکون را تنظیم می کند تا به شکل هماهنگ و زیبا در کنار متن نمایش داده شود.
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Icon Link</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> <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script> <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation"> <div class="container"> <div class="navbar-header"> <h1 class="logo"> <a title="tutorialspoint"> <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png" style="height: auto; width: auto; display: inline-block; top: 0px;"> </a> </h1> </div> </div> </nav> <div class="container mt-2"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="box-seam" viewBox="0 0 16 16"> <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"></path> </symbol> </svg> <div class="feature col"> <h3 class="fs-2 text-danger">Icon link example</h3> <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link.</p> <a class="icon-link" href="#"> <svg class="bi" aria-hidden="true"> <use xlink:href="#box-seam"></use></svg> Box Icon with text link </a> </div> </body> </html> |
در ادامه یک مثال دیگر را بررسی می کنیم که در آن آیکون در یک لینک آیکون دار، بعد از متن قرار گرفته است:
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Icon Link</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> <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script> <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation"> <div class="container"> <div class="navbar-header"> <h1 class="logo"> <a title="tutorialspoint"> <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png" style="height: auto; width: auto; display: inline-block; top: 0px;"> </a> </h1> </div> </div> </nav> <div class="container mt-2"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="airplane-fill" viewBox="0 0 16 16"> <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path> </symbol> </svg> <div class="feature col"> <h3 class="fs-2 text-success">Icon link example</h3> <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the icon is placed after the text in the icon link.</p> <a class="icon-link" href="#">Icon after the text <svg class="bi" aria-hidden="true"> <use xlink:href="#airplane-fill"></use> </svg> </a> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
استایل هنگام هاور (Hover)
برای این که هنگام هاور کردن، آیکون در یک icon link به سمت راست حرکت کند، باید کلاس کمکی .icon-link-hover را به همراه کلاس .icon-link به لینک اضافه کنید.
در ادامه یک مثال را با هم می بینیم:
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Icon Link</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> <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script> <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation"> <div class="container"> <div class="navbar-header"> <h1 class="logo"> <a title="tutorialspoint"> <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png" style="height: auto; width: auto; display: inline-block; top: 0px;"> </a> </h1> </div> </div> </nav> <div class="container mt-2"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="chevron-right" viewBox="0 0 16 16"> <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path> </symbol> </svg> </div> <div class="feature col"> <h3 class="fs-2 text-success">Icon link example - hover</h3> <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the icon moves to the right on hovering.</p> <a class="icon-link icon-link-hover" href="#"><strong>Icon link hover</strong> <svg class="bi" aria-hidden="true"> <use xlink:href="#chevron-right"></use> </svg> </a> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
ابزارهای کمکی لینک آیکون دار (Utilities)
برای تغییر رنگ و فاصله خط زیر لینک آیکون دار، می توانید از ابزارهای سفارشی که بوت استرپ در اختیار شما قرار داده استفاده کنید.
برای افزودن رنگ به متن لینک آیکون دار، از کلاس link-* استفاده کنید؛ علامت * را با یکی از حالت های رنگی مثل danger، success، warning، info و… جایگزین کنید.
برای رنگی کردن خط زیر لینک، از کلاس link-underline-* استفاده کنید؛ در اینجا نیز * با یکی از حالت های رنگی ذکر شده جایگزین می شود.
برای تنظیم شفافیت خط زیر لینک، از کلاس link-underline-opacity-* استفاده کنید؛ به جای * می توانید درصد مورد نظر را وارد کنید، مانند 50، 55، 75 و غیره.
در ادامه یک مثال از نحوه استفاده از این ابزارهای آماده برای سفارشی سازی لینک آیکون دار ارائه می شود:
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Icon Link</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> <link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.3/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.3/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9"> <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico"> <link rel="canonical" href="https://icons.getbootstrap.com/icons/search/"><script src="/assets/js/color-modes.js"></script> <link rel="stylesheet" href="/assets/font/bootstrap-icons.min.css"><link rel="stylesheet" href="/assets/css/docs.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top text-bg-light" role="navigation"> <div class="container"> <div class="navbar-header"> <h1 class="logo"> <a title="tutorialspoint"> <img alt="tutorialspoint" src="http://www.tutorialspoint.com/green/images/logo.png" style="height: auto; width: auto; display: inline-block; top: 0px;"> </a> </h1> </div> </div> </nav> <div class="container mt-2"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="airplane-fill" viewBox="0 0 16 16"> <path d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Z"></path> </symbol> </svg> <div class="feature col"> <h3 class="fs-2 text-success">Icon link customization</h3> <p>Icon link feature of Bootstrap allows a user to add an icon along with an hyperlink and even the icon works as a link. Here the appearance of icon link is modified using the link utility classes.</p> <a class="icon-link icon-link-hover link-danger link-underline-success link-underline-opacity-55" href="#"><strong>Icon link utility</strong> <svg class="bi" aria-hidden="true"> <use xlink:href="#airplane-fill"></use> </svg> </a> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)
- انتشار: ۱۱ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
