בוטסטראפ חלק א.

מדריך Bootstrap חלק א.

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

ניתן להוריד את הקבצים שלו מפה

http://getbootstrap.com/getting-started/#download

ניתן גם להשתמש ב cdn – ים

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

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

בוטסטראפ מחייב גם להכליל jQuery

דוגמא ל קובץ  html ריק שמכליל את בוטסטראפ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

</div>
    
</body>
</html>

קביעת רוחב מסך

2 קלאסים שאיתם קובעים את רוחב המסך  הם container-fluid ו container


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

container-fluid – קובע רוחב מסך 100% רוחב מלא

 

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

 

בוטסטראפ מחלק את המסך ל 12 חלקים עם קלאסים יעודיים

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

• lg, למסכים ברוחב 1200 פיקסלים או יותר (מכוון למחשב שולחני טלוויזיה או laptop)
• md, למסכים של 992 עד 1200 פיקסלים (מכוון לטאבלט בהעמדת landscape)
• sm, למסכים של 768 עד 992 פיקסלים (מכוון לטאבלט בהעמדת portrait)
• xs, למסכים קטנים יותר (מכוון לסמארטפונים)

 

מכשירים קטנים מאוד Phones (<768px)	מכשירים קטנים Tablets (≥768px)	מכשירים בינוניים (≥992px)	מכשירים גדולים (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
רוחב פנימי	None (auto)	750px	970px	1170px
הקלאסס שצריך להשתמש	.col-xs-	.col-sm-	.col-md-	.col-lg-

 

נראה דוגמא:

 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

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

ו col מציין שורה .col-md-* במקום כוכבית רושמים מספר

המספר 4 למשל מציין שהשורה הזאת תופסת 4 מקומות ביחד 4*3 נותן  12

אפשר גם לעשות 6 ו 6

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

 

נסביר איך הסיפור הזה גורם לכך שהאתר יהיה רספונסיבי.

כמו שאמרנו כל קלאסס משפיע על סוג מסך אחר

<div class="row">
  <div class="col-xs-12 col-md-6">col 1</div>
  <div class="col-xs-12 col-md-6">col 2</div>
</div>

בדוגמא, כאשר אנחנו במסך גדול אז כל שורה מקבלת חצי מסך 6 + 6 = 12

וכאשר אנחנו במסך קטן כל שורה תופסת רוחב מלא 12

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

יצירת רווח אופסט בשורות

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

דוגמא :

<div class="row">
  <div class="col-md-4">תופס 4</div>
  <div class="col-md-4 col-md-offset-4">עושה רווח של 4 ואחרי זה תופס 4</div>
</div>

בהתחלה אנחנו תופסים 4 שורות ואחר כך רווח של 4 שורות ואז תופסים עוד 4 שורות יחד 12.

 

תמונות

גם לתמונות נוספו 3 קלאסים

 img-rounded – גורם לתמונה להיות עם פינות יותר עגולות

img-circle – גורם לתמונה להיות עגולה

img-thumbnail – התמונה נראית כמו thumbnail מסגרת לבנה מסביב.

דוגמא כמובן שאפשר להשים כל קלאס אחר

<img src="bla.jpg" class="img-thumbnail" alt="bla" width="304" height="236">

 

Jumbotron

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

דוגמא :

<div class="jumbotron">
  <h1>Bootstrap jumbotron</h1>
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac.</p>
</div>

 

Well קלאס.

מוסיף מסביב לאלמנט בורדר אפור.

alert

בוטסטראפ מאפשר בצורה פשוטה ליצור הודעות אלרט

.alert-success, .alert-info, .alert-warning or .alert-danger:

 

דוגמא:

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

יש להשים לב ששמים את הקלאס alert ומוסיפים את אחד הקלאסים מלמעלה תלוי בסוג ההודעה.

 

אתר נחמד עם הורדה של טמפלטים ודוגמאות של בוטסטראפ http://bootstrapthemes.co/

מדריך ההמשך בוטסטראפ חלק ב