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-heart-o

0xe80b

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-alt

0xe817

sr-icon-phone

0xe818

sr-icon-at

0xe819

sr-icon-globe

0xe820

sr-icon-gift

0xe821

sr-icon-gavel

0xe822

sr-icon-file

0xe823

sr-icon-money

0xe824

sr-icon-check

0xe825

sr-icon-print

0xe826

sr-icon-envelope

0xe827

sr-icon-map-pin

0xe828

sr-icon-arrow-blog

0xe829

sr-icon-angle-up

0xe830

sr-icon-angle-down

0xe831

sr-icon-angle-left

0xe832

sr-icon-angle-right

0xe833

sr-icon-angle-double-left

0xe834

sr-icon-angle-double-right

0xe835

sr-icon-info-circle

0xe836

sr-icon-exclamation-circle

0xe837

sr-icon-exclamation-triangle

0xe838

sr-icon-plus

0xe839

sr-icon-minus

0xe840

sr-icon-comments

0xe841

sr-icon-comment

0xe842

sr-icon-times

0xe843

sr-icon-times-circle

0xe844

sr-icon-youtube-square

0xe845

sr-icon-youtube

0xe846

sr-icon-twitter-square

0xe847

sr-icon-twitter

0xe848

sr-icon-google-plus-square

0xe849

sr-icon-google-plus

0xe850

sr-icon-google-plus-g

0xe851

sr-icon-linkedin

0xe852

sr-icon-linkedin-in

0xe853

sr-icon-facebook-square

0xe854

sr-icon-facebook

0xe855

sr-icon-pinterest-square

0xe856

sr-icon-pinterest

0xe857

sr-icon-pinterest-p

0xe858

sr-icon-caret-left

0xe859

sr-icon-caret-right

0xe860

sr-icon-caret-up

0xe861

sr-icon-caret-down

0xe862

sr-icon-question

0xe863

sr-icon-question-circle

0xe864

sr-icon-regular-check-square

0xe865

sr-icon-settings-cogwheel-button

0xe866

sr-icon-instagram

0xe80a

Ű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-xl">XL button</button>
<button type="button" class="btn btn-default btn-xl">XL button</button>
<button type="button" class="btn btn-primary btn-xxl">XXL button</button>
<button type="button" class="btn btn-default btn-xxl">XXL 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

Női

Férfi

Cipők

Nadrágok

Pólók

Kabátok

Női

Férfi

Új termékek

Ajánlatunk

Kategóriák1

Kategóriák2

Kategóriák3

Cipők

Nadrágok

Pólók

Kabátok

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

Keresés