Il miglior tutorial carta ionico Nel 2024, in questo tutorial puoi imparare La testa e la parte inferiore della scheda,Lista Carta,Le carte con le immagini,carte di spettacolo,

carta ionico

Negli ultimi anni, la scheda (card) stanno diventando sempre più popolare, la scheda fornisce uno strumento per organizzare meglio le informazioni presentate.

In base alle dimensioni della dimensione dello schermo per adattativi mobili schede per applicazioni terminali.

Possiamo essere molto flessibili scheda video controllo, effetti anche animati.

Scheda generale sulla parte superiore della pagina, naturalmente, può raggiungere circa funzione di commutazione.

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

Prova »

Card (carta) stile di default con box-shadow (l'ombra), per motivi di prestazioni, e altri elementi simili come lista lista-inserto e senza ombre.

Se si dispone di un sacco di carte, ogni carta ha un sacco di sotto-elementi, si consiglia di utilizzare l'elenco incorporato (lista nel riquadro).

---

La testa e la parte inferiore della scheda

Siamo in grado di aggiungere l'elemento-divider Aggiungi classe per la testa e la carta in basso:

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

Prova »

---

Lista Carta

Utilizzare la classe elenco delle schede per impostare la lista delle carte:

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

Prova »

---

Le carte con le immagini

L'uso dell'immagine carta, l'effetto sarà migliore, esempi sono i seguenti:

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

Prova »

I risultati operativi sono i seguenti:

---

carte di spettacolo

Gli esempi che seguono utilizzare diverse opzioni differenti modalità di visualizzazione della scheda. È iniziato con gli elementi di elenco di carte, e l'uso di item-avatar, elemento item-corpo viene utilizzato per visualizzare immagini e testo, utilizzare elemento divisore in fondo alla classe.

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

Prova »

I risultati operativi sono i seguenti: