הורד

ל-Bootstrap (כרגע גרסה 3.3.7) יש כמה דרכים קלות להתחיל במהירות, כל אחת מהן מושכת רמת מיומנות ושימוש אחר. קרא דרך כדי לראות מה מתאים לצרכים הספציפיים שלך.

אתחול CDN

האנשים ב- jsDelivr מספקים באדיבות תמיכת CDN עבור ה-CSS וה-JavaScript של Bootstrap. פשוט השתמש בקישורי Bootstrap CDN אלה.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

התקן עם Bower

אתה יכול גם להתקין ולנהל את ה-Less, CSS, JavaScript והגופנים של Bootstrap באמצעות Bower :

$ bower install bootstrap

התקן עם npm

אתה יכול גם להתקין את Bootstrap באמצעות npm :

$ npm install bootstrap@3

require('bootstrap')יטען את כל התוספים של jQuery של Bootstrap על אובייקט jQuery. המודול bootstrapעצמו אינו מייצא דבר. אתה יכול לטעון באופן ידני את התוספים jQuery של Bootstrap בנפרד על ידי טעינת /js/*.jsהקבצים תחת הספרייה ברמה העליונה של החבילה.

Bootstrap's package.jsonמכיל כמה מטא נתונים נוספים תחת המפתחות הבאים:

• less- נתיב לקובץ המקור Less הראשי של Bootstrap
• style- נתיב ל-CSS הלא ממוזער של Bootstrap שהורכב מראש באמצעות הגדרות ברירת המחדל (ללא התאמה אישית)

התקן עם Composer

אתה יכול גם להתקין ולנהל את ה-Less, CSS, JavaScript והגופנים של Bootstrap באמצעות Composer :

$ composer require twbs/bootstrap

נדרש תכונה אוטומטית עבור Less/Sass

Bootstrap משתמש ב- Autoprefixer כדי להתמודד עם קידומות של ספקי CSS . אם אתה מרכיב את Bootstrap ממקור ה-Less/Sass שלו ולא משתמש ב-Gruntfile שלנו, תצטרך לשלב את Autoprefixer בתהליך הבנייה שלך בעצמך. אם אתה משתמש ב-Bootstrap מהול מראש או משתמש ב-Gruntfile שלנו, אינך צריך לדאוג לגבי זה כי Autoprefixer כבר משולב ב-Gruntfile שלנו.

מה נכלל

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

Bootstrap מהול מראש

לאחר ההורדה, פתח את התיקיה הדחוסה כדי לראות את המבנה של (הקומפילציה) Bootstrap. אתה תראה משהו כזה:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

זוהי הצורה הבסיסית ביותר של Bootstrap: קבצים מהודרים מראש לשימוש מהיר בירידה כמעט בכל פרויקט אינטרנט. אנו מספקים CSS ו-JS מקופלים ( bootstrap.*), כמו גם CSS ו-JS מקופלים וממוזערים ( bootstrap.min.*). מפות מקור CSS ( bootstrap.*.map) זמינות לשימוש עם כלי מפתחים של דפדפנים מסוימים. גופנים מ-Glyphicons כלולים, וכך גם ערכת הנושא האופציונלית של Bootstrap.

קוד מקור Bootstrap

הורדת קוד המקור של Bootstrap כוללת את נכסי ה-CSS, JavaScript והגופנים המורכבים מראש, יחד עם פחות מקור, JavaScript ותיעוד. ליתר דיוק, הוא כולל את הדברים הבאים ועוד:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

ה- less/, js/, ו fonts/הם קוד המקור של גופני ה-CSS, JS והסמלים שלנו (בהתאמה). התיקיה כוללת את dist/כל מה שמופיע בסעיף ההורדה המורכב מראש למעלה. התיקיה כוללת את docs/קוד המקור של התיעוד שלנו ושל examples/השימוש ב-Bootstrap. מעבר לכך, כל קובץ כלול אחר מספק תמיכה בחבילות, מידע על רישיון ופיתוח.

קומפילציה של CSS ו-JavaScript

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

מתקין גרנט

כדי להתקין את Grunt, תחילה עליך להוריד ולהתקין את node.js (הכולל npm). npm מייצג מודולים ארוזים בצומת והיא דרך לנהל תלות בפיתוח דרך node.js.

1. התקן grunt-cliבאופן גלובלי עם npm install -g grunt-cli.
2. נווט אל ספריית השורש /bootstrap/ולאחר מכן הפעל את npm install. npm יסתכל על package.jsonהקובץ ויתקין אוטומטית את התלות המקומית הדרושות הרשומות שם.

לאחר השלמתו, תוכל להפעיל את פקודות ה-Grunt השונות שסופקו משורת הפקודה.

פקודות גרנט זמינות

grunt dist(פשוט הידור CSS ו-JavaScript)

יוצר מחדש את /dist/הספרייה עם קבצי CSS ו-JavaScript מקומפלים וממוזערים. כמשתמש Bootstrap, זו בדרך כלל הפקודה שאתה רוצה.

grunt watch(שעון)

צופה בקבצי המקור של Less ומבצע קומפילציה אוטומטית שלהם ל-CSS בכל פעם שאתה שומר שינוי.

grunt test(הפעל בדיקות)

מריץ JSHint ומפעיל את מבחני QUnit ללא ראש ב- PhantomJS .

grunt docs(בנה ובדוק את נכסי המסמכים)

בונה ובודק CSS, JavaScript ונכסים אחרים המשמשים בעת הפעלת התיעוד באופן מקומי באמצעות bundle exec jekyll serve.

grunt(בנה הכל והריץ בדיקות)

קומפילציה וממזערת CSS ו-JavaScript, בונה את אתר התיעוד, מפעילה את אימות HTML5 מול המסמכים, מחדשת את נכסי Customizer ועוד. דורש ג'קיל . בדרך כלל הכרחי רק אם אתה פורץ ל-Bootstrap עצמו.

פתרון תקלות

אם אתה נתקל בבעיות בהתקנת תלות או הפעלת פקודות Grunt, מחק תחילה את /node_modules/הספרייה שנוצרה על ידי npm. לאחר מכן, הפעל מחדש npm install.

תבנית בסיסית

התחל עם תבנית HTML בסיסית זו, או שנה את הדוגמאות האלה . אנו מקווים שתתאים אישית את התבניות והדוגמאות שלנו, ותתאים אותן לצרכים שלך.

העתק את ה-HTML למטה כדי להתחיל לעבוד עם מסמך Bootstrap מינימלי.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

דוגמאות

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

קבל את קוד המקור עבור כל דוגמה למטה על ידי הורדת מאגר Bootstrap . דוגמאות ניתן למצוא docs/examples/במדריך.

שימוש במסגרת

תבנית התחלה

שום דבר מלבד היסודות: הידור CSS ו-JavaScript יחד עם קונטיינר.

נושא אתחול

טען את ערכת הנושא האופציונלית של Bootstrap לחוויה חזותית משופרת.

רשתות

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

ג'מבוטרון

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

ג'מבוטרון צר

בנה דף מותאם אישית יותר על ידי צמצום מיכל ברירת המחדל והג'מבוטרון.

סרגלי Navbar בפעולה

Navbar

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

סרגל ניווט עליון סטטי

תבנית סופר בסיסית עם סרגל ניווט עליון סטטי יחד עם קצת תוכן נוסף.

סרגל ניווט קבוע

תבנית סופר בסיסית עם סרגל ניווט עליון קבוע יחד עם תוכן נוסף.

רכיבים מותאמים אישית

כיסוי

תבנית של עמוד אחד לבניית דפי בית פשוטים ויפים.

קרוסלה

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

בלוג

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

לוּחַ מַחווָנִים

מבנה בסיסי ללוח מחוונים לניהול עם סרגל צד וסרגל ניווט קבועים.

דף כניסה

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

ניווט מוצדק

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

כותרת תחתונה דביקה

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

כותרת תחתונה דביקה עם סרגל ניווט

חבר כותרת תחתונה לתחתית נקודת התצוגה עם סרגל ניווט קבוע בחלק העליון.

ניסויים

Bootstrap לא מגיב

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

מחוץ לקנבס

בנה תפריט ניווט מחוץ לקנבס שניתן להחלפה לשימוש עם Bootstrap.

כלים

Bootlint

Bootlint הוא הכלי הרשמי של Bootstrap HTML linter . הוא בודק אוטומטית מספר טעויות HTML נפוצות בדפי אינטרנט המשתמשים ב-Bootstrap בצורה די "וניל". הרכיבים/יישומונים של Vanilla Bootstrap דורשים מהחלקים שלהם ב-DOM להתאים למבנים מסוימים. Bootlint בודק שלמופעים של רכיבי Bootstrap יש HTML מובנה כהלכה. שקול להוסיף את Bootlint לשרשרת הכלים לפיתוח האינטרנט שלך ב-Bootstrap כך שאף אחת מהטעויות הנפוצות לא תאט את הפיתוח של הפרויקט שלך.

קהילה

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

• קרא והירשם לבלוג הרשמי של Bootstrap .
• צ'אט עם Bootstrappers אחרים באמצעות IRC irc.freenode.netבשרת, בערוץ ##bootstrap .
• לקבלת עזרה בשימוש ב-Bootstrap, בקש ב- StackOverflow באמצעות התגtwitter-bootstrap-3 .
• מפתחים צריכים להשתמש במילת המפתח bootstrapבחבילות שמשנות או מוסיפות את הפונקציונליות של Bootstrap בעת הפצה דרך npm או מנגנוני מסירה דומים לצורך גילוי מקסימלי.
• מצא דוגמאות מעוררות השראה של אנשים בונים עם Bootstrap בתערוכת Bootstrap Expo .

אתה יכול גם לעקוב אחרי @getbootstrap בטוויטר לקבלת הרכילות העדכנית ביותר וסרטוני מוזיקה מדהימים.

השבתת היענות

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

שלבים לביטול היענות דף

1. השמט את נקודת התצוגה <meta>המוזכרת במסמכי ה-CSS
2. החלף את ה- widthOn .containerעבור כל שכבת רשת עם רוחב יחיד, למשל width: 970px !important;ודא שזה מגיע אחרי ברירת המחדל של Bootstrap CSS. אתה יכול אופציונלי להימנע !importantעם שאילתות מדיה או איזה בורר-פו.
3. אם אתה משתמש בסרגלי ניווט, הסר את כל התנהגות הקריסה וההרחבה של סרגל הניווט.
4. עבור פריסות רשת, השתמש .col-xs-*במחלקות בנוסף, או במקום, הבינוניות/גדולות. אל דאגה, רשת המכשירים הקטנה במיוחד מתקדמת לכל הרזולוציות.

עדיין תזדקק ל-Respond.js עבור IE8 (מאחר שאילתות המדיה שלנו עדיין שם וצריכות להיות מעובדות). זה משבית את היבטי "אתר נייד" של Bootstrap.

תבנית Bootstrap עם היענות מושבתת

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

ראה דוגמה שאינה מגיבה

תמיכה בדפדפן ובמכשירים

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

דפדפנים נתמכים

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

דפדפנים חלופיים המשתמשים בגרסה העדכנית ביותר של WebKit, Blink או Gecko, בין אם ישירות או באמצעות ממשק ה-API של תצוגת האינטרנט של הפלטפורמה, אינם נתמכים במפורש. עם זאת, Bootstrap אמור (ברוב המקרים) להציג ולתפקד כהלכה גם בדפדפנים אלו. מידע תמיכה ספציפי יותר מסופק להלן.

מכשירים ניידים

באופן כללי, Bootstrap תומך בגרסאות האחרונות של דפדפני ברירת המחדל של כל פלטפורמה מרכזית. שים לב שדפדפני פרוקסי (כגון Opera Mini, מצב הטורבו של Opera Mobile, UC Browser Mini, Amazon Silk) אינם נתמכים.

דפדפנים שולחניים

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

ב-Windows, אנו תומכים ב-Internet Explorer 8-11 .

עבור Firefox, בנוסף למהדורה היציבה הרגילה האחרונה, אנו תומכים גם בגרסה האחרונה Extended Support Release (ESR) של Firefox.

באופן לא רשמי, Bootstrap אמור להיראות ולהתנהג מספיק טוב ב-Chromium וב-Chrome עבור Linux, Firefox עבור Linux ו-Internet Explorer 7, כמו גם ב-Microsoft Edge, למרות שהם אינם נתמכים רשמית.

לרשימה של כמה מבאגי הדפדפן ש-Bootstrap צריך להתמודד איתם, עיין בקיר הבאגים בדפדפן שלנו .

Internet Explorer 8 ו-9

Internet Explorer 8 ו-9 נתמכים גם הם, עם זאת, אנא שים לב שחלק ממאפייני CSS3 ורכיבי HTML5 אינם נתמכים באופן מלא על ידי דפדפנים אלה. בנוסף, Internet Explorer 8 דורש שימוש ב- Respond.js כדי לאפשר תמיכה בשאילתות מדיה.

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

Internet Explorer 8 ו-Respond.js

היזהר מהאזהרות הבאות בעת שימוש ב-Respond.js בסביבות הפיתוח והייצור שלך עבור Internet Explorer 8.

Respond.js ו-CSS חוצי דומיינים

שימוש ב-Respond.js עם CSS שמתארח בדומיין (תת) אחר (לדוגמה, ב-CDN) דורש הגדרה נוספת. עיין במסמכים של Respond.js לפרטים.

Respond.js וfile://

עקב כללי אבטחת הדפדפן, Respond.js לא עובד עם דפים שנצפו באמצעות file://הפרוטוקול (כמו בעת פתיחת קובץ HTML מקומי). כדי לבדוק תכונות רספונסיביות ב-IE8, הצג את הדפים שלך באמצעות HTTP(S). עיין במסמכים של Respond.js לפרטים.

Respond.js ו@import

Respond.js לא עובד עם CSS שאליו יש הפניה דרך @import. בפרט, ידוע שחלק מתצורות דרופל משתמשות ב- @import. עיין במסמכים של Respond.js לפרטים.

Internet Explorer 8 וגודל קופסא

IE8 אינו תומך באופן מלא box-sizing: border-box;בשילוב עם min-width, max-width, min-height, או max-height. מסיבה זו, החל מגרסה 3.0.1, איננו משתמשים יותר max-widthב- .containers.

Internet Explorer 8 ו-@font-face

ל-IE8 יש כמה בעיות @font-faceבשילוב עם :before. Bootstrap משתמש בשילוב הזה עם ה-Glyphicons שלו. אם עמוד נמצא במטמון, ונטען ללא העכבר מעל החלון (כלומר לחץ על כפתור הרענון או טען משהו ב-iframe) אז העמוד יעובד לפני שהגופן נטען. ריחוף מעל הדף (גוף) יציג חלק מהסמלים וריחוף מעל הסמלים הנותרים יציג גם אותם. ראה גיליון מס' 13863 לפרטים.

מצבי תאימות IE

Bootstrap אינו נתמך במצבי התאימות הישנים של Internet Explorer. כדי להיות בטוח שאתה משתמש במצב העיבוד העדכני ביותר עבור IE, שקול לכלול את <meta>התג המתאים בדפים שלך:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

אשר את מצב המסמך על ידי פתיחת כלי ניפוי הבאגים: לחץ F12וסמן את "מצב מסמך".

תג זה כלול בכל התיעוד והדוגמאות של Bootstrap כדי להבטיח את העיבוד הטוב ביותר האפשרי בכל גרסה נתמכת של Internet Explorer.

עיין בשאלה זו של StackOverflow למידע נוסף.

Internet Explorer 10 ב-Windows 8 ו-Windows Phone 8

Internet Explorer 10 אינו מבדיל בין רוחב המכשיר לרוחב יציאת התצוגה , ולכן אינו מיישם כראוי את שאילתות המדיה ב-CSS של Bootstrap. בדרך כלל אתה פשוט מוסיף קטע מהיר של CSS כדי לתקן את זה:

@-ms-viewport       { width: device-width; }

עם זאת, זה לא עובד עבור מכשירים המריצים את Windows Phone 8 גרסאות ישנות יותר מעדכון 3 (המכונה GDR3) , מכיוון שהוא גורם למכשירים כאלה להציג בעיקר תצוגת שולחן עבודה במקום תצוגת "טלפון" צרה. כדי לטפל בזה, תצטרך לכלול את ה-CSS וה-JavaScript הבאים כדי לעקוף את הבאג .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

למידע נוסף והנחיות שימוש, קרא את Windows Phone 8 ו-Device-Width .

בתור הערה, אנו כוללים את זה בכל התיעוד והדוגמאות של Bootstrap כהדגמה.

עיגול אחוזי ספארי

מנוע העיבוד של גרסאות של Safari לפני גרסה 7.1 עבור OS X ו-Safari עבור iOS v8.0 נתקל בבעיות מסוימות עם מספר המקומות העשרוניים בשימוש .col-*-1במחלקות הרשת שלנו. אז אם היו לך 12 עמודות רשת בודדות, היית שם לב שהן היו קצרות בהשוואה לשורות אחרות של עמודות. מלבד שדרוג ספארי/iOS, יש לך כמה אפשרויות לעקיפת הבעיה:

• הוסף .pull-rightלעמודת הרשת האחרונה שלך כדי לקבל את היישור הקשיח לימין
• כוונן את האחוזים שלך באופן ידני כדי לקבל את העיגול המושלם עבור Safari (קשה יותר מהאפשרות הראשונה)

מודלים, סרגלי ניווט ומקלדות וירטואליות

הצפה וגלילה

התמיכה overflow: hiddenברכיב <body>די מוגבלת ב-iOS ואנדרואיד. לשם כך, כאשר תגללו מעבר לחלק העליון או התחתון של מודאל בכל אחד מהדפדפנים של אותם מכשירים, <body>התוכן יתחיל לגלול. ראה באג Chrome #175502 (תוקן ב-Chrome v40) ובאג WebKit #153852 .

שדות טקסט ב-iOS וגלילה

החל מ-iOS 9.3, בעוד מודאל פתוח, אם הנגיעה הראשונית של תנועת גלילה היא בגבול של טקסט <input>או <textarea>, <body>התוכן שמתחת למודאל יגולל במקום המודאל עצמו. ראה באג #153856 של WebKit .

מקלדות וירטואליות

כמו כן, שים לב שאם אתה משתמש בסרגל ניווט קבוע או משתמש בקלט בתוך מודאלי, ל-iOS יש באג עיבוד שאינו מעדכן את המיקום של רכיבים קבועים כאשר המקלדת הוירטואלית מופעלת. כמה דרכים לעקיפת הבעיה כוללות הפיכת האלמנטים שלך position: absoluteאו הפעלת טיימר בפוקוס כדי לנסות לתקן את המיקום באופן ידני. זה לא מטופל על ידי Bootstrap, אז זה תלוי בך להחליט איזה פתרון הוא הטוב ביותר עבור היישום שלך.

הנפתחות של Navbar

האלמנט .dropdown-backdropאינו בשימוש ב-iOS ב-nav בגלל המורכבות של יצירת אינדקס z. לפיכך, כדי לסגור תפריטים נפתחים בסרגלי הניווט, עליך ללחוץ ישירות על רכיב התפריט הנפתח (או כל רכיב אחר שיפעיל אירוע קליק ב-iOS ).

התקרבות הדפדפן

התקרבות עמודים מציגה בהכרח חפצי עיבוד בחלק מהרכיבים, הן ב-Bootstrap והן בשאר האינטרנט. בהתאם לבעיה, ייתכן שנוכל לתקן אותה (חפש תחילה ולאחר מכן פתח בעיה במידת הצורך). עם זאת, אנו נוטים להתעלם מאלה מכיוון שלעתים קרובות אין להם פתרון ישיר מלבד דרכים לעקיפת הבעיה.

דביק :hover/ :focusבנייד

למרות שריחוף אמיתי אינו אפשרי ברוב מסכי המגע, רוב הדפדפנים הניידים מחקים תמיכה בריחוף ועושים :hover"דביק". במילים אחרות, :hoverסגנונות מתחילים להחיל לאחר הקשה על אלמנט ומפסיקים להחיל רק לאחר שהמשתמש מקיש על אלמנט אחר. זה יכול לגרום :hoverלמצבים של Bootstrap להיות "תקועים" באופן בלתי רצוי בדפדפנים כאלה. כמה דפדפנים ניידים גם עושים :focusדביק דומה. כרגע אין פתרון פשוט לבעיות האלה מלבד הסרת סגנונות כאלה לחלוטין.

הַדפָּסָה

אפילו בחלק מהדפדפנים המודרניים, הדפסה יכולה להיות מוזרה.

בפרט, החל מ-Chrome v32 וללא קשר להגדרות השוליים, Chrome משתמש ברוחב נקודת מבט צר משמעותית מגודל הנייר הפיזי בעת פתרון שאילתות מדיה בזמן הדפסת דף אינטרנט. זה יכול לגרום לכך שהרשת הקטנה במיוחד של Bootstrap תופעל באופן בלתי צפוי בעת ההדפסה. עיין בבעיה מס' 12078 ובאג ב- Chrome מס' 273306 לפרטים מסוימים. דרכים לעקיפת הבעיה המוצעות:

• אמץ את הרשת הקטנה במיוחד וודא שהדף שלך נראה מקובל מתחתיה.
• התאם אישית את הערכים של @screen-*משתני Less כך שנייר המדפסת שלך ייחשב גדול מקטן במיוחד.
• הוסף שאילתות מדיה מותאמות אישית כדי לשנות את נקודות השבירה של גודל הרשת עבור חומרי הדפסה בלבד.

כמו כן, החל מ-Safari v8.0, .containers ברוחב קבוע עלולים לגרום ל-Safari להשתמש בגודל גופן קטן במיוחד בעת ההדפסה. ראה #14868 ובאג WebKit #138192 לפרטים נוספים. אחת הדרכים לעקיפת הבעיה היא הוספת ה-CSS הבא:

@media print {
  .container {
    width: auto;
  }
}

דפדפן מניות אנדרואיד

מחוץ לקופסה, אנדרואיד 4.1 (ואפילו כמה מהדורות חדשות יותר ככל הנראה) נשלחות עם אפליקציית הדפדפן כדפדפן האינטרנט המוגדר כברירת מחדל (בניגוד לכרום). לרוע המזל, באפליקציית הדפדפן יש הרבה באגים וחוסר עקביות עם CSS באופן כללי.

בחר תפריטים

ברכיבים, דפדפן המניות של Android <select>לא יציג את פקדי הצד אם יש border-radiusו/או borderמוחל. (ראה שאלה זו של StackOverflow לפרטים.) השתמש בקטע הקוד שלהלן כדי להסיר את ה-CSS הפוגע ולעבד אותו <select>כרכיב לא מעוצב בדפדפן המניות של Android. סוכן המשתמש המרחרח מונע הפרעה לדפדפני Chrome, Safari ומוזילה.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

רוצים לראות דוגמה? בדוק את ההדגמה הזו של JS Bin.

Validators

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

אזהרות האימות הללו אינן חשובות בפועל מכיוון שהחלק הלא-האקי של ה-CSS שלנו אכן תוקף במלואו והחלקים האקי אינם מפריעים לתפקוד התקין של החלק הלא-האקי, ומכאן מדוע אנו מתעלמים בכוונה מהאזהרות הספציפיות הללו.

כמו כן, למסמכי ה-HTML שלנו יש כמה אזהרות אימות HTML טריוויאליות וחסרות משמעות עקב הכללתנו של פתרון לעקיפת באג מסוים ב-Firefox .

תמיכת צד שלישי

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

גודל קופסא

תוכנות מסוימות של צד שלישי, כולל מפות Google ומנוע חיפוש מותאם אישית של Google, מתנגשות עם Bootstrap עקב * { box-sizing: border-box; }, כלל שגורם לכך paddingשאינו משפיע על הרוחב המחושב הסופי של אלמנט. למידע נוסף על דגם וגודל קופסא ב-CSS Tricks .

בהתאם להקשר, תוכל לעקוף לפי הצורך (אפשרות 1) או לאפס את גודל התיבה עבור אזורים שלמים (אפשרות 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

נְגִישׁוּת

Bootstrap פועל לפי תקני אינטרנט נפוצים וניתן להשתמש בו - במינימום מאמץ נוסף - ליצירת אתרים נגישים לאלה המשתמשים ב- AT .

דלג על ניווט

אם הניווט שלך מכיל קישורים רבים ומגיע לפני התוכן הראשי ב-DOM, הוסף Skip to main contentקישור לפני הניווט (להסבר פשוט, עיין במאמר זה בפרויקט A11Y בנושא דילוג על קישורי ניווט ). השימוש .sr-onlyבכיתה יסתיר חזותית את הקישור לדלג, .sr-only-focusableוהכיתה תבטיח שהקישור יהפוך לגלוי לאחר התמקדות (למשתמשי מקלדת רואים).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

כותרות מקוננות

בעת קינון כותרות ( <h1>- <h6>), כותרת המסמך הראשית צריכה להיות <h1>. הכותרות הבאות צריכות לעשות שימוש הגיוני <h2>ב-<h6> כך שקוראי מסך יוכלו לבנות תוכן עניינים עבור הדפים שלך.

למידע נוסף ב- HTML CodeSniffer ו- Penn State AccessAbility .

ניגודיות צבע

נכון לעכשיו, חלק משילובי הצבעים המוגדרים כברירת מחדל הזמינים ב-Bootstrap (כגון מחלקות הלחצנים השונות , חלק מהצבעים המדגישים את הקוד המשמשים עבור בלוקי קוד בסיסיים , מחלקת עוזר .bg-primary הרקע ההקשרית וצבע ברירת המחדל של הקישור כאשר משתמשים בהם על רקע לבן) בעלי יחס ניגודיות נמוך (מתחת ליחס המומלץ של 4.5:1 ). זה יכול לגרום לבעיות למשתמשים עם ראייה לקויה או שהם עיוורי צבעים. ייתכן שיהיה צורך לשנות את צבעי ברירת המחדל האלה כדי להגביר את הניגודיות והקריאות שלהם.

משאבים נוספים

• סימניה "HTML Codesniffer" לזיהוי בעיות נגישות
• תוסף Accessibility Developer Tools של Chrome
• מנתח ניגודיות צבע
• פרויקט A11Y
• תיעוד נגישות MDN

שאלות נפוצות בנושא רישיון

Bootstrap מופץ תחת רישיון MIT והוא מוגן בזכויות יוצרים של טוויטר 2016. מבושל לנתחים קטנים יותר, ניתן לתאר אותו בתנאים הבאים.

זה דורש ממך:

• שמור את הרישיון והודעת זכויות היוצרים הכלולים בקובצי ה-CSS וה-JavaScript של Bootstrap כאשר אתה משתמש בהם בעבודותיך

זה מאפשר לך:

• הורד את Bootstrap והשתמש בו באופן חופשי, כולו או חלקו, למטרות אישיות, פרטיות, פנימיות בחברה או מסחריות
• השתמש ב-Bootstrap בחבילות או הפצות שאתה יוצר
• שנה את קוד המקור
• הענק רישיון משנה לשינוי והפצה של Bootstrap לצדדים שלישיים שאינם כלולים ברישיון

זה אוסר עליך:

• להטיל אחריות על המחברים ובעלי הרישיונות לנזקים שכן Bootstrap מסופק ללא אחריות
• להטיל אחריות על היוצרים או בעלי זכויות היוצרים של Bootstrap
• הפיצו מחדש כל חלק של Bootstrap ללא ייחוס מתאים
• השתמש בסימנים שבבעלות טוויטר בכל דרך שעלולה להצהיר או לרמוז ש-Twitter תומכת בהפצה שלך
• השתמש בסימנים שבבעלות טוויטר בכל דרך שעלולה להצהיר או לרמוז שיצרת את תוכנת הטוויטר המדוברת

זה לא מחייב אותך:

• כלול את המקור של Bootstrap עצמו, או של כל שינוי שעשית בו, בכל הפצה מחדש שאתה יכול להרכיב הכולל אותו
• שלח שינויים שאתה מבצע ב-Bootstrap בחזרה לפרויקט Bootstrap (אם כי מעודדים משוב כזה)

רישיון Bootstrap המלא נמצא במאגר הפרויקט למידע נוסף.

תרגומים

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

• Bootstrap 中文文档 (סינית)
• Bootstrap 3 中文手冊 (סינית (מסורתית))
• Bootstrap på Dansk (דנית)
• Bootstrap en Français (צרפתית)
• Bootstrap auf Deutsch (גרמנית)
• אתחול באיטלקית (איטלקית)
• Bootstrap 한국어 (קוריאנית)
• Bootstrap em Português do Brasil (פורטוגזית ברזילאית)
• Bootstrap по-русски (רוסית)
• Bootstrap en Español (ספרדית)
• Türkçe Bootstrap (טורקית)
• Bootstrap українською (אוקראינית)
• Bootstrap bằng tiếng Việt (וייטנאמית)

אנחנו לא עוזרים לארגן או לארח תרגומים, אנחנו רק מקשרים אליהם.

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