התאמה אישית של Bootstrap פריסות מגמות, כלים ומסגרות

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

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

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

רסטילינג עם Bootstrap

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

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

יש כמה דרכים שונות אתה יכול לעשות את זה:

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

כי האפשרות האחרונה היא הנפוצה ביותר והיא אחת הסיבות Boottrap גדלה כל כך מהר.

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

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

תוספים ותוספות

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

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

טופס אימות

הראשון הוא האהוב עלי תוסף טופס אימות, טופס Validator. הוא פועל על jQuery והוא תומך ערימה שלמה של מסגרות Frontend: Bootstrap, קרן, טהור, UIKit, ואחרים.

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

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

בורר Datetime

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

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

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

דירוגים של כוכבים

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

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

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

WATable

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

זהו אחד plugins jQuery המפורטים ביותר בחוץ אלה הן רק חלק מהתכונות שאתה יכול להוסיף:

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

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

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

מסגרות אתחול

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

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

למרבה המזל, הם כולם בחינם והם כולם לרוץ על ברירת המחדל BootStrap שיעורים.

Bootflat

אולי המסגרת הכי ידועה BootStrap הוא ממשק המשתמש של Bootflat כי עוקב אחר מגמת העיצוב השטוח.

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

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

זה 100% חינם ואפילו מגיע עם בוחר צבעים, כך שתוכל למצוא ערכות צבעים שטוחות שיתאימו לפריסה שלך.

קבל חרא בוצע

זה מפתיע גם בונה על גבי הספרייה Bootstrap 3 והוא שוחרר בחינם על GitHub.

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

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

עיצוב חומר Bootstrap

עוד מגמה עיצוב פופולרי הוא עיצוב החומר של Google. זוהי שפת עיצוב שנעשתה במקור עבור מעצבי אפליקציות Android, אך מאז להתפשט על גבי האינטרנט ו garnered הרבה תמיכה של UI / UX מעצבים.

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

כברירת מחדל, זה תומך הכל ב BootStrap 3 והוא כרגע להיות reworked גם תמיכה Bootstrap 4. אתה יכול ללמוד יותר על דף הבית הרשמי שבו יש תיעוד הדגמות.

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

בוטלוס

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

Bootplus מחקה את סגנון ממשק ה- Google+, יחד עם רבים מסמכי העזרה של Google, Google Drive ואפליקציות אינטרנט דומות. יש לו את כל התכונות כמו Bootstrap, כולל רשתות, סגנונות פריסה, סגנונות רכיבים ורכיבי JavaScript.

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

כלים ומשאבים

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

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

עורך חי

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

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

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

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

בונה טפסים

זה בחינם בנאי טופס Booter הוא גרור ושחרר כלי הדפדפן המאפשר לך ליצור טפסים Bootstrap מאפס.

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

ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם: ללא שם!

BootSwatchr

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

מה אני אוהב על זה App הוא איך זה מגיע גם עם גלריה חינם של סגנונות מעוצבים מראש.

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

נעים קדימה

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

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