ليضعوا البرنامج المساعد
البرنامج المساعد يضعوا يسمح عنصر لتصبح اضافته (مغلق) إلى منطقة على الصفحة. وكثيرا ما يستخدم هذا مع القوائم الملاحة أو أزرار رمز الاجتماعية، لجعلها "stick" في منطقة معينة أثناء التمرير إلى أعلى وأسفل الصفحة.
البرنامج المساعد تبديل هذا السلوك على نحو متقطع (تغيير القيمة من الموقف المغلق من ثابت إلى ثابت)، وهذا يتوقف على موقف التمرير.
مثال 1) إن نافبار اضافته:
مثال 2) وهو الشريط الجانبي اضافته:
مع يضعوا، ونحن عندما انتقل لأعلى وأسفل الصفحة، القائمة دائما واضحة وتخوض في موقفها.
كيفية إنشاء القائمة الملصقة الإنتقال
يوضح المثال التالي كيفية إنشاء الملاحة القائمة الملصقة الأفقية:
يوضح المثال التالي كيفية إنشاء الملاحة القائمة الملصقة العمودي:
مثال
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205"> انها محاولة لنفسك » وأوضح مثال
إضافة data-spy="affix" إلى العنصر الذي تريد اضافته.
اختياريا، إضافة data-offset-top|bottom السمة لحساب موقف التمرير.
كيف يعمل
واللاحقه المساعد التبديل بين ثلاث فئات هي: .affix ، .affix-top ، و .affix-bottom . وتمثل كل فئة دولة معينة. يجب إضافة خصائص CSS للتعامل مع المواقف الفعلية، باستثناء position:fixed على .affix الطبقة.
- ويضيف المساعد لل
.affix-topأو.affix-bottomالطبقة للإشارة إلى العنصر في لمعظم العليا أو أدنى موضع. ليس مطلوبا لتحديد المواقع مع CSS في هذه المرحلة. - فالتمرير العنصر اضافته يطلق الالصاق الفعلي - وهذا هو المكان الذي المساعد محل
.affix-topأو.affix-bottomالطبقة مع.affixفئة (مجموعاتposition:fixed). عند هذه النقطة، يجب إضافة CSStopأوbottomالعقار لوضع العنصر اضافته في الصفحة. - إذا تم تعريف أسفل تعويض، التمرير الماضي فإنه يستبدل
.affixفئة مع.affix-bottom. منذ إزاحة اختيارية، ووضع واحد يتطلب منك تعيين CSS المناسب. في هذه الحالة، إضافةposition:absoluteعند الضرورة.
في المثال الأول أعلاه، يضيف المساعد يضعوا .affix فئة (الموقف: ثابت) إلى <nav> العنصر عندما يكون لدينا تمريره 197 بكسل من أعلى. إذا قمت بفتح سبيل المثال، سوف ترى أيضا أن أضفنا CSS top الملكية مع قيمة 0 إلى .affix الطبقة. هذا هو التأكد من أن شريط تنقل يبقى في الجزء العلوي من الصفحة في كل مرة، عندما يكون لدينا تمريره 197 بكسل من أعلى.
Scrollspy ويضعوا
باستخدام يضعوا المساعد جنبا إلى جنب مع 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> انها محاولة لنفسك » استكمال Bootstrap يضعوا المرجعي
للإشارة كاملة لجميع يضعوا الأساليب والأحداث، انتقل إلى لدينا Bootstrap شبيبة يضعوا المرجعي .