2. 程式人生 > 其它 >Layui佈局總結：容器和柵格系統

Layui佈局總結：容器和柵格系統

阿新 • • 發佈：2021-02-01

技術標籤：3.Web前端

總覽

在這裡插入圖片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
 
>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
</head>
<body>
    
          
<div class="layui-container">
 

   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>始終等比例水平排列</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-xs6">
      <div class="grid-demo grid-demo-bg1"
 
>6/12</div>
    </div>
    <div class="layui-col-xs6">
      <div class="grid-demo">6/12</div>
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-col-xs3">
      <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo">3/12</div>
    </div>
  </div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>移動裝置、桌面端的組合響應式展現</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-xs12 layui-col-md8">
      <div class="grid-demo grid-demo-bg1">移動：12/12、桌面：8/12</div>
    </div>
    <div class="layui-col-xs6 layui-col-md4">
      <div class="grid-demo">移動：6/12、桌面：4/12</div>
    </div>
    <div class="layui-col-xs6 layui-col-md12">
      <div class="grid-demo grid-demo-bg2">移動：6/12、桌面：12/12</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>移動裝置、平板、桌面端的複雜組合響應式展現</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      <div class="grid-demo grid-demo-bg1">移動：6/12 | 平板：6/12 | 桌面：4/12</div>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      <div class="grid-demo layui-bg-red">移動：6/12 | 平板：6/12 | 桌面：4/12</div>
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      <div class="grid-demo layui-bg-blue">移動：4/12 | 平板：12/12 | 桌面：4/12</div>
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      <div class="grid-demo layui-bg-green">移動：4/12 | 平板：7/12 | 桌面：8/12</div>
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      <div class="grid-demo layui-bg-black">移動：4/12 | 平板：5/12 | 桌面：4/12</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>常規佈局：從小螢幕堆疊到桌面水平排列</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md9">
      <div class="grid-demo grid-demo-bg1">75%</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">25%</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">33.33%</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo">33.33%</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">33.33%</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="grid-demo grid-demo-bg1">50%</div>
    </div>
    <div class="layui-col-md6">
      <div class="grid-demo">50%</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>列間隔</legend>
  </fieldset>
   
  <div class="layui-row layui-col-space1">
    <div class="layui-col-md3">
      <div class="grid-demo grid-demo-bg1">1/4</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">1/4</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo grid-demo-bg1">1/4</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">1/4</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space5">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      <div class="grid-demo grid-demo-bg1">9/12</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">3/12</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md7">
      <div class="grid-demo grid-demo-bg1">7/12</div>
    </div>
    <div class="layui-col-md5">
      <div class="grid-demo">5/12</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space30">
    <div class="layui-col-md7">
      <div class="grid-demo grid-demo-bg1">7/12</div>
    </div>
    <div class="layui-col-md5">
      <div class="grid-demo">5/12</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>列偏移</legend>
  </fieldset> 
   
  <div class="layui-row">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">4/12</div>
    </div>
    <div class="layui-col-md4 layui-col-md-offset4">
      <div class="grid-demo">偏移4列</div>
    </div>
    <div class="layui-col-md1 layui-col-md-offset5">
      <div class="grid-demo grid-demo-bg1">偏移5列</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">不偏移</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md3 layui-col-md-offset3">
      <div class="grid-demo grid-demo-bg1">偏移3列</div>
    </div>
    <div class="layui-col-md3 layui-col-md-offset1">
      <div class="grid-demo">偏移1列</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>柵格巢狀</legend>
  </fieldset> 
   
  <div class="layui-row">
    <div class="layui-col-md5">
      <div class="layui-row grid-demo">
        <div class="layui-col-md3">
          <div class="grid-demo grid-demo-bg1">內部列</div>
        </div>
        <div class="layui-col-md9">
          <div class="grid-demo grid-demo-bg2">內部列</div>
        </div>
        <div class="layui-col-md12">
          <div class="grid-demo grid-demo-bg3">內部列</div>
        </div>
      </div>
    </div>
    <div class="layui-col-md7">
      <div class="layui-row grid-demo grid-demo-bg1">
        <div class="layui-col-md12">
          <div class="grid-demo">內部列</div>
        </div>
        <div class="layui-col-md9">
          <div class="grid-demo grid-demo-bg2">內部列</div>
        </div>
        <div class="layui-col-md3">
          <div class="grid-demo grid-demo-bg3">內部列</div>
        </div>
      </div>
    </div>
  </div>
  
</div>
 
<div class="layui-fluid">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>流體容器（寬度自適應，不固定）</legend>
  </fieldset>
  <div class="layui-row">
    <div class="layui-col-sm3">
      <div class="grid-demo grid-demo-bg1">25%</div>
    </div>
    <div class="layui-col-sm3">
      <div class="grid-demo">25%</div>
    </div>
    <div class="layui-col-sm3">
      <div class="grid-demo grid-demo-bg1">25%</div>
    </div>
    <div class="layui-col-sm3">
      <div class="grid-demo">25%</div>
    </div>
  </div>
</div>
 
          
<script src="layui.js" charset="utf-8"></script>

<script>
 
</script>

</body>
</html>

相關推薦

Layui佈局總結：容器和柵格系統

技術標籤：3.Web前端 總覽 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

樹莓派開發筆記（十二）：入手研華ADVANTECH工控樹莓派UNO-220套件（一）：介紹和執行系統

前言   樹莓派也可以做商業應用，工業控制，其穩定性和可靠性已經得到了驗證，故而工業控制，一些停車場等場景也有采用樹莓派作為主控的，本片介紹了研華ADVANTECH的樹莓派套件組UNO-220-P4N1AE。

JavaWeb11.1【BootStrap：快速入門、響應式佈局-柵格系統】

1 <!DOCTYPE html> 2 <html lang=\"zh-CN\"> 3 <head> 4<meta charset=\"utf-8\">

同步容器和併發容器總結

什麼是同步容器？ 同步容器通過synchronized關鍵字修飾容器保證同一時刻內只有一個執行緒在使用容器，從而使得容器執行緒安全。synchronized的意思是同步，它體現在將多執行緒變為序列等待執行。（但注意一點，複合操

Docker 三要素 ：映象、容器和倉庫

上一篇筆記 面向初學者的Docker學習教程:基礎篇我們從三個方面大致的介紹了一下Docker

iOS H5容器：UIWebView和WKWebView

UIWebView的基本用法 1、載入網頁 UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

網頁佈局之bootStrap柵格系統（2020年7月19日）

今日完成任務---網頁佈局 1. bootStrap柵格系統 響應式web佈局是讓使用者通過不同尺寸的瀏覽器都可以獲得良好視覺的一種方法。是目前比較流行的一種佈局方法。通過CSS3 Media Queries（媒體查詢），媒體查詢是讓頁面

C++ 知識總結 P03：容器

容器 容器可以分為三類：序列式容器、關聯容器、無序容器，此外還有一些容器介面卡。

Spark企業級實戰專案：離線和實時電影推薦系統直播回放

1 專案介紹 使用Spark框架實現電影推薦系統； 運用資料探勘的演算法產生模型，為使用者精準推薦喜好的電影；

【Python學習日記】B站小甲魚：定製容器和迭代器

協議　　Python中的協議更像一種指南 如果定製的容器是不變的，只需要定義len()和getitem()方法

bootstrap4柵格系統佈局

Bootstrap4 柵格系統的列間隔問題 上星期在聽了bootstrap課後，老師對於柵格系統的應用講的很水，對於列間隔，彷彿只有應用col-offset列偏移來確定列之間的間隔，當時就覺得很困惑。

2020.10.8 定位的疊放順序 絕對盒子居中 浮動和定位新增的特性 頁面佈局總結

定位的疊放順序 1.z-index 只適用於已經定位的盒子 2.如果z-index相同 則 遵循就近原則 3.z-index大的在上 4.*注意數字z-index: 1 ;*後面不要加單位

移動端佈局四： rem適配佈局，em和rem介紹，媒體查詢顯示不同樣式，媒體查詢呼叫不同css樣式

學習目標 能夠使用rem單位 能夠使用媒體查詢的基本語法 能夠使用Less的基本語法

Docker系列之三：映象和容器的匯入、匯出

技術標籤：dockerlinuxcentos 目錄 5 docker映象和容器的匯入、匯出 5.1 匯出映象 5.2 匯入映象

能源系統建模：安裝和使用gcamdata_R package構建GCAM模型輸入檔案系統

技術標籤：R languageSystem modellingr語言 點贊發Nature 關注中Science GCAM系統大量的輸入資料（xml檔案）是通過gcamdata_R程式包將inst/extdata 中的csv 檔案轉換而來的。下面簡單講一下gcamdata_R的安裝和轉

【小慕讀書】—— 後臺管理系統學習：Vuex 和 Vue-router 進階

技術標籤：vuereactjavajavascriptjs 前言：最近在學習Vue+Element UI+Node.js小慕讀書中後臺管理系統開發課程，這裡對學習過程作個筆記，方便自己和大家翻閱。

【Java EE】Day11 BootStrap、響應式佈局、柵格系統、CSS樣式、案例

一、BootStrap介紹 https://v3.bootcss.com/css/#overview 1、概念 基於三劍客開發的前端開發框架

《鬼谷八荒》大版本更新：全新煉器系統、法寶和器靈

國產修仙模擬遊戲《鬼谷八荒》於今日（6月30日）13時進行了0.8.3001版本更新，新增煉器系統，加入了大量的新法寶和器靈。

佈局總結四：利用行高來撐開高度

效果圖 1.html佈局程式碼 <div class=\"parts_city\"> <div class=\"tit\">當前城市</div>

TP6框架--EasyAdmin總結：暫時的離別和新的開始

眨眼一下，因為專案初期開發的完成，我與EasyAdmin的緣分也將迎來短暫的離別，有時候靜下來，感覺時間過的好快，我從4月到現在，使用EasyAdmin進行專案開發，從一個初識別PHP的菜鳥，到一個能獨立開發功能的初級開