3.柵格系統

来源:https://www.cnblogs.com/lanshanxiao/archive/2020/05/28/12984450.html
-Advertisement-
Play Games

# 3.柵格系統 介紹的是 4.5.x版本 一行最多放12列 - class類介紹 最外層容器： 1.container-fluid：寬度100%,和body的寬度一樣 2.container：寬度是一個具體數值，但是會根據用戶屏幕大小來改變 行類 1.row：分行 列類： 5個響應層 後面的*表示 ...


# 3.柵格系統

 

介紹的是 4.5.x版本

 

    一行最多放12列

 

- class類介紹     最外層容器：         1.container-fluid：寬度100%,和body的寬度一樣         2.container：寬度是一個具體數值，但是會根據用戶屏幕大小來改變

 

    行類         1.row：分行

 

    列類：         5個響應層         後面的*表示占據列數,取值從1-12         1.col-*:None(auto);//col為超小屏，屏幕<576px，容器的寬度固定為auto，一行可以永遠設置12個列         2.col-sm-*:540px;//sm為小屏，屏幕>=576px，容器的寬度固定為540px，一行可以設置12個列。屏幕尺寸<576的時候，一行只能設置1列         3.col-md-*:720px;//md為中屏，屏幕>=768px，容器的寬度固定為720px，一行可以設置12個列。屏幕尺寸<768的時候，一行只能設置1列         4.col-lg-*:960px;//lg為大屏，屏幕>=992px，容器的寬度固定為960px，一行可以設置12個列。屏幕尺寸<992的時候，一行只能設置1列         5.col-xl-*:1140px;//xl為超大屏，屏幕>=1200px，容器的寬度固定為1140px，一行可以設置12個列。屏幕尺寸<1200的時候，一行只能設置1列 ```html <!DOCTYPE html> <html lang="en"> <head>     <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >     <title>Document</title>     <style>         .row div{             height:100px;             background:green;             border:1px solid #000;             color:#fff;         }     </style> </head> <body>     <div class="container-fluid">         <div class="row">             <div class="col-xl-1">第1列</div>             <div class="col-xl-1">第2列</div>             <div class="col-xl-1">第3列</div>             <div class="col-xl-1">第4列</div>             <div class="col-xl-1">第5列</div>             <div class="col-xl-1">第6列</div>             <div class="col-xl-1">第7列</div>             <div class="col-xl-1">第8列</div>             <div class="col-xl-1">第9列</div>             <div class="col-xl-1">第10列</div>             <div class="col-xl-1">第11列</div>             <div class="col-xl-1">第12列</div>         </div>         <div class="row">             <div class="col-xl-1">占1列</div>             <div class="col-xl-2">占2列</div>             <div class="col-xl-3">占3列</div>             <div class="col-xl-4">占4列</div>             <div class="col-xl-3">占3列</div>         </div>         <div class="row">             <div class="col-xl-13">占13列</div>         </div>     </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ``` ```html <!DOCTYPE html> <html lang="en"> <head>     <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >     <title>Document</title>     <style>         .row div{             height:100px;             background:green;             border:1px solid #000;             color:#fff;         }         .v-align{             height:100px;             background:rgba(255,0,0,0.1);             margin:10px -15px;         }         .v-align div{             height:40px;             line-height:40px;             background:rgba(86,61,124,0.2);             color:#333;         }     </style> </head> <body>     <div class="container">         <div class="row">             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>             <div class="col">等寬列</div>         </div>         <!--設置多行等寬列，在希望換行的地方添加一個w-100的class，能夠讓後面的列換行-->         <div class="row">             <div class="col">等寬列，行1</div>             <div class="col">等寬列，行1</div>             <div class="w-100" style="height:auto;border:none;"></div>             <div class="col">等寬列，行2</div>             <div class="col">等寬列，行2</div>         </div>         <!--設置一個列寬，剩下的自動平分-->         <div class="row">             <div class="col-sm-7">在小屏下占7列</div>             <div class="col">自動平分剩餘的寬度</div>             <div class="col">自動平分剩餘的寬度</div>             <div class="col">自動平分剩餘的寬度</div>         </div>         <!--設置根據內容調整列的寬度，使用.col-{breakpoint}-auto，breakpoint代指5個響應層-->         <div class="row">             <div class="col-md-auto">在中等屏幕下內容撐開寬度</div>         </div>         <!--設置所有尺寸下，都占同樣的列數，使用.col-* -->         <div class="row">             <div class="col-8">所有尺寸下都占8列</div>             <div class="col-4">所有尺寸下都占4列</div>         </div>

 

        <!--             混合排列或組合模式                 1.超大屏幕下一行顯示6個div，一個div占2列                 2.大屏幕下一行顯示4個div，一個div占3列                 3.中屏幕下一行顯示3個div，一個div占4列                 4.小屏幕下一行顯示2個div，一個div占6列                 5.超小屏幕下一行顯示1個div，一個div占12列         -->         <div class="row">             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div>             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6個，大屏4個，中屏3個，小屏2個，超小屏1個</div>         </div>         <!-- 對齊             垂直對齊：                 1.行對齊方式                     align-items-start:頂對齊                     align-items-center:中間對齊                     align-items-end:底對齊                 2.列的單獨對齊方式                     align-self-start:頂對齊                     align-self-center:中間對齊                     align-self-end:底對齊         -->         <div class="row v-align align-items-start">             <div class="col">垂直對齊-頂部對齊-行的對齊方式</div>             <div class="col">垂直對齊-頂部對齊-行的對齊方式</div>             <div class="col">垂直對齊-頂部對齊-行的對齊方式</div>         </div>         <div class="row v-align align-items-center">             <div class="col">垂直對齊-中間對齊-行的對齊方式</div>             <div class="col">垂直對齊-中間對齊-行的對齊方式</div>             <div class="col">垂直對齊-中間對齊-行的對齊方式</div>         </div>         <div class="row v-align align-items-end">             <div class="col">垂直對齊-底部對齊-行的對齊方式</div>             <div class="col">垂直對齊-底部對齊-行的對齊方式</div>             <div class="col">垂直對齊-底部對齊-行的對齊方式</div>         </div>         <div class="row v-align">             <div class="col align-self-start">垂直對齊-頂部對齊-列的對齊方式</div>             <div class="col align-self-center">垂直對齊-中間對齊-列的對齊方式</div>             <div class="col align-self-end">垂直對齊-底部對齊-列的對齊方式</div>         </div>         <!--水平對齊             1.justify-content-start 左對齊             2.justify-content-center 居中對齊             3.justify-content-end 右對齊             4.justify-content-around 分散居中對齊（每個元素兩側的間距是相等的）             5.justify-content-between 左右兩端對齊（元素之間的間距是自動平分的）         -->         <div class="row v-align justify-content-start">             <div class="col-4">水平對齊-左對齊-行的對齊方式</div>             <div class="col-4">水平對齊-左對齊-行的對齊方式</div>         </div>         <div class="row v-align justify-content-center">             <div class="col-4">水平對齊-居中對齊-行的對齊方式</div>             <div class="col-4">水平對齊-居中對齊-行的對齊方式</div>         </div>         <div class="row v-align justify-content-end">             <div class="col-4">水平對齊-右對齊-行的對齊方式</div>             <div class="col-4">水平對齊-右對齊-行的對齊方式</div>         </div>         <div class="row v-align justify-content-around">             <div class="col-4">水平對齊-分散居中對齊-行的對齊方式</div>             <div class="col-4">水平對齊-分散居中對齊-行的對齊方式</div>         </div>         <div class="row v-align justify-content-between">             <div class="col-4">水平對齊-左右兩端對齊-行的對齊方式</div>             <div class="col-4">水平對齊-左右兩端對齊-行的對齊方式</div>         </div>         <!--              列排序：使用。order-{breakpoint}-*              3.X的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-* 來排序         -->         <div class="row">             <div class="col">第一列</div>             <div class="col order-4">第二列</div>             <div class="col order-3">第三列</div>         </div>         <div class="row">             <div class="col">第一列</div>             <div class="col order-xl-4">第二列</div><!--只有當屏幕尺寸>=1200的時候，才會進行排序-->             <div class="col order-xl-3">第三列</div>         </div>         <div class="row">             <div class="col">第一列</div>             <div class="col order-first">第二列</div><!--order-first代表排在第一位，order-last代表排在最後一位-->             <div class="col order-last">第三列</div>         </div>         <!--列偏移：使用offset-{breakpoint}-* -->         <div class="row">             <div class="col-md-4">第一列</div>             <div class="col-md-4 offset-md-4">往右偏移4列</div>         </div>         <div class="row">             <div class="col-3 offset-md-3">第一列</div><!--第一列偏移，後面的格子都會偏移，和下麵的現象區分-->             <div class="col-3">第二列</div>         </div>         <div class="row">             <div class="col-3 offset-md-3">第一列</div><!--第一列偏移，後面的格子都會偏移，和上面的現象區分-->             <div class="col-3 offset-md-3">第二列</div>         </div>         <div class="row">             <div class="col-sm-5 col-md-6">小屏占5列，中屏占6列</div><!--第一列偏移，後面的格子都會偏移，和上面的現象區分-->             <div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列，中屏偏移5列</div>         </div>         <!--間距：使用margin工具可以讓列之間產生間距             margin-right 和 margin-left             mr-{breakpoint}-auto 使右側的列遠離到最右邊             ml-{breakpoint}-auto 使左側的列遠離到最左邊         -->         <div class="row">             <div class="col-md-4">第一列</div>             <div class="col-md-4 ml-auto">第二列，跑到最右邊</div>         </div>         <div class="row">             <div class="col-md-3 ml-md-auto">在中屏下，離左邊距離自動計算</div>             <div class="col-md-3 ml-md-auto">在中屏下，離左邊距離自動計算</div>         </div>         <div class="row">             <div class="col-auto mr-auto">寬度由內容撐開</div>             <div class="col-auto">寬度由內容撐開</div>         </div>         <!--嵌套：每個列裡面可以再繼續進行放行，那嵌套裡面的元素就會以父級的寬度為基準，再分12列-->         <div class="row">             <div class="col-sm-9">                 父級的第一列                 <div class="row">                     <div class="col-sm-8 col-6">子級的第一列，小屏下占8列，超小屏下占6列</div>                     <div class="col-sm-8 col-6">子級的第一列，小屏下占8列，超小屏下占6列</div>                 </div>             </div>             <div class="col-sm-3" style="height:150px;background:pink;">父級的第二列</div>         </div>     </div>     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ```   以上是markdown格式的筆記
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql 給查詢結果新增一個欄位，並設定預設值
    SELECT '第一中學' as school, class, name, geography FROM test_table WHERE test = 1; 插入新table： REPLACE INTO test_school(school, class, name, geography) SEL ...
  • 50個SQL語句(MySQL版) 問題十二
    表結構 student(StuId,StuName,StuAge,StuSex) 學生表 teacher(TId,Tname) 教師表 course(CId,Cname,C_TId) 課程表 sc(SId,S_CId,Score) 成績表 問題十二：查詢至少學過學號為“1001”同學所有課程的其他同 ...
  • MySQL所有的主從同步架構搭建方式
    一.前言 ​ 本文將指導搭建所有的MySQL主從同步架構方案： ​ 一主多從架構 ​ 主主雙向同步架構 ​ M-S-S三級級聯同步架構 ​ 多主多從架構 二.關於MySQL主從同步 ​ MySQL主從同步是構建大型，高性能應用的基礎，MySQL主從同步可以實現在從伺服器可以執行查詢工作(即我們常說的 ...
  • 用戶畫像標簽體系——從零開始搭建實時用戶畫像(三)
    用戶畫像標簽體系 ​ 用戶畫像的核心在於給用戶“打標簽”，每一個標簽通常是人為規定的特征標識，用高度精煉的特征描述一類人，例如年齡、性別、興趣偏好等，不同的標簽通過結構化的數據體系整合，就可與組合出不同的用戶畫像。 ​ 梳理標簽體系是實現用戶畫像過程中最基礎、也是最核心的工作，後續的建模、數據倉庫搭 ...
  • sql server特殊字元查詢問題及ESCAPE的使用
    公司一個老項目，sql server的 模糊查詢時，查詢條件包含 [] ，然後查詢結果就一直為空 查閱資料得知：如果 LIKE 模式中的轉義符後面沒有字元，則該模式無效並且 LIKE 返回 FALSE。如果轉義符後面的字元不是通配符，則將放棄轉義符並將該轉義符後面的字元作為該模式中的常規字元處理。這 ...
  • ORACLE資料庫如何用datapump工具導出表結構然後導入到其它Schema下麵
    這裡簡單介紹一下如何使用ORACLE資料庫的datapump工具導出、導入表結構定義。由於業務場景可能非常簡單，你不會遇到任何問題，也有可能業務場景非常複雜，你就會遇到一些雜七雜八的問題。下麵我簡單介紹一下個人遇到的需求。一批表準備歸檔，歸檔的策略為將UserA下麵的一批表T1、T2、、、、Tn，歸... ...
  • Android連載14-適應不同解析度而編寫碎片
    一、編輯佈局 1.分別來寫兩個佈局：一個用於平板等大屏幕解析度的，一個用於手機等小屏幕解析度的，先寫小的，地址：layout/activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
  • 2020年 面向高級開發人員的 iOS面試問題
    在本文中，您將找到針對高級開發人員的iOS面試問題和解答。 當您準備進行技術性的iOS面試時，重要的是要瞭解您可能會被問到的話題以及經驗豐富的iOS開發人員的期望。這些問題被許多公司用來衡量iOS候選人的經驗水平。它們涵蓋了iOS開發的各個方面，旨在接觸對該平臺的廣泛瞭解。畢竟，高級開發人員有望能夠 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類