סקירה כללית

קבל את הרשימה הנמוכה על חלקי המפתח של התשתית של Bootstrap, כולל הגישה שלנו לפיתוח אינטרנט טוב יותר, מהיר יותר וחזק יותר.

HTML5 doctype

Bootstrap עושה שימוש ברכיבי HTML מסוימים ובמאפייני CSS הדורשים שימוש ב-HTML5 doctype. כלול אותו בתחילת כל הפרויקטים שלך.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

קודם כל נייד

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

אתה יכול להשבית את יכולות התקרבות במכשירים ניידים על ידי הוספה user-scalable=noלמטא תג התצוגה. זה משבית את התקרבות, כלומר משתמשים יכולים רק לגלול, וכתוצאה מכך האתר שלך מרגיש קצת יותר כמו אפליקציה מקורית. בסך הכל, אנחנו לא ממליצים על זה בכל אתר, אז היזהר!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

  • הגדר background-color: #fff;עלbody
  • השתמש בתכונות @font-family-base, @font-size-base, ו @line-height-baseכבסיס הטיפוגרפי שלנו
  • הגדר את צבע הקישור הגלובלי באמצעות @link-colorוהחל קו תחתון של קישור רק על:hover

ניתן למצוא סגנונות אלה בתוך scaffolding.less.

Normalize.css

לעיבוד משופר בין דפדפנים, אנו משתמשים ב- Normalize.css , פרויקט של ניקולס גלאגר וג'ונתן ניל .

מיכלים

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

השתמש .containerעבור מיכל מגיב ברוחב קבוע.

<div class="container">
  ...
</div>

השתמש .container-fluidעבור מיכל ברוחב מלא, המשתרע על כל רוחב יציאת התצוגה שלך.

<div class="container-fluid">
  ...
</div>

מערכת רשת

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

מבוא

מערכות רשת משמשות ליצירת פריסות עמודים באמצעות סדרה של שורות ועמודות המאכסנות את התוכן שלך. כך פועלת מערכת ה-Bootstrap grid:

  • יש למקם שורות בטווח .container(ברוחב קבוע) או .container-fluid(ברוחב מלא) ליישור וריפוד נאותים.
  • השתמש בשורות כדי ליצור קבוצות אופקיות של עמודות.
  • יש למקם תוכן בתוך עמודות, ורק עמודות עשויות להיות ילדים מיידיים של שורות.
  • מחלקות רשת מוגדרות מראש כמו .rowוזמינות .col-xs-4לביצוע מהיר של פריסות רשת. ניתן להשתמש בפחות מיקסינים גם לפריסות סמנטיות יותר.
  • עמודות יוצרות מרזבים (פערים בין תוכן העמודות) באמצעות padding. ריפוד זה מקוזז בשורות עבור העמודה הראשונה והאחרונה באמצעות שוליים שליליים ב- .rows.
  • השוליים השליליים הם הסיבה לכך שהדוגמאות שלהלן הן חריגות. זה כך שהתוכן בתוך עמודות הרשת יעמוד בשורה של תוכן שאינו רשת.
  • עמודות רשת נוצרות על-ידי ציון מספר שתים עשרה העמודות הזמינות שברצונך להרחיב. לדוגמה, שלוש עמודות שוות ישתמשו בשלוש .col-xs-4.
  • אם יותר מ-12 עמודות ממוקמות בשורה בודדת, כל קבוצה של עמודות נוספות תתגלגל, כיחידה אחת, על שורה חדשה.
  • מחלקות רשת חלות על מכשירים עם רוחב מסך גדול או שווה לגדלים של נקודות הפריצה, ודוברות על מחלקות רשת המיועדות למכשירים קטנים יותר. לכן, למשל החלת כל .col-md-*מחלקה על אלמנט לא תשפיע רק על הסגנון שלו במכשירים בינוניים אלא גם על מכשירים גדולים אם .col-lg-*מחלקה לא קיימת.

עיין בדוגמאות ליישום עקרונות אלה על הקוד שלך.

שאילתות מדיה

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

מדי פעם אנו מרחיבים את שאילתות המדיה הללו כדי לכלול א max-widthכדי להגביל את ה-CSS לקבוצה מצומצמת יותר של מכשירים.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

אפשרויות רשת

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

מכשירים קטנים במיוחד טלפונים (<768px) מכשירים קטנים טאבלטים (≥768px) מכשירים בינוניים מחשבים שולחניים (≥992px) מכשירים גדולים שולחניים (≥1200px)
התנהגות רשת אופקי בכל עת מכווץ כדי להתחיל, אופקית מעל נקודות השבירה
רוחב מיכל אין (אוטומטי) 750 פיקסלים 970 פיקסלים 1170 פיקסלים
קידומת כיתה .col-xs- .col-sm- .col-md- .col-lg-
# עמודות 12
רוחב עמודה אוטומטי ~62 פיקסלים ~81 פיקסלים ~97 פיקסלים
רוחב מרזב 30 פיקסלים (15 פיקסלים בכל צד של עמודה)
ניתן לקן כן
קיזוזים כן
סדר עמודות כן

דוגמה: מוערמים לאופקיים

באמצעות קבוצה אחת של .col-md-*מחלקות רשת, אתה יכול ליצור מערכת רשת בסיסית שמתחילה בערימה במכשירים ניידים ובמכשירי טאבלט (הטווח הקטן במיוחד עד הקטן במיוחד) לפני שהופכת לאופקי במכשירים שולחניים (בינוניים). מקם עמודות רשת בכל .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

דוגמה: מיכל נוזלים

הפוך כל פריסת רשת ברוחב קבוע לפריסה ברוחב מלא על ידי שינוי החיצוני שלך .containerל- .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

דוגמה: נייד ושולחן עבודה

לא רוצה שהעמודות שלך פשוט ייערמו במכשירים קטנים יותר? השתמש במחלקות הרשת של מכשירים קטנים ובינוניים במיוחד על ידי הוספה .col-xs-* .col-md-*לעמודות שלך. ראה את הדוגמה למטה כדי לקבל מושג טוב יותר על איך הכל עובד.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

דוגמה: נייד, טאבלט, שולחן עבודה

התבסס על הדוגמה הקודמת על ידי יצירת פריסות דינמיות וחזקות עוד יותר עם .col-sm-*כיתות טאבלטים.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

דוגמה: גלישת עמודות

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

.col-xs-9
.col-xs-4
מאז 9 + 4 = 13 > 12, div זה ברוחב 4 עמודות נכרך על שורה חדשה כיחידה אחת רציפה.
.col-xs-6
העמודות הבאות ממשיכות לאורך הקו החדש. 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

איפוסי עמודות רספונסיביות

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

.col-xs-6 .col-sm-3
שנה את גודל יציאת התצוגה שלך או בדוק אותו בטלפון שלך לדוגמא.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

קיזוז עמודות

הזז עמודות ימינה באמצעות .col-md-offset-*מחלקות. מחלקות אלו מגדילות את השוליים השמאליים של עמודה לפי *עמודות. לדוגמה, .col-md-offset-4עובר .col-md-4על פני ארבע עמודות.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

אתה יכול גם לעקוף קיזוז משכבות רשת נמוכות יותר עם .col-*-offset-0מחלקות.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

עמודות קינון

כדי לקנן את התוכן שלך עם רשת ברירת המחדל, הוסף קבוצה חדשה .rowוקבוצה של .col-sm-*עמודות בתוך עמודה קיימת .col-sm-*. שורות מקוננות צריכות לכלול קבוצה של עמודות שמצטברות ל-12 או פחות (אין צורך להשתמש בכל 12 העמודות הזמינות).

רמה 1: .col-sm-9
רמה 2: .col-xs-8 .col-sm-6
רמה 2: .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

סדר עמודות

שנה בקלות את הסדר של עמודות הרשת המובנות שלנו עם מחלקות ושינויים .col-md-push-*..col-md-pull-*

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

פחות מיקסים ומשתנים

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

משתנים

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

מיקסינס

Mixins משמשים בשילוב עם משתני הרשת כדי ליצור CSS סמנטי עבור עמודות רשת בודדות.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

שימוש לדוגמה

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

טיפוגרפיה

כותרות

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

h1. כותרת אתחול

 חצי מודגש 36 פיקסלים

h2. כותרת אתחול

 חצי מודגש 30 פיקסלים

h3. כותרת אתחול

 חצי מודגש 24 פיקסלים

h4. כותרת אתחול

 חצי מודגש 18 פיקסלים
h5. כותרת אתחול
 חצי מודגש 14 פיקסלים
h6. כותרת אתחול
 חצי מודגש 12 פיקסלים 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

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

h1. כותרת Bootstrap טקסט משני

h2. כותרת Bootstrap טקסט משני

h3. כותרת Bootstrap טקסט משני

h4. כותרת Bootstrap טקסט משני
h5. כותרת Bootstrap טקסט משני
h6. כותרת Bootstrap טקסט משני
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

העתק גוף

ברירת המחדל העולמית של Bootstrap font-sizeהיא 14px , עם line-height1.428 . זה מוחל על <body>כל הפסקאות. בנוסף, <p>(פסקאות) מקבלים שוליים תחתונים של מחצית מגובה השורה המחושב שלהם (10 פיקסלים כברירת מחדל).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

עותק גוף עופרת

הבלוט פסקה על ידי הוספת .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

נבנה עם פחות

הסולם הטיפוגרפי מבוסס על שני משתני Less ב- variables.less : @font-size-baseו @line-height-base. הראשון הוא גודל הגופן הבסיסי המשמש לכל אורכו והשני הוא גובה קו הבסיס. אנו משתמשים במשתנים אלו ובמתמטיקה פשוטה כדי ליצור את השוליים, הריפודים וגבהי הקו של כל הסוג שלנו ועוד. התאם אישית אותם ו-Bootstrap יתאימו.

רכיבי טקסט מוטבעים

טקסט מסומן

להדגשת רצף של טקסט בשל הרלוונטיות שלו בהקשר אחר, השתמש <mark>בתג.

אתה יכול להשתמש בתג סימון כדישִׂיאטֶקסט.

You can use the mark tag to <mark>highlight</mark> text.

טקסט נמחק

לציון בלוקים של טקסט שנמחקו השתמש <del>בתג.

שורת טקסט זו אמורה להתייחס כטקסט שנמחק.

<del>This line of text is meant to be treated as deleted text.</del>

טקסט חוצה

לציון בלוקים של טקסט שאינם רלוונטיים עוד השתמש <s>בתג.

שורת טקסט זו אמורה להתייחס כלא מדויקת עוד.

<s>This line of text is meant to be treated as no longer accurate.</s>

הוכנס טקסט

לציון תוספות למסמך השתמש <ins>בתג.

שורת טקסט זו אמורה להתייחס כתוספת למסמך.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

טקסט עם קו תחתון

כדי להדגיש טקסט השתמש <u>בתג.

שורת טקסט זו תוצג כמסומן בקו תחתון

<u>This line of text will render as underlined</u>

השתמש בתגיות ברירת המחדל של HTML עם סגנונות קלים.

טקסט קטן

לביטול הדגשה מוטבע או בלוקים של טקסט, השתמש <small>בתג כדי להגדיר טקסט ב-85% מגודל ההורה. רכיבי כותרת מקבלים משלהם עבור רכיבים font-sizeמקוננים .<small>

אתה יכול לחלופין להשתמש ברכיב מוטבע עם .smallבמקום כל <small>.

שורת טקסט זו אמורה להתייחס כאותיות קטנות.

<small>This line of text is meant to be treated as fine print.</small>

נוֹעָז

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

קטע הטקסט הבא מוצג כטקסט מודגש .

<strong>rendered as bold text</strong>

אוֹתִיוֹת מוּטוֹת

להדגשת קטע טקסט עם נטוי.

קטע הטקסט הבא מוצג כטקסט נטוי .

<em>rendered as italicized text</em>

אלמנטים חלופיים

אל תהסס להשתמש <b>וב- <i>HTML5. <b>נועד להדגיש מילים או ביטויים מבלי לשדר חשיבות נוספת בעוד <i>הוא מיועד בעיקר לקול, למונחים טכניים וכו'.

שיעורי יישור

יישר מחדש בקלות טקסט לרכיבים עם מחלקות יישור טקסט.

טקסט מיושר לשמאל.

טקסט מיושר למרכז.

טקסט מיושר לימין.

טקסט מוצדק.

אין גלישת טקסט.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

שיעורי טרנספורמציה

הפוך טקסט ברכיבים עם מחלקות רישיות טקסט.

טקסט באותיות קטנות.

טקסט באותיות גדולות.

טקסט באותיות רישיות.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

קיצורי מילים

הטמעה מסוגננת של <abbr>אלמנט HTML עבור קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת ברחף. לקיצורים עם titleתכונה יש גבול תחתון מנוקד בהיר וסמן עזרה בעת ריחוף, המספקים הקשר נוסף בעת ריחוף ולמשתמשים בטכנולוגיות מסייעות.

קיצור בסיסי

קיצור של המילה תכונה הוא attr .

<abbr title="attribute">attr</abbr>

ראשוניות

הוסף .initialismלקיצור עבור גודל גופן מעט קטן יותר.

HTML הוא הדבר הטוב ביותר מאז לחם פרוס.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

כתובות

הצג מידע ליצירת קשר עבור האב הקדמון הקרוב או כל גוף העבודה. שמור את העיצוב על ידי סיום כל השורות ב- <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
שם מלא
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ציטוטים בלוק

לציטוט בלוקים של תוכן ממקור אחר בתוך המסמך שלך.

ציטוט ברירת מחדל

עטוף <blockquote>סביב כל HTML בתור הציטוט. עבור הצעות מחיר ישרות, אנו ממליצים על <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

אפשרויות Blockquote

שינויים בסגנון ותוכן עבור וריאציות פשוטות על תקן <blockquote>.

מתן שם למקור

הוסף א <footer>לזיהוי המקור. עטפו את שם עבודת המקור ב- <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

מישהו מפורסם בכותרת המקור 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

תצוגות חלופיות

הוסף .blockquote-reverseלציטוט בלוק עם תוכן מיושר לימין.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

מישהו מפורסם בכותרת המקור 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

רשימות

לא מסודר

רשימה של פריטים שבהם הסדר אינו משנה במפורש.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing עלית
  • הוראה שלם במאסה
  • Facilisis ב-Pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

הוזמן

רשימה של פריטים שבהם יש חשיבות מפורשת לסדר.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing עלית
  3. הוראה שלם במאסה
  4. Facilisis ב-Pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

לא מעוצב

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing עלית
  • הוראה שלם במאסה
  • Facilisis ב-Pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

בשורה

הנח את כל פריטי הרשימה בשורה אחת עם display: inline-block;ריפוד קל.

  • לורם איפסום
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

תיאור

רשימה של מונחים עם התיאורים המשויכים אליהם.

רשימות תיאור
רשימת תיאורים מושלמת להגדרת מונחים.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

תיאור אופקי

צור מונחים ותיאורים <dl>בשורה זה לצד זה. מתחיל בערימה כמו ברירת מחדל <dl>, אבל כאשר סרגל הניווט מתרחב, אז עשה זאת.

רשימות תיאור
רשימת תיאורים מושלמת להגדרת מונחים.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

קטיעה אוטומטית

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

קוד

בשורה

עטוף קטעי קוד מוטבעים עם <code>.

לדוגמה, <section>צריך להיות עטוף בתור מוטבע. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

קלט משתמש

השתמש <kbd>בלחצן כדי לציין קלט המוזן בדרך כלל באמצעות המקלדת.

כדי להחליף ספריות, הקלד cdואחריו את שם הספרייה.
כדי לערוך הגדרות, לחץ על ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

בלוק בסיסי

השתמש <pre>עבור שורות קוד מרובות. הקפד לברוח מכל סוגריים זווית בקוד לצורך עיבוד תקין.

<p>טקסט לדוגמה כאן...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ניתן להוסיף את .pre-scrollableהמחלקה באופן אופציונלי, שתגדיר גובה מקסימלי של 350 פיקסלים ותספק פס גלילה בציר Y.

משתנים

לציון משתנים השתמש <var>בתג.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

פלט לדוגמה

לציון פלט לדוגמה של בלוקים מתוכנית השתמש <samp>בתג.

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

<samp>This text is meant to be treated as sample output from a computer program.</samp>

טבלאות

דוגמה בסיסית

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

כיתוב טבלה אופציונלי.
# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table">
  ...
</table>

שורות פסים

השתמש .table-stripedכדי להוסיף פסי זברה לכל שורת טבלה בתוך ה- <tbody>.

תאימות בין דפדפנים

טבלאות פסים מעוצבות באמצעות :nth-childבורר ה-CSS, שאינו זמין ב-Internet Explorer 8.

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table table-striped">
  ...
</table>

שולחן עם גבול

הוסף .table-borderedעבור גבולות בכל צידי הטבלה והתאים.

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table table-bordered">
  ...
</table>

רחף שורות

הוסף .table-hoverכדי לאפשר מצב ריחוף בשורות טבלה בתוך <tbody>.

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table table-hover">
  ...
</table>

שולחן מרוכז

הוסף .table-condensedכדי להפוך את השולחנות לקומפקטי יותר על ידי חיתוך ריפוד התא לשניים.

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר 
<table class="table table-condensed">
  ...
</table>

שיעורים קונטקסטואליים

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

מעמד תיאור
.active מחיל את צבע הריחוף על שורה או תא מסוימים
.success מעיד על פעולה מוצלחת או חיובית
.info מציין שינוי או פעולה אינפורמטיבית ניטראלית
.warning מציין אזהרה שעשויה להזדקק להתייחסות
.danger מציין פעולה מסוכנת או שעלולה להיות שלילית
# כותרת עמודה כותרת עמודה כותרת עמודה
1 תוכן עמודה תוכן עמודה תוכן עמודה
2 תוכן עמודה תוכן עמודה תוכן עמודה
3 תוכן עמודה תוכן עמודה תוכן עמודה
4 תוכן עמודה תוכן עמודה תוכן עמודה
5 תוכן עמודה תוכן עמודה תוכן עמודה
6 תוכן עמודה תוכן עמודה תוכן עמודה
7 תוכן עמודה תוכן עמודה תוכן עמודה
8 תוכן עמודה תוכן עמודה תוכן עמודה
9 תוכן עמודה תוכן עמודה תוכן עמודה 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

העברת משמעות לטכנולוגיות מסייעות

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

טבלאות רספונסיביות

צור טבלאות רספונסיביות על ידי עטיפה של כל טבלאות .tableכדי .table-responsiveלגרום להן לגלול אופקית במכשירים קטנים (מתחת ל-768 פיקסלים). בעת צפייה בכל דבר שגדול מ-768 פיקסלים רוחב, לא תראה שום הבדל בטבלאות אלו.

גזירה/קטיעה אנכית

טבלאות רספונסיביות עושות שימוש ב- overflow-y: hidden, אשר חותך כל תוכן שחורג מהקצוות התחתונים או העליונים של הטבלה. בפרט, זה יכול לחתוך תפריטים נפתחים ווידג'טים אחרים של צד שלישי.

Firefox ו-fieldsets

ל-Firefox יש סגנון מביך של ערכת שדה widthשמפריע לטבלה המגיבה. לא ניתן לעקוף זאת ללא פריצה ספציפית ל-Firefox שאיננו מספקים ב-Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

למידע נוסף, קרא תשובת Stack Overflow זו .

# כותרת טבלה כותרת טבלה כותרת טבלה כותרת טבלה כותרת טבלה כותרת טבלה
1 תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה
2 תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה
3 תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה
# כותרת טבלה כותרת טבלה כותרת טבלה כותרת טבלה כותרת טבלה כותרת טבלה
1 תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה
2 תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה
3 תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה תא טבלה 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

טפסים

דוגמה בסיסית

פקדי טפסים בודדים מקבלים באופן אוטומטי קצת עיצוב גלובלי. כל הטקסטים <input>, <textarea>, <select>והרכיבים עם .form-controlמוגדרים width: 100%;כברירת מחדל. עטפו תוויות ופקדים .form-groupלרווח אופטימלי.

דוגמה לטקסט עזרה ברמת הבלוק כאן.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

אל תערבב קבוצות טופס עם קבוצות קלט

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

טופס מוטבע

הוסף .form-inlineלטופס שלך (שאינו חייב להיות <form>) עבור פקדים מיושרים לשמאל ובלוק מוטבע. זה חל רק על טפסים בתוך יציאות תצוגה ברוחב 768 פיקסלים לפחות.

עשוי לדרוש רוחבים מותאמים אישית

כניסות ובחירות width: 100%;הוחלו כברירת מחדל ב-Bootstrap. בתוך טפסים מוטבעים, אנו מאפסים את זה width: auto;כך שמספר פקדים יכולים להיות על אותו קו. בהתאם לפריסה שלך, ייתכן שיידרשו רוחבים מותאמים אישית נוספים.

הוסף תמיד תוויות

קוראי מסך יתקשו עם הטפסים שלך אם לא תכלול תווית לכל קלט. עבור טפסים מוטבעים אלה, תוכל להסתיר את התוויות באמצעות .sr-onlyהמחלקה. ישנן שיטות חלופיות נוספות לספק תווית לטכנולוגיות מסייעות, כגון התכונה aria-label, aria-labelledbyאו . titleאם אף אחד מאלה אינו קיים, קוראי מסך עשויים להשתמש placeholderבתכונה, אם קיימת, אך שים לב שלא placeholderמומלץ להשתמש בה כתחליף לשיטות תיוג אחרות.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

צורה אופקית

השתמש במחלקות הרשת המוגדרות מראש של Bootstrap כדי ליישר תוויות וקבוצות של פקדי טופס בפריסה אופקית על ידי הוספה .form-horizontalלטופס (שאינו חייב להיות <form>). פעולה זו תשנה .form-groupאת ההתנהגות כשורות רשת, כך שאין צורך ב- .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

פקדים נתמכים

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

תשומות

בקרת הטפסים הנפוצה ביותר, שדות קלט מבוססי טקסט. כולל תמיכה בכל סוגי HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ו color.

נדרשת הצהרת סוג

כניסות יהיו בסגנון מלא רק אם typeהן מוצהרות כראוי.

<input type="text" class="form-control" placeholder="Text input">

קבוצות קלט

כדי להוסיף טקסט או לחצנים משולבים לפני ו/או אחרי כל מבוסס טקסט <input>, בדוק את רכיב קבוצת הקלט .

Textarea

בקרת טופס התומך במספר שורות טקסט. שנה rowsתכונה לפי הצורך.

<textarea class="form-control" rows="3"></textarea>

תיבות סימון ומכשירי רדיו

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

תיבות סימון מושבתות ומכשירי רדיו נתמכים, אך כדי לספק סמן "לא מותר" על ריחוף של ההורה <label>, תצטרך להוסיף את .disabledהמחלקה להורה .radio, .radio-inline, .checkbox, או .checkbox-inline.

ברירת מחדל (ערימה)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

תיבות סימון מוטבעות ומכשירי רדיו

השתמש במחלקות .checkbox-inlineאו .radio-inlineבסדרה של תיבות סימון או מכשירי רדיו עבור פקדים המופיעים באותה שורה.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

תיבות סימון ומכשירי רדיו ללא טקסט תווית

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

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

בוחר

שים לב שלתפריטי בחירה מקומיים רבים - כלומר ב-Safari וב-Chrome - יש פינות מעוגלות שלא ניתן לשנות באמצעות border-radiusמאפיינים.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

עבור <select>פקדים עם multipleהתכונה, אפשרויות מרובות מוצגות כברירת מחדל.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

בקרה סטטית

כאשר אתה צריך למקם טקסט רגיל ליד תווית טופס בתוך טופס, השתמש .form-control-staticבכיתה על <p>.

[email protected]

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

[email protected]

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

מצב מיקוד

אנו מסירים את outlineסגנונות ברירת המחדל בפקדי טופס מסוימים ומחילים box-shadowבמקומו a עבור :focus.

:focusמצב הדגמה

הקלט לדוגמה לעיל משתמש בסגנונות מותאמים אישית בתיעוד שלנו כדי להדגים את :focusהמצב ב- .form-control.

מצב נכה

הוסף את disabledהתכונה הבוליאנית בקלט כדי למנוע אינטראקציות של משתמשים. כניסות מושבתות נראות קלות יותר ומוסיפות not-allowedסמן.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ערכות שדות מושבתות

הוסף את disabledהתכונה ל-a <fieldset>כדי להשבית את כל הפקדים <fieldset>בבת אחת.

אזהרה לגבי פונקציונליות הקישור של<a>

כברירת מחדל, דפדפנים יתייחסו לכל פקדי הטפסים המקוריים ( <input>, <select>והאלמנטים <button>) בתוך a <fieldset disabled>כאל מושבתים, וימנעו אינטראקציות מקלדת ועכבר עליהם. עם זאת, אם הטופס שלך כולל גם <a ... class="btn btn-*">אלמנטים, אלה יקבלו רק סגנון של pointer-events: none. כפי שצוין בסעיף על מצב מושבת עבור לחצנים (ובפרט בתת-סעיף לרכיבי עוגן), מאפיין CSS זה עדיין אינו סטנדרטי ואינו נתמך במלואו ב-Opera 18 ומטה, או ב-Internet Explorer 11, וזכה לא למנוע ממשתמשי מקלדת להיות מסוגלים להתמקד או להפעיל את הקישורים האלה. אז ליתר ביטחון, השתמש ב-JavaScript מותאם אישית כדי להשבית קישורים כאלה.

תאימות בין דפדפנים

בעוד Bootstrap יחיל סגנונות אלה בכל הדפדפנים, Internet Explorer 11 ומטה אינם תומכים באופן מלא disabledבתכונה ב- <fieldset>. השתמש ב-JavaScript מותאם אישית כדי להשבית את ערכת השדות בדפדפנים אלה.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

מצב לקריאה בלבד

הוסף את readonlyהתכונה הבוליאנית בקלט כדי למנוע שינוי בערך הקלט. כניסות לקריאה בלבד נראות קלות יותר (בדיוק כמו כניסות מושבתות), אך שומרות על הסמן הסטנדרטי.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

טקסט עזרה

טקסט עזרה ברמת החסימה עבור פקדי טופס.

שיוך טקסט עזרה עם פקדי טופס

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

בלוק של טקסט עזרה שמתפרץ לשורה חדשה ועשוי לעבור מעבר לשורה אחת. 
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

מצבי אימות

Bootstrap כולל סגנונות אימות למצבי שגיאה, אזהרה והצלחה בפקדי טופס. כדי להשתמש, הוסף .has-warning, .has-error, או .has-successלרכיב האב. כל .control-label, .form-control, .help-blockובתוך רכיב זה יקבלו את סגנונות האימות.

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

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

ודא שגם אינדיקציה חלופית של מצב מסופקת. לדוגמה, אתה יכול לכלול רמז לגבי מצב <label>בטקסט של פקד הטופס עצמו (כפי שקורה בדוגמה בקוד הבאה), לכלול Glyphicon (עם טקסט חלופי מתאים באמצעות .sr-onlyהמחלקה - ראה דוגמאות Glyphicon ), או על ידי מתן בלוק טקסט עזרה נוסף . במיוחד עבור טכנולוגיות מסייעות, ניתן להקצות aria-invalid="true"תכונה לפקדי טפסים לא חוקיים.

בלוק של טקסט עזרה שמתפרץ לשורה חדשה ועשוי לעבור מעבר לשורה אחת. 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

עם אייקונים אופציונליים

אתה יכול גם להוסיף סמלי משוב אופציונליים עם התוספת של .has-feedbackוהסמל הימני.

סמלי משוב פועלים רק עם <input class="form-control">אלמנטים טקסטואליים.

סמלים, תוויות וקבוצות קלט

מיקום ידני של סמלי משוב נדרש לכניסות ללא תווית ולקבוצות קלט עם תוספת בצד ימין. מומלץ מאוד לספק תוויות עבור כל הקלט מטעמי נגישות. אם ברצונך למנוע הצגת תוויות, הסתר אותן עם .sr-onlyהכיתה. אם עליך להסתדר ללא תוויות, שנה את topהערך של סמל המשוב. עבור קבוצות קלט, התאם את rightהערך לערך פיקסל מתאים בהתאם לרוחב התוסף שלך.

העברת משמעות הסמל לטכנולוגיות מסייעות

כדי להבטיח שטכנולוגיות מסייעות - כגון קוראי מסך - מעבירות בצורה נכונה את המשמעות של אייקון, יש לכלול טקסט מוסתר נוסף עם .sr-onlyהמחלקה ולשייך אותו במפורש לפקד הטפסים שהוא מתייחס אליו באמצעות aria-describedby. לחלופין, ודא שהמשמעות (לדוגמה, העובדה שיש אזהרה עבור שדה הזנת טקסט מסוים) מועברת בצורה אחרת, כגון שינוי הטקסט של הטקסט <label>המשויך בפועל לפקד הטופס.

למרות שהדוגמאות הבאות כבר מזכירות את מצב האימות של פקדי הטופס שלהם <label>בטקסט עצמו, הטכניקה שלעיל (באמצעות .sr-onlyטקסט ו- aria-describedby) נכללה למטרות המחשה.

(הַצלָחָה)
(אַזהָרָה)
(שְׁגִיאָה)
@
(הַצלָחָה) 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

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

(הַצלָחָה)
@
(הַצלָחָה) 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(הַצלָחָה)

@
(הַצלָחָה) 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

.sr-onlyאייקונים אופציונליים עם תוויות נסתרות

אם אתה משתמש .sr-onlyבמחלקה כדי להסתיר פקד טופס <label>(במקום להשתמש באפשרויות תיוג אחרות, כגון aria-labelהתכונה), Bootstrap תתאים אוטומטית את מיקום הסמל לאחר הוספתו.

(הַצלָחָה)
@
(הַצלָחָה) 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

שליטה בגודל

הגדר גבהים באמצעות מחלקות כמו .input-lg, והגדר רוחבים באמצעות מחלקות עמודות רשת כמו .col-lg-*.

גודל גובה

צור פקדי צורה גבוהים יותר או קצרים יותר התואמים לגדלי לחצנים.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

גדלי קבוצות אופקיים

גודל תוויות ופקדי טופס במהירות .form-horizontalעל ידי הוספת .form-group-lgאו .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

גודל עמודות

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

כפתורים

תגי כפתור

השתמש במחלקות הלחצנים על <a>, <button>, או <input>אלמנט.

קישור 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

שימוש ספציפי להקשר

בעוד שניתן להשתמש במחלקות לחצנים ברכיבים <a>וברכיבים <button>, רק <button>אלמנטים נתמכים בתוך רכיבי הניווט והנווט שלנו.

קישורים הפועלים ככפתורים

אם <a>האלמנטים משמשים כלחצנים - מפעילים פונקציונליות בתוך הדף, במקום ניווט למסמך או קטע אחר בעמוד הנוכחי - יש לתת להם גם התאמה מתאימה role="button".

עיבוד חוצה דפדפנים

כשיטה מומלצת, אנו ממליצים בחום להשתמש <button>באלמנט בכל הזדמנות אפשרית כדי להבטיח עיבוד תואם בין דפדפנים.

בין היתר, יש באג בפיירפוקס <30 שמונע מאיתנו להגדיר את line-heightהכפתורים המבוססים על או <input>, מה שגורם להם לא להתאים בדיוק לגובה של כפתורים אחרים בפיירפוקס.

אפשרויות

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

העברת משמעות לטכנולוגיות מסייעות

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

מידות

בא לכם על כפתורים גדולים או קטנים יותר? הוסף .btn-lg, .btn-sm, או .btn-xsלגדלים נוספים.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

מצב פעיל

הלחצנים יופיעו לחוץ (עם רקע כהה יותר, גבול כהה יותר וצל משובץ) כאשר הם פעילים. עבור <button>אלמנטים, זה נעשה באמצעות :active. עבור <a>אלמנטים, זה נעשה עם .active. עם זאת, אתה יכול להשתמש .activeב- <button>s (ולכלול את aria-pressed="true"התכונה) אם תצטרך לשכפל את המצב הפעיל באופן פרוגרמטי.

אלמנט כפתור

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

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

אלמנט עוגן

הוסף את .activeהכיתה <a>לכפתורים.

קישור ראשי קישור 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

מצב נכה

גרמו ללחצנים להיראות בלתי ניתנים ללחיצה על ידי דהייתם בחזרה עם opacity.

אלמנט כפתור

הוסף את disabledהתכונה <button>ללחצנים.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

תאימות בין דפדפנים

אם תוסיף את disabledהתכונה ל- <button>, Internet Explorer 9 ומטה יעשה טקסט אפור עם צל טקסט מגעיל שלא נוכל לתקן.

אלמנט עוגן

הוסף את .disabledהכיתה <a>לכפתורים.

קישור ראשי קישור 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

אנו משתמשים .disabledכאן כמחלקת עזר, בדומה .activeלמחלקה הנפוצה, כך שאין צורך בקידומת.

אזהרת פונקציונליות קישור

מחלקה זו משתמשת pointer-events: noneכדי לנסות להשבית את פונקציונליות הקישור של <a>s, אך מאפיין ה-CSS הזה עדיין אינו סטנדרטי ואינו נתמך במלואו ב-Opera 18 ומטה, או ב-Internet Explorer 11. בנוסף, אפילו בדפדפנים שכן תומכים ב- pointer-events: none, מקלדת הניווט לא מושפע, כלומר משתמשי מקלדת רואים ומשתמשים בטכנולוגיות מסייעות עדיין יוכלו להפעיל את הקישורים הללו. אז ליתר ביטחון, השתמש ב-JavaScript מותאם אישית כדי להשבית קישורים כאלה.

תמונות

תמונות רספונסיביות

ניתן להפוך תמונות ב-Bootstrap 3 לידידותיות באמצעות הוספת .img-responsiveהכיתה. זה חל על max-width: 100%;, height: auto;ועל display: block;התמונה כך שהיא תתאים יפה לאלמנט האב.

כדי למרכז תמונות המשתמשות .img-responsiveבכיתה, השתמש .center-blockבמקום .text-center. עיין בסעיף שיעורי עוזר לפרטים נוספים על .center-blockהשימוש.

תמונות SVG ו-IE 8-10

ב-Internet Explorer 8-10, תמונות SVG עם .img-responsiveהן בגודל לא פרופורציונלי. כדי לתקן זאת, הוסף width: 100% \9;במידת הצורך. Bootstrap לא מיישם זאת באופן אוטומטי מכיוון שהוא גורם לסיבוכים לפורמטים אחרים של תמונה.

<img src="..." class="img-responsive" alt="Responsive image">

צורות תמונה

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

תאימות בין דפדפנים

זכור ש-Internet Explorer 8 חסר תמיכה בפינות מעוגלות.

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

שיעורי עוזרים

צבעים קונטקסטואליים

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

התמודדות עם ספציפיות

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

העברת משמעות לטכנולוגיות מסייעות

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

רקע קונטקסטואלי

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

התמודדות עם ספציפיות

לפעמים לא ניתן להחיל שיעורי רקע קונטקסטואליים בגלל הספציפיות של בורר אחר. במקרים מסוימים, פתרון מספיק הוא לעטוף את תוכן האלמנט שלך ב-a <div>with the class.

העברת משמעות לטכנולוגיות מסייעות

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

סמל סגירה

השתמש בסמל הסגירה הגנרי לביטול תוכן כמו שיטות והתראות.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

קרטס

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

<span class="caret"></span>

צפים מהירים

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

לא לשימוש ב-navbars

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

מרכז חסימות תוכן

הגדר רכיב ל display: block-ומרכז באמצעות margin. זמין כמיקסין וכקלאס.

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

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

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

הצגה והסתרה של תוכן

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

.hideזמין, אך הוא לא תמיד משפיע על קוראי מסך והוא הוצא משימוש החל מגרסה 3.0.1. השתמש .hiddenאו .sr-onlyבמקום.

יתר על כן, .invisibleניתן להשתמש כדי לשנות רק את הנראות של אלמנט, כלומר displayהוא לא שונה והאלמנט עדיין יכול להשפיע על זרימת המסמך.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

תוכן קורא מסך וניווט במקלדת

הסתר רכיב לכל המכשירים מלבד קוראי מסך עם .sr-only. שלב .sr-onlyעם .sr-only-focusableכדי להציג את האלמנט שוב ​​כשהוא ממוקד (למשל על ידי משתמש המקלדת בלבד). הכרחי לביצוע שיטות עבודה מומלצות לנגישות . יכול לשמש גם כמיקסינים.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

החלפת תמונה

השתמש .text-hideבמחלקה או במיקסין כדי לעזור להחליף את תוכן הטקסט של אלמנט בתמונת רקע.

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

כלי עזר רספונסיביים

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

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

שיעורים זמינים

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

מכשירים קטנים במיוחדטלפונים (<768 פיקסלים) מכשירים קטניםטאבלטים (≥768 פיקסלים) מכשירים בינונייםשולחנות עבודה (≥992 פיקסלים) מכשירים גדוליםשולחנות עבודה (≥1200px)
.visible-xs-* גלוי
.visible-sm-* גלוי
.visible-md-* גלוי
.visible-lg-* גלוי
.hidden-xs גלוי גלוי גלוי
.hidden-sm גלוי גלוי גלוי
.hidden-md גלוי גלוי גלוי
.hidden-lg גלוי גלוי גלוי

החל מגרסה 3.2.0, .visible-*-*המחלקות לכל נקודת שבירה מגיעות בשלוש וריאציות, אחת לכל displayערך מאפיין CSS המפורט להלן.

קבוצת שיעורים CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

xsאז, למשל, עבור מסכים קטנים במיוחד ( ), .visible-*-*המחלקות הזמינות הן: .visible-xs-block, .visible-xs-inline, ו .visible-xs-inline-block.

המחלקות .visible-xs, .visible-sm, .visible-md, .visible-lgוגם קיימות, אך הוצאו משימוש החל מ-v3.2.0 . הם שוות ערך ל- .visible-*-block, למעט מקרים מיוחדים נוספים <table>לרכיבים הקשורים להחלפה.

שיעורי הדפסה

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

שיעורים דפדפן הדפס
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		גלוי
.hidden-print גלוי

המחלקה .visible-printקיימת גם היא, אך היא הוצאה משימוש בגרסה 3.2.0. זה בערך שווה ערך ל .visible-print-block, למעט מקרים מיוחדים נוספים עבור <table>אלמנטים הקשורים.

מקרי מבחן

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

גלוי ב...

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

✔ גלוי ב-x-small
✔ נראה על קטן
בינוני ✔ גלוי על מדיום
✔ נראה בגדול
✔ גלוי על x-small ו-small
✔ גלוי על בינוני וגדול
✔ גלוי על x-small ובינוני
✔ גלוי על קטן וגדול
✔ גלוי על x-small ו-גדול
✔ גלוי על קטן ובינוני

מוסתר על...

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

✔ מוסתר על x-small
✔ מוסתר על קטן
בינוני ✔ מוסתר על מדיום
✔ מוסתר על גדול
✔ מוסתר על x-small ו-small
✔ מוסתר על בינוני וגדול
✔ Hidden on x-small and medium
✔ נסתר על קטן וגדול
✔ מוסתר על x-small ו-גדול
✔ Hidden on small and medium

משתמש בפחות

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

משתני רשת ושילובים מכוסים בסעיף מערכת הרשת .

קומפילציה של Bootstrap

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

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

משתנים

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

צבעים

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

פיגומים

קומץ משתנים להתאמה אישית מהירה של מרכיבי מפתח בשלד האתר שלך.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

עצב בקלות את הקישורים שלך בצבע הנכון עם ערך אחד בלבד.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

שימו לב שהשימוש @link-hover-colorבפונקציה, עוד כלי מדהים מבית Less, כדי ליצור באופן אוטומטי את צבע הריחוף הנכון. אתה יכול להשתמש ב- darken, lighten, saturateו- desaturate.

טיפוגרפיה

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

אייקונים

שני משתנים מהירים להתאמה אישית של המיקום ושם הקובץ של הסמלים שלך.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

רכיבים

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ערבובים של ספקים

מיקסינים של ספקים הם מיקסינים שיעזרו לתמוך במספר דפדפנים על ידי הכללת כל קידומות הספק הרלוונטיות ב-CSS המהודר שלך.

גודל קופסא

אפס את דגם הקופסה של הרכיבים שלך עם ערבוב יחיד. להקשר, עיין במאמר מועיל זה מ-Mozilla .

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

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

פינות מעוגלות

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

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

צללי קופסה (דרופ).

אם קהל היעד שלך משתמש בדפדפנים ובמכשירים העדכניים והטובים ביותר, הקפד להשתמש box-shadowבנכס לבדו. אם אתה צריך תמיכה עבור מכשירי אנדרואיד (קדם-v4) ו-iOS (טרום-iOS 5) ישנים יותר, השתמש במיקסין שהוצא משימוש כדי לאסוף את -webkitהקידומת הנדרשת.

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

הקפד להשתמש rgba()בצבעים בצלליות הקופסה שלך כדי שישתלבו בצורה חלקה ככל האפשר עם הרקע.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

מעברים

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

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

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

טרנספורמציות

סובב, קנה קנה מידה, תרגם (הזז) או הטיה של כל אובייקט.

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

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

אנימציות

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

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

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

אֲטִימוּת

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

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

טקסט מציין מיקום

ספק הקשר עבור פקדי טופס בתוך כל שדה.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

עמודות

צור עמודות באמצעות CSS בתוך אלמנט בודד.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

מעברי צבע

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

אתה יכול גם לציין את הזווית של שיפוע ליניארי דו-צבעי סטנדרטי:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

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

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

שימו לב! אם אי פעם תצטרך להסיר שיפוע, הקפד להסיר כל IE ספציפי filterשהוספת. אתה יכול לעשות זאת על ידי שימוש .reset-filter()במיקסין לצד background-image: none;.

תערובות שירות

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

Clearfix

תשכחו להוסיף class="clearfix"לכל אלמנט ובמקום זאת להוסיף את .clearfix()המיקסין היכן שמתאים. משתמש ב- micro clearfix של Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

מרכוז אופקי

מרכז במהירות כל אלמנט בתוך האב שלו. דורש widthאו max-widthצריך להיות מוגדר.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

עוזרי גודל

ציין את הממדים של אובייקט ביתר קלות.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

אזורי טקסט הניתנים לשינוי גודל

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

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

קיצור טקסט

חתוך בקלות טקסט עם אליפסיס עם מיקסין יחיד. דורש אלמנט להיות blockאו inline-blockרמה.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

תמונות רשתית

ציין שני נתיבי תמונה ואת ממדי התמונה @1x, ו-Bootstrap יספק שאילתת מדיה @2x. אם יש לך תמונות רבות להגיש, שקול לכתוב את ה-CSS של תמונת הרשתית שלך באופן ידני בשאילתת מדיה אחת.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

באמצעות Sass

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

מה נכלל

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

נָתִיב תיאור
lib/ קוד אבני רובי (תצורת Sass, שילובי מסילות ומצפן)
tasks/ ממיר סקריפטים (הפיכת פחות במעלה הזרם ל-Sass)
test/ מבחני קומפילציה
templates/ מניפסט חבילת מצפן
vendor/assets/ קבצי Sass, JavaScript וגופן
Rakefile משימות פנימיות, כגון גריפה והמרה

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

הַתקָנָה

למידע על אופן ההתקנה והשימוש ב-Bootstrap עבור Sass, עיין במאגר GitHub readme . זהו המקור המעודכן ביותר וכולל מידע לשימוש עם Rails, Compass ופרויקטים סטנדרטיים של Sass.

Bootstrap עבור Sass