【代碼筆記】Web-ionic 網格(Grid)

-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="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!--指定列寬-->
    <div class="row">
        <div class="col col-50">.col.col-50</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col col-75">.col.col-75</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col">.col</div>
        <div class="col col-75">.col.col-75</div>
    </div>
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!--有偏移量的網格-->
    <div class="row">
        <div class=‘col col-33 col-offset-33’>.col</div>
        <div class="col">.col</div>
    </div>
    <div class="row">
        <div class="col col-33">.col</div>
        <div class='col col-33 col-offset-33'>.col</div>
    </div>
    <div class="row">
        <div class="col col-33 col-offset-67">.col</div>
    </div>
    <!--縱向對齊網格-->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row">
        <div class="col col-top">.col</div>
        <div class="col col-center">.col</div>
        <div class="col col-bottom">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row row-top">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row row-center">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <div class="row row-bottom">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">1
            <br>2
            <br>3
            <br>4</div>
    </div>
    <!--響應式網格-->
    <div class="row responsive-sm">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</body>

</html>

參考資料：《菜鳥教程》

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

-Advertisement-

更多相關文章

剛安裝的Linux Centos7使用yum安裝firefox時提示：cannot find a valid baseurl for repo

出現這個問題是因為yum在安裝包的過程中，雖然已經聯網，但是沒法解析遠程包管理庫對應的功能變數名稱，所以我們只需要在網路配置中添加上DNS對應的ip地址即可。解決參考鏈接：https://blog.csdn.net/qq_23212697/article/details/69305822 再次執行命令： ...
iOS-----------關於組件化

打一個比較形象的比喻，把APP比作我們的人體，把胳膊、大腿、心、肝、肺這些人體器官比作組件，各個器官分別負責他們各自的功能，但是他們之間也有主次之分，試想我們的胳膊、大腿等是不能獨立完成某個任務的，必須需要心、肺、肝、膽等的能量支持，那麼可以把胳膊、大腿這種功能性器官比作業務組件，把我們的心、肝、脾 ...
使用廣播-BroadcastReceiver最詳細解析

女孩：BroadcastReceiver是什麼呀？男孩：Broadcast是廣播的意思，在Android中應用程式之間的傳輸信息的機制，BroadcastReceiver是接收廣播通知的組件，廣播和廣播接收器是Android中需要瞭解的，那麼怎麼樣去瞭解呢~ 廣播，大家應該可以理解，我們在學校做眼 ...
Android記憶體優化（五） Lint代碼掃描工具

1.使用工具欄 -> Analyze -> Inspect Code… 點擊 Inspect Code 後會彈出檢查範圍的對話框：預設是檢查整個項目，我們可以點擊 Custom scope 自定義檢查範圍。點擊右邊的下拉框，會出現以下選擇：分別有： Project Files：所有項目文件 ...
Android解析XML文件升級APK

安裝APK 發送請求獲取輸入流解析XML文件可以開始下載跟蹤下載進度下載完畢啟動安裝獲取項目包名 ...
Android FileUtils 文件操作類

系統路徑文件操作資源文件assets和RW res/raw：文件會被映射到R.java文件中，訪問的時候直接通過資源ID訪問，沒有有目錄結構 assets：不會映射到R.java文件中，通過AssetManager來訪問，能有目錄結構從資源文件中獲取Bitmap ...
iOS----------viewcontroller中的dealloc方法不調用

ios的viewcontroller生命周期是 init -> loadView -> viewDidLoad -> viewWillAppear -> viewDidAppear -> viewWillDisappear -> viewDidAppear -> viewDidUnload -> d ...
Android Vsync 原理淺析

Preface Android中，Client測量和計算佈局，SurfaceFlienger（server）用來渲染繪製界面，client和server的是通過匿名共用記憶體（SharedClient）通信。每個應用和SurfaceFlienger之間都會創建一個SharedClient，一個Sha ...