הצגת המקור של הדף "INature:דוגמאות לעיצוב"

__NOTOC__

<html>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://www.inature.info/w/images/b/bc/Telaviv_trips1.jpg" alt="טיולים בתל אביב">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
<a href="http://www.inature.info/wiki/טיולים_בתל_אביב">     
 <img src="http://www.inature.info/w/images/b/bc/Telaviv_trips1.jpg" alt="טיולים בשרון">
</a>
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="http://www.inature.info/w/images/b/bc/Telaviv_trips1.jpg" alt="טיולים בשרון">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class=".icon-next"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class=".icon-prev"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</html>



<html>
    <div class="col-md-4 mwbs-color-darker">
 <div class="thumbnail lighter-background">
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png">      <div class="caption">
        <h2>Thumbnail</h2>
        <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
        eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div></div>
    </div>
</html>
<html>
    <div class="col-md-4 mwbs-color-darker">
 <div class="thumbnail lighter-background">
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png">      <div class="caption">
        <h2>Thumbnail</h2>
        <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
        eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div></div>
    </div>
</html>
<html>
    <div class="col-md-4 mwbs-color-darker">
          <div class="thumbnail dark-background">
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png">      <div class="caption">
        <h2>Thumbnail</h2>
        <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
        eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div></div>
    </div>
</html>
{{H2|
header=כפתורים לקישורים - אופציה לעשות 2 כפתורים עם שלישי כתנאי אם ישנו
}}
{{כפתוריות|
[[טיולים במרכז]]|
[[טיולים בדרום]]
[[טיולים בארץ]]}}


hanukkah.jpg, mar_elias3.jpg

{{H2|
header=כפתור תפריט נגלל, אפשר להכניס רשימה של אתרים
}}
<html>
<div class="btn-group">
  <button type="button" class="btn btn-primary">טיולים בצפון</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="טיולים בכרמל">[[טיולים בכרמל]]</a></li>
    <li><a href="טיולים בגלבוע ובעמקים">http://www.inature.info/wiki/טיולים_בגלבוע ובעמקים</a></li>
  </ul>
</div>
</html>

{{H2|
header=JUMBOTRON
}}

<html>
<div class="jumbotron">
  <h1>טקסט בולט</h1> 
  <p>ואז כאן בא טקסט שמסביר על כל מיני דברים ובעיקר זה חלון לתפוס תשומת לב</p> 
</div>
<div class="container">
  <p>ואז ככה</p> 
  <p>ומה דעתכם על זה..</p> 
</div>
</html>

{{H2|
header=טאבים
}}
<html>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">לראות מפה</a></li>
  <li><a data-toggle="tab" href="#menu2">הוראות הגעה</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <p><img src="http://www.inature.info/w/images/4/49/Emailing-list3.png"></p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>מרכז המבקרים "ברווזים בכפר" נמצא במושב כפר ברוך שבעמק יזרעאל (במשק של איריס ונפתלי לוין).
על האטרקציה:</p>
  </div>
</div>
</html>

{{H2|
header="פירורי לחם" - breadcrumbs
}}
{{פירורי לחם|[[טיולים בצפון]]|[[טיולים בגלבוע ובעמקים]]|[[אטרקציות בישראל]]}}

{{H2|
header=תבנית כרטיס ביקור
}}
{{כרטיסביקור}}

{{H2|
header=קוד להצגה של תמונות בחלון קופץ
}}
<html>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
<p><img src="http://www.inature.info/w/images/4/49/Emailing-list3.png" class="img-responsive" alt="Responsive image"></p>
<p><img src="http://www.inature.info/w/images/4/49/Emailing-list3.png" class="img-responsive" alt="Responsive image"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

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

{{H2|
header=קוד להצגה של הודעה בחלון קופץ
}}
<html>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
<p>אהלן אני כותב פה הודעה כדי שתקפוץ לך כשתלחץ כאן</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

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

{{H2|
header=כותרת נחמדה
}}

<h2 class="featurette-heading">אוהבים את זה <span class="text-muted">וואו זה מדליק</span></h2>


{{H2|
header=מספור דפים
}}
<html>
<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
</html>


{{H2|
header=או כקישורים
}}
<html>
<ul class="pagination">
  <li><a href="http://www.inature.info">לטיולים בארץ</a></li>
  <li class="active"><a href="#">לטיולים בצפון</a></li>
  <li><a href="http://www.inature.info/wiki/טיולים_במרכז">לטיולים במרכז</a></li>
  <li><a href="http://www.inature.info/wiki/טיולים_בדרום">לטיולים בדרום</a></li>
  <li><a href="#">לדף האטרקציות</a></li>
</ul>
</html>

<blockquote>
 מה העניינים?
</blockquote>

<pre>טקסט טקסט טקסט</pre>

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

{{H2|
header=הסתרה ממסכים של פלאפונים - "לא בנייד"
}}

{{לא בנייד|
שלום אני מופיע במחשב ובטאבלט אבל לא בפלאפון נייד
}}

{{לא בנייד|מה שמופיע כאן לא יוצג על מכשיר טלפון נייד}}


{{H2|
header=הפנייה למקטע מסויים בדף
}}
[[פארק נשר - נחל קטיע#מסלול קליל - לגשרים בלבד]]

{{H2|
header=כדי ליצור רווחים השתמש ב":"
}}
::::אני מתחיל מכאן

{{H2|
header=שלושה טורים - 3טורים
}}
{{3טורים|
=== טור ראשון ===
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.

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

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

מוסן מנת. להאמית קרהשק סכעיט דז מא, מנכם למטכין נשואי מנורך. גולר מונפרר סוברט לורם שבצק יהול, לכנוץ בעריר גק ליץ, לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסישערש שמחויט - שלושע ותלברו חשלו שעותלשך וחאית נובש ערששף. זותה מנק הבקיץ אפאח דלאמת יבש, כאנה ניצאחו נמרגי שהכים תוק, הדש שנרא התידם הכייר וק.
}}
{{3טורים|
=== רשימה ===
* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
|
=== טור שני ===
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.
|
=== תמונה ===
{{ת|Park_alona1.jpg|פארק אלונה - מי קדם}}
}}
{{H2|
header=שני טורים - 2טורים
}}
{{2טורים|
=== טור ראשון ===
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.


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

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

{{H2|
header=תמונה רספונסיבית שמתאימה את עצמה לגודל המסך באופן מיידי
}}
<html>
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png" class="img-responsive" alt="Responsive image">
</html>


{{H2|
header=קוד לתמונה שמתאימה את גודלה בהתאם למסך ומחליפה בין שתי תמונות בהתאם למסך
}}
<html>
<div class="visible-md">
<a href="http://eepurl.com/biZFvv" target="_blank">
<img src="http://www.inature.info/w/images/e/e4/Emailing-list2.jpg" alt="הרשמה לרשימת תפוצה">
</a>
</div>
<div class="visible-lg">
<a href="http://eepurl.com/biZFvv" target="_blank">
<img src="http://www.inature.info/w/images/e/e4/Emailing-list2.jpg" alt="הרשמה לרשימת תפוצה">
</a>
</div>
<div class="visible-xs">
<a href="http://eepurl.com/biZFvv" target="_blank">
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png"  class="img-responsive" alt="הרשמה לרשימת תפוצה">
</a>
</div>
<div class="visible-sm">
<a href="http://eepurl.com/biZFvv" target="_blank">
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png"  class="img-responsive" alt="הרשמה לרשימת תפוצה">
</a>
</div>
</html>

{{H2|
header=קו תחתון
}}
<div style="width:100%;border:1px solid green;"></div>


{{H2|
header=שתי תמונות - 2טורים
}}
{{2טורים|
{{H2|
header=תמונה1
}}
{{ת|Anemones_hill_hoga.jpg}}
|
{{H2|
header=תמונה2
}}
{{ת|Park_alona1.jpg|פארק אלונה - מי קדם}}
}}

{{H2|
header=שתי תמונות גדולות שמתאימות עצמן לגודל המסך
}}
{{2טורים|
<html>
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png" class="img-responsive" alt="Responsive image">
</html>
|
<html>
<img src="http://www.inature.info/w/images/4/49/Emailing-list3.png" class="img-responsive" alt="Responsive image">
</html>
<br>
}}

{{2טורים|
=== רשימה ===
* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
|
=== תמונה ===
{{ת|Anemones_hill_hoga.jpg}}
}}
{{H2|
header=צר-רחב
}}
== תיאור האתר ==
{{צר-רחב|
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.

|
{{ת|Park_eshkol1.jpg}}
}}
{{H2|
header=רחב-צר
}}
== תיאור האתר ==
{{רחב-צר|
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.

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

הועניב היושבב שערש שמחויט - שלושע ותלברו חשלו שעותלשך וחאית נובש ערששף. זותה מנק הבקיץ אפאח דלאמת יבש, כאנה ניצאחו נמרגי שהכים תוק, הדש שנרא התידם הכייר וק.
|
{{ת|Park_eshkol1.jpg}}
}}
== תיאור נוסף ==
{{רחב-צר|
{{ת|Park_eshkol1.jpg}}
|
לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.

* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
}}

{{H2|
header=מסך4נייד 2 - משולב בתנבית ת: תמונות בלבד עם קישור בנפרד
}}

{{מסך4נייד2|
{{ת|ניסיון.jpg|פארק יער שוהם}}
|
{{ת|hod_akev1.jpg|חוד עקב, עין עקב ומעלה דבשון}}
'''[[חוד עקב, עין עקב ומעלה דבשון|מחוד עקב אל מעלה דבשון]]'''
|
{{ת|bible_hill2.jpg|גבעת התנ"ך}}
'''[[גבעת התנ"ך]]'''
|
{{ת|shmaryahu_caves3.jpg|מערות שמריהו}}
'''[[מערות שמריהו]]'''
}}

{{H2|
header=כפתורים עם קישור ישיר או עם שינוי שם
}}

{{כפתור|[[טיולים בצפון|בצפון]]}}

{{כ|טיולים בצפון}}

{{H2|
header=מסך4נייד2 משולב בתבנית תתתת או תתת
}}

{{מסך4נייד2|
{{תתתת|סיור חנוכיות בירושלים|hanukkah.jpg|הבטיחו את השתתפותכם בסיור ייחודי בסמטאות ירושלים בחנוכה!}}
|
{{תתת|טיולי פריחה במרכז|mar_elias3.jpg|דף אינדקס לטיולי פריחה מומלצים במרכז הארץ.}}
|
{{תתת|טיולי פריחה במרכז|mar_elias3.jpg|דף אינדקס לטיולי פריחה מומלצים במרכז הארץ.}}
|
{{תתת|טיולי פריחה במרכז|mar_elias3.jpg|דף אינדקס לטיולי פריחה מומלצים במרכז הארץ.}}
}}


{{H2|
header=תצוגה בגלריה - gallery mode
}}  

<gallery mode="packed-overlay" widths=200px>
Image:mar_elias3.jpg|''[[טיולי פריחה במרכז]]'' 
Image:mar_elias3.jpg|''[[טיולי פריחה במרכז]]'' 
Image:mar_elias3.jpg|''[[טיולי פריחה במרכז]]'' 
Image:mar_elias3.jpg|''[[טיולי פריחה במרכז]]'' 
</gallery>


{{H2|
header=תבנית כרטיסביקור
}}
{{כרטיסביקור|
{{H2|
header=תמונה
}}
* שלוש שלוש שלוש
* ארבע ארבע ארבע
* אחת אחת אחת
* שתיים שתיים שתיים
* שלוש שלוש שלוש
* ארבע ארבע ארבע
|
{{ת|Anemones_hill_hoga.jpg}}
}}