JavaScript
הבא לחיים את הרכיבים של Bootstrap עם יותר מתריסר תוספי jQuery מותאמים אישית. כלול את כולם בקלות, או אחד אחד.
הבא לחיים את הרכיבים של Bootstrap עם יותר מתריסר תוספי jQuery מותאמים אישית. כלול את כולם בקלות, או אחד אחד.
ניתן לכלול תוספים בנפרד (באמצעות *.js
קבצים בודדים של Bootstrap), או בבת אחת (באמצעות bootstrap.js
או ב-Minified bootstrap.min.js
).
שניהם bootstrap.js
ומכילים bootstrap.min.js
את כל התוספים בקובץ אחד. כלול רק אחד.
תוספים מסוימים ורכיבי CSS תלויים בתוספים אחרים. אם אתה כולל תוספים בנפרד, הקפד לבדוק את התלות הללו במסמכים. שימו לב גם שכל התוספים תלויים ב-jQuery (משמעות הדבר היא ש-jQuery חייב להיכלל לפני קבצי הפלאגין). עיין שלנוbower.json
כדי לראות אילו גרסאות של jQuery נתמכות.
אתה יכול להשתמש בכל התוספים של Bootstrap אך ורק דרך ממשק ה-API מבלי לכתוב שורה אחת של JavaScript. זהו ה-API מהמדרגה הראשונה של Bootstrap וצריך להיות השיקול הראשון שלך בעת שימוש בתוסף.
עם זאת, במצבים מסוימים ייתכן שיהיה רצוי לכבות את הפונקציונליות הזו. לכן, אנו מספקים גם את היכולת להשבית את ה-API של תכונת הנתונים על ידי ביטול הכריכה של כל האירועים במסמך עם רווחי שמות data-api
. זה נראה כך:
לחלופין, כדי למקד לפלאגין ספציפי, פשוט כלול את שם הפלאגין כמרחב שמות יחד עם מרחב השמות של הנתונים-API כך:
אל תשתמש בתכונות נתונים ממספר תוספים על אותו אלמנט. לדוגמה, כפתור לא יכול להיות גם הסבר כלים וגם להחליף מודאל. כדי להשיג זאת, השתמש באלמנט עטיפה.
אנו גם מאמינים שאתה אמור להיות מסוגל להשתמש בכל התוספים של Bootstrap אך ורק דרך ה-API של JavaScript. כל ממשקי ה-API הציבוריים הם שיטות בודדות, הניתנות לשרשרת, ומחזירות את האוסף שנעשה עליו.
כל השיטות צריכות לקבל אובייקט אופציונלי אופציונלי, מחרוזת המכוונת לשיטה מסוימת, או שום דבר (אשר יוזם תוסף עם התנהגות ברירת מחדל):
כל תוסף גם חושף את הבנאי הגולמי שלו על Constructor
מאפיין: $.fn.popover.Constructor
. אם תרצה לקבל מופע פלאגין מסוים, אחזר אותו ישירות מאלמנט: $('[rel="popover"]').data('popover')
.
אתה יכול לשנות את הגדרות ברירת המחדל של תוסף על ידי שינוי Constructor.DEFAULTS
האובייקט של הפלאגין:
לפעמים יש צורך להשתמש בתוספים של Bootstrap עם מסגרות משתמש אחרות. בנסיבות אלה, התנגשויות במרחב השמות יכולות להתרחש מדי פעם. אם זה קורה, אתה יכול להתקשר .noConflict
לפלאגין שברצונך להחזיר את הערך שלו.
Bootstrap מספק אירועים מותאמים אישית עבור הפעולות הייחודיות של רוב התוספים. בדרך כלל, אלה באים בצורה אינפינטיבית וחלק עבר - כאשר האינפיניטיב (לדוגמה show
) מופעל בתחילת אירוע, וצורת חלק העבר שלו (לדוגמה shown
) מופעלת עם השלמת פעולה.
החל מ-3.0.0, כל אירועי Bootstrap הם ברווחי שמות.
כל האירועים האינסופיים מספקים preventDefault
פונקציונליות. זה מספק את היכולת לעצור את ביצוע הפעולה לפני שהיא מתחילה.
ניתן לגשת לגרסה של כל אחד מתוספי jQuery של Bootstrap דרך VERSION
המאפיין של בנאי התוסף. לדוגמה, עבור הפלאגין 'טיפ כלים':
התוספים של Bootstrap אינם נופלים אחורה בחן במיוחד כאשר JavaScript מושבת. אם אכפת לך מחוויית המשתמש במקרה זה, השתמש <noscript>
כדי להסביר את המצב (וכיצד להפעיל מחדש את JavaScript) למשתמשים שלך, ו/או הוסף החזרות מותאמות אישית משלך.
Bootstrap אינו תומך רשמית בספריות JavaScript של צד שלישי כמו אב טיפוס או ממשק משתמש jQuery. למרות .noConflict
אירועים עם רווחי שמות, עשויות להיות בעיות תאימות שעליך לתקן בעצמך.
עבור אפקטי מעבר פשוטים, כלול transition.js
פעם אחת לצד שאר קבצי ה-JS. אם אתה משתמש בקומפילציה (או ממוזער) bootstrap.js
, אין צורך לכלול את זה - הוא כבר שם.
Transition.js הוא עוזר בסיסי transitionEnd
לאירועים וכן אמולטור מעבר CSS. הוא משמש את התוספים האחרים כדי לבדוק אם יש תמיכה במעבר CSS ולתפוס מעברים תלויים.
ניתן להשבית מעברים באופן גלובלי באמצעות קטע הקוד הבא של JavaScript, שחייב להגיע לאחר טעינת transition.js
(או bootstrap.js
או bootstrap.min.js
, לפי המקרה):
המודלים הם הודעות דו-שיח יעילות אך גמישות עם הפונקציונליות המינימלית הנדרשת וברירות מחדל חכמות.
הקפד לא לפתוח מודאל בזמן שאחר עדיין גלוי. הצגת יותר ממודאל אחד בו-זמנית דורשת קוד מותאם אישית.
נסה תמיד למקם את קוד ה-HTML של המודאל במיקום ברמה העליונה במסמך שלך כדי למנוע מרכיבים אחרים שמשפיעים על המראה ו/או הפונקציונליות של המודאל.
יש כמה אזהרות לגבי שימוש במודלים במכשירים ניידים. עיין במסמכי התמיכה בדפדפן שלנו לפרטים.
בשל האופן שבו HTML5 מגדיר את הסמנטיקה שלו, autofocus
לתכונת HTML אין השפעה במודלי Bootstrap. כדי להשיג את אותו האפקט, השתמש ב-JavaScript מותאם אישית:
מודל מעובד עם כותרת עליונה, גוף וקבוצת פעולות בכותרת התחתונה.
החלף מודאל באמצעות JavaScript על ידי לחיצה על הכפתור למטה. הוא יחליק מטה ויימוג מהחלק העליון של העמוד.
הקפד להוסיף role="dialog"
ו aria-labelledby="..."
, בהתייחסות לכותרת המודאלית, אל ואל .modal
עצמו .role="document"
.modal-dialog
בנוסף, תוכל לתת תיאור של הדו-שיח המודאלי שלך עם aria-describedby
ב- .modal
.
הטבעת סרטוני YouTube במודלים דורשת JavaScript נוסף שלא ב-Bootstrap כדי להפסיק את ההשמעה באופן אוטומטי ועוד. עיין בפוסט מועיל זה של Stack Overflow למידע נוסף.
למודלים יש שני גדלים אופציונליים, הזמינים באמצעות מחלקות שינוי למיקום על .modal-dialog
.
עבור מודלים שפשוט מופיעים במקום להתפוגג לצפייה, הסר את .fade
הכיתה מהסימון המודאלי שלך.
כדי לנצל את מערכת הרשת Bootstrap בתוך מודאל, פשוט קן .row
s בתוך .modal-body
ולאחר מכן השתמש במחלקות מערכת הרשת הרגילות.
יש לך חבורה של כפתורים שכולם מפעילים את אותו מוד, רק עם תוכן קצת שונה? השתמש event.relatedTarget
ותכונות HTMLdata-*
( אפשר דרך jQuery ) כדי לשנות את התוכן של המודאל בהתאם לאיזה כפתור לחצו. עיין במסמכים של Modal Events לפרטים על relatedTarget
,
התוסף המודאלי מחליף את התוכן המוסתר שלך לפי דרישה, באמצעות תכונות נתונים או JavaScript. זה גם מוסיף לעקוף .modal-open
את <body>
התנהגות הגלילה המוגדרת כברירת מחדל ומייצר .modal-backdrop
אזור לחיצה לביטול מודלים המוצגים בעת לחיצה מחוץ למודאל.
הפעל מודאל מבלי לכתוב JavaScript. הגדר data-toggle="modal"
על רכיב בקר, כמו כפתור, יחד עם data-target="#foo"
או href="#foo"
כדי למקד מודאל ספציפי למעבר.
התקשר למודאל עם מזהה myModal
עם שורה אחת של JavaScript:
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-backdrop=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
רקע | בוליאן או המחרוזת'static' |
נָכוֹן | כולל אלמנט רקע מודאלי. לחלופין, ציין static עבור רקע שאינו סוגר את המודאל בלחיצה. |
מקלדת | בוליאני | נָכוֹן | סוגר את המודאל בעת לחיצה על מקש Escape |
הופעה | בוליאני | נָכוֹן | מציג את המודאל בעת אתחול. |
מְרוּחָק | נָתִיב | שֶׁקֶר | אפשרות זו הוצאה משימוש מאז v3.3.0 והוסרה ב-v4. אנו ממליצים במקום זאת להשתמש בתבניות בצד הלקוח או במסגרת מחייבת נתונים, או להתקשר ל-jQuery.load בעצמך. אם מסופקת כתובת URL מרוחקת, התוכן ייטען פעם אחת באמצעות השיטה של jQuery |
.modal(options)
מפעיל את התוכן שלך כמודל. מקבל אפשרויות אופציונליות object
.
.modal('toggle')
מחליף מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג או הוסתר בפועל (כלומר לפני התרחשות האירוע shown.bs.modal
או ).hidden.bs.modal
.modal('show')
פותח מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוצג בפועל (כלומר לפני shown.bs.modal
התרחשות האירוע).
.modal('hide')
מסתיר מודאל באופן ידני. חוזר אל המתקשר לפני שהמודאל הוסתר בפועל (כלומר לפני hidden.bs.modal
התרחשות האירוע).
.modal('handleUpdate')
מכוון מחדש את מיקומו של המודאל כדי לנטרל פס גלילה למקרה שיופיע אחד, מה שיגרום למודאל לקפוץ שמאלה.
נחוץ רק כאשר גובה המודאל משתנה בזמן שהוא פתוח.
המחלקה המודאלית של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות מודאלית.
כל האירועים המודאליים נורים לעבר המודאל עצמו (כלומר לעבר ה- <div class="modal">
).
סוג אירוע | תיאור |
---|---|
show.bs.modal | אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTarget של האירוע. |
מוצג.bs.modal | אירוע זה מופעל כאשר המודאל נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). אם נגרם מקליק, הרכיב שנלחץ זמין כמאפיין relatedTarget של האירוע. |
hide.bs.modal | אירוע זה מופעל מיד כאשר hide שיטת המופע נקראה. |
hidden.bs.modal | אירוע זה מופעל כאשר המודאל סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS). |
loaded.bs.modal | אירוע זה מופעל כאשר המודאל טען תוכן באמצעות remote האפשרות. |
הוסף תפריטים נפתחים כמעט לכל דבר עם התוסף הפשוט הזה, כולל סרגל הניווט, הכרטיסיות והכדורים.
באמצעות מאפייני נתונים או JavaScript, הפלאגין הנפתח מחליף תוכן מוסתר (תפריטים נפתחים) על ידי החלפת .open
מחלקה בפריט רשימת האב.
במכשירים ניידים, פתיחת תפריט נפתח מוסיפה .dropdown-backdrop
אזור הקשה לסגירת תפריטים נפתחים בעת הקשה מחוץ לתפריט, דרישה לתמיכה נאותה ב-iOS. המשמעות היא שמעבר מתפריט נפתח לתפריט נפתח אחר דורש הקשה נוספת בנייד.
הערה: data-toggle="dropdown"
התכונה מסתמכת על סגירת תפריטים נפתחים ברמת האפליקציה, לכן מומלץ להשתמש בה תמיד.
הוסף data-toggle="dropdown"
לקישור או כפתור כדי להחליף תפריט נפתח.
כדי לשמור על כתובות אתרים ללא פגע עם לחצני קישור, השתמש data-target
בתכונה במקום href="#"
.
התקשר לתפריטים הנפתחים באמצעות JavaScript:
data-toggle="dropdown"
עדיין נדרשלא משנה אם אתה קורא לתפריט הנפתח שלך באמצעות JavaScript או במקום זאת משתמש ב-data-api, data-toggle="dropdown"
תמיד נדרש להיות נוכח ברכיב ההדק של התפריט הנפתח.
אף אחד
$().dropdown('toggle')
מחליף את התפריט הנפתח של סרגל ניווט נתון או ניווט עם כרטיסיות.
כל אירועי התפריט הנפתח מופעלים .dropdown-menu
ברכיב האב של ה-'s.
לכל אירועי התפריט הנפתח יש relatedTarget
מאפיין שהערך שלו הוא אלמנט העוגן המתחלף.
סוג אירוע | תיאור |
---|---|
show.bs.down | אירוע זה מופעל מיד כאשר קוראים לשיטת המופע של המופע. |
מוצג.bs.down | אירוע זה מופעל כאשר התפריט הנפתח הפך לגלוי למשתמש (יחכה למעברי CSS, כדי להשלים). |
hide.bs.down | אירוע זה מופעל מיד כאשר שיטת הסתר המופע נקראה. |
התפריט הנפתח hidden.bs | אירוע זה מופעל כאשר הסתיימה התפריט הנפתח להסתרת מהמשתמש (יחכה למעברי CSS, כדי להשלים). |
התוסף ScrollSpy מיועד לעדכון אוטומטי של יעדי ניווט בהתבסס על מיקום הגלילה. גלול באזור שמתחת לסרגל הניווט וצפה בשינוי הכיתה הפעילה. פריטי המשנה הנפתחים יודגשו גם כן.
חותלות מודעה keytar, מזהה בראנץ' מסיבת אמנות dolor labore. Pitchfork yr enim lo-fi לפני שהם אזלו qui. זכויות אופניים מחווה לשולחן בטאמבלר לא משנה מה. קרדיגן אנים כפייה קרלס. תא הצילום של Velit seitan mcsweeney 3 wolf moon irure. קוסבי סוודר lomo jean shorts, Williamsburg hoodie minim qui בטח לא שמעתם עליהם et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil מקועקע accusamus, cred אירוניה ביודיזל keffiyeh אומן ullamco consequat.
סקייטבורד שפם של Veniam marfa, זקן קלשון שופע פוגיאט וליט. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. משאית אוכל מקועקעת סוודר קוסבי, ויניל של Mcsweeney's quis non freegan. לו-פי ווס אנדרסון +1 סרטון. קרלס לא אסתטי תרגיל quis gentrify. ברוקלין שומנית בירה מלאכה סגן keytar עזוב.
Occaecat commodo aliqua delectus. סקייטבורד עזוב בירה מלאכת יד ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore קפה ממקור יחיד במגנה ווניאם. High life id ויניל, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. תיק שליח מינימלי Consectetur nisi DIY. Cred לשעבר, בר קיימא delectus consectetur פאני חבילת אייפון.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica קלישאה אירוניה, חתולים רעמים שבטח לא שמעתם עליהם consequat hoodie ללא גלוטן lo-fi fap aliquip. Labore elit placeat לפני שהם סולד אאוט, טרי ריצ'רדסון פרוידנט בראנץ 'נסciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. קרדיגן craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
קישורי Navbar חייבים להיות בעלי יעדי מזהה ניתנים לפתרון. לדוגמה, <a href="#home">home</a>
חובה להתאים למשהו ב-DOM כמו <div id="home"></div>
.
:visible
יעדתתעלם ממרכיבי יעד שאינם :visible
לפי jQuery ופריטי הניווט המתאימים להם לעולם לא יודגשו.
לא משנה שיטת היישום, scrollspy דורש שימוש position: relative;
ברכיב שאתה מרגל אחריו. ברוב המקרים זהו ה <body>
. בעת ריגול על אלמנטים אחרים מלבד ה- <body>
, הקפד height
להגדיר overflow-y: scroll;
ולהחיל.
כדי להוסיף בקלות התנהגות גלילית לניווט בסרגל העליון שלך, הוסף data-spy="scroll"
לרכיב שאתה רוצה לרגל אחריו (בדרך כלל זה יהיה ה- <body>
). לאחר מכן הוסף את data-target
התכונה עם המזהה או המחלקה של רכיב האב של כל .nav
רכיב Bootstrap.
לאחר הוספת position: relative;
ה-CSS שלך, התקשר ל- scrollspy באמצעות JavaScript:
.scrollspy('refresh')
בעת שימוש ב-scrollspy בשילוב עם הוספה או הסרה של אלמנטים מה-DOM, תצטרך לקרוא לשיטת הרענון כך:
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-offset=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
לְקַזֵז | מספר | 10 | פיקסלים לקיזוז מלמעלה בעת חישוב מיקום הגלילה. |
סוג אירוע | תיאור |
---|---|
active.bs.scrollspy | אירוע זה מופעל בכל פעם שפריט חדש מופעל על ידי סרגל הגלילה. |
הוסף פונקציונליות מהירה ודינמית של כרטיסיות למעבר דרך חלוניות של תוכן מקומי, אפילו באמצעות תפריטים נפתחים. כרטיסיות מקוננות אינן נתמכות.
ג'ינס גולמי בטח לא שמעתם עליהם מכנסי ג'ינס אוסטין. Nesciunt tofu stumptown aliqua, רטרו סינת' מאסטר ניקוי. שפם קלישאה טמפור, וויליאמסבורג קרלס helvetica טבעונית. Reprehenderit בוצ'ר רטרו keffiyeh לוכד חלומות סינת'. סוודר קוסבי eu banh mi, qui irure טרי ריצ'רדסון לשעבר דיונון. Aliquip placeat salvia cillum אייפון. סייטן אליקוויפ quis קרדיגן ביגוד אמריקאי, בוצ'ר voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
תוסף זה מרחיב את רכיב הניווט עם הכרטיסיות כדי להוסיף אזורים הניתנים לכרטיסיות.
אפשר כרטיסיות הניתנות לכרטיסיות באמצעות JavaScript (יש להפעיל כל כרטיסייה בנפרד):
אתה יכול להפעיל כרטיסיות בודדות בכמה דרכים:
אתה יכול להפעיל טאב או ניווט בגלולה מבלי לכתוב שום JavaScript על ידי ציון data-toggle="tab"
או data-toggle="pill"
על אלמנט. הוספת המחלקות nav
ו nav-tabs
ללשונית ul
תחיל את סגנון הכרטיסייה Bootstrap , בעוד שהוספת המחלקות nav
ו nav-pills
תחיל עיצוב גלולות .
כדי לגרום לכרטיסיות לדעוך, הוסף .fade
לכל .tab-pane
. חלונית הכרטיסייה הראשונה חייבת גם .in
להפוך את התוכן הראשוני לגלוי.
$().tab
מפעיל רכיב טאב ומכל תוכן. ל-Tab צריך להיות צומת מיקוד data-target
או href
מיקוד לצומת מכיל ב-DOM. בדוגמאות לעיל, הכרטיסיות הן ה- <a>
s עם data-toggle="tab"
תכונות.
.tab('show')
בוחר את הכרטיסייה הנתונה ומציג את התוכן המשויך לה. כל כרטיסייה אחרת שנבחרה בעבר תבוטל והתוכן המשויך לה מוסתר. חוזר אל המתקשר לפני שחלונית הכרטיסיות הוצגה בפועל (כלומר לפני shown.bs.tab
התרחשות האירוע).
בעת הצגת כרטיסייה חדשה, האירועים יופעלו בסדר הבא:
hide.bs.tab
(בלשונית הפעילה הנוכחית)show.bs.tab
(בלשונית להצגה)hidden.bs.tab
(בלשונית הפעילה הקודמת, זהה לזה של hide.bs.tab
האירוע)shown.bs.tab
(בלשונית הפעילה שזה עתה הוצגה, זהה לזו של show.bs.tab
האירוע)אם אף כרטיסייה לא הייתה פעילה, אז האירועים hide.bs.tab
ו- hidden.bs.tab
לא יופעלו.
סוג אירוע | תיאור |
---|---|
show.bs.tab | אירוע זה מופעל בהצגת כרטיסיות, אך לפני שהכרטיסייה החדשה הוצגה. השתמש event.target ובכדי event.relatedTarget למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה. |
הכרטיסייה.bs.showed | אירוע זה מופעל בהצגת כרטיסיות לאחר הצגת כרטיסייה. השתמש event.target ובכדי event.relatedTarget למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה. |
hide.bs.tab | אירוע זה מופעל כאשר יש להציג כרטיסייה חדשה (ולכן יש להסתיר את הכרטיסייה הפעילה הקודמת). השתמש event.target ובכדי event.relatedTarget למקד לכרטיסייה הפעילה הנוכחית ולכרטיסייה החדשה שתהיה פעילה בקרוב, בהתאמה. |
hidden.bs.tab | אירוע זה מופעל לאחר הצגת כרטיסייה חדשה (ולכן הכרטיסייה הפעילה הקודמת מוסתרת). השתמש event.target ובכדי event.relatedTarget למקד ללשונית הפעילה הקודמת ולכרטיסייה הפעילה החדשה, בהתאמה. |
בהשראת התוסף המצוין jQuery.tipsy שנכתב על ידי Jason Frame; עצות כלים הן גרסה מעודכנת, שאינה מסתמכת על תמונות, משתמשת ב-CSS3 עבור אנימציות ותכונות נתונים לאחסון כותרות מקומיות.
עצות כלים עם כותרות באורך אפס לעולם אינן מוצגות.
רחף מעל הקישורים למטה כדי לראות עצות כלים:
מכנסיים צמודים כאפיה סביר להניח שלא שמעתם עליהם. תא צילום זקן גולמי דנים בדפוס טבעוני תיק שליח stumptown. סייטן מחווה לשולחן, לביגוד אמריקאי קינואה 8 סיביות מבית Mcsweeney's fixie, יש טרי ריצ'רדסון ויניל צ'מברי. Beard stumptown, קרדיגנים banh mi lomo thundercats. טופו ביודיזל ויליאמבורג מרפה, ארבעת לוקו מק'סוויני'ס מנקה שמבריי טבעוני. אומן ממש אירוני , לא משנה מה keytar, scenster farm-to-table banksy Austin Twitter handle freegan cred raw dim קפה ויראלי.
ארבע אפשרויות זמינות: מיושרות למעלה, ימינה, למטה ושמאלה.
מטעמי ביצועים, ה-Tooltip ו-Popover Data-APis ניתנים להצטרפות, כלומר עליך לאתחל אותם בעצמך .
דרך אחת לאתחל את כל טיפים הכלים בדף תהיה לבחור אותם לפי data-toggle
התכונה שלהם:
תוסף Tooltip מייצר תוכן וסימון לפי דרישה, וכברירת מחדל מציב עצות כלים אחרי אלמנט הטריגר שלהם.
הפעל את הסבר הכלי באמצעות JavaScript:
הסימון הנדרש עבור תיאור כלים הוא רק data
תכונה title
וברכיב ה-HTML ברצונך לקבל תיאור כלי. הסימון שנוצר של הסבר כלים הוא די פשוט, אם כי הוא דורש מיקום (כברירת מחדל, מוגדר על top
ידי הפלאגין).
לפעמים אתה רוצה להוסיף הסבר כלים להיפר-קישור שעוטף שורות מרובות. התנהגות ברירת המחדל של תוסף תיאור הכלים היא למרכז אותו אופקית ואנכית. הוסף white-space: nowrap;
לעוגנים שלך כדי להימנע מכך.
בעת שימוש בטיפים של כלים על אלמנטים בתוך .btn-group
או .input-group
, או על אלמנטים הקשורים לטבלה ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), יהיה עליך לציין את האפשרות container: 'body'
(מתועדת להלן) כדי למנוע תופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/ או איבוד הפינות המעוגלות שלו כאשר הסבר הכלי מופעל).
עבור משתמשים המנווטים עם מקלדת, ובפרט משתמשים בטכנולוגיות מסייעות, עליך להוסיף עצות כלים רק לאלמנטים הניתנים למיקוד במקלדת כגון קישורים, פקדי טפסים או כל רכיב שרירותי עם tabindex="0"
תכונה.
כדי להוסיף תיאור כלי ל- a disabled
או .disabled
אלמנט, הכנס את האלמנט בתוך a <div>
והחל את הסבר הכלי על זה <div>
במקום זאת.
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-animation=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
אנימציה | בוליאני | נָכוֹן | החל מעבר דהייה של CSS על הסבר הכלי |
מְכוֹלָה | מחרוזת | שֶׁקֶר | שֶׁקֶר | מוסיף את הסבר הכלי לרכיב מסוים. דוגמה: |
לְעַכֵּב | מספר | לְהִתְנַגֵד | 0 | עיכוב הצגת והסתרה של הסבר הכלי (ms) - אינו חל על סוג טריגר ידני אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה מבנה האובייקט הוא: |
html | בוליאני | שֶׁקֶר | הכנס HTML להסבר הכלי. אם False, text השיטה של jQuery תשמש להכנסת תוכן ל-DOM. השתמש בטקסט אם אתה מודאג מהתקפות XSS. |
מיקום | מחרוזת | פוּנקצִיָה | 'חלק עליון' | כיצד למקם את הסבר הכלי - למעלה | תחתון | שמאל | נכון | אוטומטי. כאשר נעשה שימוש בפונקציה לקביעת המיקום, היא נקראת עם צומת DOM תיאור הכלי בתור הארגומנט הראשון שלה והצומת המפעיל DOM כצומת השני שלו. ההקשר |
בוחר | חוּט | שֶׁקֶר | אם מסופק בורר, אובייקטי תיאור כלים יואצלו ליעדים שצוינו. בפועל, זה משמש כדי לאפשר לתוכן HTML דינמי להוסיף עצות כלים. ראה זאת ודוגמה אינפורמטיבית . |
תבנית | חוּט | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
בסיס HTML לשימוש בעת יצירת הסבר הכלי. הסבר הכלי
רכיב העטיפה החיצוני ביותר צריך לכלול את |
כותרת | מחרוזת | פוּנקצִיָה | '' | ערך כותרת ברירת מחדל אם אם ניתנת פונקציה, היא תיקרא כשההתייחסות שלה |
הדק | חוּט | 'פוקוס לרחף' | כיצד מופעלת הסבר כלים - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. manual לא ניתן לשלב עם כל טריגר אחר. |
נקודת מבט | מחרוזת | חפץ | פוּנקצִיָה | { selector: 'body', padding: 0 } | שומר את הסבר הכלי בגבולות האלמנט הזה. דוגמה: אם ניתנת פונקציה, היא נקראת עם הרכיב המפעיל DOM node כארגומנט היחיד שלה. ההקשר |
לחילופין ניתן לציין אפשרויות עבור עצות כלים בודדות באמצעות שימוש בתכונות נתונים, כפי שהוסבר לעיל.
$().tooltip(options)
מצרף מטפל בתיאור כלים לאוסף אלמנטים.
.tooltip('show')
חושף תיאור כלי של אלמנט. חוזר אל המתקשר לפני שהסבר הכלי הוצג בפועל (כלומר לפני shown.bs.tooltip
התרחשות האירוע). זה נחשב להפעלה "ידנית" של הסבר הכלי. עצות כלים עם כותרות באורך אפס לעולם אינן מוצגות.
.tooltip('hide')
מסתיר תיאור כלי של רכיב. חוזר אל המתקשר לפני שהסבר הכלי הוסתר בפועל (כלומר לפני hidden.bs.tooltip
שהאירוע מתרחש). זה נחשב להפעלה "ידנית" של הסבר הכלי.
.tooltip('toggle')
מחליף תיאור כלי של רכיב. חוזר אל המתקשר לפני שהסבר הכלי הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.tooltip
או מתרחש). hidden.bs.tooltip
זה נחשב להפעלה "ידנית" של הסבר הכלי.
.tooltip('destroy')
מסתיר והורס את הסבר הכלי של אלמנט. לא ניתן להשמיד עצות כלים המשתמשות בהאצלה (שנוצרות באמצעות האפשרות ) בנפרד על רכיבי טריגר צאצאים.selector
סוג אירוע | תיאור |
---|---|
show.bs.tooltip | אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. |
מוצג.bs.tooltool | אירוע זה מופעל כאשר הסבר הכלי נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). |
hide.bs.tooltip | אירוע זה מופעל מיד כאשר hide שיטת המופע נקראה. |
hidden.bs.tooltool | אירוע זה מופעל כאשר הסבר הכלים סיים להסתיר מהמשתמש (יחכה לסיום מעברי CSS). |
inserted.bs.tooltip | אירוע זה מופעל לאחר show.bs.tooltip האירוע כאשר תבנית הסבר הכלי נוספה ל-DOM. |
הוסף שכבות-על קטנות של תוכן, כמו אלו באייפד, לכל רכיב לצורך שיכון מידע משני.
חלונות קופצים שהכותרת והתוכן שלהם הם באורך אפס לעולם אינם מוצגים.
חלונות קופצים מחייבים את התוסף של תיאור הכלים להיכלל בגרסה שלך של Bootstrap.
מטעמי ביצועים, ה-Tooltip ו-Popover Data-APis ניתנים להצטרפות, כלומר עליך לאתחל אותם בעצמך .
דרך אחת לאתחל את כל הפופ-אוברים בדף תהיה לבחור אותם לפי data-toggle
התכונה שלהם:
בעת שימוש בפופ-אובר על אלמנטים בתוך .btn-group
או .input-group
, או על אלמנטים הקשורים לטבלה ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), תצטרך לציין את האפשרות container: 'body'
(מתועדת להלן) כדי למנוע תופעות לוואי לא רצויות (כגון האלמנט מתרחב ו/ או איבוד הפינות המעוגלות שלו כאשר הפופ-אובר מופעל).
כדי להוסיף פופ-אובר ל- a disabled
או .disabled
אלמנט, הכנס את האלמנט בתוך a <div>
והחל את ה-pover על זה <div>
במקום.
לפעמים אתה רוצה להוסיף פופ-אובר להיפר-קישור שעוטף שורות מרובות. התנהגות ברירת המחדל של תוסף הפופ-אובר היא למרכז אותו אופקית ואנכית. הוסף white-space: nowrap;
לעוגנים שלך כדי להימנע מכך.
ארבע אפשרויות זמינות: מיושרות למעלה, ימינה, למטה ושמאלה.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
השתמש focus
בטריגר כדי לבטל פופ-אובר בקליק הבא שהמשתמש מבצע.
להתנהגות נכונה בין דפדפנים ופלטפורמות, עליך להשתמש <a>
בתג, לא בתג<button>
, וכן עליך לכלול את המאפיינים role="button"
ו .tabindex
הפעל חלונות קופצים באמצעות JavaScript:
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-animation=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
אנימציה | בוליאני | נָכוֹן | החל מעבר דהייה של CSS על הפופ-אובר |
מְכוֹלָה | מחרוזת | שֶׁקֶר | שֶׁקֶר | מוסיף את הפופ-אובר לרכיב מסוים. דוגמה: |
תוֹכֶן | מחרוזת | פוּנקצִיָה | '' | ערך ברירת המחדל של תוכן אם אם ניתנת פונקציה, היא תיקרא |
לְעַכֵּב | מספר | לְהִתְנַגֵד | 0 | השהיה בהצגה והסתרה של הפופ-אובר (ms) - אינו חל על סוג טריגר ידני אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה מבנה האובייקט הוא: |
html | בוליאני | שֶׁקֶר | הכנס HTML לתוך הפופ-אובר. אם False, text השיטה של jQuery תשמש להכנסת תוכן ל-DOM. השתמש בטקסט אם אתה מודאג מהתקפות XSS. |
מיקום | מחרוזת | פוּנקצִיָה | 'ימין' | איך למקם את הפופ-אובר - למעלה | תחתון | שמאל | נכון | אוטומטי. כאשר נעשה שימוש בפונקציה לקביעת המיקום, היא נקראת עם צומת DOM המוקפץ כארגומנט הראשון שלה והצומת המפעיל DOM כצומת השני שלו. ההקשר |
בוחר | חוּט | שֶׁקֶר | אם מסופק בורר, אובייקטים קופצים יואצלו ליעדים שצוינו. בפועל, זה משמש כדי לאפשר לתוכן HTML דינמי להוסיף חלונות קופצים. ראה זאת ודוגמה אינפורמטיבית . |
תבנית | חוּט | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
בסיס HTML לשימוש בעת יצירת הפופ-אובר. הפופ-אובר הפופ-אובר
רכיב העטיפה החיצוני ביותר צריך לכלול את |
כותרת | מחרוזת | פוּנקצִיָה | '' | ערך כותרת ברירת מחדל אם אם ניתנת פונקציה, היא תיקרא |
הדק | חוּט | 'נְקִישָׁה' | כיצד מופעל פופ-אובר - לחץ על | לרחף | מיקוד | מדריך ל. אתה יכול לעבור טריגרים מרובים; להפריד ביניהם עם רווח. manual לא ניתן לשלב עם כל טריגר אחר. |
נקודת מבט | מחרוזת | חפץ | פוּנקצִיָה | { selector: 'body', padding: 0 } | שומר את הפופ-אובר בגבולות האלמנט הזה. דוגמה: אם ניתנת פונקציה, היא נקראת עם הרכיב המפעיל DOM node כארגומנט היחיד שלה. ההקשר |
לחלופין ניתן לציין אפשרויות עבור פופ-אובר בודדים באמצעות שימוש בתכונות נתונים, כפי שהוסבר לעיל.
$().popover(options)
מאתחל פופ-אובר עבור אוסף אלמנטים.
.popover('show')
חושף פופ-אובר של אלמנט. חוזר אל המתקשר לפני שהפופ-אובר הוצג בפועל (כלומר לפני shown.bs.popover
התרחשות האירוע). זה נחשב להפעלה "ידנית" של הפופ-אובר. חלונות קופצים שהכותרת והתוכן שלהם הם באורך אפס לעולם אינם מוצגים.
.popover('hide')
מסתיר פופ-אובר של אלמנט. חוזר אל המתקשר לפני שהפופ-אובר הוסתר בפועל (כלומר לפני hidden.bs.popover
התרחשות האירוע). זה נחשב להפעלה "ידנית" של הפופ-אובר.
.popover('toggle')
מחליף את הפופ-אובר של רכיב. חוזר אל המתקשר לפני שהפופ-אובר הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.popover
או hidden.bs.popover
מתרחש). זה נחשב להפעלה "ידנית" של הפופ-אובר.
.popover('destroy')
מסתיר והורס פופ-אובר של אלמנט. חלונות קופצים המשתמשים בהאצלה (שנוצרים באמצעות האפשרותselector
) אינם ניתנים להרס בנפרד על רכיבי טריגר צאצאים.
סוג אירוע | תיאור |
---|---|
show.bs.popover | אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. |
מוצג.bs.popover | אירוע זה מופעל כאשר הפופ-אובר נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). |
hide.bs.popover | אירוע זה מופעל מיד כאשר hide שיטת המופע נקראה. |
hidden.bs.popover | אירוע זה מופעל כאשר הפופ-אובר סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי CSS). |
inserted.bs.popover | אירוע זה מופעל לאחר show.bs.popover האירוע כאשר תבנית הפופ-אובר נוספה ל-DOM. |
הוסף פונקציונליות ביטול לכל הודעות ההתראה באמצעות תוסף זה.
בעת שימוש .close
בלחצן, הוא חייב להיות הבן הראשון של הלחצן, .alert-dismissible
ושום תוכן טקסט לא יכול לבוא לפניו בסימון.
שנה את זה ואת זה ונסה שוב. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
פשוט הוסף data-dismiss="alert"
ללחצן הסגירה שלך כדי לתת פונקציונליות סגירה אוטומטית של התראה. סגירת התראה מסירה אותה מה-DOM.
כדי שההתראות שלך ישתמשו באנימציה בעת הסגירה, ודא שיש להן את ה- .fade
and.in
כבר חלו עליהן.
$().alert()
גורם להתראה להאזין לאירועי קליק על רכיבים צאצאים שיש להם את data-dismiss="alert"
התכונה. (לא הכרחי בעת שימוש באתחול האוטומטי של הנתונים-API.)
$().alert('close')
סוגר התראה על ידי הסרתה מה-DOM. אם המחלקות .fade
והן .in
קיימות באלמנט, ההתראה תדעך לפני שהיא תוסר.
תוסף ההתראה של Bootstrap חושף כמה אירועים לחיבור לפונקציונליות ההתראה.
סוג אירוע | תיאור |
---|---|
התראה.סגור.bs | אירוע זה מופעל מיד כאשר close שיטת המופע נקראת. |
התראה סגורה.bs | אירוע זה מופעל כאשר ההתראה נסגרה (יחכה לסיום מעברי CSS). |
עשה יותר עם כפתורים. שליטה במצבי לחצנים או צור קבוצות של לחצנים עבור רכיבים נוספים כמו סרגלי כלים.
פיירפוקס מחזיק מעמד במצבי שליטה (השבתה וסימון) על פני טעינות דפים . דרך לעקיפת הבעיה היא להשתמש ב- autocomplete="off"
. ראה באג #654072 של Mozilla .
הוסף data-loading-text="Loading..."
כדי להשתמש במצב טעינה על כפתור.
תכונה זו הוצאה משימוש מאז v3.3.5 והוסרה ב-v4.
למען ההדגמה הזו, אנחנו משתמשים ב data-loading-text
-ו $().button('loading')
, אבל זה לא המצב היחיד שאתה יכול להשתמש בו. ראה עוד על כך להלן $().button(string)
בתיעוד .
הוסף data-toggle="button"
כדי להפעיל החלפת מצב בלחצן בודד.
.active
וaria-pressed="true"
עבור כפתורים מוחלפים מראש, עליך להוסיף את .active
המחלקה ואת aria-pressed="true"
התכונה button
לעצמך.
הוסף data-toggle="buttons"
לתיבת .btn-group
סימון המכילה או כניסות רדיו כדי לאפשר החלפה בסגנונות המתאימים שלהם.
.active
עבור אפשרויות שנבחרו מראש, עליך להוסיף את .active
המחלקה לקלט label
בעצמך.
אם המצב המסומן של כפתור תיבת סימון מתעדכן מבלי להפעיל click
אירוע על הכפתור (למשל באמצעות <input type="reset">
או באמצעות הגדרת checked
המאפיין של הקלט), תצטרך לשנות את .active
המחלקה על הקלט label
בעצמך.
$().button('toggle')
מחליף מצב דחיפה. נותן לכפתור את המראה שהוא הופעל.
$().button('reset')
מאפס מצב כפתור - מחליף טקסט לטקסט מקורי. שיטה זו היא אסינכרונית וחוזרת לפני שהאיפוס הושלם בפועל.
$().button(string)
מחליף טקסט לכל מצב טקסט מוגדר בנתונים.
תוסף גמיש שמשתמש בקומץ של שיעורים להתנהגות קלה להחלפה.
כיווץ מחייב את תוסף המעברים להיכלל בגרסה שלך של Bootstrap.
לחץ על הלחצנים למטה כדי להציג ולהסתיר אלמנט נוסף באמצעות שינויים בכיתה:
.collapse
מסתיר תוכן.collapsing
מוחל במהלך מעברים.collapse.in
מציג תוכןאתה יכול להשתמש בקישור עם href
התכונה, או בכפתור עם data-target
התכונה. בשני המקרים, data-toggle="collapse"
נדרש.
הרחב את התנהגות הכיווץ המוגדרת כברירת מחדל כדי ליצור אקורדיון עם רכיב הפאנל.
אפשר גם להחליף .panel-body
s עם .list-group
s.
הקפד להוסיף aria-expanded
לאלמנט הבקרה. תכונה זו מגדירה במפורש את המצב הנוכחי של האלמנט הניתן לקיפול לקוראי מסך ולטכנולוגיות מסייעות דומות. אם האלמנט המתקפל נסגר כברירת מחדל, צריך להיות לו ערך של aria-expanded="false"
. אם הגדרת את הרכיב הניתן לכיווץ להיות פתוח כברירת מחדל באמצעות in
המחלקה, הגדר aria-expanded="true"
על הפקד במקום זאת. התוסף יחליף את התכונה הזו באופן אוטומטי בהתבסס על פתיחת או סגירת הרכיב הניתן לקריסה.
בנוסף, אם רכיב הבקרה שלך מכוון לרכיב אחד שניתן להתכווץ - כלומר data-target
התכונה מצביעה על id
בורר - אתה יכול להוסיף aria-controls
תכונה נוספת לרכיב הבקרה, המכילה את id
הרכיב המתכווץ. קוראי מסך מודרניים וטכנולוגיות מסייעות דומות עושים שימוש בתכונה זו כדי לספק למשתמשים קיצורי דרך נוספים כדי לנווט ישירות אל האלמנט הניתן לקריסה עצמו.
תוסף הקריסה משתמש בכמה מחלקות כדי להתמודד עם ההרמה הכבדה:
.collapse
מסתיר את התוכן.collapse.in
מציג את התוכן.collapsing
מתווסף כאשר המעבר מתחיל, ומוסר כאשר הוא מסתייםניתן למצוא שיעורים אלה ב component-animations.less
.
פשוט הוסף data-toggle="collapse"
ו-a data-target
לאלמנט כדי להקצות אוטומטית שליטה על אלמנט מתקפל. התכונה data-target
מקבלת בורר CSS להחיל עליו את הכיווץ. הקפד להוסיף את המחלקה collapse
לרכיב הניתן לקיפול. אם תרצה שהיא תיפתח כברירת מחדל, הוסף את המחלקה הנוספת in
.
כדי להוסיף ניהול קבוצתי דמוי אקורדיון לשלט מתקפל, הוסף את תכונת הנתונים data-parent="#selector"
. עיין בהדגמה כדי לראות את זה בפעולה.
הפעל באופן ידני עם:
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-parent=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
הוֹרֶה | בוחר | שֶׁקֶר | אם מסופק בורר, כל הרכיבים הניתנים לכיווץ תחת האב שצוין ייסגרו כאשר הפריט הניתן לכיווץ יוצג. (בדומה להתנהגות האקורדיון המסורתית - זה תלוי panel בכיתה) |
לְמַתֵג | בוליאני | נָכוֹן | מחליפה את הרכיב הניתן לקריסה בעת הפניה |
.collapse(options)
מפעיל את התוכן שלך כאלמנט מתקפל. מקבל אפשרויות אופציונליות object
.
.collapse('toggle')
מחליף רכיב שניתן להתכווץ לתצוגה או להסתרה. חוזר אל המתקשר לפני שהרכיב המתכווץ הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.collapse
או מתרחש).hidden.bs.collapse
.collapse('show')
מציג אלמנט מתקפל. חוזר אל המתקשר לפני שהרכיב הניתן לקריסה הוצג בפועל (כלומר לפני shown.bs.collapse
התרחשות האירוע).
.collapse('hide')
מסתיר אלמנט מתקפל. חוזר אל המתקשר לפני שהרכיב הניתן לקריסה הוסתר בפועל (כלומר לפני hidden.bs.collapse
התרחשות האירוע).
מחלקת הקריסה של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות התמוטטות.
סוג אירוע | תיאור |
---|---|
show.bs.collapse | אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. |
הצג.bs.התמוטטות | אירוע זה מופעל כאשר רכיב כיווץ נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). |
hide.bs.collapse | אירוע זה מופעל מיד כאשר hide השיטה נקראה. |
hidden.bs.collapse | אירוע זה מופעל כאשר אלמנט כיווץ הוסתר מהמשתמש (יחכה לסיום מעברי CSS). |
רכיב מצגת לרכיבה על אופניים דרך אלמנטים, כמו קרוסלה. קרוסלות מקוננות אינן נתמכות.
רכיב הקרוסלה בדרך כלל אינו תואם את תקני הנגישות. אם אתה צריך לעמוד בדרישות, שקול אפשרויות אחרות להצגת התוכן שלך.
Bootstrap משתמש בלעדית ב-CSS3 עבור האנימציות שלו, אך Internet Explorer 8 ו-9 אינם תומכים במאפייני ה-CSS הדרושים. לפיכך, אין אנימציות של מעבר שקופיות בעת שימוש בדפדפנים אלה. החלטנו בכוונה לא לכלול נפילות מבוססות jQuery למעברים.
.active
יש להוסיף את הכיתה לאחת השקופיות. אחרת, הקרוסלה לא תהיה גלויה.
המחלקות .glyphicon .glyphicon-chevron-left
ו .glyphicon .glyphicon-chevron-right
אינן נחוצות בהכרח עבור הפקדים. Bootstrap מספק .icon-prev
וכאלטרנטיבות .icon-next
unicode פשוטות.
הוסף כיתובים לשקופיות שלך בקלות עם .carousel-caption
האלמנט בתוך כל .item
. הצב שם כמעט כל HTML אופציונלי והוא יתיישר ויעוצב באופן אוטומטי.
קרוסלות דורשות שימוש id
במיכל החיצוני ביותר (ה .carousel
) כדי שבקרות הקרוסלה יתפקדו כראוי. בעת הוספת קרוסלה מרובות, או בעת החלפת קרוסלה id
, הקפד לעדכן את הפקדים הרלוונטיים.
השתמש בתכונות נתונים כדי לשלוט בקלות במיקום הקרוסלה. data-slide
מקבל את מילות המפתח prev
או next
, אשר משנה את מיקום השקף ביחס למיקומו הנוכחי. לחלופין, השתמש data-slide-to
כדי להעביר אינדקס שקופיות גולמי לקרוסלה data-slide-to="2"
, מה שמעביר את מיקום השקופית לאינדקס מסוים שמתחיל ב- 0
.
התכונה data-ride="carousel"
משמשת לסימון קרוסלה כהנפשה החל מטעינת העמוד. לא ניתן להשתמש בו בשילוב עם אתחול JavaScript מפורש (מיותר ומיותר) של אותה קרוסלה.
התקשר לקרוסלה באופן ידני עם:
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-interval=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָ�� | תיאור |
---|---|---|---|
הַפסָקָה | מספר | 5000 | משך הזמן שיש לעכב בין רכיבה אוטומטית של פריט. אם לא נכון, הקרוסלה לא תעבור אוטומטית. |
הַפסָקָה | מחרוזת | ריק | "לְרַחֵף" | אם מוגדר ל- "hover" , משהה את רכיבת הקרוסלה פועלת mouseenter ומחדש את הרכיבה על הקרוסלה mouseleave . אם מוגדר ל- null , ריחוף מעל הקרוסלה לא ישהה אותה. |
לַעֲטוֹף | בוליאני | נָכוֹן | האם הקרוסלה צריכה להסתובב ברציפות או שתהיה לה עצירות קשות. |
מקלדת | בוליאני | נָכוֹן | האם הקרוסלה צריכה להגיב לאירועי מקלדת. |
.carousel(options)
מאתחל את הקרוסלה עם אפשרויות אופציונליות object
ומתחיל לרכוב על אופניים בין פריטים.
.carousel('cycle')
עובר במחזוריות בין פריטי הקרוסלה משמאל לימין.
.carousel('pause')
מונע מהקרוסלה לרכוב על אופניים דרך פריטים.
.carousel(number)
מעביר את הקרוסלה למסגרת מסוימת (מבוסס 0, בדומה למערך).
.carousel('prev')
עובר אל הפריט הקודם.
.carousel('next')
עוברים לפריט הבא.
כיתת הקרוסלה של Bootstrap חושפת שני אירועים לחיבור לפונקציונליות הקרוסלה.
לשני האירועים יש את המאפיינים הנוספים הבאים:
direction
: הכיוון שבו הקרוסלה מחליקה (או "left"
או "right"
).relatedTarget
: רכיב ה-DOM המוחלף למקומו כפריט הפעיל.כל אירועי הקרוסלה נורים לעבר הקרוסלה עצמה (כלומר לעבר ה- <div class="carousel">
).
סוג אירוע | תיאור |
---|---|
מגלשת.bs.קרוסלה | אירוע זה מופעל מיד כאשר slide שיטת המופע מופעלת. |
slid.bs.carousel | אירוע זה מופעל כאשר הקרוסלה השלימה את מעבר השקופיות שלה. |
תוסף האפיק מופעל position: fixed;
ומכבה, מחקה את האפקט שנמצא עם position: sticky;
. הניווט המשנה מימין הוא הדגמה חיה של התוסף affix.
השתמש בפלאגין להדבקה באמצעות תכונות נתונים או באופן ידני עם JavaScript משלך. בשני המצבים, עליך לספק CSS עבור המיקום והרוחב של התוכן המודבק שלך.
הערה: אל תשתמש בתוסף להדבקה ברכיב הכלול ברכיב הממוקם יחסית, כגון עמודה נמשכת או נדחפת, עקב באג בעיבוד ספארי .
הפלאגין affix עובר בין שלוש מחלקות, שכל אחת מהן מייצגת מצב מסוים: .affix
, .affix-top
, ו .affix-bottom
. עליך לספק את הסגנונות, למעט position: fixed;
על.affix
, עבור השיעורים הללו בעצמך (ללא תלות בתוסף זה) כדי לטפל בעמדות בפועל.
כך פועל הפלאגין אפיקס:
.affix-top
כדי לציין שהאלמנט נמצא במיקום העליון שלו. בשלב זה לא נדרש מיקום CSS..affix
מחליפים .affix-top
ומגדירים position: fixed;
(מסופק על ידי ה-CSS של Bootstrap)..affix
ב- .affix-bottom
. מכיוון שקיזוזים הם אופציונליים, הגדרה אחת מחייבת אותך להגדיר את ה-CSS המתאים. במקרה זה, הוסף position: absolute;
במידת הצורך. התוסף משתמש בתכונת הנתונים או באפשרות JavaScript כדי לקבוע היכן למקם את האלמנט משם.בצע את השלבים לעיל כדי להגדיר את ה-CSS שלך עבור אחת מאפשרויות השימוש שלהלן.
כדי להוסיף בקלות התנהגות הדבקה לכל אלמנט, פשוט הוסף data-spy="affix"
לרכיב שאתה רוצה לרגל אחריו. השתמש בהיסטים כדי להגדיר מתי יש להחליף את ההצמדה של אלמנט.
התקשר לפלאגין האפיק באמצעות JavaScript:
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-
, כמו ב- data-offset-top="200"
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
לְקַזֵז | מספר | פונקציה | לְהִתְנַגֵד | 10 | פיקסלים לקיזוז מהמסך בעת חישוב מיקום הגלילה. אם מסופק מספר בודד, ההיסט יוחל בכיוונים העליון והתחתון כאחד. כדי לספק קיזוז ייחודי, תחתון ועליון פשוט ספק אובייקט offset: { top: 10 } או offset: { top: 10, bottom: 5 } . השתמש בפונקציה כאשר אתה צריך לחשב היסט באופן דינמי. |
יַעַד | בורר | צומת | אלמנט jQuery | window האובייקט _ |
מציין את רכיב היעד של התיק. |
.affix(options)
מפעיל את התוכן שלך כתוכן מודבק. מקבל אפשרויות אופציונליות object
.
.affix('checkPosition')
מחשב מחדש את מצב ההדבקה בהתבסס על הממדים, המיקום ומיקום הגלילה של האלמנטים הרלוונטיים. ה- .affix
, .affix-top
, ו- .affix-bottom
מחלקות מתווספות או מוסרות מהתוכן המודבק בהתאם למצב החדש. יש לקרוא לשיטה זו בכל פעם שהמידות של התוכן המודבק או רכיב היעד משתנים, כדי להבטיח מיקום נכון של התוכן המודבק.
תוסף האפיק של Bootstrap חושף כמה אירועים לחיבור לפונקציונליות האפיקים.
סוג אירוע | תיאור |
---|---|
affix.bs.affix | אירוע זה מופעל מיד לפני שהרכיב הוצמד. |
affixed.bs.affix | אירוע זה מופעל לאחר שהרכיב הוצמד. |
affix-top.bs.affix | אירוע זה מופעל מיד לפני שהאלמנט הוצמד למעלה. |
affixed-top.bs.affix | אירוע זה מופעל לאחר שהרכיב הוצמד למעלה. |
affix-bottom.bs.affix | אירוע זה מופעל מיד לפני שהאלמנט הוצמד-למטה. |
affixed-bottom.bs.affix | אירוע זה מופעל לאחר שהרכיב הוצמד-למטה. |