閱讀(2.1k) 書簽贊(0) 我要糾錯

Material Design Lite 網(wǎng)格

2018-12-19 18:17 更新

Material Design Lite （MDL）電網(wǎng)是鋪設(shè)內(nèi)容不同屏幕尺寸的組件。該MDL網(wǎng)格由容器/ div元素定義和封閉。網(wǎng)格有桌面大小的屏幕12列，在平板電腦尺寸屏幕8,4在手機(jī)屏幕大小，每個尺寸都預(yù)定義的利潤率和排水溝。cell在順序的方式連續(xù)排列，順序它們被定義，具有下列情況除外：

如果一個網(wǎng)格單元格不適合在屏幕尺寸中的一個排，流入下面的行。
如果網(wǎng)格單元具有一個指定列的大小等于或大于對屏幕尺寸的列數(shù)時，它占用了整個行。

的MDL提供各種CSS類的各種預(yù)定義的外觀和行為的增強(qiáng)應(yīng)用到電網(wǎng)。下表中提到的可用類和它們的影響。

SN	類名稱和說明
1	MDL-布局標(biāo)識的容器作為MDL的組成部分。需要外部容器元素。
2	MDL網(wǎng) 要確定一個容器作為MDL網(wǎng)格組件。要求要“外”的div元素。
3	MDL-cell 要確定一個容器作為MDLcell。要求是在“內(nèi)部”的div元素。
4	MDL網(wǎng)-無間距要更新網(wǎng)格單元有它們之間沒有余量?？蛇x網(wǎng)格容器。
五	MDL-cell- N-COL 把列大小的單元格N，N為1-12包容性的，默認(rèn)為4;可選的“內(nèi)部”的div元素。
6	MDL-cell- N-COL-桌面把列大小只在桌面模式下的單元格N，N為1-12包容性;可選的“內(nèi)部”的div元素。
7	MDL-cell- N-COL-平板電腦把列大小僅在平板模式下的cellN，N為1-8包容性;可選的“內(nèi)部”的div元素。
8	MDL-cell- N-COL-電話把列大小僅在電話模式中的cell為N，N為1-4包容;可選的“內(nèi)部”的div元素。
9	MDL-cell-隱藏桌面若要隱藏桌面模式時，該單元格。可選的“內(nèi)部”的div元素。
10	MDL-cell-隱藏平板電腦若要隱藏在平板模式下，當(dāng)小區(qū)?？蛇x的“內(nèi)部”的div元素。
11	MDL-cell-隱藏電話若要隱藏在手機(jī)模式下的單元格。可選的“內(nèi)部”的div元素。
12	MDL-cell-拉伸要垂直伸展cell填補(bǔ)了父母，默認(rèn)值;可選的“內(nèi)部”的div元素。
13	MDL-cell-頂到cell對齊到母體的頂部?？蛇x的“內(nèi)部”的div元素。
14	MDL-cell-中間到cell對齊到母體的中間?？蛇x的“內(nèi)部”的div元素。
15	MDL-cell-底部到cell對齊到母體的底部。可選的“內(nèi)部”的div元素。

例

下面的例子展示了使用MDL-網(wǎng)格類的布局在各種屏幕上的內(nèi)容。

這里使用以下MDL類。

MDL-布局 -標(biāo)識的div作為MDL的組成部分。
MDL-JS-布局 -增加了基本的MDL行為外層div。
MDL布局-固定頭 -使頭始終可見，即使是在小屏幕。
MDL-layout__header行 -標(biāo)識容器作為MDL標(biāo)題行。
MDL-layout__drawer -標(biāo)識DIV的布局MDL抽屜。
MDL-布局標(biāo)題 -標(biāo)識布局標(biāo)題文本。
MDL-導(dǎo)航 -標(biāo)識DIV的MDL導(dǎo)航組。
MDL-navigation__link -標(biāo)識主播MDL導(dǎo)航鏈接。
MDL-layout__content -標(biāo)識DIV的布局MDL內(nèi)容。
MDL網(wǎng) -識別DIV作為MDL網(wǎng)格組件。
MDL-cell -標(biāo)識DIV的MDLcell。
MDL-cell- 1-COL -設(shè)置單元格的1單元的出桌面屏幕尺寸12格的列大小。
MDL-cell- 2-COL -設(shè)置單元格的2單元的出桌面屏幕尺寸12格的列大小。
MDL-cell- 4-COL -設(shè)置電池到4cell的出桌面屏幕尺寸12格的列大小。
MDL-cell- 6-COL -設(shè)置單元格的6芯出在臺式機(jī)屏幕尺寸12單元格的列大小。
MDL-cell- 4-COL-電話 -設(shè)置在手機(jī)屏幕尺寸的單元到4格出4個單元的列大小。
MDL-cell- 6-COL-平板電腦 -設(shè)置單元格的6芯出8個cell在平板電腦屏幕大小的列大小。
MDL-cell- 8-COL-平板電腦 -設(shè)置單元格的8芯出8個cell在平板電腦屏幕大小的列大小。

mdl_grid.htm

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank" >
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
<body>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">      
            <span class="mdl-layout-title">Material Design Grid</span>          
         </div>       
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">Material Design Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>  
         </nav>
      </div>
      <main class="mdl-layout__content">    
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--1-col graybox">1</div>
            <div class="mdl-cell mdl-cell--1-col graybox">2</div>
            <div class="mdl-cell mdl-cell--1-col graybox">3</div>
            <div class="mdl-cell mdl-cell--1-col graybox">4</div>
            <div class="mdl-cell mdl-cell--1-col graybox">5</div>
            <div class="mdl-cell mdl-cell--1-col graybox">6</div>
            <div class="mdl-cell mdl-cell--1-col graybox">7</div>
            <div class="mdl-cell mdl-cell--1-col graybox">8</div>
            <div class="mdl-cell mdl-cell--1-col graybox">9</div>
            <div class="mdl-cell mdl-cell--1-col graybox">10</div>
            <div class="mdl-cell mdl-cell--1-col graybox">11</div>
            <div class="mdl-cell mdl-cell--1-col graybox">12</div>
         </div>
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--4-col graybox">1</div>
            <div class="mdl-cell mdl-cell--4-col graybox">2</div>
            <div class="mdl-cell mdl-cell--4-col graybox">3</div>
         </div>
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col graybox">6</div>
            <div class="mdl-cell mdl-cell--4-col graybox">4</div>
            <div class="mdl-cell mdl-cell--2-col graybox">2</div>
         </div>
         <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">6 on desktop, 8 on tablet</div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">4 on desktop, 6 on tablet</div>
            <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">2 on desktop, 4 on phone</div>
         </div>
      </main>
   </div>
</body>
</html>

結(jié)果

驗證結(jié)果。

以上內(nèi)容是否對您有幫助：

← Material Design Lite 布局

Material Design Lite 標(biāo)簽 →

寫筆記

我要補(bǔ)充