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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類