Style Guide

Színek

Tipográfia

Sablon betűkészlete(i): .

Fejlécek

h1. Lorem ipsum dolor sit

h2. Lorem ipsum dolor sit

h3. Lorem ipsum dolor sit

h4. Lorem ipsum dolor sit

h5. Lorem ipsum dolor sit

h6. Lorem ipsum dolor sit

<h1>h1. Lorem ipsum dolor sit</h1>
<h2>h2. Lorem ipsum dolor sit</h2>
<h3>h3. Lorem ipsum dolor sit</h3>
<h4>h4. Lorem ipsum dolor sit</h4>
<h5>h5. Lorem ipsum dolor sit</h5>
<h6>h6. Lorem ipsum dolor sit</h6>

Szöveg színváltozatok

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">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Ikonok

sr-icon-tags

0xe800

sr-icon-tag

0xe801

sr-icon-heart

0xe802

sr-icon-search

0xe803

sr-icon-eye

0xe804

sr-icon-refresh

0xe805

sr-icon-user

0xe806

sr-icon-hamburger-menu

0xe807

sr-icon-calendar

0xe808

sr-icon-truck

0xe809

sr-icon-trash

0xe810

sr-icon-list-alt

0xe811

sr-icon-list

0xe812

sr-icon-th

0xe813

sr-icon-sliders

0xe814

sr-icon-spinner

0xe815

sr-icon-edit

0xe816

sr-icon-phone

0xe817

sr-icon-at

0xe818

sr-icon-globe

0xe819

sr-icon-gift

0xe820

sr-icon-gavel

0xe821

sr-icon-file

0xe822

sr-icon-money

0xe823

sr-icon-check

0xe824

sr-icon-print

0xe825

sr-icon-envelope

0xe826

sr-icon-map-marker-alt

0xe827

sr-icon-angle-up

0xe828

sr-icon-angle-down

0xe829

sr-icon-angle-left

0xe830

sr-icon-angle-right

0xe831

sr-icon-angle-double-left

0xe832

sr-icon-angle-double-right

0xe833

sr-icon-info-circle

0xe834

sr-icon-exclamation-circle

0xe835

sr-icon-exclamation-triangle

0xe836

sr-icon-plus

0xe837

sr-icon-minus

0xe838

sr-icon-comments

0xe839

sr-icon-comment

0xe840

sr-icon-times

0xe841

sr-icon-times-circle

0xe842

sr-icon-youtube-square

0xe843

sr-icon-youtube

0xe844

sr-icon-twitter-square

0xe845

sr-icon-twitter

0xe846

sr-icon-google-plus-square

0xe847

sr-icon-google-plus

0xe848

sr-icon-google-plus-g

0xe849

sr-icon-linkedin

0xe850

sr-icon-linkedin-in

0xe851

sr-icon-facebook-square

0xe852

sr-icon-facebook

0xe853

sr-icon-pinterest-square

0xe854

sr-icon-pinterest

0xe855

sr-icon-pinterest-p

0xe856

sr-icon-circle

0xe857

sr-icon-cog

0xe858

Űrlapok

Minden beviteli mezőnek type attributumot kell adni.

Alap űrlap elemek

Email address We'll never share your email with anyone else.

Example select

Radio buttons

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Check me out

<form>
  <div class="form-group">
    <label for="exampleInputEmail1" class="form-control-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleSelect1" class="form-control-label">Example select</label>
    <select class="select2 form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label class="form-control-label">Radio buttons</label>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" 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="form-check">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2" />
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="form-check disabled">
    <label class="form-check-label">
        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" />
        Option three is disabled
      </label>
    </div>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input" />
      Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Méret változatok

Set heights using classes like .input-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">

Gombok

You can also use these classes on <a> or <input> elements

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Gomb méretek

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Normal button</button>
<button type="button" class="btn btn-default">Normal button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
<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>

Táblázatok

Using the most basic table markup, here's how .table-based tables look. All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

Szegélyezett táblázat

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

<table class="table table-bordered">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@TwBootstrap</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">4</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

Kategóriák / Termékek

Style Guide

Menu

Style Guide

Színek

Tipográfia

Fejlécek

h1. Lorem ipsum dolor sit

h2. Lorem ipsum dolor sit

h3. Lorem ipsum dolor sit

h4. Lorem ipsum dolor sit

h5. Lorem ipsum dolor sit

h6. Lorem ipsum dolor sit

Szöveg színváltozatok

Ikonok

Űrlapok

Alap űrlap elemek

Méret változatok

Gombok

Gomb méretek

Táblázatok

Szegélyezett táblázat

Keress minket

Információk

Facebook rajongók

Felíratkozás hírlevélre

Notebookok

Ruházat

Virágok

Notebookok

Ruházat

Virágok

Style Guide

Menu

Style Guide

Színek

Tipográfia

Fejlécek

h1. Lorem ipsum dolor sit

h2. Lorem ipsum dolor sit

h3. Lorem ipsum dolor sit

h4. Lorem ipsum dolor sit

h5. Lorem ipsum dolor sit

h6. Lorem ipsum dolor sit

Szöveg színváltozatok

Ikonok

Űrlapok

Alap űrlap elemek

Méret változatok

Gombok

Gomb méretek

Táblázatok

Szegélyezett táblázat

Keress minket

Információk

Facebook rajongók

Felíratkozás hírlevélre