Javascript עבור Bootstrap

הבא לחיים את הרכיבים של Bootstrap - כעת עם 12 תוספי jQuery מותאמים אישית.

מודלים

גישה יעילה אך גמישה לתוסף המודאלי המסורתי של javascript עם הפונקציונליות המינימלית הנדרשת בלבד וברירות מחדל חכמות.

תפריטים נפתחים

הוסף תפריטים נפתחים כמעט לכל דבר ב-Bootstrap עם התוסף הפשוט הזה. Bootstrap כולל תמיכה מלאה בתפריט הנפתח בסרגל הניווט, הכרטיסיות והכדורים.

Scrollspy

השתמש ב-scrollspy כדי לעדכן אוטומטית את הקישורים בסרגל הניווט שלך כדי להציג את הקישור הפעיל הנוכחי בהתבסס על מיקום הגלילה.

כרטיסיות הניתנות להחלפה

השתמש בתוסף זה כדי להפוך את הכרטיסיות והגלולות לשימושיות יותר על ידי מתן אפשרות להן לעבור בין חלוניות הניתנות לכרטיסיות של תוכן מקומי.

עצות כלים

גרסה חדשה של התוסף jQuery Tipsy, עצות Tools לא מסתמכות על תמונות - הם משתמשים ב-CSS3 עבור אנימציות ותכונות נתונים עבור אחסון כותרות מקומי.

חלונות קופצים *

הוסף שכבות-על קטנות של תוכן, כמו אלו באייפד, לכל רכיב לצורך שיכון מידע משני.

* צריך לכלול עצות כלים

הודעות התראה

תוסף ההתראה הוא מחלקה זעירה להוספת פונקציונליות קרובה להתראות.

כפתורים

עשה יותר עם כפתורים. שליטה במצבי לחצנים או צור קבוצות של לחצנים עבור רכיבים נוספים כמו סרגלי כלים.

הִתמוֹטְטוּת

קבל סגנונות בסיסיים ותמיכה גמישה עבור רכיבים מתקפלים כמו אקורדיונים וניווט.

קרוסלה

צור סיבוב עליז של כל תוכן שתרצה לספק מצגת אינטראקטיבית של תוכן.

Typeahead

תוסף בסיסי, מורחב בקלות ליצירה מהירה של ראשי כתיבה אלגנטיים עם כל קלט טקסט.

מעברים *

עבור אפקטי מעבר פשוטים, כלול את bootstrap-transition.js פעם אחת כדי להחליק מודלים או לדעוך התראות.

* נדרש להנפשה בתוספים

שימו לב! כל התוספים של javascript דורשים את הגרסה העדכנית ביותר של jQuery.

לגבי מודלים

הורד קובץ

דוגמה סטטית

להלן מודאל מעובד סטטי.

דמו ישיר

החלף מודאלי באמצעות javascript על ידי לחיצה על הכפתור למטה. הוא יחליק מטה ויימוג מהחלק העליון של העמוד.

הפעל הדגמה

שימוש ב-bootstrap-modal

התקשר למודאל באמצעות javascript:

$ ( '#myModal' ). מודאלי ( אפשרויות )

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
רקע	בוליאני	נָכוֹן	כולל אלמנט רקע מודאלי. לחלופין, ציין `static`עבור רקע שאינו סוגר את המודאל בלחיצה.
מקלדת	בוליאני	נָכוֹן	סוגר את המודאל בעת לחיצה על מקש Escape
הופעה	בוליאני	נָכוֹן	מציג את המודאל בעת אתחול.

סימון

אתה יכול להפעיל מודלים בדף שלך בקלות מבלי לכתוב שורה אחת של javascript. פשוט הגדר data-toggle="modal"על רכיב בקר עם data-target="#foo"או href="#foo"שמתאים למזהה אלמנט מודאלי, וכאשר לוחצים עליו, הוא יפעיל את המודאל שלך.

כמו כן, כדי להוסיף אפשרויות למופע המודאלי שלך, פשוט כלול אותן כתכונות נתונים נוספות ברכיב הבקרה או בעיצוב המודאלי עצמו.

<a class = "btn" data-toggle = "modal" href = "#myModal" > הפעל את המודל </a>

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> כותרת מודאלית </h3>
  </div>
  <div class = "modal-body" > 
    <p> גוף נאה אחד... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > סגור </a>  
    <a href = "#" class = "btn btn-primary" > שמור שינויים </a>  
  </div>
</div>

שימו לב! אם אתה רוצה שהמודל שלך יבצע אנימציה פנימה והחוצה, פשוט הוסף .fadeמחלקה .modalלאלמנט (עיין בהדגמה כדי לראות את זה בפעולה) וכלול bootstrap-transition.js.

שיטות

.modal(אפשרויות)

מפעיל את התוכן שלך כמודל. מקבל אפשרויות אופציונליות object.

$ ( '#myModal' ). מודאלי ({
  מקלדת : שקר 
})

.modal('toggle')

מחליף מודאל באופן ידני.

$ ( '#myModal' ). מודאלי ( 'להחליף' )

.modal('show')

פותח מודאל באופן ידני.

$ ( '#myModal' ). מודאלי ( 'הצג' )

.modal('hide')

מסתיר באופן ידני מודאל.

$ ( '#myModal' ). מודאלי ( 'להסתיר' )

אירועים

המחלקה המודאלית של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות מודאלית.

מִקרֶה	תיאור
הופעה	אירוע זה מופעל מיד כאשר `show`שיטת המופע נקראת.
מוצג	אירוע זה מופעל כאשר המודאל נעשה גלוי למשתמש (יחכה לסיום מעברי css).
להתחבא	אירוע זה מופעל מיד כאשר `hide`שיטת המופע נקראה.
מוּסתָר	אירוע זה מופעל כאשר המודאל סיים להיות מוסתר מהמשתמש (יחכה לסיום מעברי css).

$ ( '#myModal' ). on ( 'מוסתר' , function () {   
  // עשה משהו…
})

לגבי תפריטים נפתחים

הורד קובץ

דוגמאות

לחץ על קישורי הניווט הנפתחים בסרגל הניווט והכדורים למטה כדי לבדוק תפריטים נפתחים.

שימוש ב-bootstrap-dropdown.js

התקשר לתפריטים הנפתחים באמצעות javascript:

$ ( '.dropdown-toggle' ). תפריט נפתח ()

סימון

כדי להוסיף במהירות פונקציונליות נפתחת לכל אלמנט פשוט הוסף data-toggle="dropdown"וכל תפריט נפתח תקף תופעל אוטומטית.

שימו לב! ניתן למקד לתפריט נפתח ספציפי באמצעות data-target="#fat"או href="#fat".

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > קישור רגיל </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      להפיל
      <b class = "caret" ></b> 
    </a>
    <ul class = "תפריט נפתח" > 
      <li><a href = "#" > פעולה </a></li> 
      <li><a href = "#" > פעולה נוספת </a></li> 
      <li><a href = "#" > משהו אחר כאן </a></li> 
      <li class = "מחלק" ></li> 
      <li><a href = "#" > קישור מופרד </a></li> 
    </ul>
  </li>
  ...
</ul>

שיטות

$().dropdown()

API פרוגרמטי להפעלת תפריטים עבור סרגל ניווט נתון או ניווט עם כרטיסיות.

התוסף ScrollSpy מיועד לעדכון אוטומטי של יעדי ניווט בהתבסס על מיקום הגלילה.

הורד קובץ

סרגל ניווט לדוגמה עם 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.

@mdo

סקייטבורד שפם של 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.

three

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.

שימוש ב-bootstrap-scrollspy.js

התקשר ל- scrollspy באמצעות javascript:

$ ( '#navbar' ). scrollspy ()

סימון

כדי להוסיף בקלות התנהגות גלילית לניווט בסרגל העליון שלך, פשוט הוסף data-spy="scroll"לרכיב שאתה רוצה לרגל אחריו (בדרך כלל זה יהיה הגוף).

<body data-spy = "croll" > ... </body>

שימו לב! קישורי Navbar חייבים להיות בעלי יעדי מזהה ניתנים לפתרון. לדוגמה, <a href="#home">home</a>חובה להתאים למשהו בדום כמו <div id="home"></div>.

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
לְקַזֵז	מספר	10	פיקסלים לקיזוז מלמעלה בעת חישוב מיקום הגלילה.

תוסף זה מוסיף פונקציונליות מהירה ודינמית של כרטיסיות וגלולה למעבר דרך תוכן מקומי.

הורד קובץ

כרטיסיות לדוגמה

לחץ על הכרטיסיות למטה כדי לעבור בין חלוניות נסתרות, אפילו באמצעות תפריטים נפתחים.

ג'ינס גולמי בטח לא שמעתם עליהם מכנסי ג'ינס אוסטין. 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.

קרן נאמנות seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse freegan cosby scenester scenster freegan cosby. פאני פאני פורטלנד סייטן עשה זאת בעצמך, מסיבת אמנות locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh עשה זאת בעצמך salvia PBR, banh mi לפני שהם נמכרו מחווה לשולחן VHS ויראלי locavore cosby סוודר. Lomo wolf ויראלי, שפם מוכן חתולי רעמים keffiyeh craft beer marfa ethical. וולף סלוויה פריגן, sartorial keffiyeh echo park טבעוני.

שימוש ב-bootstrap-tab.js

אפשר כרטיסיות הניתנות לכרטיסיות באמצעות javascript:

$ ( '#myTab' ). לשונית ( 'הצג' )

סימון

אתה יכול להפעיל טאב או ניווט בגלולה מבלי לכתוב שום javascript על ידי ציון data-toggle="tab"או data-toggle="pill"על אלמנט.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > דף הבית </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > פרופיל </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > הודעות </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > הגדרות </a></li>  
</ul>

שיטות

$().tab

מפעיל רכיב טאב ומכל תוכן. ל-Tab צריך להיות `data-target` או `href` הממקדים לצומת מכיל ב-dom.

<ul class = "nav nav-tabs" > 
  <li class = "active" ><a href = "#home" > דף הבית </a></li>  
  <li><a href = "#profile" > פרופיל </a></li> 
  <li><a href = "#messages" > הודעות </a></li> 
  <li><a href = "#settings" > הגדרות </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "הגדרות" > ... </div>  
</div>
 
<script>
  $ ( פונקציה () {  
    $ ( '.tabs a:last' ). לשונית ( 'הצג' )
  })
</script>

אירועים

מִקרֶה	תיאור
הופעה	אירוע זה מופעל בהצגת כרטיסיות, אך לפני שהכרטיסייה החדשה הוצגה. השתמש `event.target`ובכדי `event.relatedTarget`למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה.
מוצג	אירוע זה מופעל בהצגת כרטיסיות לאחר הצגת כרטיסייה. השתמש `event.target`ובכדי `event.relatedTarget`למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה.

$ ( 'a[data-toggle="tab"]' ). on ( 'מוצג' , function ( e ) {   
  ה . target // הכרטיסייה מופעלת
  ה . relatedTarget // הכרטיסייה הקודמת
})

על עצות כלים

בהשראת התוסף המצוין jQuery.tipsy שנכתב על ידי Jason Frame; עצות כלים הן גרסה מעודכנת, שאינה מסתמכת על תמונות, משתמשת ב-css3 עבור אנימציות ותכונות נתונים לאחסון כותרות מקומיות.

הורד קובץ

שימוש לדוגמה ב-Tooltips

רחף מעל הקישורים למטה כדי לראות עצות כלים:

שימוש ב-bootstrap-tooltip.js

הפעל את הסבר הכלים באמצעות javascript:

$ ( '#example' ). טיפים ( אפשרויות )

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
אנימציה	בוליאני	נָכוֹן	החל מעבר דהייה של css על הסבר הכלי
מיקום	מחרוזת\|פונקציה	'חלק עליון'	כיצד למקם את הסבר הכלי - למעלה \| תחתון \| שמאל \| ימין
בוחר	חוּט	שֶׁקֶר	אם מסופק בורר, אובייקטי תיאור כלים יואצלו ליעדים שצוינו.
כותרת	מחרוזת \| פוּנקצִיָה	''	ערך כותרת ברירת מחדל אם תג 'title' אינו קיים
הדק	חוּט	'לְרַחֵף'	כיצד מופעלת תיאור כלי - רחף \| מיקוד \| מדריך ל
לְעַכֵּב	מספר \| לְהִתְנַגֵד	0	עיכוב הצגה והסתרה של הסבר הכלי (ms) אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה מבנה האובייקט הוא:`delay: { show: 500, hide: 100 }`

שימו לב! לחילופין ניתן לציין אפשרויות עבור עצות כלים בודדות באמצעות שימוש בתכונות נתונים.

סימון

מטעמי ביצועים, ה-Tooltip ו-Popover data-apis ניתנים להצטרפות. אם תרצה להשתמש בהם פשוט ציין אפשרות בורר.

<a href = "#" rel = "tooltip" title = "tooltip ראשון" > רחף מעלי </a>

שיטות

$().tooltip(options)

מצרף מטפל בתיאור כלים לאוסף אלמנטים.

.tooltip('show')

חושף תיאור כלי של אלמנט.

$ ( '#element' ). הסבר כלים ( 'הצג' )

.tooltip('hide')

מסתיר תיאור כלי של אלמנט.

$ ( '#element' ). הסבר כלים ( 'הסתר' )

.tooltip('toggle')

מחליף תיאור כלי של רכיב.

$ ( '#element' ). הסבר כלים ( 'להחליף' )

לגבי פופ-אובר

הוסף שכבות-על קטנות של תוכן, כמו אלו באייפד, לכל רכיב לצורך שיכון מידע משני.

* צריך לכלול את הסבר הכלים

הורד קובץ

דוגמה לרחף פופ-אובר

העבר את העכבר מעל הלחצן כדי להפעיל את הפופ-אובר.

רחף לפופ-אובר

שימוש ב-bootstrap-popover.js

אפשר חלונות קופצים באמצעות javascript:

$ ( '#example' ). קופץ ( אפשרויות )

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
אנימציה	בוליאני	נָכוֹן	החל מעבר דהייה של css על הסבר הכלי
מיקום	מחרוזת\|פונקציה	'ימין'	איך למקם את הפופ-אובר - למעלה \| תחתון \| שמאל \| ימין
בוחר	חוּט	שֶׁקֶר	אם מסופק בורר, אובייקטי תיאור כלים יואצלו ליעדים שצוינו
הדק	חוּט	'לְרַחֵף'	כיצד מופעלת תיאור כלי - רחף \| מיקוד \| מדריך ל
כותרת	מחרוזת \| פוּנקצִיָה	''	ערך ברירת המחדל של כותרת אם תכונת 'title' אינה קיימת
תוֹכֶן	מחרוזת \| פוּנקצִיָה	''	ערך ברירת המחדל של תוכן אם התכונה 'נתונים-תוכן' אינה קיימת
לְעַכֵּב	מספר \| לְהִתְנַגֵד	0	עיכוב הצגת והסתרה של הפופ-אובר (ms) אם מסופק מספר, השהיה מוחל גם על הסתרה/הצגה מבנה האובייקט הוא:`delay: { show: 500, hide: 100 }`

שימו לב! לחלופין ניתן לציין אפשרויות עבור פופ-אובר בודדים באמצעות שימוש בתכונות נתונים.

סימון

מטעמי ביצועים, ה-Tooltip ו-Popover data-apis ניתנים להצטרפות. אם תרצה להשתמש בהם, פשוט ציין את אפשרות הבורר.

שיטות

$().popover(options)

מאתחל פופ-אובר עבור אוסף אלמנטים.

.popover('show')

חושף פריצת אלמנטים.

$ ( '#element' ). popover ( 'הצג' )

.popover('hide')

מסתיר חלון קופץ של אלמנטים.

$ ( '#element' ). popover ( 'להסתיר' )

.popover('toggle')

מחליף חלון קופץ של רכיבים.

$ ( '#element' ). popover ( 'להחליף' )

לגבי התראות

תוסף ההתראה הוא מחלקה זעירה להוספת פונקציונליות קרובה להתראות.

הורד

התראות לדוגמה

תוסף ההתראות עובד על הודעות התראה רגילות, וחוסם הודעות.

× גוואקמולי קדוש! הכי טוב תבדוק את עצמך, אתה לא נראה טוב מדי.

אוי! יש לך שגיאה!

שנה את זה ואת זה ונסה שוב. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

בצע פעולה זו או לעשות את זה

שימוש ב-bootstrap-alert.js

אפשר ביטול התראה באמצעות javascript:

$ ( ".alert" ). התראה ()

סימון

פשוט הוסף data-dismiss="alert"ללחצן הסגירה שלך כדי לתת פונקציונליות סגירה אוטומטית של התראה.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>

שיטות

$().alert()

עוטף את כל ההתראות עם פונקציונליות קרובה. כדי שההתראות שלך יופעלו כשהן סגורות, ודא שכבר הוחל עליהן את ה- .fadeand class..in

.alert('close')

סוגר התראה.

$ ( ".alert" ). התראה ( 'סגור' )

אירועים

מחלקת ההתראה של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות ההתראה.

מִקרֶה	תיאור
סגור	אירוע זה מופעל מיד כאשר `close`שיטת המופע נקראת.
סָגוּר	אירוע זה מופעל כאשר ההתראה נסגרה (יחכה לסיום מעברי css).

$ ( '#my-alert' ). bind ( 'סגור' , function () {   
  // עשה משהו…
})

על אודות

עשה יותר עם כפתורים. שליטה במצבי לחצנים או צור קבוצות של לחצנים עבור רכיבים נוספים כמו סרגלי כלים.

הורד קובץ

שימושים לדוגמה

השתמש בפלאגין הלחצנים עבור מצבים והחלפות.

ממלכתי
מתג יחיד
תיבת סימון
רָדִיוֹ

שימוש ב-bootstrap-button.js

אפשר לחצנים באמצעות javascript:

$ ( '.tabs' ). כפתור ()

סימון

תכונות הנתונים הן חלק בלתי נפרד מהפלאגין של הכפתורים. בדוק את הקוד לדוגמה למטה עבור סוגי הסימון השונים.

<!-- הוסף data-toggle="button" כדי להפעיל החלפה בלחצן בודד -->
<button class = "btn" data-toggle = "button" > החלפת מצב יחיד </button>  
 
<!-- הוסף data-toggle="buttons-checkbox" להחלפת סגנון תיבת סימון ב-btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > שמאל </button> 
  <button class = "btn" > אמצעי </button> 
  <button class = "btn" > מימין </button> 
</div>
 
<!-- הוסף data-toggle="buttons-radio" למעבר בסגנון רדיו ב-btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > שמאל </button> 
  <button class = "btn" > אמצעי </button> 
  <button class = "btn" > מימין </button> 
</div>

שיטות

$().button('toggle')

מחליף מצב דחיפה. נותן לכפתור את המראה שהוא הופעל.

שימו לב! אתה יכול לאפשר החלפה אוטומטית של כפתור באמצעות data-toggleהתכונה.

<button class = "btn" data-toggle = "button" > … </button>

$().button('טעינה')

מגדיר את מצב הכפתור לטעינה - משבית את הכפתור ומחליף טקסט לטעינת טקסט. טעינת טקסט צריכה להיות מוגדרת ברכיב הלחצן באמצעות תכונת הנתונים data-loading-text.

<button class = "btn" data-loading-text = "טוען דברים..." > ... </button>

שימו לב! פיירפוקס מחזיק במצב מושבת בכל טעינות דפים . דרך לעקיפת הבעיה היא להשתמש ב- autocomplete="off".

$().button('reset')

מאפס מצב כפתור - מחליף טקסט לטקסט מקורי.

$().button(string)

מאפס מצב כפתור - מחליף טקסט לכל מצב טקסט מוגדר בנתונים.

<button class = "btn" data-complete-text = "סיים!" > ... </button>   
<script>
  $ ( '.btn' ). כפתור ( 'השלם' )
</script>

על אודות

קבל סגנונות בסיסיים ותמיכה גמישה עבור רכיבים מתקפלים כמו אקורדיונים וניווט.

הורד קובץ

אקורדיון לדוגמא

באמצעות תוסף ה-Clapse, בנינו ווידג'ט פשוט בסגנון אקורדיון:

פריט קבוצה מתקפל מס' 1

Anim pariatur קלישאה reprehenderit, enim eiusmod high life accusamus טרי ריצ'רדסון עד דיונון. 3 wolf moon officia aute, non cupidatat סקייטבורד דולו בראנץ'. משאית אוכל קינואה nesciunt laborum eiusmod. בראנץ' 3 זאב ירח טמפור, sunt aliqua לשים עליו ציפור דיונון קפה ממקור יחיד nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. מודעה טבעונית חוץ קצב סגן לומו. חותלות occaecat בירה מלאכה מחווה לשולחן, ג'ינס גולמי סינתטי אסתטי, כנראה שלא שמעתם עליהם accusamus labore VHS בר קיימא.

פריט קבוצה מתקפל מס' 2

פריט קבוצה מתקפל מס' 3

שימוש ב-bootstrap-collapse.js

אפשר באמצעות javascript:

$ ( ".collapse" ). להתמוטט ()

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
הוֹרֶה	בוחר	שֶׁקֶר	אם הבורר, כל הרכיבים הניתנים לכיפול תחת האב שצוין ייסגרו כאשר פריט מתקפל זה יוצג. (בדומה להתנהגות האקורדיון המסורתית)
לְמַתֵג	בוליאני	נָכוֹן	מחליפה את הרכיב הניתן לקריסה בעת הפניה

סימון

פשוט הוסף data-toggle="collapse"ו- data-targetto אלמנט כדי להקצות אוטומטית שליטה על אלמנט מתקפל. התכונה data-targetמקבלת בורר css להחיל את הכיווץ עליו. הקפד להוסיף את המחלקה collapseלרכיב הניתן לקיפול. אם תרצה שהיא תיפתח כברירת מחדל, הוסף את המחלקה הנוספת in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  פשוט מתקפל
</button>
 
<div id = "demo" class = "התמוטט" > … </div>

שימו לב! כדי להוסיף ניהול קבוצתי דמוי אקורדיון לשלט מתקפל, הוסף את תכונת הנתונים data-parent="#selector". עיין בהדגמה כדי לראות את זה בפעולה.

שיטות

.collapse(אפשרויות)

מפעיל את התוכן שלך כאלמנט מתקפל. מקבל אפשרויות אופציונליות object.

$ ( '#myCollapsible' ). לכווץ ({
  למתג : שקר 
})

.collapse('toggle')

מחליף רכיב שניתן להתכווץ לתצוגה או להסתרה.

.collapse('show')

מציג אלמנט מתקפל.

.collapse('hide')

מסתיר אלמנט מתקפל.

אירועים

מחלקת הקריסה של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות התמוטטות.

מִקרֶה	תיאור
הופעה	אירוע זה מופעל מיד כאשר `show`שיטת המופע נקראת.
מוצג	אירוע זה מופעל כאשר רכיב כיווץ נעשה גלוי למשתמש (יחכה לסיום מעברי css).
להתחבא	אירוע זה מופעל מיד כאשר `hide`השיטה נקראה.
מוּסתָר	אירוע זה מופעל כאשר אלמנט כיווץ הוסתר מהמשתמש (יחכה לסיום מעברי css).

$ ( '#myCollapsible' ). on ( 'מוסתר' , function () {   
  // עשה משהו…
})

על אודות

תוסף גנרי לרכיבה על אופניים דרך אלמנטים. קרוסלת.

הורד קובץ

קרוסלה לדוגמה

צפו במצגת למטה.

תווית תמונה ממוזערת ראשונה

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

תווית תמונה ממוזערת שנייה

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

תווית תמונה ממוזערת שלישית

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

שימו לב! בעת יישום קרוסלה זו, הסר את התמונות שסיפקנו והחלף אותן בתמונות שלך.

שימוש ב-bootstrap-carousel.js

התקשר באמצעות javascript:

$ ( '.carousel' ). קרוסלה ()

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
הַפסָקָה	מספר	5000	משך הזמן שיש לעכב בין רכיבה אוטומטית של פריט.
הַפסָקָה	חוּט	"לְרַחֵף"	משהה את רכיבת הקרוסלה ב-mouseenter ומחדש את רכיבת הקרוסלה ב-mouseleave.

סימון

תכונות הנתונים משמשות עבור הפקדים הקודמים והבאים. בדוק את הסימון לדוגמה למטה.

<div id = "myCarousel" class = "carousel" >  
  <!-- פריטי קרוסלה -->
  <div class = "carousel-inner" > 
    <div class = "פריט פעיל" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- ניווט קרוסלה -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "הבא" > › </a>   
</div>

שיטות

.carousel(אפשרויות)

מאתחל את הקרוסלה עם אפשרויות אופציונליות objectומתחיל לרכוב על אופניים בין פריטים.

$ ( '.carousel' ). קרוסלה ({
  מרווח : 2000 
})

.carousel('cycle')

עובר במחזוריות בין פריטי הקרוסלה משמאל לימין.

.carousel('pause')

מונע מהקרוסלה לרכוב על אופניים דרך פריטים.

.carousel(מספר)

מעביר את הקרוסלה למסגרת מסוימת (מבוסס 0, בדומה למערך).

.carousel('prev')

עובר אל הפריט הקודם.

.carousel('next')

עוברים לפריט הבא.

אירועים

כיתת הקרוסלה של Bootstrap חושפת שני אירועים לחיבור לפונקציונליות הקרוסלה.

מִקרֶה	תיאור
שקופית	אירוע זה מופעל מיד כאשר `slide`שיטת המופע מופעלת.
החליק	אירוע זה מופעל כאשר הקרוסלה השלימה את מעבר השקופיות שלה.

על אודות

תוסף בסיסי, מורחב בקלות ליצירה מהירה של ראשי כתיבה אלגנטיים עם כל קלט טקסט.

הורד קובץ

דוגמא

התחל להקליד בשדה למטה כדי להציג את תוצאות ההקלדה.

באמצעות bootstrap-typeahead.js

התקשר ל-typeahead באמצעות javascript:

$ ( '.typeahead' ). הקלדה ()

אפשרויות

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
מָקוֹר	מַעֲרָך	[ ]	מקור הנתונים שכנגדו יש לבצע שאילתה.
פריטים	מספר	8	המספר המרבי של פריטים להצגה בתפריט הנפתח.
שדכן	פוּנקצִיָה	חסר רגישות לרישיות	השיטה המשמשת כדי לקבוע אם שאילתה תואמת לפריט. מקבל ארגומנט בודד, `item`שכנגדו יש לבדוק את השאילתה. גש לשאילתה הנוכחית באמצעות `this.query`. החזר ערך בוליאני `true`אם השאילתה מתאימה.
מְמַיֵן	פוּנקצִיָה	התאמה מדויקת, רגישות רישיות, לא רגישות רישיות	שיטה המשמשת למיון תוצאות השלמה אוטומטית. מקבל ארגומנט בודד `items`ויש לו את ההיקף של מופע typeahead. עיין בשאילתה הנוכחית באמצעות `this.query`.
מרקר מדגיש	פוּנקצִיָה	מדגיש את כל התאמות ברירת המחדל	שיטה המשמשת להדגשת תוצאות השלמה אוטומטית. מקבל ארגומנט בודד `item`ויש לו את ההיקף של מופע typeahead. צריך להחזיר html.

סימון

הוסף תכונות נתונים כדי לרשום אלמנט עם פונקציונליות typeahead.

<input type = "text" data-provide = "typeahead" >

שיטות

.typeahead(Options)

מאתחל קלט עם מקדמה.

jQuery plugins תריסר תוספי Bootstrap כדי להתחיל

חלונות קופצים *

מעברים *

מודלים bootstrap- modal.js

לגבי מודלים

דוגמה סטטית

כותרת מודאלית

דמו ישיר

כותרת מודאלית

טקסט במודאלי

Popover in a modal

Tooltips in a modal

Overflowing text to show optional scrollbar

שימוש ב-bootstrap-modal

אפשרויות

סימון

שיטות

.modal(אפשרויות)

.modal('toggle')

.modal('show')

.modal('hide')

אירועים

אפשרויות נפתחות bootstrap-dropdown.js

לגבי תפריטים נפתחים

דוגמאות

שימוש ב-bootstrap-dropdown.js

סימון

שיטות

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

סרגל ניווט לדוגמה עם scrollspy

@שמן

@mdo

אחד

שתיים

three

שימוש ב-bootstrap-scrollspy.js

סימון

אפשרויות

כרטיסיות הניתנות להחלפה bootstrap-tab.js

כרטיסיות לדוגמה

שימוש ב-bootstrap-tab.js

סימון

שיטות

$().tab

אירועים

עצות כלים bootstrap-tooltip.js

על עצות כלים

שימוש לדוגמה ב-Tooltips

שימוש ב-bootstrap-tooltip.js

אפשרויות

סימון

שיטות

$().tooltip(options)

.tooltip('show')

.tooltip('hide')

.tooltip('toggle')

Popovers bootstrap-popover.js

לגבי פופ-אובר

דוגמה לרחף פופ-אובר

שימוש ב-bootstrap-popover.js

אפשרויות

סימון

שיטות

$().popover(options)

.popover('show')

.popover('hide')

.popover('toggle')

הודעות התראה bootstrap-alert.js

לגבי התראות

התראות לדוגמה

אוי! יש לך שגיאה!

שימוש ב-bootstrap-alert.js

סימון

שיטות

$().alert()

.alert('close')

אירועים

כפתורים bootstrap-button.js

על אודות