Badge

Hozzászólás 342 4269 160

<!--kód eleje ==================================== --> 
<a href="#">Hozzászólás <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Új üzenet <span class="badge">4</span>
</button>  

<span class="badge badge-red">4269</span>   
<span class="badge badge-black">160</span>   
<!--kód vége ===================================== -->

Css saját a red és black-hez

<!--kód eleje ==================================== --> 
     .badge-red {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      background-color: #FF0000;
      border-radius: 5px;
}
    
    .badge-black {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      background-color: #222222;
      border-radius: 5px;
}  
<!--kód vége ===================================== -->

Glyphicons

Ikonos link Ikonos Sk Button

<!--kód eleje ==================================== --> 
<button type="button" class="btn btn-warning" ><span class="glyphicon glyphicon-upload"> Modal ablak</button>utton>
<a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-cog"></span> Modal ablak</a> 
<a href="#" class="zoldbutton"><span class="glyphicon glyphicon-cog"></span> Ikonos link</a>   
<!--kód vége ===================================== -->

Ez pedig már az oldal szövege. Consectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet. Nunc fermentum adipiscing massa sit amet posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In tellus dui, gravida sed consequat eget, ornare sit amet quam. Vivamus congue ultrices felis eget bibendum. Donec ac ante enim, sit amet viverra arcu. Aliquam mattis placerat orci a dignissim. Cras vel orci nec ligula ultrices convallis at pulvinar urna. Donec nec elit quam. In hac habitasse platea dictumst. Nullam accumsan mi vel odio luctus sit amet egestas metus imperdiet. Praesent rhoncus, lorem eget pulvinar eleifend, arcu neque semper magna, ut tincidunt turpis odio eget nibh. Quisque euismod, neque tristique bibendum posuere, eros elit sodales elit, id consequat ante nisi at orci. Proin placerat, urna sit amet porttitor cursus, felis orci aliquam augue, sit amet posuere urna eros sit amet turpis. Morbi sed magna mi, nec dictum lorem. Aliquam id mattis sapien. Suspendisse potenti. Nulla facilisi. Etiam in tortor ligula. Duis venenatis mollis tellus lobortis gravida. Vestibulum dapibus rutrum quam sed cursus. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam consequat aliquet neque, eu varius quam faucibus non. Phasellus ornare mattis lacus id dictum.

<!--kód eleje ==================================== --> 
<div class="page-header">
  <h1>Oldal fejléc címsor <small>Alszöveg a fejlécben alatta vonal</small></h1>
</div>
<p>Ez pedig már az oldal szövege. Consectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet. </p>
<!--kód vége ===================================== -->

Címsorban kiemelés

Fontos címsor rész ami teljes h2 de az eleje kiemelt!

<!--kód eleje ==================================== --> 
<h2><strong>H2 címsor</strong> Amely eleje kiemelt!</h2> 
<!--kód vége ===================================== -->

Example Heading Címke Címke

Default Label Primary Label Success Label Info Label Warning Label Danger Label

<!--kód eleje ==================================== --> 
<h1>Example Heading Címke <span class = "label label-default">Címke</span></h1>
<h2>Example Heading Címke <span class =" label label-default">Címke</span></h2>
<h3>Example Heading Címke <span class = "label label-default">Címke</span></h3>
<h4>Example Heading Címke <span class = "label label-default">Címke</span></h4>

<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>
<!--kód vége ===================================== -->

Bezárható ablak

Figyelem! Ez egy olyan ablak amely valamit tartalmaz ugyan, de elolvasás után bezárható.

<!--kód eleje ==================================== --> 
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Figyelem!</strong> Ez egy olyan ablak amely valamit tartalmaz ugyan, de elolvasás után bezárható.
</div>
<!--kód vége ===================================== -->

Media

Media címsor

Ez pedig már a szöveg. Consectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet.

Media címsor

<!--kód eleje ==================================== --> 
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="kepek/vegyes/65.jpg"  alt="" >
    </a>
  </div>
  <div class="media-body">
    <h2 class="media-heading">Media címsor</h2>
   Ez pedig már a szöveg. Congsectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet.
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="kepek/vegyes/65.jpg"  alt="" >
    </a>
  </div>
  <div class="media-body">
    <h2 class="media-heading">Media címsor</h2>
   Ez pedig már a szöveg. Consectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet.
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="kepek/vegyes/65.jpg"  alt="" >
    </a>
  </div>
  <div class="media-body">
    <h2 class="media-heading">Media címsor</h2>
   Ez pedig már a szöveg. Consectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet.
  </div>
</div>
<!--kód vége ===================================== -->

Css extra

<!--kód eleje ==================================== --> 
    .media-object{
    border:1px solid #AAAAAA;
    padding:2px;
    }
<!--kód vége ===================================== -->

Előző, következő oldal

Consectetur adipiscing elit. Sed porttitor lobortis felis, in pretium neque volutpat in. Nulla in vulputate ipsum. Ut pretium pellentesque semper. Pellentesque luctus nisl in nunc sollicitudin ac porta libero aliquet. Nunc fermentum adipiscing massa sit amet posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In tellus dui, gravida sed consequat eget, ornare sit amet quam. Vivamus congue ultrices felis eget bibendum. Donec ac ante enim, sit amet viverra arcu. Aliquam mattis placerat orci a dignissim. Cras vel orci nec ligula ultrices convallis at pulvinar urna. Donec nec elit quam. In hac habitasse platea dictumst. Nullam accumsan mi vel odio luctus sit amet egestas metus imperdiet. Praesent rhoncus, lorem eget pulvinar eleifend, arcu neque semper magna, ut tincidunt turpis odio eget nibh. Quisque euismod, neque tristique bibendum posuere, eros elit sodales elit, id consequat ante nisi at orci. Proin placerat, urna sit amet porttitor cursus, felis orci aliquam augue, sit amet posuere urna eros sit amet turpis. Morbi sed magna mi, nec dictum lorem. Aliquam id mattis sapien. Suspendisse potenti. Nulla facilisi. Etiam in tortor ligula. Duis venenatis mollis tellus lobortis gravida. Vestibulum dapibus rutrum quam sed cursus. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam consequat aliquet neque, eu varius quam faucibus non. Phasellus ornare mattis lacus id dictum.

<!--kód eleje ==================================== --> 
<ul class="pager">
  <li><a href="#">&laquo; Előző oldal</a></li>
  <li><a href="#">Következő oldal &raquo;</a></li>
</ul>
<!--kód vége ==================================== -->

<!--kód eleje ==================================== --> 
<ul class="pager">
  <li class="previous"><a href="#">&laquo; Előző oldal</a></li>
  <li class="next"><a href="#">Következő oldal &raquo;</a></li>
</ul>
<!--kód vége ===================================== -->

Tooltip

Hozd az egeret!

Vidd az egeret a link fölé és máris látható a tooltip

<!--kód eleje ==================================== --> 
<a href="#" data-toggle="tooltip" title="Ez a rövid és gyors infó!">Link szövege</a>
<!--kód vége ===================================== -->

Popover

Toggle popover

Vidd az egeret a link fölé és máris látható a popover ablak

<!--kód eleje ==================================== --> 
<a href="#" data-toggle="popover" title="Popover Fejléc" data-content="Some content inside the popover">Toggle popover</a>
<!--kód vége ===================================== -->

<!--kód eleje ==================================== --> 

<!--kód vége ===================================== -->

Badge

Css saját a red és black-hez

Glyphicons

Oldal fejléc címsor Alszöveg a fejlécben alatta vonal

Címsorban kiemelés

Fontos címsor rész ami teljes h2 de az eleje kiemelt!

Example Heading Címke Címke

Example Heading Címke Címke

Example Heading Címke Címke

Example Heading Címke Címke

Bezárható ablak

Media

Media címsor

Media címsor

Media címsor

Css extra

Előző, következő oldal

Tooltip

Popover