CSS
הגדרות CSS גלובליות, רכיבי HTML בסיסיים מעוצבים ומשופרים עם מחלקות הניתנות להרחבה ומערכת גריד מתקדמת.
הגדרות CSS גלובליות, רכיבי HTML בסיסיים מעוצבים ומשופרים עם מחלקות הניתנות להרחבה ומערכת גריד מתקדמת.
קבל את הרשימה הנמוכה על חלקי המפתח של התשתית של Bootstrap, כולל הגישה שלנו לפיתוח אינטרנט טוב יותר, מהיר יותר וחזק יותר.
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 , פרויקט של ניקולס גלאגר וג'ונתן ניל .
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
. ריפוד זה מקוזז בשורות עבור העמודה הראשונה והאחרונה באמצעות שוליים שליליים ב- .row
s..col-xs-4
..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
.
<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-*
לעמודות שלך. ראה את הדוגמה למטה כדי לקבל מושג טוב יותר על איך הכל עובד.
<!-- 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-*
כיתות טאבלטים.
<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 עמודות ממוקמות בשורה בודדת, כל קבוצה של עמודות נוספות תתגלגל, כיחידה אחת, על שורה חדשה.
<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 > 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
שלנו .
<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
על פני ארבע עמודות.
<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 העמודות הזמינות).
<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-*
<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-height
1.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>
.
<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>
.
הוסף א <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
לציטוט בלוק עם תוכן מיושר לימין.
<blockquote class="blockquote-reverse">
...
</blockquote>
רשימה של פריטים שבהם הסדר אינו משנה במפורש.
<ul>
<li>...</li>
</ul>
רשימה של פריטים שבהם יש חשיבות מפורשת לסדר.
<ol>
<li>...</li>
</ol>
הסר את ברירת המחדל list-style
והשוליים השמאליים בפריטי רשימה (ילדים מיידיים בלבד). זה חל רק על פריטי רשימת ילדים מיידיים , כלומר תצטרך להוסיף את הכיתה גם עבור כל רשימות מקוננות.
<ul class="list-unstyled">
<li>...</li>
</ul>
הנח את כל פריטי הרשימה בשורה אחת עם display: inline-block;
ריפוד קל.
<ul class="list-inline">
<li>...</li>
</ul>
רשימה של מונחים עם התיאורים המשויכים אליהם.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
צור מונחים ותיאורים <dl>
בשורה זה לצד זה. מתחיל בערימה כמו ברירת מחדל <dl>
, אבל כאשר סרגל הניווט מתרחב, אז עשה זאת.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
רשימות תיאור אופקיות יקצצו מונחים ארוכים מכדי להתאים בעמודה השמאלית עם text-overflow
. ביציאות תצוגה צרות יותר, הם ישתנו לפריסת ברירת המחדל הנערמת.
עטוף קטעי קוד מוטבעים עם <code>
.
<section>
צריך להיות עטוף בתור מוטבע.
For example, <code><section></code> should be wrapped as inline.
השתמש <kbd>
בלחצן כדי לציין קלט המוזן בדרך כלל באמצעות המקלדת.
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><p>Sample text here...</p></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 יש סגנון מביך של ערכת שדה 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>
<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>
, בדוק את רכיב קבוצת הקלט .
בקרת טופס התומך במספר שורות טקסט. שנה 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—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—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>
.
<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>
<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
השימוש.
ב-Internet Explorer 8-10, תמונות SVG עם .img-responsive
הן בגודל לא פרופורציונלי. כדי לתקן זאת, הוסף width: 100% \9;
במידת הצורך. Bootstrap לא מיישם זאת באופן אוטומטי מכיוון שהוא גורם לסיבוכים לפורמטים אחרים של תמונה.
<img src="..." class="img-responsive" alt="Responsive image">
הוסף שיעורים <img>
לאלמנט כדי לעצב בקלות תמונות בכל פרויקט.
זכור ש-Internet Explorer 8 חסר תמיכה בפינות מעוגלות.
<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">×</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();
}
הגדר רכיב ל 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();
}
נקה בקלות float
s על ידי הוספה .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();
}
כפה על אלמנט להצגה או הסתרה ( כולל עבור קוראי מסך ) עם השימוש ב- .show
and .hidden
classes. מחלקות אלה משמשות !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>
אלמנטים הקשורים.
שנה את גודל הדפדפן שלך או טען במכשירים שונים כדי לבדוק את מחלקות השירות הרספונסיביות.
סימני ביקורת ירוקים מציינים שהרכיב גלוי בשדה התצוגה הנוכחי שלך.
כאן, סימני ביקורת ירוקים גם מציינים שהאלמנט מוסתר בנקודת התצוגה הנוכחית שלך.
ה-CSS של Bootstrap בנוי על Less, מעבד מקדים עם פונקציונליות נוספת כמו משתנים, מיקסינים ופונקציות להידור CSS. אלו המחפשים להשתמש בקבצי המקור Less במקום בקובצי ה-CSS המהופפים שלנו יכולים לעשות שימוש במשתנים ובמיקסים הרבים שבהם אנו משתמשים בכל המסגרת.
משתני רשת ושילובים מכוסים בסעיף מערכת הרשת .
ניתן להשתמש ב-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 שאינם קשורים אחרת כדי להשיג מטרה או משימה ספציפית.
תשכחו להוסיף 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);
}
בעוד 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.