jonowa karta

W ostatnich latach, kartę (karty) stają się coraz bardziej popularne, karta dostarcza narzędzie do lepszego zorganizowania prezentowanych informacji.

Na podstawie wielkości rozmiarów ekranu dla adaptacji terminala mobilnego kart aplikacji.

Możemy być bardzo elastyczna karta graficzna kontrola, nawet animowane efekty.

Ogólne karty na górze strony, oczywiście, może osiągnąć około funkcję przełączania.

<div class="card">
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
</div>

Spróbuj »

Kart (karta) Domyślny styl z box-shadow (cień), Ze względu na wydajność i innych podobnych elementów, takich jak lista Lista-wstawka i bez cieni.

Jeśli masz dużo kart, każda karta ma wiele podelementów zalecamy korzystania z listy (listę osadzonych wstawka).

Głowa i spód karty

Możemy dodać element-dzielnik dodać klasę do głowy i dolnej karty:

<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>

Spróbuj »

Lista kart

Użyj klasy lista kart, aby ustawić listę kart:

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Spróbuj »

Kartki ze zdjęciami

Zastosowanie obrazu karty, efekt będzie lepszy, przykłady są następujące:

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

Spróbuj »

Wyniki operacyjne przedstawiają się następująco:

karty pokazują

Poniższe przykłady użyć kilku różnych opcji trybu wyświetlania karty. Zaczęło się od elementów listy kart, a korzystanie z poz-avatar, element pozycja ciała jest używany do wyświetlania obrazów i tekstu, należy użyć elementu-rozdzielacz na dole klasy.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="#" class="subdued">1 喜欢</a>
      <a href="#" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

Spróbuj »

Wyniki operacyjne przedstawiają się następująco: