باسلام. توی این مطلب در خدمتتون هستیم با آموزش کار با پلاگین Affix در بوت استرپ. پلاگین Affix به عنصر این اجازه را میدهد تا به قسمی از صفحه ضمیمه شود. این امر بیشتر به همراه منو های مسیریابی و یا آیکون دکمه های اجتماعی انجام می پذیرد تا انها را هنگام پیمایش صفحه به بخش خاصی از صفحه بچسباند. این جلسه، آخرین بخش دوره آموزش متنی بوت استرپ می باشد.
آموزش کار با پلاگین Affix در بوت استرپ در ادامه مطلب، لطفا با ما همراه باشید…
آموزش کار با پلاگین Affix در بوت استرپ
این پلاگین این رفتار را بسته به موقعیت اسکرول ( مقدار CSS را از Static به ثابت Fixed تغییر می دهد. ) تکرار می کند.
مثال 1 : یک navbar ضمیمه شده
مثال 2 : یک نوار کناری ضمیمه شد
با استفاده از ضمیمه ، وقتی که در صفحه پیمایش میکنیم ، منو همیشه ثابت و قابل رویت است.
نحوه ساخت یک منوی مسیریابی Affix
مثال زیر نحوه ایجاد یک منوی افقی مسیریابی Affix را نشان میدهد :
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
و مثال زیر نوحه ایجاد یک منوی عمودی مسیریابی Affix را نشان میدهد :
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
توضیح مثال :
کلاس data-spy=”affix” را به عنصری که میخواهید ضمیمه کنید اضافه کنید. به صورت دلخواه، خاصیت data-offset-top|bottom را برای محاسبه موقعیت اسکرول، اضافه کنید.
شیوه کار :
پلاگین ضمیمه بین سه کلاس مختلف تغییر میکند : .affix-top ، .affix و .affix-bottom هر کلاس نشان دهنده یک حالت خاص است برای کنترل موقعیت های واقعی ، را باید خواص CSS را به استثنای position:fixed در کلاس .affix اضافه کنید.
- پلاگین کلاس .affix-top یا .affix-bottom را برای نشان دادن اینکه عنصر در وضعیت بالا ، یا پایین خود قرار دارد ، اضافه میکند. موقعیت دهی با css در این قسمت مطرح نیست.
- وقتی که اسکرول از عنصر زمیمه عبور میکند ، باعث فعال شدن ضمیمه واقعی میشود ، این جاییست که پلاگین دو کلاس .affix-bottom یا .affix-bottom را با کلاس .affix جایگزین میکند . (sets position:fixed) در این قسمت ، باید خاصیت CSS top یا bottom رابه طور مناسب برای تثبیت موقیعت عنصر ضمیمه شده اضافه کنید.
- اگر آفست پایینی تعریف شده باشد،وقتی که اسکرول از ان عبور میکند کلاس .affix را با کلاس .affix-bottom جایگزین میکند . از انجایی که آفست ها انتخابی هستند ، تنظیم یکی از انها نیازمند تنظیم css های مناسب است . در این مورد ، به هنگام نیاز position:absolute را اضافه کنید.
در مثال اولی در بالا ، پلاگین ضمیمه وقتی به اندازه 197 پیکسل از بالا به پایین امدیم ، کلاس .affix را (position:fixed) به عنصر <nav> اضافه میکند . اگر مثال را باز کنید ، خواهید دید که ما خاصبت CSS top را با مقدار 0 کلاس .affix اضافه کردیم. این کار برای اطمینان از اینکه navbar در تمام زمان وقتی که 197 پیکسل از بالا به پایین امدیم ، بر سر جای خودش در بالا باقی میماند ، انجام میشود.
Scrollspy & Affix
استفاده از پلاگین Affix به همراه پلاگین Scrollspy
<body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> ... </nav> </body>
منو عمودی sidenav
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15"> <nav class="col-sm-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205"> ... </nav> </body>
جهت مشاهده منبع کلیک نمایید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۲۷ آذر ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
با تشکر از سایت خوب تون
با سلام
ممنون میشم آموزش کامل قرار گیری کانال تلکرام در وبسایت قرار بدید
راستش من افزونه و رباط رو نصب و فعال درون وردپرس کردم اما نمیدونم چرا مطالب در تلگرام قرار نمیگیره نصب کردم
یه دنیا سپاس لطفا راهنمایی بفرمایید