بطاقة الأيونية

في السنوات الأخيرة، وبطاقة (بطاقة) أصبحت أكثر شعبية، توفر هذه البطاقة أداة لتحسين تنظيم المعلومات المقدمة.

واستنادا إلى حجم حجم الشاشة للحصول على بطاقات تطبيق الطرفية المحمولة على التكيف.

نحن يمكن أن تكون مرنة جدا بطاقة العرض السيطرة، والآثار حتى الرسوم المتحركة.

بطاقة العامة في أعلى الصفحة، بطبيعة الحال، يمكن تحقيق حول وظيفة التبديل.

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

محاولة »

البطاقة (بطاقة) النمط الافتراضي مع مربع الظل (الظل)، لأسباب تتعلق بالأداء، وعناصر أخرى مماثلة مثل قائمة قائمة أقحم ودون الظلال.

إذا كان لديك الكثير من البطاقات، كل بطاقة لديها الكثير من العناصر الفرعية، ونحن نوصي باستخدام القائمة جزءا لا يتجزأ من (قائمة أقحم).

الرأس وأسفل البطاقة

يمكننا أن نضيف بند المفرق إضافة فئة إلى الرأس وبطاقة السفلى:

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

محاولة »

قائمة بطاقة

استخدام بطاقة فئة قائمة لضبط قائمة من البطاقات:

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

محاولة »

بطاقات عليها صور

استخدام صورة بطاقة، وسوف يكون التأثير أفضل، والأمثلة على النحو التالي:

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

محاولة »

النتائج التشغيلية هي كما يلي:

بطاقات العرض

الأمثلة التالية تستخدم العديد من الخيارات المختلفة وضع بطاقة العرض. لقد بدأت مع العناصر بطاقة القائمة، واستخدام بند الرمزية، يتم استخدام عنصر البند الجسم لعرض الصور والنصوص، واستخدام بند المفرق في الجزء السفلي من الطبقة.

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

محاولة »

النتائج التشغيلية هي كما يلي: