layUI布局使用教程

更新時(shí)間：2022年09月29日 11:31:04 作者：碼農(nóng)終將翻身

layui屬于輕量級(jí)框架,簡單美化.是用于開發(fā)后端模式,它在服務(wù)端頁面上有非常好的效果，這篇文章主要介紹了layUI布局使用教程,需要的朋友可以參考下

layui特點(diǎn)

(1)layui屬于輕量級(jí)框架,簡單美化.是用于開發(fā)后端模式,它在服務(wù)端頁面上有非常好的效果.

(2)layui是提供給后端開發(fā)人員的ui框架,基于DOM驅(qū)動(dòng).

layui的使用

引入layui的核心css文件

  <link rel="stylesheet" type="text/css" href="layui.css文件路徑" rel="external nofollow" >

引入layui的hexinjs文件(模塊化引入)

  <script src="layui.js文件路徑" type="text/javascript"></script>

1.頁面元素

1.1布局

1.1.布局容器

1.1.1固定寬度（兩側(cè)有留白效果）

將柵格放入一個(gè)帶有class="layui-container"的特定容器中,以便在小屏幕以上的設(shè)備中固定寬度,讓列可控.

<div class="layui-container" style="background-color:navajowhite;height:300px">
  固定寬度
  <div>

1.1.2完整寬度(占據(jù)屏幕寬度的100%)

可以不固定容器寬度,讓柵格或其它元素放入一個(gè)帶有class="layui-fluid"的容器中,那么寬度將不會(huì)固定,而是100%適應(yīng).

 <div class="layui-fluid" style="background-color : cyan; height:300px">
  完整寬度
  </div>

1.2.柵格系統(tǒng)

為了豐富網(wǎng)頁布局,簡化HTML/CSS代碼的耦合,并提升多終端的適配能力,layui引進(jìn)了一套具備響應(yīng)式能力的柵格系統(tǒng).將容器進(jìn)行了12等分,預(yù)設(shè)了4*12種CSS排列類,他們?cè)谝苿?dòng)設(shè)備、平板、桌面上/大尺寸四種不同的屏幕下發(fā)揮著各自的作用.

1.2.1柵格布局規(guī)劃

1.采用 layui-row 來定義行,如:

  <div class="layui-row"></div>

2.采用類似layui-col-md*這種的預(yù)設(shè)類來定義一組列(column),且放在行(row)內(nèi).其中:

變量md代表的是不同屏幕下的標(biāo)記
變量*代表的是該列所占用的12等分?jǐn)?shù)(如6/12),可選值為1-12
如果多個(gè)列的"等分?jǐn)?shù)值"總和等于12,則剛好滿行排列,如果大于12,多余的列將自動(dòng)另起一行.

3.列可以同時(shí)出翔最多四種不同的組合,分別是:xs(超小屏幕,如手機(jī))、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕).

4.可對(duì)列追加類似layui-col-space5、layui=col-md-offset3這樣的預(yù)設(shè)類來定義列的間距和偏移.

5.可以在列(column)元素中放入你自己的任意元素填充內(nèi)容.

 <!-- 
  柵格系統(tǒng)
              列組合
                  1.定義行 .layui-row
                  2.定義列 .layui-col-md*
  md表示不同屏幕的標(biāo)識(shí)(xs(超小屏幕,如手機(jī)),sm(小屏幕,如平板),md(桌面中等屏幕),lg(桌面大型屏幕))
       *列的數(shù)量
                  3.每一行被均分為12列,列的總數(shù)不能超過12,否則會(huì)自動(dòng)換行
                  4.響應(yīng)式規(guī)則
                      柵格會(huì)自動(dòng)根據(jù)屏幕的分辨率選擇對(duì)應(yīng)的樣式效果.
              列間距
                  .layui-col-space*
                      *代表的是px值(1-30)
              列偏移
                  將列向右偏移指定列數(shù)
                  .*layui-col-md-offset*
                      *代表的是列數(shù)
              列嵌套
                  列之前可以無限嵌套列
   -->
  ?
  <!-- 布局容器 -->
  <div class="layui-container">
  <!-- 定義行 -->
      <div class="layui-row">
          <!-- 定義列 -->
          <div class="layui-col-md5" style="background-color:cyan">內(nèi)容5/12</div>
          <div class="layui-col-md7" style="background-color:burlywood">內(nèi)容7/12</div>
      </div>
  </div>

1.2.2響應(yīng)式規(guī)則

柵格的響應(yīng)式能力,得益于CSS3媒體查詢(Media Queries)的強(qiáng)力支持,從而針對(duì)四類不同尺寸的屏幕進(jìn)行相應(yīng)的配置處理.

	超小屏幕(手機(jī)<7686px)	小屏幕(平板>=768px)	中等屏幕(桌面>=992px)	大型屏幕(桌面>=1200px)
.layui-container的值	auto	750px	970px	1170px
標(biāo)記	xs	sm	md	lg
列對(duì)應(yīng)類*為1-12的等分?jǐn)?shù)值	layui-col-xs*	layui-col-sm*	layui-col-md*	layui-col-lg*
總列數(shù)	12	12	12	12
響應(yīng)行為	始終按設(shè)置的比例水平排列	在當(dāng)前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列	在當(dāng)前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列	在當(dāng)前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列

 <!-- 響應(yīng)式規(guī)則 -->
  <div class="layui-row">
      <div class="layui-col-md4 layui-col-sm6" style="background-color: #009688">平板>=768px 6/12| 桌面端>=992px 4/12
      </div>
  </div>
  <div class="layui-row">
      <div class="layui-col-md8 layui-col-xs12" style="background-color: #009688">手機(jī)<768px 12/12| 桌面端>=992px 6/12
      </div>
  </div>

1.2.3列間距

通過"列間距"的預(yù)設(shè)類,來設(shè)定列之間的間距。且一行中最左的列不會(huì)出現(xiàn)左邊距,最右的列不會(huì)出現(xiàn)右邊距.列間距在保證排版美觀的同時(shí),還可以進(jìn)一步保證分列的寬度精細(xì)程度.我們結(jié)合網(wǎng)頁常用的邊距,預(yù)設(shè)了12種不同尺寸的邊距,分別是:

 /*支持列之間為 1px-30px區(qū)間的所有雙數(shù)間隔, 以及1px 5px 15px 25px的單數(shù)間隔*/
  layui-col-space1
  layui-col-space2
  layui-col-space4
  layui-col-space5
  layui-col-space6
  layui-col-space8
  layui-col-space10
  layui-col-space12
  layui-col-space14
  layui-col-space15
  layui-col-space16
  layui-col-space18
  layui-col-space20
  layui-col-space22
  layui-col-space24
  layui-col-space25
  layui-col-space26
  layui-col-space28
  layui-col-space30
  <!-- 列邊距 -->
  <h3>列邊距</h3>
  <div class="layui-row layui-col-space10">
      <!-- 定義列 -->
      <div class="layui-col-md6">
          <div style="background-color:gray">內(nèi)容6/12</div>
      </div>
      <div class="layui-col-md6">
          <div style="background-color:navajowhite">內(nèi)容6/12</div>
      </div>
  </div>

注:

1.layui-col-space:設(shè)置后不起作用主要是因?yàn)?strong>設(shè)置的是padding,也就是說向內(nèi)縮,所以設(shè)置背景色padding也是會(huì)添上顏色,看起來好像沒有間距一樣.可以在里面再加一個(gè)div,來達(dá)到目的.

2.間距一般不高于30px,如果超過30,建議使用列偏移.

1.2.4列偏移

對(duì)列追加類似 layui-col-md-offset * 的預(yù)設(shè)類,從而讓列向右偏移.其中 * 號(hào)代表偏移占據(jù)的列數(shù),可選中為1-12.

如:layui-col-md-offset3,即代表在"中型桌面屏幕下",讓該列向右偏移3個(gè)列寬度.

 <!-- 列偏移 -->
  <h3>列偏移</h3>
  <div class="layui-row">
      <!-- 定義列 -->
      <div class="layui-col-md4">
          <div style="background-color:yellowgreen">內(nèi)容4/12</div>
      </div>
      <div class="layui-col-md4 layui-col-md-offset4">
          <div style="background-color:deeppink">內(nèi)容4/12,向右移動(dòng)四列</div>
      </div>
  </div>

注:列偏移可針對(duì)不同屏幕的標(biāo)準(zhǔn)進(jìn)行設(shè)定,在當(dāng)前設(shè)定的屏幕下有效,當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值,就會(huì)堆疊排列.

1.2.5列嵌套

可以對(duì)柵格進(jìn)行無窮層次的嵌套.在列元素 (layui-col-md*) 中插入行元素 (layui-row) ,即可完成嵌套.

  <!-- 列嵌套 -->
  <h3>列嵌套</h3>
  <div class="layui-row layui-col-space15">
      <div class="layui-col-md6" style="background-color:blueviolet">
          <div class="layui-row">
              <div class="layui-col-md4" style="background-color:red">內(nèi)容4/12</div>
              <div class="layui-col-md6" style="background-color:blue">內(nèi)容8/12</div>
              <div class="layui-col-md2">內(nèi)部列</div>
          </div>
      </div>
  </div>

到此這篇關(guān)于layUI布局使用教程的文章就介紹到這了,更多相關(guān)layUI布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: