【代碼筆記】Web-ionic tab(選項卡)

-Advertisement-

一，效果圖。二，代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, ...

一，效果圖。

二，代碼。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 創建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(開發過程中顯示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <!--實例-->
    <div class="tabs">
        <a class="tab-item">
    主頁
</a>
        <a class="tab-item">
    收藏
    </a>
        <a class="tab-item">設置</a>
    </div>

   <!--圖標選項卡-->
<div class="tabs tabs-icon-only">
    <a class="tab-item">
<i class="icon ion-home"></i>
    </a>
    <a class="tab-item">
<i class="icon ion-star"></i>

    </a>
    <a class="tab-item">
<i class="icon ion-gear-a"></i>
    </a>
</div>

 <!--頂部圖標加文字選項卡-->
<div class="tabs tabs-icon-top">
    <a class="tab-item" href="#">
        <i class="icon ion-home"></i>
        主頁
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        設置
    </a>
</div>

 <!--左側圖標加文字選項卡-->
 <div class="tabs tabs-icon-left">
    <a class="tab-item">
        <i class="icon ion-home"></i>
        主頁
    </a>
    <a class="tab-item">
        <i class="icon ion-star"></i>
        收藏
    </a>
    <a class="tab-item">
        <i class="icon ion-gear-a"></i>
        設置
    </a>
 </div>


<!--條紋樣式選項卡-->
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
        <a class="tab-item active" href="#">
            <i class="icon ion-home"></i> Test
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-star"></i> Favorites
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-gear-a"></i> Settings
        </a>
    </div>
</div>










</body>

</html>

參考資料：《菜鳥教程》

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

通用分頁存儲過程

if exists(select * from sys.objects where name='存儲過程名稱')drop proc 存儲過程名稱goCREATE proc 存儲過程名稱@tableName varchar(8000), --表名、視圖名@indexCol varchar(50) = ...
關於mysqldump備份非事務表的註意事項

占座 ...
sqlserver 跨伺服器備份表

exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed Queries',1 reconfigure SELECT * into T_System_Organizati ...
數據科學家的命令行技巧

對於許多數據科學家來說，數據操作起始於Pandas或Tidyverse。從理論上看，這個概念沒有錯。畢竟，這是為什麼這些工具首先存在的原因。然而，對於分隔符轉換等簡單任務來說，這些選項通常可能是過於重量級了。有意掌握命令行應該在每個開發人員的技能鏈上，特別是數據科學家。學習shell中的來龍去脈無 ...
oracle資料庫更改字元集

在數據遷徙的時候需要使源和目標資料庫的字元集、版本等信息統一…… 這裡是對一個資料庫的設置，需要在兩邊進行同樣的操作。 SYS@PROD1> select userenv('language') from dual; USERENV('LANGUAGE') AMERICAN_AMERICA.ZHS1 ...
2018-07-29學習mysql小結

此前在校學習期間，只是知道資料庫很重要，但是並未主動去學習瞭解。現在的學習過程中學了一遍mysql，就簡單的做一個總結吧。首先記住三個概念： 1.資料庫(Database)是按照數據結構來組織、存儲和管理數據的建立在電腦存儲設備上的倉庫。 2.SQL ：結構化查詢語言(Structured Qu ...
Lucene-Lucene的Field及其分頁查詢

Document(文檔)是Field(域)的承載體, 一個Document由多個Field組成. Field由名稱和值兩部分組成, 值是要索引的內容, 也是要搜索的內容. Lucene在記憶體中實現了分頁查詢, 這裡通過一個分頁查詢的demo演示分頁的過程. ...
ios開發遇到的問題

運行後界面空白，Xcode跳轉到APPDelegate.swift文件提示如下第一種可能原因：做輸出口後在代碼中重新命名了輸出口解決方法：右鍵控制項關閉輸出口的連接，變回＋號，將它重新連到代碼的var...處鬆開。或者直接刪除代碼代碼重新做輸出口。第二種可能原因：修改了ViewContr ...